@medplum/react 0.9.27 → 0.9.30

package/dist/cjs/index.js

@@ -333,7 +333,7 @@
         var _a, _b;
         const inputRef = React.useRef(null);
         const [focused, setFocused] = React.useState(false);
-        const [lastValue, setLastValue] = React.useState('');
+        const [lastValue, setLastValue] = React.useState(undefined);
         const [timer, setTimer] = React.useState();
         const [dropDownVisible, setDropDownVisible] = React.useState(false);
         const [values, setValues] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : []);
@@ -387,8 +387,12 @@
         }
         function handleFocus() {
             setFocused(true);
+            if (props.loadOnFocus) {
+                handleInput();
+            }
         }
         function handleBlur() {
+            tryAddOption();
             setFocused(false);
             dismissOnDelay();
         }
@@ -526,13 +530,6 @@
                 // Nothing has changed, move on
                 return;
             }
-            if (!value) {
-                setDropDownVisible(false);
-                setLastValue('');
-                setOptions([]);
-                setSelectedIndex(-1);
-                return;
-            }
             setLastValue(value);
             const newAbortController = new AbortController();
             setAbortController(newAbortController);
@@ -752,7 +749,7 @@
         React.useEffect(() => {
             if (defaultValue) {
                 setValue(JSON.parse(JSON.stringify(defaultValue)));
-                medplum.requestSchema(defaultValue.resourceType).then(setSchema);
+                medplum.requestSchema(defaultValue.resourceType).then(setSchema).catch(console.log);
             }
         }, [medplum, defaultValue]);
         if (!schema || !value) {
@@ -845,8 +842,10 @@
         if (value.text) {
             return React__default["default"].createElement(React__default["default"].Fragment, null, value.text);
         }
-        if (value.coding && value.coding.length > 0) {
-            return React__default["default"].createElement(CodingDisplay, { value: value.coding[0] });
+        if (value.coding) {
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, value.coding.map((coding, index) => (React__default["default"].createElement(React__default["default"].Fragment, { key: 'coding-' + index },
+                index > 0 && React__default["default"].createElement(React__default["default"].Fragment, null, ', '),
+                React__default["default"].createElement(CodingDisplay, { value: coding }))))));
         }
         return null;
     }
@@ -888,13 +887,6 @@
             _a.map((telecom, index) => (React__default["default"].createElement(ContactPointDisplay, { key: 'telecom-' + index, value: telecom })))));
     }
 
-    function DateTimeDisplay(props) {
-        if (!props.value) {
-            return null;
-        }
-        return React__default["default"].createElement(React__default["default"].Fragment, null, new Date(props.value).toLocaleString());
-    }
-
     function HumanNameDisplay(props) {
         const name = props.value;
         if (!name) {
@@ -911,17 +903,6 @@
             _b.value));
     }
 
-    function PeriodDisplay(props) {
-        const value = props.value;
-        if (!value || (!value.start && !value.end)) {
-            return null;
-        }
-        return (React__default["default"].createElement("span", null,
-            React__default["default"].createElement(DateTimeDisplay, { value: value.start }),
-            "-",
-            React__default["default"].createElement(DateTimeDisplay, { value: value.end })));
-    }
-
     function QuantityDisplay(props) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, formatQuantityString(props.value));
     }
@@ -1023,7 +1004,7 @@
                 return React__default["default"].createElement(ReferenceDisplay, { value: { reference: value }, link: props.link });
             case core.PropertyType.dateTime:
             case core.PropertyType.instant:
-                return React__default["default"].createElement(DateTimeDisplay, { value: value });
+                return React__default["default"].createElement("div", null, core.formatDateTime(value));
             case core.PropertyType.markdown:
                 return React__default["default"].createElement("pre", null, value);
             case core.PropertyType.Address:
@@ -1045,7 +1026,7 @@
             case core.PropertyType.Identifier:
                 return React__default["default"].createElement(IdentifierDisplay, { value: value });
             case core.PropertyType.Period:
-                return React__default["default"].createElement(PeriodDisplay, { value: value });
+                return React__default["default"].createElement("div", null, core.formatPeriod(value));
             case core.PropertyType.Quantity:
                 return React__default["default"].createElement(QuantityDisplay, { value: value });
             case core.PropertyType.Range:
@@ -1054,6 +1035,8 @@
                 return React__default["default"].createElement(RatioDisplay, { value: value });
             case core.PropertyType.Reference:
                 return React__default["default"].createElement(ReferenceDisplay, { value: value, link: props.link });
+            case core.PropertyType.Timing:
+                return React__default["default"].createElement("div", null, core.formatTiming(value));
             default:
                 if (!(property === null || property === void 0 ? void 0 : property.path)) {
                     throw Error(`Displaying property of type ${props.propertyType} requires element definition path`);
@@ -1124,7 +1107,7 @@
                 return medplum.searchValueSet(system, input).then((valueSet) => {
                     return valueSet.expansion.contains.map(valueSetElementToCodeableConcept);
                 });
-            }, buildUnstructured: buildUnstructured, getId: getId, getDisplay: getDisplay, name: props.name, defaultValue: defaultValue, onChange: (values) => {
+            }, buildUnstructured: buildUnstructured, getId: getId, getDisplay: getDisplay, name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
                 if (props.onChange) {
                     props.onChange(values[0]);
                 }
@@ -1172,7 +1155,7 @@
                     contains.forEach((e) => (cachedDisplayValues[e.code] = e.display));
                     return contains.map((e) => e.code);
                 });
-            }, buildUnstructured: (str) => str, getId: (item) => item, getDisplay: (item) => React__default["default"].createElement(React__default["default"].Fragment, null, cachedDisplayValues[item] || item), name: props.name, defaultValue: defaultValue, onChange: (values) => {
+            }, buildUnstructured: (str) => str, getId: (item) => item, getDisplay: (item) => React__default["default"].createElement(React__default["default"].Fragment, null, cachedDisplayValues[item] || item), name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
                 if (props.onChange) {
                     props.onChange(values[0]);
                 }
@@ -1195,7 +1178,7 @@
                         display: e.display,
                     }));
                 });
-            }, buildUnstructured: (str) => ({ code: str }), getId: (item) => item.code, getDisplay: (item) => React__default["default"].createElement(CodingDisplay, { value: item }), name: props.name, defaultValue: defaultValue, onChange: (values) => {
+            }, buildUnstructured: (str) => ({ code: str }), getId: (item) => item.code, getDisplay: (item) => React__default["default"].createElement(CodingDisplay, { value: item }), name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
                 if (props.onChange) {
                     props.onChange(values[0]);
                 }
@@ -1313,7 +1296,7 @@
         // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings
         // See: https://stackoverflow.com/a/60368477
         const date = new Date(isoString);
