@medplum/react 2.0.19 → 2.0.21

package/dist/esm/AppShell/AppShell.mjs

@@ -28,8 +28,8 @@ function AppShell(props) {
             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, 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(Suspense, { fallback: React.createElement(Loading, null) }, props.children))));
 }
 

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

@@ -1 +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  displayAddBookmark?: boolean;\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={\n        profile && navbarOpen ? (\n          <Navbar menus={props.menus} closeNavbar={closeNavbar} displayAddBookmark={props.displayAddBookmark} />\n        ) : undefined\n      }\n    >\n      <ErrorBoundary>\n        <Suspense fallback={<Loading />}>{props.children}</Suspense>\n      </ErrorBoundary>\n    </MantineAppShell>\n  );\n}\n"],"names":["MantineAppShell"],"mappings":";;;;;;;;AAgBM,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;AACF,SAAA,EACD,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,OAAO,IAAI,oBAAC,MAAM,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAI,CAAA,EACnG,MAAM,EACJ,OAAO,IAAI,UAAU,IACnB,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAAI,CAAA,IACpG,SAAS,EAAA;AAGf,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;;;;"}
+{"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  pathname?: string;\n  searchParams?: URLSearchParams;\n  version?: string;\n  menus?: NavbarMenu[];\n  children: React.ReactNode;\n  displayAddBookmark?: boolean;\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={\n        profile && (\n          <Header\n            pathname={props.pathname}\n            searchParams={props.searchParams}\n            logo={props.logo}\n            version={props.version}\n            navbarToggle={toggleNavbar}\n          />\n        )\n      }\n      navbar={\n        profile && navbarOpen ? (\n          <Navbar\n            pathname={props.pathname}\n            searchParams={props.searchParams}\n            menus={props.menus}\n            closeNavbar={closeNavbar}\n            displayAddBookmark={props.displayAddBookmark}\n          />\n        ) : undefined\n      }\n    >\n      <ErrorBoundary key={`${props.pathname}?${props.searchParams?.toString()}`}>\n        <Suspense fallback={<Loading />}>{props.children}</Suspense>\n      </ErrorBoundary>\n    </MantineAppShell>\n  );\n}\n"],"names":["MantineAppShell"],"mappings":";;;;;;;;AAkBM,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;AACF,SAAA,EACD,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,IAAI,EACX,MAAM,EACJ,OAAO,KACL,KAAC,CAAA,aAAA,CAAA,MAAM,IACL,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,YAAY,EAAE,YAAY,EAC1B,CAAA,CACH,EAEH,MAAM,EACJ,OAAO,IAAI,UAAU,IACnB,KAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAAA,CAC5C,IACA,SAAS,EAAA;AAGf,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAA,CAAA,EAAI,KAAK,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAE,CAAA,EAAA;AACvE,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

@@ -49,7 +49,7 @@ function Header(props) {
         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(HeaderSearchInput, { pathname: props.pathname, searchParams: props.searchParams })),
             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) },

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

@@ -1 +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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"}
+{"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  pathname?: string;\n  searchParams?: URLSearchParams;\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 pathname={props.pathname} searchParams={props.searchParams} />\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

@@ -1,7 +1,6 @@
 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';
@@ -38,11 +37,10 @@ function toOption(resource) {
         resource,
     };
 }
-function HeaderSearchInput() {
+function HeaderSearchInput(props) {
     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 };
@@ -54,7 +52,7 @@ function HeaderSearchInput() {
             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 }));
+    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, toKey: toKey, toOption: toOption, onChange: handleSelect, loadOptions: loadData, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false }));
 }
 const ItemComponent = forwardRef(({ resource, ...others }, ref) => {
     let helpText = undefined;

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

@@ -1 +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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"}
+{"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 { 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 interface HeaderSearchInputProps {\n  pathname?: string;\n  searchParams?: URLSearchParams;\n}\n\nexport function HeaderSearchInput(props: HeaderSearchInputProps): JSX.Element {\n  const { classes } = useStyles();\n  const navigate = useMedplumNavigate();\n  const medplum = useMedplum();\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={`${props.pathname}?${props.searchParams}`}\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      maxSelectedValues={0}\n      clearSearchOnChange\n      clearable={false}\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

@@ -1,6 +1,5 @@
 import { createStyles, Navbar as Navbar$1, ScrollArea, Text, Button, Space } from '@mantine/core';
 import React, { useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
 import { BookmarkDialog } from '../BookmarkDialog/BookmarkDialog.mjs';
 import { CodeInput } from '../CodeInput/CodeInput.mjs';
 import { MedplumLink } from '../MedplumLink/MedplumLink.mjs';
@@ -56,9 +55,7 @@ const useStyles = createStyles((theme) => {
 function Navbar(props) {
     const { classes } = useStyles();
     const navigate = useMedplumNavigate();
-    const location = useLocation();
-    const [searchParams] = useSearchParams();
-    const activeLink = getActiveLink(location.pathname, searchParams, props.menus);
+    const activeLink = getActiveLink(props.pathname, props.searchParams, props.menus);
     const [bookmarkDialogVisible, setBookmarkDialogVisible] = useState(false);
     function onLinkClick(e, to) {
         e.stopPropagation();
@@ -89,7 +86,7 @@ function Navbar(props) {
                             React.createElement(NavLinkIcon, { to: link.href, icon: link.icon }),
                             React.createElement("span", null, link.label))))))),
                     props.displayAddBookmark && (React.createElement(Button, { variant: "subtle", size: "xs", mt: "xl", leftIcon: React.createElement(IconPlus, { size: "0.75rem" }), onClick: () => setBookmarkDialogVisible(true) }, "Add Bookmark"))))),
