@medplum/react 2.0.17 → 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,18 +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.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",
@@ -705,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" }],
@@ -717,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" }],
@@ -729,9 +776,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSquare = createReactComponent("square", "IconSquare", [
       [
         "path",
@@ -743,9 +791,10 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconSwitchHorizontal = createReactComponent(
       "switch-horizontal",
       "IconSwitchHorizontal",
@@ -758,9 +807,10 @@
     );
 
     /**
-     * @tabler/icons-react v2.17.0 - MIT
+     * @tabler/icons-react v2.18.0 - MIT
      */
 
+
     var IconTableExport = createReactComponent("table-export", "IconTableExport", [
       [
         "path",
@@ -776,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" }],
@@ -791,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" }]
@@ -1390,6 +1442,102 @@
                         React.createElement(core$1.Text, { size: "xs", color: "dimmed", align: "center" }, props.version))))));
     }
 
+    /**
+     * Parses an HTML form and returns the result as a JavaScript object.
+     * @param form The HTML form element.
+     */
+    function parseForm(form) {
+        const result = {};
+        for (const element of Array.from(form.elements)) {
+            if (element instanceof HTMLInputElement) {
+                parseInputElement(result, element);
+            }
+            else if (element instanceof HTMLTextAreaElement) {
+                result[element.name] = element.value;
+            }
+            else if (element instanceof HTMLSelectElement) {
+                parseSelectElement(result, element);
+            }
+        }
+        return result;
+    }
+    /**
+     * Parses an HTML input element.
+     * Sets the name/value pair in the result,
+     * but only if the element is enabled and checked.
+     * @param el The input element.
+     * @param result The result builder.
+     */
+    function parseInputElement(result, el) {
+        if (el.disabled) {
+            // Ignore disabled elements
+            return;
+        }
+        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
+            // Ignore unchecked radio or checkbox elements
+            return;
+        }
+        result[el.name] = el.value;
+    }
+    /**
+     * Parses an HTML select element.
+     * Sets the name/value pair if one is selected.
+     * @param result The result builder.
+     * @param el The select element.
+     */
+    function parseSelectElement(result, el) {
+        result[el.name] = el.value;
+    }
+
+    function Form(props) {
+        return (React.createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
+                e.preventDefault();
+                const formData = parseForm(e.target);
+                if (props.onSubmit) {
+                    props.onSubmit(formData);
+                }
+            } }, props.children));
+    }
+
+    function BookmarkDialog(props) {
+        const medplum = useMedplum();
+        const config = medplum.getUserConfiguration();
+        const location = reactRouterDom.useLocation();
+        function submitHandler(formData) {
+            const { menuname, bookmarkname: name } = formData;
+            const target = location.pathname + location.search;
+            const newConfig = core.deepClone(config);
+            const menu = newConfig?.menu?.find(({ title }) => title === menuname);
+            menu?.link?.push({ name, target });
+            medplum
+                .updateResource(newConfig)
+                .then((res) => {
+                // refresh current config menu
+                config.menu = res.menu;
+                medplum.dispatchEvent({ type: 'change' });
+                notifications.showNotification({ color: 'green', message: 'Success' });
+                props.onOk();
+            })
+                .catch((err) => {
+                notifications.showNotification({ color: 'red', message: core.normalizeErrorString(err) });
+            });
+        }
+        return (React.createElement(core$1.Modal, { title: "Add Bookmark", closeButtonProps: { 'aria-label': 'Close' }, opened: props.visible, onClose: props.onCancel },
+            React.createElement(Form, { onSubmit: submitHandler },
+                React.createElement(core$1.Stack, null,
+                    React.createElement(SelectMenu, { config: config }),
+                    React.createElement(core$1.TextInput, { label: "Bookmark Name", type: "text", name: "bookmarkname", placeholder: "bookmark name", withAsterisk: true }),
+                    React.createElement(core$1.Group, { position: "right" },
+                        React.createElement(core$1.Button, { mt: "sm", type: "submit" }, "OK"))))));
+    }
+    function SelectMenu(props) {
+        function userConfigToMenu(config) {
+            return config?.menu?.map((menu) => menu.title);
+        }
+        const menus = userConfigToMenu(props.config);
+        return (React.createElement(core$1.NativeSelect, { name: "menuname", defaultValue: menus?.[0], label: "Select Menu Option", placeholder: "Menu", data: menus, withAsterisk: true }));
+    }
+
     function toKey(element) {
         return element.code;
     }