-        if (!isValidDate(date)) {
+        if (!core.isValidDate(date)) {
             // If the input string was malformed, return an empty string.
             return '';
         }
@@ -1332,15 +1315,12 @@
         // JavaScript's Date() constructor defaults to the local time zone.
         // The Date() constructor will throw if the value is malformed.
         const date = new Date(localString);
-        if (!isValidDate(date)) {
+        if (!core.isValidDate(date)) {
             // If the input string was malformed, return an empty string.
             return '';
         }
         return date.toISOString();
     }
-    function isValidDate(date) {
-        return date instanceof Date && !isNaN(date.getTime());
-    }
 
     function TextArea(props) {
         const className = 'medplum-textarea' + (props.monospace ? ' monospace' : '');
@@ -1493,6 +1473,31 @@
             React__default["default"].createElement(QuantityInput, { name: props.name + '-denominator', defaultValue: value === null || value === void 0 ? void 0 : value.denominator, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { denominator: v })) })));
     }
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
     function ResourceName(props) {
         const resource = useResource(props.value);
         if (!resource) {
@@ -1517,18 +1522,18 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(Autocomplete, { loadOptions: (input) => {
+        return (React__default["default"].createElement(Autocomplete, { loadOptions: (input) => __awaiter(this, void 0, void 0, function* () {
                 return medplum
                     .search(resourceTypeRef.current, 'name=' + encodeURIComponent(input) + '&_count=10')
                     .then((bundle) => bundle.entry.map((entry) => entry.resource));
-            }, getId: (item) => {
+            }), getId: (item) => {
                 return item.id;
             }, getIcon: (item) => React__default["default"].createElement(Avatar, { value: item }), getDisplay: (item) => React__default["default"].createElement(ResourceName, { value: item }), getHelpText: (item) => {
                 if (item.resourceType === 'Patient' && item.birthDate) {
                     return 'DoB: ' + item.birthDate;
                 }
                 return undefined;
-            }, name: props.name, defaultValue: value ? [value] : undefined, className: props.className, placeholder: props.placeholder, onChange: (items) => {
+            }, name: props.name, defaultValue: value ? [value] : undefined, className: props.className, placeholder: props.placeholder, loadOnFocus: props.loadOnFocus, onChange: (items) => {
                 setValueWrapper(items.length > 0 ? items[0] : undefined);
             } }));
     }
@@ -1567,8 +1572,7 @@
     }
 
     function ResourceArrayInput(props) {
-        var _a;
-        const [values, setValues] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : []);
+        const [values, setValues] = React.useState(props.defaultValue && Array.isArray(props.defaultValue) ? props.defaultValue : []);
         const valuesRef = React.useRef();
         valuesRef.current = values;
         function setValuesWrapper(newValues) {
@@ -1607,6 +1611,120 @@
                             } }, "Add"))))));
     }
 