-        React.createElement(BookmarkDialog, { visible: bookmarkDialogVisible, onOk: () => setBookmarkDialogVisible(false), onCancel: () => setBookmarkDialogVisible(false) })));
+        props.pathname && props.searchParams && (React.createElement(BookmarkDialog, { pathname: props.pathname, searchParams: props.searchParams, visible: bookmarkDialogVisible, onOk: () => setBookmarkDialogVisible(false), onCancel: () => setBookmarkDialogVisible(false) }))));
 }
 function NavbarLink(props) {
     const { classes, cx } = useStyles();
@@ -113,17 +110,18 @@ function NavLinkIcon(props) {
  * @returns The active link if one is found.
  */
 function getActiveLink(currentPathname, currentSearchParams, menus) {
+    if (!currentPathname || !currentSearchParams || !menus) {
+        return undefined;
+    }
     let bestLink = undefined;
     let bestScore = 0;
-    if (menus) {
-        for (const menu of menus) {
-            if (menu.links) {
-                for (const link of menu.links) {
-                    const score = getLinkScore(currentPathname, currentSearchParams, link.href);
-                    if (score > bestScore) {
-                        bestScore = score;
-                        bestLink = link;
-                    }
+    for (const menu of menus) {
+        if (menu.links) {
+            for (const link of menu.links) {
+                const score = getLinkScore(currentPathname, currentSearchParams, link.href);
+                if (score > bestScore) {
+                    bestScore = score;
+                    bestLink = link;
                 }
             }
         }

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

@@ -1 +1 @@
-{"version":3,"file":"Navbar.mjs","sources":["../../../src/AppShell/Navbar.tsx"],"sourcesContent":["import { Button, createStyles, Navbar as MantineNavbar, ScrollArea, Space, Text } from '@mantine/core';\nimport { IconPlus } from '@tabler/icons-react';\nimport React, { useState } from 'react';\nimport { useLocation, useSearchParams } from 'react-router-dom';\nimport { BookmarkDialog } from '../BookmarkDialog/BookmarkDialog';\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  displayAddBookmark?: boolean;\n}\n\nexport function Navbar(props: NavbarProps): JSX.Element {\n  const { classes } = useStyles();\n  const navigate = useMedplumNavigate();\n  const location = useLocation();\n  const [searchParams] = useSearchParams();\n  const activeLink = getActiveLink(location.pathname, searchParams, props.menus);\n  const [bookmarkDialogVisible, setBookmarkDialogVisible] = useState(false);\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    <>\n      <MantineNavbar width={{ sm: 250 }} p=\"xs\">\n        <ScrollArea>\n          <MantineNavbar.Section mb=\"sm\">\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          <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\n                    key={link.href}\n                    to={link.href}\n                    active={link.href === activeLink?.href}\n                    onClick={(e) => onLinkClick(e, link.href)}\n                  >\n                    <NavLinkIcon to={link.href} icon={link.icon} />\n                    <span>{link.label}</span>\n                  </NavbarLink>\n                ))}\n              </React.Fragment>\n            ))}\n            {props.displayAddBookmark && (\n              <Button\n                variant=\"subtle\"\n                size=\"xs\"\n                mt=\"xl\"\n                leftIcon={<IconPlus size=\"0.75rem\" />}\n                onClick={() => setBookmarkDialogVisible(true)}\n              >\n                Add Bookmark\n              </Button>\n            )}\n          </MantineNavbar.Section>\n        </ScrollArea>\n      </MantineNavbar>\n      <BookmarkDialog\n        visible={bookmarkDialogVisible}\n        onOk={() => setBookmarkDialogVisible(false)}\n        onCancel={() => setBookmarkDialogVisible(false)}\n      />\n    </>\n  );\n}\n\ninterface NavbarLinkProps {\n  to: string;\n  active: boolean;\n  onClick: React.MouseEventHandler;\n  children: React.ReactNode;\n}\n\nfunction NavbarLink(props: NavbarLinkProps): JSX.Element {\n  const { classes, cx } = useStyles();\n  return (\n    <MedplumLink\n      onClick={props.onClick}\n      to={props.to}\n      className={cx(classes.link, { [classes.linkActive]: props.active })}\n    >\n      {props.children}\n    </MedplumLink>\n  );\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\n/**\n * Returns the best \"active\" link for the menu.\n * In most cases, the navbar links are simple, and an exact match can determine which link is active.\n * However, we ignore some search parameters to support pagination.\n * But we cannot ignore all search parameters, to support separate links based on search filters.\n * So in the end, we use a simple scoring system based on the number of matching query search params.\n * @param currentPathname The web browser current pathname.\n * @param currentSearchParams The web browser current search parameters.\n * @param menus Collection of navbar menus and links.\n * @returns The active link if one is found.\n */\nfunction getActiveLink(\n  currentPathname: string,\n  currentSearchParams: URLSearchParams,\n  menus: NavbarMenu[] | undefined\n): NavbarLink | undefined {\n  let bestLink = undefined;\n  let bestScore = 0;\n\n  if (menus) {\n    for (const menu of menus) {\n      if (menu.links) {\n        for (const link of menu.links) {\n          const score = getLinkScore(currentPathname, currentSearchParams, link.href);\n          if (score > bestScore) {\n            bestScore = score;\n            bestLink = link;\n          }\n        }\n      }\n    }\n  }\n\n  return bestLink;\n}\n\n/**\n * Calculates a score for a link.\n * Zero means \"does not match at all\".\n * One means \"matches the pathname only\".\n * Additional increases for each matching search parameter.\n * Ignores pagination parameters \"_count\" and \"_offset\".\n * @param currentPathname The web browser current pathname.\n * @param currentSearchParams The web browser current search parameters.\n * @param linkHref A candidate link href.\n * @returns The link score.\n */\nfunction getLinkScore(currentPathname: string, currentSearchParams: URLSearchParams, linkHref: string): number {\n  const linkUrl = new URL(linkHref, 'https://example.com');\n  if (currentPathname !== linkUrl.pathname) {\n    return 0;\n  }\n  const ignoredParams = ['_count', '_offset'];\n  for (const [key, value] of linkUrl.searchParams.entries()) {\n    if (ignoredParams.includes(key)) {\n      continue;\n    }\n    if (currentSearchParams.get(key) !== value) {\n      return 0;\n    }\n  }\n  let count = 1;\n  for (const [key, value] of currentSearchParams.entries()) {\n    if (ignoredParams.includes(key)) {\n      continue;\n    }\n    if (linkUrl.searchParams.get(key) === value) {\n      count++;\n    }\n  }\n  return count;\n}\n"],"names":["MantineNavbar"],"mappings":"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"}
+{"version":3,"file":"Navbar.mjs","sources":["../../../src/AppShell/Navbar.tsx"],"sourcesContent":["import { Button, createStyles, Navbar as MantineNavbar, ScrollArea, Space, Text } from '@mantine/core';\nimport { IconPlus } from '@tabler/icons-react';\nimport React, { useState } from 'react';\nimport { BookmarkDialog } from '../BookmarkDialog/BookmarkDialog';\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  pathname?: string;\n  searchParams?: URLSearchParams;\n  menus?: NavbarMenu[];\n  closeNavbar: () => void;\n  displayAddBookmark?: boolean;\n}\n\nexport function Navbar(props: NavbarProps): JSX.Element {\n  const { classes } = useStyles();\n  const navigate = useMedplumNavigate();\n  const activeLink = getActiveLink(props.pathname, props.searchParams, props.menus);\n  const [bookmarkDialogVisible, setBookmarkDialogVisible] = useState(false);\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    <>\n      <MantineNavbar width={{ sm: 250 }} p=\"xs\">\n        <ScrollArea>\n          <MantineNavbar.Section mb=\"sm\">\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          <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\n                    key={link.href}\n                    to={link.href}\n                    active={link.href === activeLink?.href}\n                    onClick={(e) => onLinkClick(e, link.href)}\n                  >\n                    <NavLinkIcon to={link.href} icon={link.icon} />\n                    <span>{link.label}</span>\n                  </NavbarLink>\n                ))}\n              </React.Fragment>\n            ))}\n            {props.displayAddBookmark && (\n              <Button\n                variant=\"subtle\"\n                size=\"xs\"\n                mt=\"xl\"\n                leftIcon={<IconPlus size=\"0.75rem\" />}\n                onClick={() => setBookmarkDialogVisible(true)}\n              >\n                Add Bookmark\n              </Button>\n            )}\n          </MantineNavbar.Section>\n        </ScrollArea>\n      </MantineNavbar>\n      {props.pathname && props.searchParams && (\n        <BookmarkDialog\n          pathname={props.pathname}\n          searchParams={props.searchParams}\n          visible={bookmarkDialogVisible}\n          onOk={() => setBookmarkDialogVisible(false)}\n          onCancel={() => setBookmarkDialogVisible(false)}\n        />\n      )}\n    </>\n  );\n}\n\ninterface NavbarLinkProps {\n  to: string;\n  active: boolean;\n  onClick: React.MouseEventHandler;\n  children: React.ReactNode;\n}\n\nfunction NavbarLink(props: NavbarLinkProps): JSX.Element {\n  const { classes, cx } = useStyles();\n  return (\n    <MedplumLink\n      onClick={props.onClick}\n      to={props.to}\n      className={cx(classes.link, { [classes.linkActive]: props.active })}\n    >\n      {props.children}\n    </MedplumLink>\n  );\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\n/**\n * Returns the best \"active\" link for the menu.\n * In most cases, the navbar links are simple, and an exact match can determine which link is active.\n * However, we ignore some search parameters to support pagination.\n * But we cannot ignore all search parameters, to support separate links based on search filters.\n * So in the end, we use a simple scoring system based on the number of matching query search params.\n * @param currentPathname The web browser current pathname.\n * @param currentSearchParams The web browser current search parameters.\n * @param menus Collection of navbar menus and links.\n * @returns The active link if one is found.\n */\nfunction getActiveLink(\n  currentPathname: string | undefined,\n  currentSearchParams: URLSearchParams | undefined,\n  menus: NavbarMenu[] | undefined\n): NavbarLink | undefined {\n  if (!currentPathname || !currentSearchParams || !menus) {\n    return undefined;\n  }\n\n  let bestLink = undefined;\n  let bestScore = 0;\n\n  for (const menu of menus) {\n    if (menu.links) {\n      for (const link of menu.links) {\n        const score = getLinkScore(currentPathname, currentSearchParams, link.href);\n        if (score > bestScore) {\n          bestScore = score;\n          bestLink = link;\n        }\n      }\n    }\n  }\n\n  return bestLink;\n}\n\n/**\n * Calculates a score for a link.\n * Zero means \"does not match at all\".\n * One means \"matches the pathname only\".\n * Additional increases for each matching search parameter.\n * Ignores pagination parameters \"_count\" and \"_offset\".\n * @param currentPathname The web browser current pathname.\n * @param currentSearchParams The web browser current search parameters.\n * @param linkHref A candidate link href.\n * @returns The link score.\n */\nfunction getLinkScore(currentPathname: string, currentSearchParams: URLSearchParams, linkHref: string): number {\n  const linkUrl = new URL(linkHref, 'https://example.com');\n  if (currentPathname !== linkUrl.pathname) {\n    return 0;\n  }\n  const ignoredParams = ['_count', '_offset'];\n  for (const [key, value] of linkUrl.searchParams.entries()) {\n    if (ignoredParams.includes(key)) {\n      continue;\n    }\n    if (currentSearchParams.get(key) !== value) {\n      return 0;\n    }\n  }\n  let count = 1;\n  for (const [key, value] of currentSearchParams.entries()) {\n    if (ignoredParams.includes(key)) {\n      continue;\n    }\n    if (linkUrl.searchParams.get(key) === value) {\n      count++;\n    }\n  }\n  return count;\n}\n"],"names":["MantineNavbar"],"mappings":"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"}

package/dist/esm/AsyncAutocomplete/AsyncAutocomplete.mjs

@@ -64,8 +64,9 @@ function AsyncAutocomplete(props) {
             if (!item && creatable !== false) {
                 item = onCreate(value);
             }
-            if (item)
+            if (item) {
                 result.push(item);
+            }
         }
         onChange(result);
     }, [creatable, onChange, onCreate]);

package/dist/esm/AsyncAutocomplete/AsyncAutocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncAutocomplete.mjs","sources":["../../../src/AsyncAutocomplete/AsyncAutocomplete.tsx"],"sourcesContent":["import { Loader, MultiSelect, MultiSelectProps, SelectItem } from '@mantine/core';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { killEvent } from '../utils/dom';\n\nexport interface AsyncAutocompleteOption<T> extends SelectItem {\n  resource: T;\n}\n\nexport interface AsyncAutocompleteProps<T>\n  extends Omit<MultiSelectProps, 'data' | 'defaultValue' | 'loadOptions' | 'onChange' | 'onCreate' | 'searchable'> {\n  defaultValue?: T | T[];\n  toKey: (item: T) => string;\n  toOption: (item: T) => AsyncAutocompleteOption<T>;\n  loadOptions: (input: string, signal: AbortSignal) => Promise<T[]>;\n  onChange: (item: T[]) => void;\n  onCreate?: (input: string) => T;\n  creatable?: boolean;\n}\n\nexport function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>): JSX.Element {\n  const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate, creatable, ...rest } = props;\n  const defaultItems = toDefaultItems(defaultValue);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [lastValue, setLastValue] = useState<string | undefined>(undefined);\n  const [timer, setTimer] = useState<number>();\n  const [abortController, setAbortController] = useState<AbortController>();\n  const [autoSubmit, setAutoSubmit] = useState<boolean>();\n  const [options, setOptions] = useState<AsyncAutocompleteOption<T>[]>(defaultItems?.map(toOption));\n\n  const lastValueRef = useRef<string>();\n  lastValueRef.current = lastValue;\n\n  const timerRef = useRef<number>();\n  timerRef.current = timer;\n\n  const abortControllerRef = useRef<AbortController>();\n  abortControllerRef.current = abortController;\n\n  const autoSubmitRef = useRef<boolean>();\n  autoSubmitRef.current = autoSubmit;\n\n  const optionsRef = useRef<AsyncAutocompleteOption<T>[]>();\n  optionsRef.current = options;\n\n  const handleTimer = useCallback((): void => {\n    setTimer(undefined);\n\n    const value = inputRef.current?.value?.trim() || '';\n    if (value === lastValueRef.current) {\n      // Nothing has changed, move on\n      return;\n    }\n\n    setLastValue(value);\n\n    const newAbortController = new AbortController();\n    setAbortController(newAbortController);\n\n    loadOptions(value, newAbortController.signal)\n      .then((newValues: T[]) => {\n        if (!newAbortController.signal.aborted) {\n          setOptions(newValues.map(toOption));\n          setAbortController(undefined);\n          if (autoSubmitRef.current) {\n            if (newValues.length > 0) {\n              onChange(newValues.slice(0, 1));\n            }\n            setAutoSubmit(false);\n          }\n        }\n      })\n      .catch(console.log);\n  }, [loadOptions, onChange, toOption]);\n\n  const handleSearchChange = useCallback((): void => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      setAbortController(undefined);\n    }\n\n    if (timerRef.current !== undefined) {\n      window.clearTimeout(timerRef.current);\n    }\n\n    const newTimer = window.setTimeout(() => handleTimer(), 100);\n    setTimer(newTimer);\n  }, [handleTimer]);\n\n  const handleChange = useCallback(\n    (values: string[]): void => {\n      const result: T[] = [];\n      for (const value of values) {\n        let item = optionsRef.current?.find((option) => option.value === value)?.resource;\n        if (!item && creatable !== false) {\n          item = (onCreate as (input: string) => T)(value);\n        }\n\n        if (item) result.push(item);\n      }\n      onChange(result);\n    },\n    [creatable, onChange, onCreate]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent): void => {\n      if (e.key === 'Enter') {\n        if (!timerRef.current && !abortControllerRef.current) {\n          killEvent(e);\n          if (optionsRef.current && optionsRef.current.length > 0) {\n            setOptions(optionsRef.current.slice(0, 1));\n            handleChange([optionsRef.current[0].value]);\n          }\n        } else {\n          // The user pressed enter, but we don't have results yet.\n          // We need to wait for the results to come in.\n          setAutoSubmit(true);\n        }\n      }\n    },\n    [handleChange]\n  );\n\n  const handleCreate = useCallback(\n    (input: string): AsyncAutocompleteOption<T> => {\n      const option = toOption((onCreate as (input: string) => T)(input));\n      setOptions([...(optionsRef.current as AsyncAutocompleteOption<T>[]), option]);\n      return option;\n    },\n    [onCreate, setOptions, toOption]\n  );\n\n  const handleFilter = useCallback((_value: string, selected: boolean) => !selected, []);\n\n  useEffect(() => {\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, []);\n\n  return (\n    <MultiSelect\n      {...rest}\n      ref={inputRef}\n      defaultValue={defaultItems.map(toKey)}\n      searchable\n      onKeyDown={handleKeyDown}\n      onSearchChange={handleSearchChange}\n      data={options}\n      onFocus={handleTimer}\n      onChange={handleChange}\n      onCreate={handleCreate}\n      rightSectionWidth={40}\n      rightSection={abortController ? <Loader size={16} /> : null}\n      filter={handleFilter}\n      creatable\n    />\n  );\n}\n\nfunction toDefaultItems<T>(defaultValue: T | T[] | undefined): T[] {\n  if (!defaultValue) {\n    return [];\n  }\n  if (Array.isArray(defaultValue)) {\n    return defaultValue;\n  }\n  return [defaultValue];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AsyncAutocomplete.mjs","sources":["../../../src/AsyncAutocomplete/AsyncAutocomplete.tsx"],"sourcesContent":["import { Loader, MultiSelect, MultiSelectProps, SelectItem } from '@mantine/core';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { killEvent } from '../utils/dom';\n\nexport interface AsyncAutocompleteOption<T> extends SelectItem {\n  resource: T;\n}\n\nexport interface AsyncAutocompleteProps<T>\n  extends Omit<MultiSelectProps, 'data' | 'defaultValue' | 'loadOptions' | 'onChange' | 'onCreate' | 'searchable'> {\n  defaultValue?: T | T[];\n  toKey: (item: T) => string;\n  toOption: (item: T) => AsyncAutocompleteOption<T>;\n  loadOptions: (input: string, signal: AbortSignal) => Promise<T[]>;\n  onChange: (item: T[]) => void;\n  onCreate?: (input: string) => T;\n  creatable?: boolean;\n}\n\nexport function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>): JSX.Element {\n  const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate, creatable, ...rest } = props;\n  const defaultItems = toDefaultItems(defaultValue);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [lastValue, setLastValue] = useState<string | undefined>(undefined);\n  const [timer, setTimer] = useState<number>();\n  const [abortController, setAbortController] = useState<AbortController>();\n  const [autoSubmit, setAutoSubmit] = useState<boolean>();\n  const [options, setOptions] = useState<AsyncAutocompleteOption<T>[]>(defaultItems?.map(toOption));\n\n  const lastValueRef = useRef<string>();\n  lastValueRef.current = lastValue;\n\n  const timerRef = useRef<number>();\n  timerRef.current = timer;\n\n  const abortControllerRef = useRef<AbortController>();\n  abortControllerRef.current = abortController;\n\n  const autoSubmitRef = useRef<boolean>();\n  autoSubmitRef.current = autoSubmit;\n\n  const optionsRef = useRef<AsyncAutocompleteOption<T>[]>();\n  optionsRef.current = options;\n\n  const handleTimer = useCallback((): void => {\n    setTimer(undefined);\n\n    const value = inputRef.current?.value?.trim() || '';\n    if (value === lastValueRef.current) {\n      // Nothing has changed, move on\n      return;\n    }\n\n    setLastValue(value);\n\n    const newAbortController = new AbortController();\n    setAbortController(newAbortController);\n\n    loadOptions(value, newAbortController.signal)\n      .then((newValues: T[]) => {\n        if (!newAbortController.signal.aborted) {\n          setOptions(newValues.map(toOption));\n          setAbortController(undefined);\n          if (autoSubmitRef.current) {\n            if (newValues.length > 0) {\n              onChange(newValues.slice(0, 1));\n            }\n            setAutoSubmit(false);\n          }\n        }\n      })\n      .catch(console.log);\n  }, [loadOptions, onChange, toOption]);\n\n  const handleSearchChange = useCallback((): void => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      setAbortController(undefined);\n    }\n\n    if (timerRef.current !== undefined) {\n      window.clearTimeout(timerRef.current);\n    }\n\n    const newTimer = window.setTimeout(() => handleTimer(), 100);\n    setTimer(newTimer);\n  }, [handleTimer]);\n\n  const handleChange = useCallback(\n    (values: string[]): void => {\n      const result: T[] = [];\n      for (const value of values) {\n        let item = optionsRef.current?.find((option) => option.value === value)?.resource;\n        if (!item && creatable !== false) {\n          item = (onCreate as (input: string) => T)(value);\n        }\n\n        if (item) {\n          result.push(item);\n        }\n      }\n      onChange(result);\n    },\n    [creatable, onChange, onCreate]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent): void => {\n      if (e.key === 'Enter') {\n        if (!timerRef.current && !abortControllerRef.current) {\n          killEvent(e);\n          if (optionsRef.current && optionsRef.current.length > 0) {\n            setOptions(optionsRef.current.slice(0, 1));\n            handleChange([optionsRef.current[0].value]);\n          }\n        } else {\n          // The user pressed enter, but we don't have results yet.\n          // We need to wait for the results to come in.\n          setAutoSubmit(true);\n        }\n      }\n    },\n    [handleChange]\n  );\n\n  const handleCreate = useCallback(\n    (input: string): AsyncAutocompleteOption<T> => {\n      const option = toOption((onCreate as (input: string) => T)(input));\n      setOptions([...(optionsRef.current as AsyncAutocompleteOption<T>[]), option]);\n      return option;\n    },\n    [onCreate, setOptions, toOption]\n  );\n\n  const handleFilter = useCallback((_value: string, selected: boolean) => !selected, []);\n\n  useEffect(() => {\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, []);\n\n  return (\n    <MultiSelect\n      {...rest}\n      ref={inputRef}\n      defaultValue={defaultItems.map(toKey)}\n      searchable\n      onKeyDown={handleKeyDown}\n      onSearchChange={handleSearchChange}\n      data={options}\n      onFocus={handleTimer}\n      onChange={handleChange}\n      onCreate={handleCreate}\n      rightSectionWidth={40}\n      rightSection={abortController ? <Loader size={16} /> : null}\n      filter={handleFilter}\n      creatable\n    />\n  );\n}\n\nfunction toDefaultItems<T>(defaultValue: T | T[] | undefined): T[] {\n  if (!defaultValue) {\n    return [];\n  }\n  if (Array.isArray(defaultValue)) {\n    return defaultValue;\n  }\n  return [defaultValue];\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/BookmarkDialog/BookmarkDialog.mjs

@@ -2,17 +2,15 @@ import { Modal, Stack, TextInput, Group, Button, NativeSelect } from '@mantine/c
 import { showNotification } from '@mantine/notifications';
 import { deepClone, normalizeErrorString } from '@medplum/core';
 import React from 'react';
-import { useLocation } from 'react-router-dom';
 import { Form } from '../Form/Form.mjs';
 import { useMedplum } from '../MedplumProvider/MedplumProvider.mjs';
 
 function BookmarkDialog(props) {
     const medplum = useMedplum();
     const config = medplum.getUserConfiguration();
-    const location = useLocation();
     function submitHandler(formData) {
         const { menuname, bookmarkname: name } = formData;
-        const target = location.pathname + location.search;
+        const target = `${props.pathname}?${props.searchParams.toString()}`;
         const newConfig = deepClone(config);
         const menu = newConfig?.menu?.find(({ title }) => title === menuname);
         menu?.link?.push({ name, target });

package/dist/esm/BookmarkDialog/BookmarkDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BookmarkDialog.mjs","sources":["../../../src/BookmarkDialog/BookmarkDialog.tsx"],"sourcesContent":["import { Button, Group, Modal, NativeSelect, Stack, TextInput } from '@mantine/core';\nimport { showNotification } from '@mantine/notifications';\nimport { deepClone, normalizeErrorString } from '@medplum/core';\nimport { UserConfiguration } from '@medplum/fhirtypes';\nimport React from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { Form } from '../Form/Form';\nimport { useMedplum } from '../MedplumProvider/MedplumProvider';\n\ninterface BookmarkDialogProps {\n  visible: boolean;\n  onOk: () => void;\n  onCancel: () => void;\n  defaultValue?: string;\n}\nexport function BookmarkDialog(props: BookmarkDialogProps): JSX.Element | null {\n  const medplum = useMedplum();\n  const config = medplum.getUserConfiguration() as UserConfiguration;\n  const location = useLocation();\n  function submitHandler(formData: Record<string, string>): void {\n    const { menuname, bookmarkname: name } = formData;\n    const target = location.pathname + location.search;\n    const newConfig = deepClone(config) as UserConfiguration;\n    const menu = newConfig?.menu?.find(({ title }) => title === menuname);\n\n    menu?.link?.push({ name, target });\n    medplum\n      .updateResource(newConfig)\n      .then((res) => {\n        // refresh current config menu\n        config.menu = res.menu;\n        medplum.dispatchEvent({ type: 'change' });\n        showNotification({ color: 'green', message: 'Success' });\n        props.onOk();\n      })\n      .catch((err: any) => {\n        showNotification({ color: 'red', message: normalizeErrorString(err) });\n      });\n  }\n\n  return (\n    <Modal\n      title=\"Add Bookmark\"\n      closeButtonProps={{ 'aria-label': 'Close' }}\n      opened={props.visible}\n      onClose={props.onCancel}\n    >\n      <Form onSubmit={submitHandler}>\n        <Stack>\n          <SelectMenu config={config}></SelectMenu>\n          <TextInput label=\"Bookmark Name\" type=\"text\" name=\"bookmarkname\" placeholder=\"bookmark name\" withAsterisk />\n          <Group position=\"right\">\n            <Button mt=\"sm\" type=\"submit\">\n              OK\n            </Button>\n          </Group>\n        </Stack>\n      </Form>\n    </Modal>\n  );\n}\n\ninterface SelectMenuProps {\n  config: UserConfiguration | undefined;\n}\n\nfunction SelectMenu(props: SelectMenuProps): JSX.Element {\n  function userConfigToMenu(config: UserConfiguration | undefined): string[] {\n    return config?.menu?.map((menu) => menu.title) as [];\n  }\n  const menus = userConfigToMenu(props.config);\n\n  return (\n    <NativeSelect\n      name=\"menuname\"\n      defaultValue={menus?.[0]}\n      label=\"Select Menu Option\"\n      placeholder=\"Menu\"\n      data={menus}\n      withAsterisk\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAeM,SAAU,cAAc,CAAC,KAA0B,EAAA;AACvD,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;AAC7B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,oBAAoB,EAAuB,CAAC;AACnE,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,SAAS,aAAa,CAAC,QAAgC,EAAA;QACrD,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAC;QAClD,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;AACnD,QAAA,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAsB,CAAC;AACzD,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,QAAQ,CAAC,CAAC;QAEtE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACnC,OAAO;aACJ,cAAc,CAAC,SAAS,CAAC;AACzB,aAAA,IAAI,CAAC,CAAC,GAAG,KAAI;;AAEZ,YAAA,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YACvB,OAAO,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC1C,gBAAgB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;YACzD,KAAK,CAAC,IAAI,EAAE,CAAC;AACf,SAAC,CAAC;AACD,aAAA,KAAK,CAAC,CAAC,GAAQ,KAAI;AAClB,YAAA,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,oBAAoB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACzE,SAAC,CAAC,CAAC;KACN;IAED,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,KAAK,EAAC,cAAc,EACpB,gBAAgB,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,EAC3C,MAAM,EAAE,KAAK,CAAC,OAAO,EACrB,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAA;AAEvB,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,QAAQ,EAAE,aAAa,EAAA;AAC3B,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA;AACJ,gBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,MAAM,EAAe,CAAA;AACzC,gBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,WAAW,EAAC,eAAe,EAAC,YAAY,EAAG,IAAA,EAAA,CAAA;AAC5G,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,QAAQ,EAAC,OAAO,EAAA;AACrB,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,SAEpB,CACH,CACF,CACH,CACD,EACR;AACJ,CAAC;AAMD,SAAS,UAAU,CAAC,KAAsB,EAAA;IACxC,SAAS,gBAAgB,CAAC,MAAqC,EAAA;AAC7D,QAAA,OAAO,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAO,CAAC;KACtD;IACD,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AAE7C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,IAAI,EAAC,UAAU,EACf,YAAY,EAAE,KAAK,GAAG,CAAC,CAAC,EACxB,KAAK,EAAC,oBAAoB,EAC1B,WAAW,EAAC,MAAM,EAClB,IAAI,EAAE,KAAK,EACX,YAAY,EAAA,IAAA,EAAA,CACZ,EACF;AACJ;;;;"}
+{"version":3,"file":"BookmarkDialog.mjs","sources":["../../../src/BookmarkDialog/BookmarkDialog.tsx"],"sourcesContent":["import { Button, Group, Modal, NativeSelect, Stack, TextInput } from '@mantine/core';\nimport { showNotification } from '@mantine/notifications';\nimport { deepClone, normalizeErrorString } from '@medplum/core';\nimport { UserConfiguration } from '@medplum/fhirtypes';\nimport React from 'react';\nimport { Form } from '../Form/Form';\nimport { useMedplum } from '../MedplumProvider/MedplumProvider';\n\ninterface BookmarkDialogProps {\n  pathname: string;\n  searchParams: URLSearchParams;\n  visible: boolean;\n  onOk: () => void;\n  onCancel: () => void;\n  defaultValue?: string;\n}\nexport function BookmarkDialog(props: BookmarkDialogProps): JSX.Element | null {\n  const medplum = useMedplum();\n  const config = medplum.getUserConfiguration() as UserConfiguration;\n\n  function submitHandler(formData: Record<string, string>): void {\n    const { menuname, bookmarkname: name } = formData;\n    const target = `${props.pathname}?${props.searchParams.toString()}`;\n    const newConfig = deepClone(config) as UserConfiguration;\n    const menu = newConfig?.menu?.find(({ title }) => title === menuname);\n\n    menu?.link?.push({ name, target });\n    medplum\n      .updateResource(newConfig)\n      .then((res) => {\n        // refresh current config menu\n        config.menu = res.menu;\n        medplum.dispatchEvent({ type: 'change' });\n        showNotification({ color: 'green', message: 'Success' });\n        props.onOk();\n      })\n      .catch((err: any) => {\n        showNotification({ color: 'red', message: normalizeErrorString(err) });\n      });\n  }\n\n  return (\n    <Modal\n      title=\"Add Bookmark\"\n      closeButtonProps={{ 'aria-label': 'Close' }}\n      opened={props.visible}\n      onClose={props.onCancel}\n    >\n      <Form onSubmit={submitHandler}>\n        <Stack>\n          <SelectMenu config={config}></SelectMenu>\n          <TextInput label=\"Bookmark Name\" type=\"text\" name=\"bookmarkname\" placeholder=\"bookmark name\" withAsterisk />\n          <Group position=\"right\">\n            <Button mt=\"sm\" type=\"submit\">\n              OK\n            </Button>\n          </Group>\n        </Stack>\n      </Form>\n    </Modal>\n  );\n}\n\ninterface SelectMenuProps {\n  config: UserConfiguration | undefined;\n}\n\nfunction SelectMenu(props: SelectMenuProps): JSX.Element {\n  function userConfigToMenu(config: UserConfiguration | undefined): string[] {\n    return config?.menu?.map((menu) => menu.title) as [];\n  }\n  const menus = userConfigToMenu(props.config);\n\n  return (\n    <NativeSelect\n      name=\"menuname\"\n      defaultValue={menus?.[0]}\n      label=\"Select Menu Option\"\n      placeholder=\"Menu\"\n      data={menus}\n      withAsterisk\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/MedplumProvider/MedplumProvider.mjs

@@ -1,3 +1,4 @@
+import { showNotification } from '@mantine/notifications';
 import React, { createContext, useState, useEffect, useContext } from 'react';
 
 const reactContext = createContext(undefined);
@@ -25,6 +26,13 @@ function MedplumProvider(props) {
         medplum.addEventListener('change', eventListener);
         return () => medplum.removeEventListeneer('change', eventListener);
     }, [medplum, state]);
+    useEffect(() => {
+        function eventListener() {
+            showNotification({ color: 'red', message: 'No connection to server', autoClose: false });
+        }
+        medplum.addEventListener('offline', eventListener);
+        return () => medplum.removeEventListeneer('offline', eventListener);
+    }, [medplum]);
     const medplumContext = {
         ...state,
         medplum,

package/dist/esm/MedplumProvider/MedplumProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MedplumProvider.mjs","sources":["../../../src/MedplumProvider/MedplumProvider.tsx"],"sourcesContent":["import { MedplumClient, ProfileResource } from '@medplum/core';\nimport React, { createContext, useContext, useEffect, useState } from 'react';\n\nconst reactContext = createContext(undefined as MedplumContext | undefined);\n\nexport type MepdlumNavigateFunction = (path: string) => void;\n\nexport interface MedplumProviderProps {\n  medplum: MedplumClient;\n  navigate?: MepdlumNavigateFunction;\n  children: React.ReactNode;\n}\n\nexport interface MedplumContext {\n  medplum: MedplumClient;\n  navigate: MepdlumNavigateFunction;\n  profile?: ProfileResource;\n  loading: boolean;\n}\n\n/**\n * The MedplumProvider component provides Medplum context state.\n *\n * Medplum context includes:\n *   1) medplum - Medplum client library\n *   2) profile - The current user profile (if signed in)\n */\nexport function MedplumProvider(props: MedplumProviderProps): JSX.Element {\n  const medplum = props.medplum;\n  const navigate = props.navigate || defaultNavigate;\n\n  const [state, setState] = useState({\n    profile: medplum.getProfile(),\n    loading: false,\n  });\n\n  useEffect(() => {\n    function eventListener(): void {\n      setState({\n        ...state,\n        profile: medplum.getProfile(),\n      });\n    }\n\n    medplum.addEventListener('change', eventListener);\n    return () => medplum.removeEventListeneer('change', eventListener);\n  }, [medplum, state]);\n\n  const medplumContext = {\n    ...state,\n    medplum,\n    navigate,\n  };\n\n  return <reactContext.Provider value={medplumContext}>{props.children}</reactContext.Provider>;\n}\n\n/**\n * Returns the MedplumContext instance.\n */\nexport function useMedplumContext(): MedplumContext {\n  return useContext(reactContext) as MedplumContext;\n}\n\n/**\n * Returns the MedplumClient instance.\n * This is a shortcut for useMedplumContext().medplum.\n */\nexport function useMedplum(): MedplumClient {\n  return useMedplumContext().medplum;\n}\n\n/**\n * Returns the Medplum navigate function.\n * @returns The Medplum navigate function.\n */\nexport function useMedplumNavigate(): MepdlumNavigateFunction {\n  return useMedplumContext().navigate;\n}\n\n/**\n * Returns the current Medplum user profile (if signed in).\n * This is a shortcut for useMedplumContext().profile.\n * @returns The current user profile.\n */\nexport function useMedplumProfile(): ProfileResource | undefined {\n  return useMedplumContext().profile;\n}\n\n/**\n * The default \"navigate\" function which simply uses window.location.href.\n * @param path The path to navigate to.\n */\nfunction defaultNavigate(path: string): void {\n  window.location.assign(path);\n}\n"],"names":[],"mappings":";;AAGA,MAAM,YAAY,GAAG,aAAa,CAAC,SAAuC,CAAC,CAAC;AAiB5E;;;;;;AAMG;AACG,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,eAAe,CAAC;AAEnD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC;AACjC,QAAA,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE;AAC7B,QAAA,OAAO,EAAE,KAAK;AACf,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACb,QAAA,SAAS,aAAa,GAAA;AACpB,YAAA,QAAQ,CAAC;AACP,gBAAA,GAAG,KAAK;AACR,gBAAA,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE;AAC9B,aAAA,CAAC,CAAC;SACJ;AAED,QAAA,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QAClD,OAAO,MAAM,OAAO,CAAC,oBAAoB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AACrE,KAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AAErB,IAAA,MAAM,cAAc,GAAG;AACrB,QAAA,GAAG,KAAK;QACR,OAAO;QACP,QAAQ;KACT,CAAC;AAEF,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,YAAY,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,cAAc,EAAG,EAAA,KAAK,CAAC,QAAQ,CAAyB,CAAC;AAChG,CAAC;AAED;;AAEG;SACa,iBAAiB,GAAA;AAC/B,IAAA,OAAO,UAAU,CAAC,YAAY,CAAmB,CAAC;AACpD,CAAC;AAED;;;AAGG;SACa,UAAU,GAAA;AACxB,IAAA,OAAO,iBAAiB,EAAE,CAAC,OAAO,CAAC;AACrC,CAAC;AAED;;;AAGG;SACa,kBAAkB,GAAA;AAChC,IAAA,OAAO,iBAAiB,EAAE,CAAC,QAAQ,CAAC;AACtC,CAAC;AAED;;;;AAIG;SACa,iBAAiB,GAAA;AAC/B,IAAA,OAAO,iBAAiB,EAAE,CAAC,OAAO,CAAC;AACrC,CAAC;AAED;;;AAGG;AACH,SAAS,eAAe,CAAC,IAAY,EAAA;AACnC,IAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC/B;;;;"}
+{"version":3,"file":"MedplumProvider.mjs","sources":["../../../src/MedplumProvider/MedplumProvider.tsx"],"sourcesContent":["import { MedplumClient, ProfileResource } from '@medplum/core';\nimport { showNotification } from '@mantine/notifications';\nimport React, { createContext, useContext, useEffect, useState } from 'react';\n\nconst reactContext = createContext(undefined as MedplumContext | undefined);\n\nexport type MepdlumNavigateFunction = (path: string) => void;\n\nexport interface MedplumProviderProps {\n  medplum: MedplumClient;\n  navigate?: MepdlumNavigateFunction;\n  children: React.ReactNode;\n}\n\nexport interface MedplumContext {\n  medplum: MedplumClient;\n  navigate: MepdlumNavigateFunction;\n  profile?: ProfileResource;\n  loading: boolean;\n}\n\n/**\n * The MedplumProvider component provides Medplum context state.\n *\n * Medplum context includes:\n *   1) medplum - Medplum client library\n *   2) profile - The current user profile (if signed in)\n */\nexport function MedplumProvider(props: MedplumProviderProps): JSX.Element {\n  const medplum = props.medplum;\n  const navigate = props.navigate || defaultNavigate;\n\n  const [state, setState] = useState({\n    profile: medplum.getProfile(),\n    loading: false,\n  });\n\n  useEffect(() => {\n    function eventListener(): void {\n      setState({\n        ...state,\n        profile: medplum.getProfile(),\n      });\n    }\n\n    medplum.addEventListener('change', eventListener);\n    return () => medplum.removeEventListeneer('change', eventListener);\n  }, [medplum, state]);\n\n  useEffect(() => {\n    function eventListener(): void {\n      showNotification({ color: 'red', message: 'No connection to server', autoClose: false });\n    }\n    medplum.addEventListener('offline', eventListener);\n    return () => medplum.removeEventListeneer('offline', eventListener);\n  }, [medplum]);\n\n  const medplumContext = {\n    ...state,\n    medplum,\n    navigate,\n  };\n\n  return <reactContext.Provider value={medplumContext}>{props.children}</reactContext.Provider>;\n}\n\n/**\n * Returns the MedplumContext instance.\n */\nexport function useMedplumContext(): MedplumContext {\n  return useContext(reactContext) as MedplumContext;\n}\n\n/**\n * Returns the MedplumClient instance.\n * This is a shortcut for useMedplumContext().medplum.\n */\nexport function useMedplum(): MedplumClient {\n  return useMedplumContext().medplum;\n}\n\n/**\n * Returns the Medplum navigate function.\n * @returns The Medplum navigate function.\n */\nexport function useMedplumNavigate(): MepdlumNavigateFunction {\n  return useMedplumContext().navigate;\n}\n\n/**\n * Returns the current Medplum user profile (if signed in).\n * This is a shortcut for useMedplumContext().profile.\n * @returns The current user profile.\n */\nexport function useMedplumProfile(): ProfileResource | undefined {\n  return useMedplumContext().profile;\n}\n\n/**\n * The default \"navigate\" function which simply uses window.location.href.\n * @param path The path to navigate to.\n */\nfunction defaultNavigate(path: string): void {\n  window.location.assign(path);\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,YAAY,GAAG,aAAa,CAAC,SAAuC,CAAC,CAAC;AAiB5E;;;;;;AAMG;AACG,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,eAAe,CAAC;AAEnD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC;AACjC,QAAA,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE;AAC7B,QAAA,OAAO,EAAE,KAAK;AACf,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACb,QAAA,SAAS,aAAa,GAAA;AACpB,YAAA,QAAQ,CAAC;AACP,gBAAA,GAAG,KAAK;AACR,gBAAA,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE;AAC9B,aAAA,CAAC,CAAC;SACJ;AAED,QAAA,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QAClD,OAAO,MAAM,OAAO,CAAC,oBAAoB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AACrE,KAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,SAAS,CAAC,MAAK;AACb,QAAA,SAAS,aAAa,GAAA;AACpB,YAAA,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;SAC1F;AACD,QAAA,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACnD,OAAO,MAAM,OAAO,CAAC,oBAAoB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACtE,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAEd,IAAA,MAAM,cAAc,GAAG;AACrB,QAAA,GAAG,KAAK;QACR,OAAO;QACP,QAAQ;KACT,CAAC;AAEF,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,YAAY,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,cAAc,EAAG,EAAA,KAAK,CAAC,QAAQ,CAAyB,CAAC;AAChG,CAAC;AAED;;AAEG;SACa,iBAAiB,GAAA;AAC/B,IAAA,OAAO,UAAU,CAAC,YAAY,CAAmB,CAAC;AACpD,CAAC;AAED;;;AAGG;SACa,UAAU,GAAA;AACxB,IAAA,OAAO,iBAAiB,EAAE,CAAC,OAAO,CAAC;AACrC,CAAC;AAED;;;AAGG;SACa,kBAAkB,GAAA;AAChC,IAAA,OAAO,iBAAiB,EAAE,CAAC,QAAQ,CAAC;AACtC,CAAC;AAED;;;;AAIG;SACa,iBAAiB,GAAA;AAC/B,IAAA,OAAO,iBAAiB,EAAE,CAAC,OAAO,CAAC;AACrC,CAAC;AAED;;;AAGG;AACH,SAAS,eAAe,CAAC,IAAY,EAAA;AACnC,IAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC/B;;;;"}

package/dist/esm/ResourceTimeline/ResourceTimeline.mjs

@@ -269,7 +269,7 @@ function CommunicationTimelineItem(props) {
     const { classes } = useStyles();
     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) {