@medplum/react 0.9.25 → 0.9.28

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,6 +387,9 @@
         }
         function handleFocus() {
             setFocused(true);
+            if (props.loadOnFocus) {
+                handleInput();
+            }
         }
         function handleBlur() {
             setFocused(false);
@@ -526,13 +529,6 @@
                 // Nothing has changed, move on
                 return;
             }
-            if (!value) {
-                setDropDownVisible(false);
-                setLastValue('');
-                setOptions([]);
-                setSelectedIndex(-1);
-                return;
-            }
             setLastValue(value);
             const newAbortController = new AbortController();
             setAbortController(newAbortController);
@@ -845,8 +841,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 +886,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 +902,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 +1003,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 +1025,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 +1034,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`);
@@ -1313,7 +1295,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 +1314,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 +1472,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 +1521,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 +1571,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 +1610,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 +1836,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 +1927,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))))),
@@ -2104,8 +2222,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" },
@@ -2551,43 +2668,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 +3103,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 +3343,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);
     }
@@ -3951,31 +4031,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* () {
@@ -4274,14 +4329,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);
+        }, [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 +4363,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 +4376,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"))));
-    }
-    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")));
+            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 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 +4480,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.
@@ -4586,12 +4704,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 +4812,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 : [],
         };
@@ -5017,7 +5138,17 @@
             React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
                     try {
                         const recaptchaToken = yield getRecaptcha(recaptchaSiteKey);
-                        const registerRequest = Object.assign(Object.assign({}, formData), { recaptchaToken });
+                        const registerRequest = {
+                            projectId: props.projectId,
+                            projectName: formData.projectName,
+                            firstName: formData.firstName,
+                            lastName: formData.lastName,
+                            email: formData.email,
+                            password: formData.password,
+                            remember: formData.remember === 'true',
+                            recaptchaSiteKey,
+                            recaptchaToken,
+                        };
                         const userLogin = yield medplum.startNewUser(registerRequest);
                         handleAuthResponse(registerRequest, userLogin);
                     }
@@ -5041,6 +5172,7 @@
                                     const userLogin = yield medplum.startGoogleLogin(loginRequest);
                                     const googleClaims = core.parseJWTPayload(loginRequest.googleCredential);
                                     const registerRequest = {
+                                        projectId: props.projectId,
                                         firstName: googleClaims.given_name,
                                         lastName: googleClaims.family_name,
                                         email: googleClaims.email,
@@ -5115,7 +5247,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' }))),
@@ -5440,8 +5572,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))));
     }
@@ -5835,7 +5966,6 @@
     exports.ContactDetailInput = ContactDetailInput;
     exports.ContactPointDisplay = ContactPointDisplay;
     exports.ContactPointInput = ContactPointInput;
-    exports.DateTimeDisplay = DateTimeDisplay;
     exports.DateTimeInput = DateTimeInput;
     exports.DefaultResourceTimeline = DefaultResourceTimeline;
     exports.DiagnosticReportDisplay = DiagnosticReportDisplay;