@medplum/react 2.0.5 → 2.0.7

package/dist/cjs/index.cjs

@@ -315,7 +315,7 @@
     }
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var defaultAttributes = {
@@ -331,7 +331,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var __defProp = Object.defineProperty;
@@ -394,7 +394,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconAdjustmentsHorizontal = createReactComponent(
@@ -414,7 +414,7 @@
     );
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconAlertCircle = createReactComponent("alert-circle", "IconAlertCircle", [
@@ -424,7 +424,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconBleachOff = createReactComponent("bleach-off", "IconBleachOff", [
@@ -439,7 +439,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconBleach = createReactComponent("bleach", "IconBleach", [
@@ -453,7 +453,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconBoxMultiple = createReactComponent("box-multiple", "IconBoxMultiple", [
@@ -474,7 +474,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconBracketsContain = createReactComponent("brackets-contain", "IconBracketsContain", [
@@ -486,7 +486,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconBucketOff = createReactComponent("bucket-off", "IconBucketOff", [
@@ -508,7 +508,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconBucket = createReactComponent("bucket", "IconBucket", [
@@ -523,7 +523,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconCalendar = createReactComponent("calendar", "IconCalendar", [
@@ -542,7 +542,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconCheck = createReactComponent("check", "IconCheck", [
@@ -550,7 +550,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconCheckbox = createReactComponent("checkbox", "IconCheckbox", [
@@ -565,7 +565,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconCircleMinus = createReactComponent("circle-minus", "IconCircleMinus", [
@@ -574,7 +574,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconCirclePlus = createReactComponent("circle-plus", "IconCirclePlus", [
@@ -584,7 +584,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconCloudUpload = createReactComponent("cloud-upload", "IconCloudUpload", [
@@ -600,7 +600,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconColumns = createReactComponent("columns", "IconColumns", [
@@ -615,7 +615,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconCurrencyDollar = createReactComponent("currency-dollar", "IconCurrencyDollar", [
@@ -630,7 +630,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconDots = createReactComponent("dots", "IconDots", [
@@ -640,7 +640,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconEdit = createReactComponent("edit", "IconEdit", [
@@ -662,7 +662,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconEqualNot = createReactComponent("equal-not", "IconEqualNot", [
@@ -672,7 +672,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconEqual = createReactComponent("equal", "IconEqual", [
@@ -681,7 +681,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconFileAlert = createReactComponent("file-alert", "IconFileAlert", [
@@ -698,7 +698,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconFilePlus = createReactComponent("file-plus", "IconFilePlus", [
@@ -715,7 +715,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconFilter = createReactComponent("filter", "IconFilter", [
@@ -729,7 +729,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconListDetails = createReactComponent("list-details", "IconListDetails", [
@@ -754,7 +754,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconMathGreater = createReactComponent("math-greater", "IconMathGreater", [
@@ -762,7 +762,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconMathLower = createReactComponent("math-lower", "IconMathLower", [
@@ -770,7 +770,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconMessage = createReactComponent("message", "IconMessage", [
@@ -786,7 +786,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconPin = createReactComponent("pin", "IconPin", [
@@ -802,7 +802,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconPinnedOff = createReactComponent("pinned-off", "IconPinnedOff", [
@@ -819,7 +819,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconSettings = createReactComponent("settings", "IconSettings", [
@@ -834,7 +834,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconSortAscending = createReactComponent("sort-ascending", "IconSortAscending", [
@@ -846,7 +846,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconSortDescending = createReactComponent("sort-descending", "IconSortDescending", [
@@ -858,21 +858,21 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconSquare = createReactComponent("square", "IconSquare", [
       [
         "path",
         {
-          d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z",
+          d: "M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
           key: "svg-0"
         }
       ]
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconTableExport = createReactComponent("table-export", "IconTableExport", [
@@ -886,7 +886,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconTrash = createReactComponent("trash", "IconTrash", [
@@ -901,7 +901,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.9.0 - MIT
      */
 
     var IconX = createReactComponent("x", "IconX", [
@@ -1030,7 +1030,7 @@
     const useStyles$d = core$1.createStyles((theme, { width, fill }) => ({
         paper: {
             maxWidth: width,
-            margin: `${theme.spacing.xl}px auto`,
+            margin: `${theme.spacing.xl} auto`,
             padding: fill ? 0 : theme.spacing.md,
             '@media (max-width: 800px)': {
                 padding: fill ? 0 : 8,
@@ -1619,7 +1619,7 @@
             gridTemplateColumns: '30% 70%',
             margin: 0,
             '& > dt, & > dd': {
-                padding: `${theme.spacing.sm}px ${theme.spacing.sm}px`,
+                padding: `${theme.spacing.sm} ${theme.spacing.sm}`,
                 borderTop: `0.1px solid ${theme.colors.gray[3]}`,
                 margin: 0,
             },
@@ -1627,7 +1627,7 @@
         compact: {
             gridTemplateColumns: '20% 80%',
             '& > dt, & > dd': {
-                padding: `0 ${theme.spacing.xs}px ${theme.spacing.xs}px 0`,
+                padding: `0 ${theme.spacing.xs} ${theme.spacing.xs} 0`,
                 border: 0,
             },
         },
@@ -1747,10 +1747,10 @@
             if (typeof to === 'string') {
                 return getStringHref(to);
             }
-            else if ('resourceType' in to) {
+            else if (core.isResource(to)) {
                 return getResourceHref(to);
             }
-            else if ('reference' in to) {
+            else if (core.isReference(to)) {
                 return getReferenceHref(to);
             }
         }
@@ -1944,80 +1944,57 @@
      */
     function useResource(value, setOutcome) {
         const medplum = useMedplum();
-        const referenceRef = React.useRef(undefined);
-        const resourceRef = React.useRef(undefined);
-        const lastRequestedRef = React.useRef(undefined);
-        // Parse the input value into a reference and resource
-        parseValue(value, referenceRef, resourceRef);
-        // Priority order:
-        // 1. Cached reference
-        // 2. Resource passed in as-is
-        // 3. Undefined
-        const currentResource = getCurrentValue(medplum, referenceRef, resourceRef);
-        // Keep track of the previous resource
-        // This is used to detect when the resource has changed
-        // We need a React "state" variable to trigger a re-render
-        const [prevResource, forceRerender] = React.useState(currentResource);
-        // Subscribe to changes to the passed-in value
+        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
+        const setResourceIfChanged = React.useCallback((r) => {
+            if (!core.deepEquals(r, resource)) {
+                setResource(r);
+            }
+        }, [resource, setResource]);
+        React.useEffect(() => {
+            setResourceIfChanged(getInitialResource(medplum, value));
+        }, [medplum, value, setResourceIfChanged]);
         React.useEffect(() => {
-            if (referenceRef.current && referenceRef.current.reference !== lastRequestedRef.current) {
-                lastRequestedRef.current = referenceRef.current.reference;
+            let subscribed = true;
+            if (core.isReference(value)) {
                 medplum
-                    .readReference(referenceRef.current)
-                    .then((newValue) => {
-                    if (!core.deepEquals(newValue, prevResource)) {
-                        forceRerender(newValue);
+                    .readReference(value)
+                    .then((r) => {
+                    if (subscribed) {
+                        setResourceIfChanged(r);
                     }
                 })
                     .catch((err) => {
-                    if (setOutcome) {
-                        setOutcome(core.normalizeOperationOutcome(err));
+                    if (subscribed) {
+                        setResourceIfChanged(undefined);
+                        if (setOutcome) {
+                            setOutcome(core.normalizeOperationOutcome(err));
+                        }
                     }
                 });
             }
-        }, [medplum, prevResource, value, setOutcome]);
-        return currentResource;
+            return (() => (subscribed = false));
+        }, [medplum, resource, value, setResourceIfChanged, setOutcome]);
+        return resource;
     }
     /**
-     * Parses the input into a reference and resource.
-     * @param value The input value to parse. Can be either a reference or a resource.
-     * @param referenceRef The output reference.
-     * @param resourceRef The output resource.
+     * Returns the initial resource value based on the input value.
+     * If the input value is a resource, returns the resource.
+     * If the input value is a reference to a resource available in the cache, returns the resource.
+     * Otherwise, returns undefined.
+     * @param medplum The medplum client.
+     * @param value The resource or reference to resource.
+     * @returns An initial resource if available; undefined otherwise.
      */
-    function parseValue(value, referenceRef, resourceRef) {
-        // Reset the reference and resource
-        referenceRef.current = undefined;
-        resourceRef.current = undefined;
-        if (!value) {
-            return;
-        }
-        if ('reference' in value) {
-            // If the input is a reference then we can use it as-is
-            referenceRef.current = value;
-        }
-        else if ('resourceType' in value) {
-            resourceRef.current = value;
-            if ('id' in value) {
-                // If the input is a resource with an ID, then we can still create a reference
-                referenceRef.current = { reference: value.resourceType + '/' + value.id };
+    function getInitialResource(medplum, value) {
+        if (value) {
+            if (core.isResource(value)) {
+                return value;
+            }
+            if (core.isReference(value)) {
+                return medplum.getCachedReference(value);
             }
         }
-    }
-    /**
-     * Returns the best currently available value.
-     * This is ***not*** asynchronous and returns immediately.
-     * It attempts to return the value from the cache, or the resource passed in as-is.
-     * @param medplum The Medplum client.
-     * @param referenceRef The reference.
-     * @param resourceRef The resource.
-     * @returns The currently available value.
-     */
-    function getCurrentValue(medplum, referenceRef, resourceRef) {
-        // Priority order:
-        // 1. Cached reference
-        // 2. Resource passed in as-is
-        // 3. Undefined
-        return (referenceRef.current && medplum.getCachedReference(referenceRef.current)) || resourceRef.current;
+        return undefined;
     }
 
     function ResourceForm(props) {
@@ -2027,7 +2004,7 @@
         const [value, setValue] = React.useState();
         React.useEffect(() => {
             if (defaultValue) {
-                setValue(JSON.parse(JSON.stringify(defaultValue)));
+                setValue(core.deepClone(defaultValue));
                 medplum.requestSchema(defaultValue.resourceType).then(setSchema).catch(console.log);
             }
         }, [medplum, defaultValue]);
@@ -2733,7 +2710,7 @@
                 setRepeat({ ...valueRef.current?.repeat, dayOfWeek: existing.filter((d) => d !== day) });
             }
         }
-        return (React.createElement(core$1.Modal, { title: "Timing", closeButtonLabel: "Close", opened: props.visible, onClose: () => props.onCancel() },
+        return (React.createElement(core$1.Modal, { title: "Timing", closeButtonProps: { 'aria-label': 'Close' }, opened: props.visible, onClose: () => props.onCancel() },
             React.createElement("div", { style: { padding: '5px 20px', textAlign: 'left' } },
                 React.createElement(FormSection, { title: "Starts on", htmlFor: 'timing-dialog-start' },
                     React.createElement(DateTimeInput, { name: 'timing-dialog-start', onChange: (newValue) => setStart(newValue) })),
@@ -3322,7 +3299,7 @@
                 borderTop: `0.1px solid ${theme.colors.gray[3]}`,
             },
             '& th, & td': {
-                padding: `${theme.spacing.sm}px ${theme.spacing.sm}px`,
+                padding: `${theme.spacing.sm} ${theme.spacing.sm}`,
                 verticalAlign: 'top',
             },
         },
@@ -3655,7 +3632,7 @@
                 title: 'Initializing upload...',
                 message: 'Please wait...',
                 autoClose: false,
-                disallowClose: true,
+                withCloseButton: false,
             });
         }
         function onUploadProgress(e) {
@@ -3665,7 +3642,7 @@
                 title: 'Uploading...',
                 message: getProgressMessage(e),
                 autoClose: false,
-                disallowClose: true,
+                withCloseButton: false,
             });
         }
         if (!resource) {
@@ -4438,7 +4415,7 @@
         const available = getFieldsList(typeDef)
             .filter((field) => !selected?.includes(field))
             .sort();
-        return (React.createElement(core$1.Modal, { title: "Fields", closeButtonLabel: "Close", opened: props.visible, onClose: props.onCancel },
+        return (React.createElement(core$1.Modal, { title: "Fields", closeButtonProps: { 'aria-label': 'Close' }, opened: props.visible, onClose: props.onCancel },
             React.createElement("div", null,
                 React.createElement("table", { style: { margin: 'auto' } },
                     React.createElement("thead", null,
@@ -4572,7 +4549,7 @@
         const resourceType = props.search.resourceType;
         const searchParams = core.globalSchema.types[resourceType].searchParams;
         const filters = search.filters || [];
-        return (React.createElement(core$1.Modal, { title: "Filters", closeButtonLabel: "Close", size: 900, opened: props.visible, onClose: props.onCancel },
+        return (React.createElement(core$1.Modal, { title: "Filters", closeButtonProps: { 'aria-label': 'Close' }, size: 900, opened: props.visible, onClose: props.onCancel },
             React.createElement("div", null,
                 React.createElement("table", null,
                     React.createElement("colgroup", null,
@@ -4901,7 +4878,7 @@
         },
         control: {
             width: '100%',
-            padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+            padding: `${theme.spacing.xs} ${theme.spacing.md}`,
             '&:hover': {
                 backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
             },
@@ -5090,14 +5067,14 @@
                 React.createElement(core$1.Center, { style: { height: 150 } },
                     React.createElement(core$1.Text, { size: "xl", color: "dimmed" }, "No results")))),
             lastResult?.total !== undefined && lastResult.total > 0 && (React.createElement(core$1.Center, { m: "md", p: "md" },
-                React.createElement(core$1.Pagination, { page: getPage(search), total: getTotalPages(search, lastResult.total), onChange: (newPage) => emitSearchChange(setPage(search, newPage)), getItemAriaLabel: (page) => {
-                        switch (page) {
-                            case 'prev':
-                                return 'Previous page';
+                React.createElement(core$1.Pagination, { value: getPage(search), total: getTotalPages(search, lastResult.total), onChange: (newPage) => emitSearchChange(setPage(search, newPage)), getControlProps: (control) => {
+                        switch (control) {
+                            case 'previous':
+                                return { 'aria-label': 'Previous page' };
                             case 'next':
-                                return 'Next page';
+                                return { 'aria-label': 'Next page' };
                             default:
-                                return undefined;
+                                return {};
                         }
                     } }))),
             outcome && (React.createElement("div", { "data-testid": "search-error" },
@@ -5759,7 +5736,7 @@
                 options.push([optionName, optionValue]);
             }
         }
-        return (React.createElement(core$1.Radio.Group, { name: name, orientation: "vertical", defaultValue: defaultValue, onChange: (newValue) => {
+        return (React.createElement(core$1.Radio.Group, { name: name, defaultValue: defaultValue, onChange: (newValue) => {
                 const option = options.find((option) => option[0] === newValue);
                 if (option) {
                     const optionValue = option[1];
@@ -5907,7 +5884,7 @@
         const { classes, cx } = useStyles$4();
         const resource = props.item;
         const item = props.item;
-        const isResource = 'resourceType' in props.item;
+        const isResource = core.isResource(props.item);
         const isContainer = isResource || item.type === exports.QuestionnaireItemType.group;
         const linkId = item.linkId ?? '[untitled]';
         const editing = props.selectedKey === props.item.id;
@@ -6644,13 +6621,13 @@
             border: 0,
             color: theme.colors.gray[5],
             fontFamily: theme.fontFamilyMonospace,
-            padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
             textAlign: 'right',
         },
         line: {
             fontFamily: theme.fontFamilyMonospace,
             fontSize: theme.fontSizes.sm,
-            padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
         },
         pre: {
             margin: 0,