@@ -1413,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;
@@ -1498,6 +1649,10 @@
     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();
             e.preventDefault();
@@ -1511,40 +1666,27 @@
                 navigate(`/${resourceType}`);
             }
         }
-        return (React.createElement(core$1.Navbar, { width: { sm: 250 }, p: "xs" },
-            React.createElement(core$1.Navbar.Section, null,
-                React.createElement(CodeInput, { key: window.location.pathname, name: "resourceType", placeholder: "Resource Type", property: {
-                        binding: {
-                            valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',
-                        },
-                    }, onChange: (newValue) => navigateResourceType(newValue), creatable: false, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false })),
-            props.menus && (React.createElement(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)))))))))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(core$1.Navbar, { width: { sm: 250 }, p: "xs" },
+                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) {
@@ -1552,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();
@@ -1575,7 +1782,7 @@
                 main: {
                     background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
                 },
-            }, padding: 0, fixed: true, header: profile && React.createElement(Header, { logo: props.logo, version: props.version, navbarToggle: toggleNavbar }), navbar: profile && navbarOpen ? React.createElement(Navbar, { menus: props.menus, closeNavbar: closeNavbar }) : undefined },
+            }, 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,
                 React.createElement(React.Suspense, { fallback: React.createElement(Loading, null) }, props.children))));
     }
@@ -3256,63 +3463,6 @@
         return code === 'AA' || code === 'LL' || code === 'HH' || code === 'A';
     }
 