+    function Dialog(props) {
+        const [x, setX] = React.useState(100);
+        const [y, setY] = React.useState(100);
+        if (!props.visible) {
+            return null;
+        }
+        function handleMouseDown(downEvent) {
+            killEvent(downEvent);
+            const dragX = downEvent.clientX - x;
+            const dragY = downEvent.clientY - y;
+            function handleMouseMove(moveEvent) {
+                killEvent(moveEvent);
+                setX(moveEvent.clientX - dragX);
+                setY(moveEvent.clientY - dragY);
+            }
+            function handleMouseUp(upEvent) {
+                killEvent(upEvent);
+                document.removeEventListener('mouseup', handleMouseUp, true);
+                document.removeEventListener('mousemove', handleMouseMove, true);
+            }
+            document.addEventListener('mouseup', handleMouseUp, true);
+            document.addEventListener('mousemove', handleMouseMove, true);
+        }
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { className: "modal-dialog-bg" }),
+            React__default["default"].createElement("div", { className: "modal-dialog", "data-testid": "dialog", tabIndex: 0, style: { left: x + 'px', top: y + 'px' } },
+                React__default["default"].createElement("div", { className: "modal-dialog-title", onMouseDown: (e) => handleMouseDown(e) },
+                    React__default["default"].createElement("span", { className: "modal-dialog-title-text" }, props.title),
+                    React__default["default"].createElement("span", { className: "modal-dialog-title-close", tabIndex: 0, onClick: props.onCancel },
+                        React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
+                            React__default["default"].createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
+                React__default["default"].createElement("div", { className: "modal-dialog-content" }, props.children),
+                React__default["default"].createElement("div", { className: "modal-dialog-buttons" },
+                    React__default["default"].createElement(Button, { testid: "dialog-ok", onClick: props.onOk }, "OK"),
+                    React__default["default"].createElement(Button, { testid: "dialog-cancel", onClick: props.onCancel }, "Cancel")))));
+    }
+
+    const daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+    function TimingInput(props) {
+        const [value, setValue] = React.useState(props.defaultValue || {});
+        const [open, setOpen] = React.useState(false);
+        const valueRef = React.useRef();
+        valueRef.current = value;
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(InputRow, null,
+                React__default["default"].createElement("span", null, core.formatTiming(valueRef.current) || 'No repeat'),
+                React__default["default"].createElement(Button, { onClick: () => setOpen(true) }, "Edit")),
+            React__default["default"].createElement(TimingEditorDialog, { visible: open, defaultValue: valueRef.current, onOk: (newValue) => {
+                    if (props.onChange) {
+                        props.onChange(newValue);
+                    }
+                    setValue(newValue);
+                    setOpen(false);
+                }, onCancel: () => setOpen(false) })));
+    }
+    function TimingEditorDialog(props) {
+        var _a, _b;
+        const [value, setValue] = React.useState(props.defaultValue || {});
+        const valueRef = React.useRef();
+        valueRef.current = value;
+        function setStart(newStart) {
+            setValue(Object.assign(Object.assign({}, valueRef.current), { event: [newStart] }));
+        }
+        function setRepeat(repeat) {
+            setValue(Object.assign(Object.assign({}, valueRef.current), { repeat }));
+        }
+        function setPeriod(newPeriod) {
+            var _a;
+            setRepeat(Object.assign(Object.assign({}, (_a = valueRef.current) === null || _a === void 0 ? void 0 : _a.repeat), { period: newPeriod }));
+        }
+        function setPeriodUnit(newPeriodUnit) {
+            var _a;
+            setRepeat(Object.assign(Object.assign({}, (_a = valueRef.current) === null || _a === void 0 ? void 0 : _a.repeat), { periodUnit: newPeriodUnit }));
+        }
+        function setDayOfWeek(day, enabled) {
+            if (enabled) {
+                addDayOfWeek(day);
+            }
+            else {
+                removeDayOfWeek(day);
+            }
+        }
+        function addDayOfWeek(day) {
+            var _a, _b, _c;
+            const existing = ((_b = (_a = valueRef.current) === null || _a === void 0 ? void 0 : _a.repeat) === null || _b === void 0 ? void 0 : _b.dayOfWeek) || [];
+            if (!existing.includes(day)) {
+                setRepeat(Object.assign(Object.assign({}, (_c = valueRef.current) === null || _c === void 0 ? void 0 : _c.repeat), { dayOfWeek: [...existing, day] }));
+            }
+        }
+        function removeDayOfWeek(day) {
+            var _a, _b, _c;
+            const existing = ((_b = (_a = valueRef.current) === null || _a === void 0 ? void 0 : _a.repeat) === null || _b === void 0 ? void 0 : _b.dayOfWeek) || [];
+            if (existing.includes(day)) {
+                setRepeat(Object.assign(Object.assign({}, (_c = valueRef.current) === null || _c === void 0 ? void 0 : _c.repeat), { dayOfWeek: existing.filter((d) => d !== day) }));
+            }
+        }
+        return (React__default["default"].createElement(Dialog, { title: "Timing", visible: props.visible, onOk: () => props.onOk(value), onCancel: () => props.onCancel() },
+            React__default["default"].createElement("div", { style: { padding: '5px 20px', textAlign: 'left' } },
+                React__default["default"].createElement(FormSection, { title: "Starts on", htmlFor: 'timing-dialog-start' },
+                    React__default["default"].createElement(DateTimeInput, { name: 'timing-dialog-start', onChange: (newValue) => setStart(newValue) })),
+                React__default["default"].createElement(FormSection, { title: "Repeat every", htmlFor: 'timing-dialog-period' },
+                    React__default["default"].createElement(InputRow, null,
+                        React__default["default"].createElement(Input, { type: "number", step: 1, name: 'timing-dialog-period', defaultValue: (_a = value === null || value === void 0 ? void 0 : value.repeat) === null || _a === void 0 ? void 0 : _a.period, onChange: (newValue) => setPeriod(parseInt(newValue)) }),
+                        React__default["default"].createElement(Select, { name: 'timing-dialog-periodUnit', defaultValue: (_b = value === null || value === void 0 ? void 0 : value.repeat) === null || _b === void 0 ? void 0 : _b.periodUnit, onChange: (newValue) => setPeriodUnit(newValue) },
+                            React__default["default"].createElement("option", { value: "d" }, "day"),
+                            React__default["default"].createElement("option", { value: "wk" }, "week"),
+                            React__default["default"].createElement("option", { value: "mo" }, "month"),
+                            React__default["default"].createElement("option", { value: "a" }, "year")))),
+                React__default["default"].createElement(FormSection, { title: "Repeat on" },
+                    React__default["default"].createElement(InputRow, null, daysOfWeek.map((day) => (React__default["default"].createElement(React__default["default"].Fragment, { key: day },
+                        React__default["default"].createElement("label", { htmlFor: 'timing-dialog-repeat-' + day }, day.charAt(0).toUpperCase()),
+                        React__default["default"].createElement(Checkbox, { name: 'timing-dialog-repeat-' + day, onChange: (newValue) => setDayOfWeek(day, newValue) })))))))));
+    }
+
     function ResourcePropertyInput(props) {
         var _a, _b, _c;
         const property = props.property;
@@ -1719,6 +1837,8 @@
                 return React__default["default"].createElement(RatioInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Reference:
                 return (React__default["default"].createElement(ReferenceInput, { name: name, defaultValue: value, targetTypes: getTargetTypes(property), onChange: props.onChange }));
+            case core.PropertyType.Timing:
+                return React__default["default"].createElement(TimingInput, { name: name, defaultValue: value, onChange: props.onChange });
             default:
                 return (React__default["default"].createElement(BackboneElementInput, { typeName: core.buildTypeName((_a = property.path) === null || _a === void 0 ? void 0 : _a.split('.')), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
         }
@@ -1808,8 +1928,7 @@
                             React__default["default"].createElement(ResourceBadge, { value: interpreter, link: true }))))),
                 diagnosticReport.issued && (React__default["default"].createElement("dl", null,
                     React__default["default"].createElement("dt", null, "Issued"),
-                    React__default["default"].createElement("dd", null,
-                        React__default["default"].createElement(DateTimeDisplay, { value: diagnosticReport.issued })))),
+                    React__default["default"].createElement("dd", null, core.formatDateTime(diagnosticReport.issued)))),
                 diagnosticReport.status && (React__default["default"].createElement("dl", null,
                     React__default["default"].createElement("dt", null, "Status"),
                     React__default["default"].createElement("dd", null, core.capitalize(diagnosticReport.status))))),
