@medplum/react 2.0.18 → 2.0.19

package/dist/cjs/index.cjs

@@ -154,7 +154,7 @@
     }
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
     var defaultAttributes = {
@@ -170,9 +170,10 @@
     };
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var __defProp = Object.defineProperty;
     var __defProps = Object.defineProperties;
     var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -233,9 +234,10 @@
     };
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconAdjustmentsHorizontal = createReactComponent(
       "adjustments-horizontal",
       "IconAdjustmentsHorizontal",
@@ -253,9 +255,10 @@
     );
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconAlertCircle = createReactComponent("alert-circle", "IconAlertCircle", [
       ["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }],
       ["path", { d: "M12 8v4", key: "svg-1" }],
@@ -263,9 +266,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconBleachOff = createReactComponent("bleach-off", "IconBleachOff", [
       [
         "path",
@@ -278,9 +282,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconBleach = createReactComponent("bleach", "IconBleach", [
       [
         "path",
@@ -292,9 +297,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconBoxMultiple = createReactComponent("box-multiple", "IconBoxMultiple", [
       [
         "path",
@@ -313,9 +319,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconBracketsContain = createReactComponent("brackets-contain", "IconBracketsContain", [
       ["path", { d: "M7 4h-4v16h4", key: "svg-0" }],
       ["path", { d: "M17 4h4v16h-4", key: "svg-1" }],
@@ -325,9 +332,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconBucketOff = createReactComponent("bucket-off", "IconBucketOff", [
       [
         "path",
@@ -347,9 +355,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconBucket = createReactComponent("bucket", "IconBucket", [
       ["path", { d: "M12 7m-8 0a8 4 0 1 0 16 0a8 4 0 1 0 -16 0", key: "svg-0" }],
       [
@@ -362,9 +371,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconCalendar = createReactComponent("calendar", "IconCalendar", [
       [
         "path",
@@ -381,17 +391,19 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconCheck = createReactComponent("check", "IconCheck", [
       ["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconCheckbox = createReactComponent("checkbox", "IconCheckbox", [
       ["path", { d: "M9 11l3 3l8 -8", key: "svg-0" }],
       [
@@ -404,26 +416,29 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconChevronDown = createReactComponent("chevron-down", "IconChevronDown", [
       ["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconCircleMinus = createReactComponent("circle-minus", "IconCircleMinus", [
       ["path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-0" }],
       ["path", { d: "M9 12l6 0", key: "svg-1" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconCirclePlus = createReactComponent("circle-plus", "IconCirclePlus", [
       ["path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-0" }],
       ["path", { d: "M9 12l6 0", key: "svg-1" }],
@@ -431,9 +446,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconCloudUpload = createReactComponent("cloud-upload", "IconCloudUpload", [
       [
         "path",
@@ -447,9 +463,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconColumns = createReactComponent("columns", "IconColumns", [
       ["path", { d: "M4 6l5.5 0", key: "svg-0" }],
       ["path", { d: "M4 10l5.5 0", key: "svg-1" }],
@@ -462,9 +479,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconCurrencyDollar = createReactComponent("currency-dollar", "IconCurrencyDollar", [
       [
         "path",
@@ -477,9 +495,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconDots = createReactComponent("dots", "IconDots", [
       ["path", { d: "M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }],
       ["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-1" }],
@@ -487,9 +506,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconEdit = createReactComponent("edit", "IconEdit", [
       [
         "path",
@@ -509,9 +529,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconEqualNot = createReactComponent("equal-not", "IconEqualNot", [
       ["path", { d: "M5 10h14", key: "svg-0" }],
       ["path", { d: "M5 14h14", key: "svg-1" }],
@@ -519,18 +540,20 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconEqual = createReactComponent("equal", "IconEqual", [
       ["path", { d: "M5 10h14", key: "svg-0" }],
       ["path", { d: "M5 14h14", key: "svg-1" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconFileAlert = createReactComponent("file-alert", "IconFileAlert", [
       ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }],
       [
@@ -545,9 +568,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconFilePlus = createReactComponent("file-plus", "IconFilePlus", [
       ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }],
       [
@@ -562,9 +586,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconFilter = createReactComponent("filter", "IconFilter", [
       [
         "path",
@@ -576,9 +601,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconListDetails = createReactComponent("list-details", "IconListDetails", [
       ["path", { d: "M13 5h8", key: "svg-0" }],
       ["path", { d: "M13 9h5", key: "svg-1" }],
@@ -601,9 +627,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconLogout = createReactComponent("logout", "IconLogout", [
       [
         "path",
@@ -612,29 +639,33 @@
           key: "svg-0"
         }
       ],
-      ["path", { d: "M7 12h14l-3 -3m0 6l3 -3", key: "svg-1" }]
+      ["path", { d: "M9 12h12l-3 -3", key: "svg-1" }],
+      ["path", { d: "M18 15l3 -3", key: "svg-2" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconMathGreater = createReactComponent("math-greater", "IconMathGreater", [
       ["path", { d: "M5 18l14 -6l-14 -6", key: "svg-0" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconMathLower = createReactComponent("math-lower", "IconMathLower", [
       ["path", { d: "M19 18l-14 -6l14 -6", key: "svg-0" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconMessage = createReactComponent("message", "IconMessage", [
       ["path", { d: "M8 9h8", key: "svg-0" }],
       ["path", { d: "M8 13h6", key: "svg-1" }],
@@ -648,9 +679,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconPin = createReactComponent("pin", "IconPin", [
       [
         "path",
@@ -664,9 +696,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconPinnedOff = createReactComponent("pinned-off", "IconPinnedOff", [
       ["path", { d: "M3 3l18 18", key: "svg-0" }],
       [
@@ -681,27 +714,30 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconPlus = createReactComponent("plus", "IconPlus", [
       ["path", { d: "M12 5l0 14", key: "svg-0" }],
       ["path", { d: "M5 12l14 0", key: "svg-1" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSearch = createReactComponent("search", "IconSearch", [
       ["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }],
       ["path", { d: "M21 21l-6 -6", key: "svg-1" }]
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSettings = createReactComponent("settings", "IconSettings", [
       [
         "path",
@@ -714,9 +750,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSortAscending = createReactComponent("sort-ascending", "IconSortAscending", [
       ["path", { d: "M4 6l7 0", key: "svg-0" }],
       ["path", { d: "M4 12l7 0", key: "svg-1" }],
@@ -726,9 +763,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSortDescending = createReactComponent("sort-descending", "IconSortDescending", [
       ["path", { d: "M4 6l9 0", key: "svg-0" }],
       ["path", { d: "M4 12l7 0", key: "svg-1" }],
@@ -738,9 +776,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSquare = createReactComponent("square", "IconSquare", [
       [
         "path",
@@ -752,9 +791,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSwitchHorizontal = createReactComponent(
       "switch-horizontal",
       "IconSwitchHorizontal",
@@ -767,9 +807,10 @@
     );
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconTableExport = createReactComponent("table-export", "IconTableExport", [
       [
         "path",
@@ -785,9 +826,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconTrash = createReactComponent("trash", "IconTrash", [
       ["path", { d: "M4 7l16 0", key: "svg-0" }],
       ["path", { d: "M10 11l0 6", key: "svg-1" }],
@@ -800,9 +842,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconX = createReactComponent("x", "IconX", [
       ["path", { d: "M18 6l-12 12", key: "svg-0" }],
       ["path", { d: "M6 6l12 12", key: "svg-1" }]
@@ -1518,6 +1561,9 @@
         const medplum = useMedplum();
         const { elementDefinition, creatable, clearable, ...rest } = props;
         const loadValues = React.useCallback(async (input, signal) => {
+            if (!elementDefinition.binding) {
+                return [];
+            }
             const system = elementDefinition.binding?.valueSet;
             const valueSet = await medplum.searchValueSet(system, input, { signal });
             const valueSetElements = valueSet.expansion?.contains;
@@ -1603,6 +1649,9 @@
     function Navbar(props) {
         const { classes } = useStyles$f();
         const navigate = useMedplumNavigate();
+        const location = reactRouterDom.useLocation();
+        const [searchParams] = reactRouterDom.useSearchParams();
+        const activeLink = getActiveLink(location.pathname, searchParams, props.menus);
         const [bookmarkDialogVisible, setBookmarkDialogVisible] = React.useState(false);
         function onLinkClick(e, to) {
             e.stopPropagation();
@@ -1619,42 +1668,25 @@
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(core$1.Navbar, { width: { sm: 250 }, p: "xs" },
-                React.createElement(core$1.Navbar.Section, { mb: "sm" },
-                    React.createElement(CodeInput, { key: window.location.pathname, name: "resourceType", placeholder: "Resource Type", property: {
-                            binding: {
-                                valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',
-                            },
-                        }, onChange: (newValue) => navigateResourceType(newValue), creatable: false, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false })),
-                React.createElement(core$1.Navbar.Section, { grow: true },
-                    props.menus?.map((menu) => (React.createElement(React.Fragment, { key: `menu-${menu.title}` },
-                        React.createElement(core$1.Text, { className: classes.menuTitle }, menu.title),
-                        menu.links?.map((link) => (React.createElement(NavbarLink, { key: link.href, to: link.href, onClick: (e) => onLinkClick(e, link.href) },
-                            React.createElement(NavLinkIcon, { to: link.href, icon: link.icon }),
-                            React.createElement("span", null, link.label))))))),
-                    props.displayAddBookmark && (React.createElement(core$1.Button, { variant: "subtle", size: "xs", mt: "xl", leftIcon: React.createElement(IconPlus, { size: "0.75rem" }), onClick: () => setBookmarkDialogVisible(true) }, "Add Bookmark")))),
+                React.createElement(core$1.ScrollArea, null,
+                    React.createElement(core$1.Navbar.Section, { mb: "sm" },
+                        React.createElement(CodeInput, { key: window.location.pathname, name: "resourceType", placeholder: "Resource Type", property: {
+                                binding: {
+                                    valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',
+                                },
+                            }, onChange: (newValue) => navigateResourceType(newValue), creatable: false, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false })),
+                    React.createElement(core$1.Navbar.Section, { grow: true },
+                        props.menus?.map((menu) => (React.createElement(React.Fragment, { key: `menu-${menu.title}` },
+                            React.createElement(core$1.Text, { className: classes.menuTitle }, menu.title),
+                            menu.links?.map((link) => (React.createElement(NavbarLink, { key: link.href, to: link.href, active: link.href === activeLink?.href, onClick: (e) => onLinkClick(e, link.href) },
+                                React.createElement(NavLinkIcon, { to: link.href, icon: link.icon }),
+                                React.createElement("span", null, link.label))))))),
+                        props.displayAddBookmark && (React.createElement(core$1.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) })));
     }
     function NavbarLink(props) {
         const { classes, cx } = useStyles$f();
-        const location = reactRouterDom.useLocation();
-        const [searchParams] = reactRouterDom.useSearchParams();
-        const toUrl = new URL(props.to, window.location.protocol + '//' + window.location.host);
-        const isActive = location.pathname === toUrl.pathname && matchesParams(searchParams, toUrl);
-        return (React.createElement(MedplumLink, { onClick: props.onClick, to: props.to, className: cx(classes.link, { [classes.linkActive]: isActive }) }, props.children));
-    }
-    /**
-     * Returns true if the search params match.
-     * @param searchParams The current search params.
-     * @param toUrl The destination URL of the link.
-     * @returns True if the search params match.
-     */
-    function matchesParams(searchParams, toUrl) {
-        for (const [key, value] of toUrl.searchParams.entries()) {
-            if (searchParams.get(key) !== value) {
-                return false;
-            }
-        }
-        return true;
+        return (React.createElement(MedplumLink, { onClick: props.onClick, to: props.to, className: cx(classes.link, { [classes.linkActive]: props.active }) }, props.children));
     }
     function NavLinkIcon(props) {
         if (props.icon) {
@@ -1662,6 +1694,71 @@
         }
         return React.createElement(core$1.Space, { w: 30 });
     }
+    /**
+     * Returns the best "active" link for the menu.
+     * In most cases, the navbar links are simple, and an exact match can determine which link is active.
+     * However, we ignore some search parameters to support pagination.
+     * But we cannot ignore all search parameters, to support separate links based on search filters.
+     * So in the end, we use a simple scoring system based on the number of matching query search params.
+     * @param currentPathname The web browser current pathname.
+     * @param currentSearchParams The web browser current search parameters.
+     * @param menus Collection of navbar menus and links.
+     * @returns The active link if one is found.
+     */
+    function getActiveLink(currentPathname, currentSearchParams, menus) {
+        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;
+                        }
+                    }
+                }
+            }
+        }
+        return bestLink;
+    }
+    /**
+     * Calculates a score for a link.
+     * Zero means "does not match at all".
+     * One means "matches the pathname only".
+     * Additional increases for each matching search parameter.
+     * Ignores pagination parameters "_count" and "_offset".
+     * @param currentPathname The web browser current pathname.
+     * @param currentSearchParams The web browser current search parameters.
+     * @param linkHref A candidate link href.
+     * @returns The link score.
+     */
+    function getLinkScore(currentPathname, currentSearchParams, linkHref) {
+        const linkUrl = new URL(linkHref, 'https://example.com');
+        if (currentPathname !== linkUrl.pathname) {
+            return 0;
+        }
+        const ignoredParams = ['_count', '_offset'];
+        for (const [key, value] of linkUrl.searchParams.entries()) {
+            if (ignoredParams.includes(key)) {
+                continue;
+            }
+            if (currentSearchParams.get(key) !== value) {
+                return 0;
+            }
+        }
+        let count = 1;
+        for (const [key, value] of currentSearchParams.entries()) {
+            if (ignoredParams.includes(key)) {
+                continue;
+            }
+            if (linkUrl.searchParams.get(key) === value) {
+                count++;
+            }
+        }
+        return count;
+    }
 
     function AppShell(props) {
         const theme = core$1.useMantineTheme();
@@ -4565,7 +4662,8 @@
         const { resourceType, filter } = props;
         const searchParam = core.globalSchema.types[resourceType]?.searchParams?.[filter.code];
         if (searchParam) {
-            if (searchParam.type === 'reference') {
+            if (searchParam.type === 'reference' &&
+                (filter.operator === core.Operator.EQUALS || filter.operator === core.Operator.NOT_EQUALS)) {
                 return React.createElement(ResourceName, { value: { reference: filter.value } });
             }
             const searchParamDetails = core.getSearchParameterDetails(resourceType, searchParam);