-    /**
-     * Parses an HTML form and returns the result as a JavaScript object.
-     * @param form The HTML form element.
-     */
-    function parseForm(form) {
-        const result = {};
-        for (const element of Array.from(form.elements)) {
-            if (element instanceof HTMLInputElement) {
-                parseInputElement(result, element);
-            }
-            else if (element instanceof HTMLTextAreaElement) {
-                result[element.name] = element.value;
-            }
-            else if (element instanceof HTMLSelectElement) {
-                parseSelectElement(result, element);
-            }
-        }
-        return result;
-    }
-    /**
-     * Parses an HTML input element.
-     * Sets the name/value pair in the result,
-     * but only if the element is enabled and checked.
-     * @param el The input element.
-     * @param result The result builder.
-     */
-    function parseInputElement(result, el) {
-        if (el.disabled) {
-            // Ignore disabled elements
-            return;
-        }
-        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
-            // Ignore unchecked radio or checkbox elements
-            return;
-        }
-        result[el.name] = el.value;
-    }
-    /**
-     * Parses an HTML select element.
-     * Sets the name/value pair if one is selected.
-     * @param result The result builder.
-     * @param el The select element.
-     */
-    function parseSelectElement(result, el) {
-        result[el.name] = el.value;
-    }
-
-    function Form(props) {
-        return (React.createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
-                e.preventDefault();
-                const formData = parseForm(e.target);
-                if (props.onSubmit) {
-                    props.onSubmit(formData);
-                }
-            } }, props.children));
-    }
-
     const useStyles$9 = core$1.createStyles((theme, { width, fill }) => ({
         paper: {
             maxWidth: width,
@@ -3792,7 +3942,12 @@
 
     function DefaultResourceTimeline(props) {
         return (React.createElement(ResourceTimeline, { value: props.resource, loadTimelineResources: async (medplum, resourceType, id) => {
-                return Promise.allSettled([medplum.readHistory(resourceType, id)]);
+                const ref = `${resourceType}/${id}`;
+                const _count = 100;
+                return Promise.allSettled([
+                    medplum.readHistory(resourceType, id),
+                    medplum.search('Task', { _filter: `based-on eq ${ref} or focus eq ${ref} or subject eq ${ref}`, _count }),
+                ]);
             } }));
     }
 
@@ -3910,6 +4065,7 @@
         'of-type': 'of type',
         missing: 'missing',
         identifier: 'identifier',
+        iterate: 'iterate',
     };
     /**
      * Sets the array of filters.
@@ -4506,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);
@@ -4580,7 +4737,7 @@
             return null;
         }
         const resourceType = props.search.resourceType;
-        const searchParams = core.globalSchema.types[resourceType].searchParams;
+        const searchParams = core.globalSchema.types[resourceType].searchParams ?? {};
         const filters = search.filters || [];
         return (React.createElement(core$1.Modal, { title: "Filters", closeButtonProps: { 'aria-label': 'Close' }, size: 900, opened: props.visible, onClose: props.onCancel },
             React.createElement("div", null,
@@ -5327,15 +5484,18 @@
     }
 
     function PatientTimeline(props) {
-        const loadTimelineResources = React.useCallback((medplum, _resourceType, id) => {
+        const loadTimelineResources = React.useCallback((medplum, resourceType, id) => {
+            const ref = `${resourceType}/${id}`;
+            const _count = 100;
             return Promise.allSettled([
                 medplum.readHistory('Patient', id),
-                medplum.search('Communication', 'subject=Patient/' + id),
-                medplum.search('Device', 'patient=Patient/' + id),
-                medplum.search('DeviceRequest', 'patient=Patient/' + id),
-                medplum.search('DiagnosticReport', 'subject=Patient/' + id),
-                medplum.search('Media', 'subject=Patient/' + id),
-                medplum.search('ServiceRequest', 'subject=Patient/' + id),
+                medplum.search('Communication', { subject: ref, _count }),
+                medplum.search('Device', { patient: ref, _count }),
+                medplum.search('DeviceRequest', { patient: ref, _count }),
+                medplum.search('DiagnosticReport', { subject: ref, _count }),
+                medplum.search('Media', { subject: ref, _count }),
+                medplum.search('ServiceRequest', { subject: ref, _count }),
+                medplum.search('Task', { subject: ref, _count }),
             ]);
         }, []);
         return (React.createElement(ResourceTimeline, { value: props.patient, loadTimelineResources: loadTimelineResources, createCommunication: (resource, sender, text) => ({
@@ -6925,12 +7085,15 @@
     }
 
     function ServiceRequestTimeline(props) {
-        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, loadTimelineResources: async (medplum, _resourceType, id) => {
+        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, loadTimelineResources: async (medplum, resourceType, id) => {
+                const ref = `${resourceType}/${id}`;
+                const _count = 100;
                 return Promise.allSettled([
                     medplum.readHistory('ServiceRequest', id),
-                    medplum.search('Communication', 'based-on=ServiceRequest/' + id),
-                    medplum.search('Media', '_count=100&based-on=ServiceRequest/' + id),
-                    medplum.search('DiagnosticReport', 'based-on=ServiceRequest/' + id),
+                    medplum.search('Communication', { 'based-on': ref, _count }),
+                    medplum.search('DiagnosticReport', { 'based-on': ref, _count }),
+                    medplum.search('Media', { 'based-on': ref, _count }),
+                    medplum.search('Task', { _filter: `based-on eq ${ref} or focus eq ${ref} or subject eq ${ref}`, _count }),
                 ]);
             }, createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
@@ -7240,7 +7403,7 @@
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
             React.createElement(OperationOutcomeAlert, { issues: issues }),
             React.createElement(core$1.Stack, { spacing: "xl" },
-                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
+                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'password') })),
             React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
                 onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
                 React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),