@@ -1938,7 +2057,7 @@
         const medplum = useMedplum();
         const [schema, setSchema] = React.useState();
         React.useEffect(() => {
-            medplum.requestSchema(props.original.resourceType).then(setSchema);
+            medplum.requestSchema(props.original.resourceType).then(setSchema).catch(console.log);
         }, [medplum, props.original.resourceType]);
         if (!schema) {
             return null;
@@ -1991,7 +2110,7 @@
         const [schema, setSchema] = React.useState();
         React.useEffect(() => {
             if (value) {
-                medplum.requestSchema(value.resourceType).then(setSchema);
+                medplum.requestSchema(value.resourceType).then(setSchema).catch(console.log);
             }
         }, [medplum, value]);
         if (!schema || !value) {
@@ -2104,8 +2223,7 @@
                 React__default["default"].createElement("div", { className: "medplum-timeline-item-title" },
                     React__default["default"].createElement(ResourceName, { value: author, link: true }),
                     React__default["default"].createElement("div", { className: "medplum-timeline-item-subtitle" },
-                        React__default["default"].createElement(MedplumLink, { to: props.resource },
-                            React__default["default"].createElement(DateTimeDisplay, { value: (_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated })),
+                        React__default["default"].createElement(MedplumLink, { to: props.resource }, core.formatDateTime((_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated)),
                         React__default["default"].createElement("span", null, "\u00B7"),
                         React__default["default"].createElement(MedplumLink, { to: props.resource }, props.resource.resourceType))),
                 props.popupMenuItems && (React__default["default"].createElement("div", { className: "medplum-timeline-item-actions" },
@@ -2190,7 +2308,7 @@
                 setHistory({});
                 return;
             }
-            medplum.executeBatch(buildSearchRequests(resource)).then(handleBatchResponse);
+            medplum.executeBatch(buildSearchRequests(resource)).then(handleBatchResponse).catch(console.log);
         }, [medplum, resource, buildSearchRequests]);
         React.useEffect(() => {
             loadTimeline();
@@ -2241,9 +2359,12 @@
                 // Encounter not loaded yet
                 return;
             }
-            medplum.createResource(props.createCommunication(resource, sender, contentString)).then((result) => {
+            medplum
+                .createResource(props.createCommunication(resource, sender, contentString))
+                .then((result) => {
                 addResources([result]);
-            });
+            })
+                .catch(console.log);
         }
         /**
          * Adds a Media resource to the timeline.
@@ -2254,18 +2375,21 @@
                 // Encounter not loaded yet
                 return;
             }
-            medplum.createResource(props.createMedia(resource, sender, attachment)).then((result) => {
+            medplum
+                .createResource(props.createMedia(resource, sender, attachment))
+                .then((result) => {
                 addResources([result]);
-            });
+            })
+                .catch(console.log);
         }
         function setPriority(communication, priority) {
             return medplum.updateResource(Object.assign(Object.assign({}, communication), { priority }));
         }
         function onPin(communication) {
-            setPriority(communication, 'stat').then(loadTimeline);
+            setPriority(communication, 'stat').then(loadTimeline).catch(console.log);
         }
         function onUnpin(communication) {
-            setPriority(communication, 'routine').then(loadTimeline);
+            setPriority(communication, 'routine').then(loadTimeline).catch(console.log);
         }
         function onDetails(timelineItem) {
             navigate(`/${timelineItem.resourceType}/${timelineItem.id}`);
@@ -2551,43 +2675,6 @@
         return { name };
     }
 
-    function Dialog(props) {
-        const [x, setX] = React.useState(100);
-        const [y, setY] = React.useState(100);
-        if (!props.visible) {
-            return null;
-        }
-        function handleMouseDown(downEvent) {
-            killEvent(downEvent);
-            const dragX = downEvent.clientX - x;
-            const dragY = downEvent.clientY - y;
-            function handleMouseMove(moveEvent) {
-                killEvent(moveEvent);
-                setX(moveEvent.clientX - dragX);
-                setY(moveEvent.clientY - dragY);
-            }
-            function handleMouseUp(upEvent) {
-                killEvent(upEvent);
-                document.removeEventListener('mouseup', handleMouseUp, true);
-                document.removeEventListener('mousemove', handleMouseMove, true);
-            }
-            document.addEventListener('mouseup', handleMouseUp, true);
-            document.addEventListener('mousemove', handleMouseMove, true);
-        }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: "modal-dialog-bg" }),
-            React__default["default"].createElement("div", { className: "modal-dialog", "data-testid": "dialog", tabIndex: 0, style: { left: x + 'px', top: y + 'px' } },
-                React__default["default"].createElement("div", { className: "modal-dialog-title", onMouseDown: (e) => handleMouseDown(e) },
-                    React__default["default"].createElement("span", { className: "modal-dialog-title-text" }, props.title),
-                    React__default["default"].createElement("span", { className: "modal-dialog-title-close", tabIndex: 0, onClick: props.onCancel },
-                        React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
-                            React__default["default"].createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
-                React__default["default"].createElement("div", { className: "modal-dialog-content" }, props.children),
-                React__default["default"].createElement("div", { className: "modal-dialog-buttons" },
-                    React__default["default"].createElement(Button, { testid: "dialog-ok", onClick: props.onOk }, "OK"),
-                    React__default["default"].createElement(Button, { testid: "dialog-cancel", onClick: props.onCancel }, "Cancel")))));
-    }
-
     const searchParamToOperators = {
         string: [core.Operator.EQUALS, core.Operator.NOT, core.Operator.CONTAINS, core.Operator.EXACT],
         fulltext: [core.Operator.EQUALS, core.Operator.NOT, core.Operator.CONTAINS, core.Operator.EXACT],
@@ -3023,7 +3110,7 @@
             return (_a = resource.meta) === null || _a === void 0 ? void 0 : _a.versionId;
         }
         if (key === '_lastUpdated') {
-            return React__default["default"].createElement(DateTimeDisplay, { value: (_b = resource.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated });
+            return core.formatDateTime((_b = resource.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated);
         }
         // Priority 1: ElementDefinition by exact match
         if (field.elementDefinition && `${resource.resourceType}.${field.name}` === field.elementDefinition.path) {
@@ -3263,7 +3350,7 @@
             return React__default["default"].createElement(ResourceName, { value: { reference: filter.value } });
         }
         if (props.filter.code === '_lastUpdated' || (searchParam === null || searchParam === void 0 ? void 0 : searchParam.type) === 'datetime') {
-            return React__default["default"].createElement(DateTimeDisplay, { value: filter.value });
+            return React__default["default"].createElement(React__default["default"].Fragment, null, core.formatDateTime(filter.value));
         }
         return React__default["default"].createElement(React__default["default"].Fragment, null, filter.value);
     }
@@ -3727,11 +3814,14 @@
             }
         }
         React.useEffect(() => {
-            medplum.requestSchema(props.search.resourceType).then((newSchema) => {
+            medplum
+                .requestSchema(props.search.resourceType)
+                .then((newSchema) => {
                 // The schema could have the same object identity,
                 // so need to use the spread operator to kick React re-render.
                 setSchema(Object.assign({}, newSchema));
-            });
+            })
+                .catch(console.log);
         }, [medplum, props.search.resourceType]);
         const typeSchema = (_a = schema === null || schema === void 0 ? void 0 : schema.types) === null || _a === void 0 ? void 0 : _a[props.search.resourceType];
         if (!typeSchema) {
@@ -3915,11 +4005,14 @@
             }
         }
         React.useEffect(() => {
-            medplum.requestSchema(props.resourceType).then((newSchema) => {
+            medplum
+                .requestSchema(props.resourceType)
+                .then((newSchema) => {
                 // The schema could have the same object identity,
                 // so need to use the spread operator to kick React re-render.
                 setSchema(Object.assign({}, newSchema));
-            });
+            })
+                .catch(console.log);
         }, [medplum, props.resourceType]);
         const typeSchema = (_a = schema === null || schema === void 0 ? void 0 : schema.types) === null || _a === void 0 ? void 0 : _a[props.resourceType];
         if (!typeSchema) {
@@ -3951,31 +4044,6 @@
         return React__default["default"].createElement("div", { className: "medplum-footer" }, props.children);
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
     function HeaderSearchInput(props) {
         const medplum = useMedplum();
         return (React__default["default"].createElement(Autocomplete, { loadOptions: (input, signal) => __awaiter(this, void 0, void 0, function* () {
@@ -4186,9 +4254,13 @@
                                 logins.map((login) => {
                                     var _a, _b, _c, _d;
                                     return ((_a = login.profile) === null || _a === void 0 ? void 0 : _a.reference) !== core.getReferenceString(context.profile) && (React__default["default"].createElement("div", { className: "medplum-nav-menu-profile", key: (_b = login.profile) === null || _b === void 0 ? void 0 : _b.reference, onClick: () => {
-                                            medplum.setActiveLogin(login);
-                                            setUserMenuVisible(false);
-                                            window.location.reload();
+                                            medplum
+                                                .setActiveLogin(login)
+                                                .then(() => {
+                                                setUserMenuVisible(false);
+                                                window.location.reload();
+                                            })
+                                                .catch(console.log);
                                         } },
                                         React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-icon" },
                                             React__default["default"].createElement(Avatar, null)),
@@ -4274,14 +4346,33 @@
     }
 
     function PlanDefinitionBuilder(props) {
+        const medplum = useMedplum();
         const defaultValue = useResource(props.value);
+        const [schema, setSchema] = React.useState(undefined);
+        const [selectedKey, setSelectedKey] = React.useState();
+        const [hoverKey, setHoverKey] = React.useState();
         const [value, setValue] = React.useState();
+        function handleDocumentMouseOver() {
+            setHoverKey(undefined);
+        }
+        function handleDocumentClick() {
+            setSelectedKey(undefined);
+        }
         const valueRef = React.useRef();
         valueRef.current = value;
+        React.useEffect(() => {
+            medplum.requestSchema('PlanDefinition').then(setSchema).catch(console.log);
+        }, [medplum]);
         React.useEffect(() => {
             setValue(ensurePlanDefinitionKeys(defaultValue !== null && defaultValue !== void 0 ? defaultValue : { resourceType: 'PlanDefinition' }));
+            document.addEventListener('mouseover', handleDocumentMouseOver);
+            document.addEventListener('click', handleDocumentClick);
+            return () => {
+                document.removeEventListener('mouseover', handleDocumentMouseOver);
+                document.removeEventListener('click', handleDocumentClick);
+            };
         }, [defaultValue]);
-        if (!value) {
+        if (!schema || !value) {
             return null;
         }
         function changeProperty(property, newValue) {
@@ -4289,9 +4380,9 @@
         }
         return (React__default["default"].createElement("div", { className: "medplum-questionnaire-builder" },
             React__default["default"].createElement(Form, { testid: "questionnaire-form", onSubmit: () => props.onSubmit(value) },
-                React__default["default"].createElement(FormSection, { title: "Plan Title", description: "The display name of the 'Plan', something that can be ordered.", htmlFor: "title" },
+                React__default["default"].createElement(FormSection, { title: "Plan Title", htmlFor: "title" },
                     React__default["default"].createElement(Input, { defaultValue: value.title, onChange: (newValue) => changeProperty('title', newValue) })),
-                React__default["default"].createElement(ActionArrayBuilder, { actions: value.action || [], onChange: (x) => changeProperty('action', x) }),
+                React__default["default"].createElement(ActionArrayBuilder, { actions: value.action || [], selectedKey: selectedKey, setSelectedKey: setSelectedKey, hoverKey: hoverKey, setHoverKey: setHoverKey, onChange: (x) => changeProperty('action', x) }),
                 React__default["default"].createElement(Button, { type: "submit", size: "large" }, "Save"))));
     }
     function ActionArrayBuilder(props) {
@@ -4302,75 +4393,102 @@
         }
         function addAction(addedAction) {
             props.onChange([...actionsRef.current, addedAction]);
+            props.setSelectedKey(addedAction.id);
         }
         function removeAction(removedAction) {
             props.onChange(actionsRef.current.filter((i) => i !== removedAction));
         }
         return (React__default["default"].createElement("div", { className: "section" },
-            props.actions.map((i) => (React__default["default"].createElement("div", { key: i.id },
-                React__default["default"].createElement(ActionBuilder, { action: i, onChange: changeAction, onRemove: () => removeAction(i) })))),
+            props.actions.map((action) => (React__default["default"].createElement("div", { key: action.id },
+                React__default["default"].createElement(ActionBuilder, { action: action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: changeAction, onRemove: () => removeAction(action) })))),
             React__default["default"].createElement("div", { className: "bottom-actions" },
                 React__default["default"].createElement("a", { href: "#", onClick: (e) => {
-                        e.preventDefault();
+                        killEvent(e);
                         addAction({ id: generateId$1() });
                     } }, "Add action"))));
     }
     function ActionBuilder(props) {
         const { action } = props;
-        const [actionType, setActionType] = React.useState(getInitialActionType(action));
-        const actionRef = React.useRef();
-        actionRef.current = props.action;
+        const actionType = getInitialActionType(action);
+        const editing = props.selectedKey === props.action.id;
+        const hovering = props.hoverKey === props.action.id;
+        function onClick(e) {
+            e.stopPropagation();
+            props.setSelectedKey(props.action.id);
+        }
+        function onHover(e) {
+            killEvent(e);
+            props.setHoverKey(props.action.id);
+        }
+        const className = editing ? 'section editing' : hovering ? 'section hovering' : 'section';
+        return (React__default["default"].createElement("div", { "data-testid": action.id, className: className, onClick: onClick, onMouseOver: onHover },
+            editing ? (React__default["default"].createElement(ActionEditor, { action: action, actionType: actionType, onChange: props.onChange, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onRemove: props.onRemove })) : (React__default["default"].createElement(ActionDisplay, { action: action, actionType: actionType })),
+            React__default["default"].createElement("div", { className: "bottom-actions" },
+                React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+                        e.preventDefault();
+                        props.onRemove();
+                    } }, "Remove"))));
+    }
+    const timingProperty = {
+        path: 'PlanDefinition.action.timing[x]',
+        min: 0,
+        max: '1',
+        type: [{ code: 'dateTime' }, { code: 'Period' }, { code: 'Range' }, { code: 'Timing' }],
+    };
+    function ActionDisplay(props) {
+        const { action, actionType } = props;
+        const [propertyValue, propertyType] = getActionTiming(action);
+        return (React__default["default"].createElement("div", null,
+            React__default["default"].createElement("div", null,
+                action.title || 'Untitled',
+                " ",
+                actionType && `(${actionType})`),
+            action.definitionCanonical && (React__default["default"].createElement("div", null,
+                React__default["default"].createElement(ReferenceDisplay, { value: { reference: action.definitionCanonical } }))),
+            propertyValue && (React__default["default"].createElement("div", null,
+                React__default["default"].createElement(ResourcePropertyDisplay, { property: timingProperty, propertyType: propertyType, value: propertyValue })))));
+    }
+    function ActionEditor(props) {
+        const { action } = props;
+        const [actionType, setActionType] = React.useState(props.actionType);
         function changeProperty(property, value) {
-            props.onChange(Object.assign(Object.assign({}, actionRef.current), { [property]: value }));
+            props.onChange(Object.assign(Object.assign({}, action), { [property]: value }));
         }
-        return (React__default["default"].createElement("div", { className: "section" },
-            React__default["default"].createElement(FormSection, { title: "Action Title", description: "The name of the action, an operational task to be completed.", htmlFor: `actionTitle-${action.id}` },
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(FormSection, { title: "Title", htmlFor: `actionTitle-${action.id}` },
                 React__default["default"].createElement(Input, { name: `actionTitle-${action.id}`, defaultValue: action.title, onChange: (newValue) => changeProperty('title', newValue) })),
-            React__default["default"].createElement(FormSection, { title: "Action Type", description: "The type of the action to be performed.", htmlFor: `actionType-${action.id}` },
+            React__default["default"].createElement(FormSection, { title: "Type of Action", description: "The type of the action to be performed.", htmlFor: `actionType-${action.id}` },
                 React__default["default"].createElement(Select, { name: `actionType-${action.id}`, defaultValue: actionType, onChange: setActionType },
                     React__default["default"].createElement("option", null),
                     React__default["default"].createElement("option", { value: "appointment" }, "Appointment"),
-                    React__default["default"].createElement("option", { value: "documentation" }, "Documentation"),
                     React__default["default"].createElement("option", { value: "lab" }, "Lab"),
                     React__default["default"].createElement("option", { value: "questionnaire" }, "Questionnaire"),
-                    React__default["default"].createElement("option", { value: "shipping" }, "Shipping"),
                     React__default["default"].createElement("option", { value: "task" }, "Task"))),
-            action.action && action.action.length > 0 && (React__default["default"].createElement(ActionArrayBuilder, { actions: action.action, onChange: (x) => changeProperty('action', x) })),
+            action.action && action.action.length > 0 && (React__default["default"].createElement(ActionArrayBuilder, { actions: action.action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: (x) => changeProperty('action', x) })),
             (() => {
                 switch (actionType) {
                     case 'appointment':
-                        return React__default["default"].createElement("div", null, "Appointment details");
-                    case 'documentation':
-                        return React__default["default"].createElement("div", null, "Documentation details");
+                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Appointment", description: "The subject must schedule an appointment from the schedule.", resourceType: "Schedule", action: action, onChange: props.onChange }));
                     case 'lab':
-                        return React__default["default"].createElement(LabActionBuilder, { action: action, onChange: props.onChange });
+                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Lab", description: "The subject must complete the following lab panel.", resourceType: "ActivityDefinition", action: action, onChange: props.onChange }));
                     case 'questionnaire':
-                        return React__default["default"].createElement(QuestionnaireActionBuilder, { action: action, onChange: props.onChange });
-                    case 'shipping':
-                        return React__default["default"].createElement("div", null, "Shipping details");
+                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Questionnaire", description: "The subject must complete the selected questionnaire.", resourceType: "Questionnaire", action: action, onChange: props.onChange }));
                     case 'task':
-                        return React__default["default"].createElement("div", null, "Task details");
+                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Task", description: "The subject must complete the following task.", resourceType: "ActivityDefinition", action: action, onChange: props.onChange }));
                     default:
                         return null;
                 }
             })(),
-            React__default["default"].createElement("div", { className: "bottom-actions" },
-                React__default["default"].createElement("a", { href: "#", onClick: (e) => {
-                        e.preventDefault();
-                        props.onRemove();
-                    } }, "Remove"))));
+            React__default["default"].createElement(FormSection, { title: "Timing", description: "When the action should take place.", htmlFor: 'timing-' + action.id },
+                React__default["default"].createElement(ActionTimingInput, { name: 'timing-' + action.id, action: action, onChange: props.onChange }))));
     }
-    function LabActionBuilder(props) {
-        return (React__default["default"].createElement(FormSection, { title: "Lab Details", description: "Choose observations definitions", htmlFor: props.action.id },
-            React__default["default"].createElement("a", { href: "#", onClick: () => props.onChange(props.action) }, "Add")));
-    }
-    function QuestionnaireActionBuilder(props) {
+    function ActionResourceTypeBuilder(props) {
         const { id, definitionCanonical } = props.action;
-        const questionnaireRef = (definitionCanonical === null || definitionCanonical === void 0 ? void 0 : definitionCanonical.startsWith('Questionnaire/'))
+        const reference = (definitionCanonical === null || definitionCanonical === void 0 ? void 0 : definitionCanonical.startsWith(props.resourceType + '/'))
             ? { reference: definitionCanonical }
             : undefined;
-        return (React__default["default"].createElement(FormSection, { title: "Questionnaire", description: "Choose questionnaire", htmlFor: id },
-            React__default["default"].createElement(ResourceInput, { name: id, resourceType: "Questionnaire", defaultValue: questionnaireRef, onChange: (newValue) => {
+        return (React__default["default"].createElement(FormSection, { title: props.title, description: props.description, htmlFor: id },
+            React__default["default"].createElement(ResourceInput, { name: id, resourceType: props.resourceType, defaultValue: reference, loadOnFocus: true, onChange: (newValue) => {
                     if (newValue) {
                         props.onChange(Object.assign(Object.assign({}, props.action), { definitionCanonical: core.getReferenceString(newValue) }));
                     }
@@ -4379,13 +4497,30 @@
                     }
                 } })));
     }
+    function ActionTimingInput(props) {
+        const value = props.action;
+        const key = 'timing';
+        const [propertyValue, propertyType] = getActionTiming(value);
+        return (React__default["default"].createElement(ResourcePropertyInput, { property: timingProperty, name: "timing[x]", defaultValue: propertyValue, defaultPropertyType: propertyType, onChange: (newValue, propName) => {
+                props.onChange(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, timingProperty, newValue));
+            } }));
+    }
     function getInitialActionType(action) {
-        var _a;
-        if ((_a = action.definitionCanonical) === null || _a === void 0 ? void 0 : _a.startsWith('Questionnaire/')) {
+        var _a, _b, _c;
+        if ((_a = action.definitionCanonical) === null || _a === void 0 ? void 0 : _a.startsWith('Schedule')) {
+            return 'appointment';
+        }
+        if ((_b = action.definitionCanonical) === null || _b === void 0 ? void 0 : _b.startsWith('Questionnaire/')) {
             return 'questionnaire';
         }
+        if ((_c = action.definitionCanonical) === null || _c === void 0 ? void 0 : _c.startsWith('ActivityDefinition/')) {
+            return 'task';
+        }
         return undefined;
     }
+    function getActionTiming(action) {
+        return getValueAndType({ type: 'PlanDefinitionAction', value: action }, 'timing');
+    }
     let nextId$1 = 1;
     /**
      * Generates a unique ID.
@@ -4522,7 +4657,7 @@
         const questionnaire = useResource(props.questionnaire);
         const [response, setResponse] = React.useState();
         React.useEffect(() => {
-            medplum.requestSchema('Questionnaire').then(setSchema);
+            medplum.requestSchema('Questionnaire').then(setSchema).catch(console.log);
         }, [medplum]);
         React.useEffect(() => {
             setResponse(questionnaire ? buildInitialResponse(questionnaire) : undefined);
@@ -4565,6 +4700,7 @@
                 return (React__default["default"].createElement(CheckboxFormSection, { key: item.linkId, title: item.text, htmlFor: item.linkId },
                     React__default["default"].createElement(Checkbox, { name: item.linkId, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (newValue) => setResponseItem(index, {
                             linkId: item.linkId,
+                            text: item.text,
                             answer: [{ valueBoolean: newValue }],
                         }) })));
             }
@@ -4586,12 +4722,14 @@
         function onChangeItem(newResponseItems) {
             props.onChange({
                 linkId: item.linkId,
+                text: item.text,
                 item: newResponseItems,
             });
         }
         function onChangeAnswer(newResponseAnswer) {
             props.onChange({
                 linkId: item.linkId,
+                text: item.text,
                 answer: [newResponseAnswer],
             });
         }
@@ -4692,6 +4830,7 @@
         var _a, _b;
         return {
             linkId: item.linkId,
+            text: item.text,
             item: buildInitialResponseItems(item.item),
             answer: (_b = (_a = item.initial) === null || _a === void 0 ? void 0 : _a.map(buildInitialResponseAnswer)) !== null && _b !== void 0 ? _b : [],
         };
@@ -4724,7 +4863,7 @@
             setSelectedKey(undefined);
         }
         React.useEffect(() => {
-            medplum.requestSchema('Questionnaire').then(setSchema);
+            medplum.requestSchema('Questionnaire').then(setSchema).catch(console.log);
         }, [medplum]);
         React.useEffect(() => {
             setValue(ensureQuestionnaireKeys(defaultValue !== null && defaultValue !== void 0 ? defaultValue : { resourceType: 'Questionnaire' }));
@@ -4958,9 +5097,9 @@
             return clientId;
         }
         const origin = window.location.protocol + '//' + window.location.host;
-        const authorizedOrigins = (_b = (_a = "undefined") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+        const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://127.0.0.1:3000,http://localhost:6006,http://127.0.0.1:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
         if (authorizedOrigins.includes(origin)) {
-            return "undefined";
+            return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
         }
         return undefined;
     }
@@ -4981,10 +5120,15 @@
      * @returns Promise to a recaptcha token for the current user.
      */
     function getRecaptcha(siteKey) {
-        return new Promise((resolve) => {
-            grecaptcha.ready(() => {
-                grecaptcha.execute(siteKey, { action: 'submit' }).then(resolve);
-            });
+        return new Promise((resolve, reject) => {
+            grecaptcha.ready(() => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    resolve(yield grecaptcha.execute(siteKey, { action: 'submit' }));
+                }
+                catch (err) {
+                    reject(err);
+                }
+            }));
         });
     }
 
@@ -5029,7 +5173,7 @@
                             recaptchaToken,
                         };
                         const userLogin = yield medplum.startNewUser(registerRequest);
-                        handleAuthResponse(registerRequest, userLogin);
+                        yield handleAuthResponse(registerRequest, userLogin);
                     }
                     catch (err) {
                         setOutcome(err);
@@ -5056,7 +5200,7 @@
                                         lastName: googleClaims.family_name,
                                         email: googleClaims.email,
                                     };
-                                    handleAuthResponse(registerRequest, userLogin);
+                                    yield handleAuthResponse(registerRequest, userLogin);
                                 }
                                 catch (err) {
                                     setOutcome(err);
@@ -5106,7 +5250,7 @@
         const [responseBundle, setResponseBundle] = React.useState();
         React.useEffect(() => {
             if (requestGroup && !startedLoading) {
-                medplum.executeBatch(buildBatchRequest(requestGroup)).then(setResponseBundle);
+                medplum.executeBatch(buildBatchRequest(requestGroup)).then(setResponseBundle).catch(console.log);
                 setStartedLoading(true);
             }
         }, [medplum, requestGroup, startedLoading]);
@@ -5126,7 +5270,7 @@
                         "Last edited by\u00A0",
                         React__default["default"].createElement(ResourceName, { value: (_e = task === null || task === void 0 ? void 0 : task.meta) === null || _e === void 0 ? void 0 : _e.author }),
                         "\u00A0on\u00A0",
-                        React__default["default"].createElement(DateTimeDisplay, { value: (_f = task === null || task === void 0 ? void 0 : task.meta) === null || _f === void 0 ? void 0 : _f.lastUpdated })),
+                        core.formatDateTime((_f = task === null || task === void 0 ? void 0 : task.meta) === null || _f === void 0 ? void 0 : _f.lastUpdated)),
                     React__default["default"].createElement("div", null,
                         "Status: ",
                         React__default["default"].createElement(StatusBadge, { status: (task === null || task === void 0 ? void 0 : task.status) || 'unknown' }))),
@@ -5351,7 +5495,7 @@
         const [value, setValue] = React.useState(props.history);
         React.useEffect(() => {
             if (!props.history && props.resourceType && props.id) {
-                medplum.readHistory(props.resourceType, props.id).then((result) => setValue(result));
+                medplum.readHistory(props.resourceType, props.id).then(setValue).catch(console.log);
             }
         }, [medplum, props.history, props.resourceType, props.id]);
         if (!value) {
@@ -5429,7 +5573,10 @@
         const [value, setValue] = React.useState(props.history);
         React.useEffect(() => {
             if (!props.history && props.resourceType && props.id) {
-                medplum.readHistory(props.resourceType, props.id).then((result) => setValue(result));
+                medplum
+                    .readHistory(props.resourceType, props.id)
+                    .then(setValue)
+                    .catch(console.log);
             }
         }, [medplum, props.history, props.resourceType, props.id]);
         if (!value) {
@@ -5451,8 +5598,7 @@
         return (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", null,
                 React__default["default"].createElement(ResourceBadge, { value: (_a = props.version.meta) === null || _a === void 0 ? void 0 : _a.author, link: true })),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(DateTimeDisplay, { value: (_b = props.version.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated })),
+            React__default["default"].createElement("td", null, core.formatDateTime((_b = props.version.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated)),
             React__default["default"].createElement("td", null,
                 React__default["default"].createElement(MedplumLink, { to: getVersionUrl(props.version) }, (_c = props.version.meta) === null || _c === void 0 ? void 0 : _c.versionId))));
     }
@@ -5470,12 +5616,14 @@
         return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
     }
     function CalendarInput(props) {
+        const { onChangeMonth, onClick } = props;
         const [month, setMonth] = React.useState(getStartMonth);
         function moveMonth(delta) {
             setMonth((currMonth) => {
-                const prevMonth = new Date(currMonth.getTime());
-                prevMonth.setMonth(currMonth.getMonth() + delta);
-                return prevMonth;
+                const newMonth = new Date(currMonth.getTime());
+                newMonth.setMonth(currMonth.getMonth() + delta);
+                onChangeMonth(newMonth);
+                return newMonth;
             });
         }
         const grid = React.useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
@@ -5495,7 +5643,7 @@
                         React__default["default"].createElement("th", null, "THU"),
                         React__default["default"].createElement("th", null, "FRI"),
                         React__default["default"].createElement("th", null, "SAT"))),
-                React__default["default"].createElement("tbody", null, grid.map((week, weekIndex) => (React__default["default"].createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React__default["default"].createElement("td", { key: 'day-' + dayIndex }, day && (React__default["default"].createElement("button", { disabled: !day.available, onClick: () => props.onClick(day.date) }, day.date.getDate()))))))))))));
+                React__default["default"].createElement("tbody", null, grid.map((week, weekIndex) => (React__default["default"].createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React__default["default"].createElement("td", { key: 'day-' + dayIndex }, day && (React__default["default"].createElement("button", { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
     }
     function getStartMonth() {
         const result = new Date();
@@ -5514,7 +5662,6 @@
         while (d.getMonth() === startDate.getMonth()) {
             row.push({
                 date: new Date(d.getTime()),
-                // available: isAvailable(d),
                 available: isDayAvailable(d, slots),
             });
             if (d.getDay() === 6) {
@@ -5558,20 +5705,27 @@
         const [slots, setSlots] = React.useState();
         const slotsRef = React.useRef();
         slotsRef.current = slots;
+        const [month, setMonth] = React.useState(getStartMonth());
         const [date, setDate] = React.useState();
         const [slot, setSlot] = React.useState();
         const [info, setInfo] = React.useState();
         const [form, setForm] = React.useState();
         React.useEffect(() => {
             if (schedule) {
-                medplum.search('Slot', 'schedule=' + core.getReferenceString(schedule)).then((bundle) => {
-                    setSlots(bundle.entry.map((entry) => entry.resource));
-                });
+                setSlots([]);
+                medplum
+                    .searchResources('Slot', new URLSearchParams([
+                    ['schedule', core.getReferenceString(schedule)],
+                    ['start', 'gt' + month.toISOString()],
+                    ['start', 'lt' + new Date(month.getTime() + 31 * 24 * 60 * 60 * 1000).toISOString()],
+                ]))
+                    .then(setSlots)
+                    .catch(console.log);
             }
             else {
                 setSlots(undefined);
             }
-        }, [medplum, schedule]);
+        }, [medplum, schedule, month]);
         if (!schedule || !slots) {
             return null;
         }
@@ -5587,7 +5741,7 @@
             React__default["default"].createElement("div", { className: "medplum-calendar-selection-pane" },
                 !date && (React__default["default"].createElement("div", null,
                     React__default["default"].createElement("h3", null, "Select date"),
-                    React__default["default"].createElement(CalendarInput, { slots: slots, onClick: setDate }))),
+                    React__default["default"].createElement(CalendarInput, { slots: slots, onChangeMonth: setMonth, onClick: setDate }))),
                 date && !slot && (React__default["default"].createElement("div", null,
                     React__default["default"].createElement("h3", null, "Select time"),
                     slots.map((s) => {
@@ -5696,11 +5850,14 @@
         }
         return (React__default["default"].createElement(Document, { width: 450 }, (() => {
             if (!login) {
-                return (React__default["default"].createElement(AuthenticationForm, { clientId: props.clientId, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
+                return (React__default["default"].createElement(AuthenticationForm, { projectId: props.projectId, clientId: props.clientId, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
             }
             else if (memberships) {
                 return React__default["default"].createElement(ProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
             }
+            else if (props.projectId === 'new') {
+                return React__default["default"].createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse });
+            }
             else {
                 return React__default["default"].createElement("div", null, "Success");
             }
@@ -5714,6 +5871,7 @@
         return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
                 medplum
                     .startLogin({
+                    projectId: props.projectId,
                     clientId: props.clientId,
                     scope: props.scope,
                     nonce: props.nonce,
@@ -5734,6 +5892,7 @@
                     React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
                             medplum
                                 .startGoogleLogin({
+                                projectId: props.projectId,
                                 clientId: props.clientId,
                                 scope: props.scope,
                                 nonce: props.nonce,
@@ -5772,7 +5931,8 @@
                             login: props.login,
                             profile: membership.id,
                         })
-                            .then(props.handleAuthResponse);
+                            .then(props.handleAuthResponse)
+                            .catch(console.log);
                     } },
                     React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-icon" },
                         React__default["default"].createElement(Avatar, { alt: (_a = membership.profile) === null || _a === void 0 ? void 0 : _a.display })),
@@ -5781,6 +5941,36 @@
                         React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-help-text" }, (_c = membership.project) === null || _c === void 0 ? void 0 : _c.display))));
             })));
     }
+    function NewProjectForm(props) {
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const registerRequest = { projectName: formData.projectName };
+                    const partialLogin = { login: props.login };
+                    const login = yield medplum.startNewProject(registerRequest, partialLogin);
+                    props.handleAuthResponse(login);
+                }
+                catch (err) {
+                    setOutcome(err);
+                }
+            }) },
+            React__default["default"].createElement("div", { className: "medplum-center" },
+                React__default["default"].createElement(Logo, { size: 32 }),
+                React__default["default"].createElement("h1", null, "Create project")),
+            React__default["default"].createElement(FormSection, { title: "Project Name", htmlFor: "projectName", outcome: outcome },
+                React__default["default"].createElement(Input, { name: "projectName", type: "text", testid: "projectName", placeholder: "My Project", required: true, outcome: outcome })),
+            React__default["default"].createElement("p", { style: { fontSize: '12px', color: '#888' } },
+                "By clicking submit you agree to the Medplum ",
+                React__default["default"].createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                ' and ',
+                React__default["default"].createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                "."),
+            React__default["default"].createElement("div", { className: "medplum-signin-buttons" },
+                React__default["default"].createElement("div", null),
+                React__default["default"].createElement("div", null,
+                    React__default["default"].createElement(Button, { type: "submit", testid: "submit" }, "Create project")))));
+    }
 
     function Tab(props) {
         let className = 'medplum-tab';
@@ -5846,9 +6036,10 @@
     exports.ContactDetailInput = ContactDetailInput;
     exports.ContactPointDisplay = ContactPointDisplay;
     exports.ContactPointInput = ContactPointInput;
-    exports.DateTimeDisplay = DateTimeDisplay;
     exports.DateTimeInput = DateTimeInput;
     exports.DefaultResourceTimeline = DefaultResourceTimeline;
+    exports.DescriptionList = DescriptionList;
+    exports.DescriptionListEntry = DescriptionListEntry;
     exports.DiagnosticReportDisplay = DiagnosticReportDisplay;
     exports.Document = Document;
     exports.ElementDefinitionInputSelector = ElementDefinitionInputSelector;