@medplum/react 1.0.2 → 1.0.3

package/dist/cjs/index.js

@@ -64,28 +64,6 @@
             React.createElement(core$1.TextInput, { placeholder: "Postal Code", defaultValue: value.postalCode, onChange: (e) => setPostalCode(e.currentTarget.value) })));
     }
 
-    function AttachmentDisplay(props) {
-        const value = props.value;
-        const { contentType, url, title } = value !== null && value !== void 0 ? value : {};
-        if (!url) {
-            return null;
-        }
-        return (React.createElement("div", { "data-testid": "attachment-display" },
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('video/')) && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
-                React.createElement("source", { type: contentType, src: url }))),
-            contentType === 'application/pdf' && !(title === null || title === void 0 ? void 0 : title.endsWith('.pdf')) && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
-                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
-            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
-                React.createElement("a", { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
-    }
-
-    function AttachmentArrayDisplay(props) {
-        return (React.createElement("div", null, props.values &&
-            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
-                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
-    }
-
     const reactContext = React.createContext(undefined);
     /**
      * The MedplumProvider component provides Medplum context state.
@@ -132,6 +110,49 @@
         return useMedplumContext().profile;
     }
 
+    function AnnotationInput(props) {
+        const author = useMedplumProfile();
+        const [value, setValue] = React.useState(props.defaultValue || {});
+        const valueRef = React.useRef();
+        valueRef.current = value;
+        function setText(text) {
+            const newValue = text
+                ? {
+                    text,
+                    authorReference: author && core.createReference(author),
+                    time: new Date().toISOString(),
+                }
+                : {};
+            setValue(newValue);
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
+        }
+        return (React.createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
+    }
+
+    function AttachmentDisplay(props) {
+        const value = props.value;
+        const { contentType, url, title } = value !== null && value !== void 0 ? value : {};
+        if (!url) {
+            return null;
+        }
+        return (React.createElement("div", { "data-testid": "attachment-display" },
+            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
+            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('video/')) && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
+                React.createElement("source", { type: contentType, src: url }))),
+            contentType === 'application/pdf' && !(title === null || title === void 0 ? void 0 : title.endsWith('.pdf')) && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
+                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
+            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
+                React.createElement("a", { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
+    }
+
+    function AttachmentArrayDisplay(props) {
+        return (React.createElement("div", null, props.values &&
+            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
+                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
+    }
+
     /**
      * Kills a browser event.
      * Prevents default behavior.
@@ -769,13 +790,6 @@
         })()));
     }
 
-    function CheckboxFormSection(props) {
-        return (React.createElement(core$1.Group, { noWrap: true },
-            React.createElement("div", null, props.children),
-            React.createElement("div", null,
-                React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description }, (() => null)()))));
-    }
-
     const DEFAULT_IGNORED_PROPERTIES = [
         'meta',
         'implicitRules',
@@ -786,116 +800,6 @@
         'modifierExtension',
     ];
 
-    function FormSection(props) {
-        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
-    }
-
-    const system = {
-        resourceType: 'Device',
-        id: 'system',
-        deviceName: [
-            {
-                name: 'System',
-            },
-        ],
-    };
-    /**
-     * React Hook to use a FHIR reference.
-     * Handles the complexity of resolving references and caching resources.
-     * @param value The resource or reference to resource.
-     * @returns The resolved resource.
-     */
-    function useResource(value) {
-        const medplum = useMedplum();
-        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
-        React.useEffect(() => {
-            let subscribed = true;
-            if (!resource && value && 'reference' in value && value.reference) {
-                medplum
-                    .readReference(value)
-                    .then((r) => {
-                    if (subscribed) {
-                        setResource(r);
-                    }
-                })
-                    .catch(() => setResource(undefined));
-            }
-            return (() => (subscribed = false));
-        }, [medplum, resource, value]);
-        return resource;
-    }
-    /**
-     * Returns the initial resource value based on the input value.
-     * If the input value is a resource, returns the resource.
-     * If the input value is a reference to system, returns the system resource.
-     * If the input value is a reference to a resource available in the cache, returns the resource.
-     * Otherwise, returns undefined.
-     * @param medplum The medplum client.
-     * @param value The resource or reference to resource.
-     * @returns An initial resource if available; undefined otherwise.
-     */
-    function getInitialResource(medplum, value) {
-        if (!value) {
-            return undefined;
-        }
-        if ('resourceType' in value) {
-            return value;
-        }
-        if ('reference' in value) {
-            if (value.reference === 'system') {
-                return system;
-            }
-            return medplum.getCachedReference(value);
-        }
-        return undefined;
-    }
-
-    function ResourceForm(props) {
-        const medplum = useMedplum();
-        const defaultValue = useResource(props.defaultValue);
-        const [schema, setSchema] = React.useState();
-        const [value, setValue] = React.useState();
-        React.useEffect(() => {
-            if (defaultValue) {
-                setValue(JSON.parse(JSON.stringify(defaultValue)));
-                medplum.requestSchema(defaultValue.resourceType).then(setSchema).catch(console.log);
-            }
-        }, [medplum, defaultValue]);
-        if (!schema || !value) {
-            return React.createElement("div", null, "Loading...");
-        }
-        return (React.createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
-                e.preventDefault();
-                if (props.onSubmit) {
-                    props.onSubmit(value);
-                }
-            } },
-            React.createElement(core$1.Stack, { mb: "xl" },
-                React.createElement(FormSection, { title: "Resource Type", htmlFor: "resourceType", outcome: props.outcome },
-                    React.createElement(core$1.TextInput, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
-                React.createElement(FormSection, { title: "ID", htmlFor: "id", outcome: props.outcome },
-                    React.createElement(core$1.TextInput, { name: "id", defaultValue: value.id, disabled: true }))),
-            React.createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
-            React.createElement(core$1.Group, { position: "right", mt: "xl" },
-                React.createElement(core$1.Button, { type: "submit" }, "OK"),
-                props.onDelete && (React.createElement(core$1.Button, { variant: "outline", color: "red", type: "button", onClick: () => {
-                        props.onDelete(value);
-                    } }, "Delete")))));
-    }
-    function setPropertyValue(obj, key, propName, elementDefinition, value) {
-        const types = elementDefinition.type;
-        if (types.length > 1) {
-            for (const type of types) {
-                const compoundKey = key.replace('[x]', core.capitalize(type.code));
-                if (compoundKey in obj) {
-                    delete obj[compoundKey];
-                }
-            }
-        }
-        obj[propName] = value;
-        return obj;
-    }
-
     const useStyles$b = core$1.createStyles((theme) => ({
         root: {
             display: 'grid',
@@ -926,63 +830,12 @@
             React.createElement("dd", null, props.children)));
     }
 
-    function BackboneElementDisplay(props) {
-        const typedValue = props.value;
-        const value = typedValue.value;
-        if (!value) {
-            return null;
-        }
-        const typeName = typedValue.type;
-        const typeSchema = core.globalSchema.types[typeName];
-        if (!typeSchema) {
-            return React.createElement("div", null,
-                typeName,
-                "\u00A0not implemented");
-        }
-        if (typeof value === 'object' &&
-            'name' in value &&
-            Object.keys(value).length === 1 &&
-            typeof value.name === 'string') {
-            // Special case for common BackboneElement pattern
-            // Where there is an object with a single property 'name'
-            // Just display the name value.
-            return React.createElement("div", null, value.name);
-        }
-        return (React.createElement(DescriptionList, { compact: props.compact }, Object.entries(typeSchema.properties).map((entry) => {
-            const key = entry[0];
-            if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
-                return null;
-            }
-            const property = entry[1];
-            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
-            if (props.ignoreMissingValues &&
-                (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {
-                return null;
-            }
-            return (React.createElement(DescriptionListEntry, { key: key, term: core.getPropertyDisplayName(key) },
-                React.createElement(ResourcePropertyDisplay, { property: property, propertyType: propertyType, value: propertyValue, ignoreMissingValues: props.ignoreMissingValues, link: props.link })));
-        })));
+    function CodeableConceptDisplay(props) {
+        return React.createElement(React.Fragment, null, core.formatCodeableConcept(props.value));
     }
 
     function CodingDisplay(props) {
-        var _a, _b;
-        return React.createElement(React.Fragment, null, ((_a = props.value) === null || _a === void 0 ? void 0 : _a.display) || ((_b = props.value) === null || _b === void 0 ? void 0 : _b.code));
-    }
-
-    function CodeableConceptDisplay(props) {
-        const value = props.value;
-        if (!value) {
-            return null;
-        }
-        if (value.text) {
-            return React.createElement(React.Fragment, null, value.text);
-        }
-        if (value.coding) {
-            return (React.createElement(React.Fragment, null, value.coding.map((coding, index) => (React.createElement(React.Fragment, { key: 'coding-' + index },
-                index > 0 && React.createElement(React.Fragment, null, ', '),
-                React.createElement(CodingDisplay, { value: coding }))))));
-        }
-        return null;
+        return React.createElement(React.Fragment, null, core.formatCoding(props.value));
     }
 
     function ContactPointDisplay(props) {
@@ -1212,25 +1065,159 @@
         return [typedResult.value, typedResult.type];
     }
 
-    function AnnotationInput(props) {
-        const author = useMedplumProfile();
-        const [value, setValue] = React.useState(props.defaultValue || {});
-        const valueRef = React.useRef();
-        valueRef.current = value;
-        function setText(text) {
-            const newValue = text
-                ? {
-                    text,
-                    authorReference: author && core.createReference(author),
-                    time: new Date().toISOString(),
+    function BackboneElementDisplay(props) {
+        const typedValue = props.value;
+        const value = typedValue.value;
+        if (!value) {
+            return null;
+        }
+        const typeName = typedValue.type;
+        const typeSchema = core.globalSchema.types[typeName];
+        if (!typeSchema) {
+            return React.createElement("div", null,
+                typeName,
+                "\u00A0not implemented");
+        }
+        if (typeof value === 'object' &&
+            'name' in value &&
+            Object.keys(value).length === 1 &&
+            typeof value.name === 'string') {
+            // Special case for common BackboneElement pattern
+            // Where there is an object with a single property 'name'
+            // Just display the name value.
+            return React.createElement("div", null, value.name);
+        }
+        return (React.createElement(DescriptionList, { compact: props.compact }, Object.entries(typeSchema.properties).map((entry) => {
+            const key = entry[0];
+            if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
+                return null;
+            }
+            const property = entry[1];
+            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+            if (props.ignoreMissingValues &&
+                (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {
+                return null;
+            }
+            return (React.createElement(DescriptionListEntry, { key: key, term: core.getPropertyDisplayName(key) },
+                React.createElement(ResourcePropertyDisplay, { property: property, propertyType: propertyType, value: propertyValue, ignoreMissingValues: props.ignoreMissingValues, link: props.link })));
+        })));
+    }
+
+    function CheckboxFormSection(props) {
+        return (React.createElement(core$1.Group, { noWrap: true },
+            React.createElement("div", null, props.children),
+            React.createElement("div", null,
+                React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description }, (() => null)()))));
+    }
+
+    function FormSection(props) {
+        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
+    }
+
+    const system = {
+        resourceType: 'Device',
+        id: 'system',
+        deviceName: [
+            {
+                name: 'System',
+            },
+        ],
+    };
+    /**
+     * React Hook to use a FHIR reference.
+     * Handles the complexity of resolving references and caching resources.
+     * @param value The resource or reference to resource.
+     * @returns The resolved resource.
+     */
+    function useResource(value) {
+        const medplum = useMedplum();
+        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
+        React.useEffect(() => {
+            let subscribed = true;
+            if (!resource && value && 'reference' in value && value.reference) {
+                medplum
+                    .readReference(value)
+                    .then((r) => {
+                    if (subscribed) {
+                        setResource(r);
+                    }
+                })
+                    .catch(() => setResource(undefined));
+            }
+            return (() => (subscribed = false));
+        }, [medplum, resource, value]);
+        return resource;
+    }
+    /**
+     * Returns the initial resource value based on the input value.
+     * If the input value is a resource, returns the resource.
+     * If the input value is a reference to system, returns the system resource.
+     * If the input value is a reference to a resource available in the cache, returns the resource.
+     * Otherwise, returns undefined.
+     * @param medplum The medplum client.
+     * @param value The resource or reference to resource.
+     * @returns An initial resource if available; undefined otherwise.
+     */
+    function getInitialResource(medplum, value) {
+        if (!value) {
+            return undefined;
+        }
+        if ('resourceType' in value) {
+            return value;
+        }
+        if ('reference' in value) {
+            if (value.reference === 'system') {
+                return system;
+            }
+            return medplum.getCachedReference(value);
+        }
+        return undefined;
+    }
+
+    function ResourceForm(props) {
+        const medplum = useMedplum();
+        const defaultValue = useResource(props.defaultValue);
+        const [schema, setSchema] = React.useState();
+        const [value, setValue] = React.useState();
+        React.useEffect(() => {
+            if (defaultValue) {
+                setValue(JSON.parse(JSON.stringify(defaultValue)));
+                medplum.requestSchema(defaultValue.resourceType).then(setSchema).catch(console.log);
+            }
+        }, [medplum, defaultValue]);
+        if (!schema || !value) {
+            return React.createElement("div", null, "Loading...");
+        }
+        return (React.createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
+                e.preventDefault();
+                if (props.onSubmit) {
+                    props.onSubmit(value);
+                }
+            } },
+            React.createElement(core$1.Stack, { mb: "xl" },
+                React.createElement(FormSection, { title: "Resource Type", htmlFor: "resourceType", outcome: props.outcome },
+                    React.createElement(core$1.TextInput, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
+                React.createElement(FormSection, { title: "ID", htmlFor: "id", outcome: props.outcome },
+                    React.createElement(core$1.TextInput, { name: "id", defaultValue: value.id, disabled: true }))),
+            React.createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
+            React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                React.createElement(core$1.Button, { type: "submit" }, "OK"),
+                props.onDelete && (React.createElement(core$1.Button, { variant: "outline", color: "red", type: "button", onClick: () => {
+                        props.onDelete(value);
+                    } }, "Delete")))));
+    }
+    function setPropertyValue(obj, key, propName, elementDefinition, value) {
+        const types = elementDefinition.type;
+        if (types.length > 1) {
+            for (const type of types) {
+                const compoundKey = key.replace('[x]', core.capitalize(type.code));
+                if (compoundKey in obj) {
+                    delete obj[compoundKey];
                 }
-                : {};
-            setValue(newValue);
-            if (props.onChange) {
-                props.onChange(newValue);
             }
         }
-        return (React.createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
+        obj[propName] = value;
+        return obj;
     }
 
     function valueSetElementToAutocompleteItem(element) {
@@ -1995,49 +1982,177 @@
                 return (React.createElement(BackboneElementInput, { typeName: core.buildTypeName((_a = property.path) === null || _a === void 0 ? void 0 : _a.split('.')), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
         }
     }
-    function getTargetTypes(property) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.type) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.targetProfile) === null || _c === void 0 ? void 0 : _c.map((p) => p.split('/').pop());
+    function getTargetTypes(property) {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.type) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.targetProfile) === null || _c === void 0 ? void 0 : _c.map((p) => p.split('/').pop());
+    }
+
+    function BackboneElementInput(props) {
+        var _a;
+        const [value, setValue] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : {});
+        function setValueWrapper(newValue) {
+            setValue(newValue);
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
+        }
+        const typeName = props.typeName;
+        const typeSchema = core.globalSchema.types[typeName];
+        if (!typeSchema) {
+            return React.createElement("div", null,
+                typeName,
+                "\u00A0not implemented");
+        }
+        const typedValue = { type: typeName, value };
+        return (React.createElement(core$1.Stack, null, Object.entries(typeSchema.properties).map((entry) => {
+            const key = entry[0];
+            if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
+                return null;
+            }
+            const property = entry[1];
+            if (!property.type) {
+                return null;
+            }
+            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+            if (property.type.length === 1 && property.type[0].code === 'boolean') {
+                return (React.createElement(CheckboxFormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key },
+                    React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                            setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
+                        } })));
+            }
+            return (React.createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
+                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                        setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
+                    } })));
+        })));
+    }
+
+    const useStyles$a = core$1.createStyles((theme) => ({
+        table: {
+            width: 350,
+            '& th': {
+                fontWeight: 'normal',
+                fontSize: 11,
+                padding: 8,
+                textAlign: 'center',
+            },
+            '& td': {
+                padding: '2px 4px',
+            },
+            '& td button': {
+                width: 44,
+                height: 44,
+                color: theme.colors[theme.primaryColor][5],
+                fontSize: 16,
+                fontWeight: 500,
+                textAlign: 'center',
+                padding: 0,
+                backgroundColor: theme.colors[theme.primaryColor][0],
+                border: 0,
+                borderRadius: '50%',
+                cursor: 'pointer',
+            },
+            '& td button:hover': {
+                backgroundColor: theme.colors[theme.primaryColor][1],
+            },
+            '& td button:disabled': {
+                backgroundColor: 'transparent',
+                cursor: 'default',
+                color: theme.colors.gray[4],
+                fontWeight: 'normal',
+            },
+        },
+    }));
+    /**
+     * Returns a month display string (e.g. "January 2020").
+     * @param date Any date within the month.
+     * @returns The month display string (e.g. "January 2020")
+     */
+    function getMonthString(date) {
+        return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
+    }
+    function CalendarInput(props) {
+        const { classes } = useStyles$a();
+        const { onChangeMonth, onClick } = props;
+        const [month, setMonth] = React.useState(getStartMonth);
+        function moveMonth(delta) {
+            setMonth((currMonth) => {
+                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]);
+        return (React.createElement("div", null,
+            React.createElement(core$1.Group, { position: "apart", spacing: "xs", grow: true, noWrap: true },
+                React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+                React.createElement(core$1.Group, { position: "right", spacing: "xs" },
+                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
+            React.createElement("table", { className: classes.table },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", null, "SUN"),
+                        React.createElement("th", null, "MON"),
+                        React.createElement("th", null, "TUE"),
+                        React.createElement("th", null, "WED"),
+                        React.createElement("th", null, "THU"),
+                        React.createElement("th", null, "FRI"),
+                        React.createElement("th", null, "SAT"))),
+                React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement(core$1.Button, { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
+    }
+    function getStartMonth() {
+        const result = new Date();
+        result.setDate(1);
+        result.setHours(0, 0, 0, 0);
+        return result;
     }
-
-    function BackboneElementInput(props) {
-        var _a;
-        const [value, setValue] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : {});
-        function setValueWrapper(newValue) {
-            setValue(newValue);
-            if (props.onChange) {
-                props.onChange(newValue);
-            }
-        }
-        const typeName = props.typeName;
-        const typeSchema = core.globalSchema.types[typeName];
-        if (!typeSchema) {
-            return React.createElement("div", null,
-                typeName,
-                "\u00A0not implemented");
+    function buildGrid(startDate, slots) {
+        const d = new Date(startDate.getFullYear(), startDate.getMonth());
+        const grid = [];
+        let row = [];
+        // Fill leading empty days
+        for (let i = 0; i < d.getDay(); i++) {
+            row.push(undefined);
         }
-        const typedValue = { type: typeName, value };
-        return (React.createElement(core$1.Stack, null, Object.entries(typeSchema.properties).map((entry) => {
-            const key = entry[0];
-            if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
-                return null;
+        while (d.getMonth() === startDate.getMonth()) {
+            row.push({
+                date: new Date(d.getTime()),
+                available: isDayAvailable(d, slots),
+            });
+            if (d.getDay() === 6) {
+                grid.push(row);
+                row = [];
             }
-            const property = entry[1];
-            if (!property.type) {
-                return null;
+            d.setDate(d.getDate() + 1);
+        }
+        // Fill trailing empty days
+        if (d.getDay() !== 0) {
+            for (let i = d.getDay(); i < 7; i++) {
+                row.push(undefined);
             }
-            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
-            if (property.type.length === 1 && property.type[0].code === 'boolean') {
-                return (React.createElement(CheckboxFormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key },
-                    React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
-                            setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
-                        } })));
+            grid.push(row);
+        }
+        return grid;
+    }
+    /**
+     * Returns true if the given date is available for booking.
+     * @param day The day to check.
+     * @param slots The list of available slots.
+     * @returns True if there are any available slots for the day.
+     */
+    function isDayAvailable(day, slots) {
+        // Note that slot start and end time may or may not be in UTC.
+        for (const slot of slots) {
+            const slotStart = new Date(slot.start);
+            if (slotStart.getFullYear() === day.getFullYear() &&
+                slotStart.getMonth() === day.getMonth() &&
+                slotStart.getDate() === day.getDate()) {
+                return true;
             }
-            return (React.createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
-                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
-                        setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
-                    } })));
-        })));
+        }
+        return false;
     }
 
     function ResourceName(props) {
@@ -2056,7 +2171,7 @@
             React.createElement(ResourceName, { value: props.value, link: props.link })));
     }
 
-    const useStyles$a = core$1.createStyles((theme) => ({
+    const useStyles$9 = core$1.createStyles((theme) => ({
         table: {
             border: `0.1px solid ${theme.colors.gray[5]}`,
             borderCollapse: 'collapse',
@@ -2117,7 +2232,7 @@
     }
     function ObservationTable(props) {
         var _a;
-        const { classes } = useStyles$a();
+        const { classes } = useStyles$9();
         return (React.createElement("table", { className: classes.table },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -2128,7 +2243,7 @@
             React.createElement("tbody", null, (_a = props.value) === null || _a === void 0 ? void 0 : _a.map((observation, index) => (React.createElement(ObservationRow, { key: 'obs-' + index, value: observation }))))));
     }
     function ObservationRow(props) {
-        const { classes, cx } = useStyles$a();
+        const { classes, cx } = useStyles$9();
         const observation = useResource(props.value);
         if (!observation) {
             return null;
@@ -2145,20 +2260,8 @@
             React.createElement("td", null, observation.interpretation && observation.interpretation.length > 0 && (React.createElement(CodeableConceptDisplay, { value: observation.interpretation[0] })))));
     }
     function ObservationValueDisplay(props) {
-        var _a;
         const obs = props.value;
-        if (obs === null || obs === void 0 ? void 0 : obs.valueQuantity) {
-            return React.createElement(QuantityDisplay, { value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.valueQuantity });
-        }
-        if (obs === null || obs === void 0 ? void 0 : obs.valueString) {
-            return React.createElement(React.Fragment, null, obs.valueString);
-        }
-        if (obs && 'component' in obs && (obs === null || obs === void 0 ? void 0 : obs.component)) {
-            return (React.createElement(React.Fragment, null, obs.component
-                .map((component, index) => (React.createElement(ObservationValueDisplay, { key: `obs-${index}`, value: component })))
-                .reduce((prev, curr) => [prev, ' / ', curr])));
-        }
-        return null;
+        return React.createElement(React.Fragment, null, core.formatObservationValue(obs));
     }
     function ReferenceRangeDisplay(props) {
         const range = props.value && props.value.length > 0 && props.value[0];
@@ -2182,7 +2285,7 @@
         return code === 'AA' || code === 'LL' || code === 'HH' || code === 'A';
     }
 
-    const useStyles$9 = core$1.createStyles((theme) => ({
+    const useStyles$8 = core$1.createStyles((theme) => ({
         root: {
             borderCollapse: 'collapse',
             width: '100%',
@@ -2203,7 +2306,7 @@
         },
     }));
     function ResourceDiffTable(props) {
-        const { classes } = useStyles$9();
+        const { classes } = useStyles$8();
         const medplum = useMedplum();
         const [schema, setSchema] = React.useState();
         React.useEffect(() => {
@@ -2364,7 +2467,7 @@
         return new Date(dateTime).getTime();
     }
 
-    const useStyles$8 = core$1.createStyles((theme) => ({
+    const useStyles$7 = core$1.createStyles((theme) => ({
         pinnedComment: {
             backgroundColor: theme.colors.blue[0],
         },
@@ -2593,7 +2696,7 @@
     }
     function CommunicationTimelineItem(props) {
         var _a, _b;
-        const { classes } = useStyles$8();
+        const { classes } = useStyles$7();
         const routine = !props.resource.priority || props.resource.priority === 'routine';
         const className = routine ? undefined : classes.pinnedComment;
         return (React.createElement(TimelineItem, { resource: props.resource, profile: props.resource.sender, padding: true, className: className, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
@@ -3742,7 +3845,7 @@
             this.browserEvent = browserEvent;
         }
     }
-    const useStyles$7 = core$1.createStyles((theme) => ({
+    const useStyles$6 = core$1.createStyles((theme) => ({
         root: {
             maxWidth: '100%',
             overflow: 'auto',
@@ -3780,7 +3883,7 @@
      */
     function SearchControl(props) {
         var _a, _b, _c;
-        const { classes } = useStyles$7();
+        const { classes } = useStyles$6();
         const medplum = useMedplum();
         const [schemaLoaded, setSchemaLoaded] = React.useState(false);
         const [outcome, setOutcome] = React.useState();
@@ -4155,7 +4258,7 @@
             }) }));
     }
 
-    const useStyles$6 = core$1.createStyles((theme) => ({
+    const useStyles$5 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -4221,7 +4324,7 @@
                 React.createElement(core$1.Button, { type: "submit" }, "Save"))));
     }
     function ActionArrayBuilder(props) {
-        const { classes } = useStyles$6();
+        const { classes } = useStyles$5();
         const actionsRef = React.useRef();
         actionsRef.current = props.actions;
         function changeAction(changedAction) {
@@ -4244,7 +4347,7 @@
                     } }, "Add action"))));
     }
     function ActionBuilder(props) {
-        const { classes, cx } = useStyles$6();
+        const { classes, cx } = useStyles$5();
         const { action } = props;
         const actionType = getInitialActionType(action);
         const editing = props.selectedKey === props.action.id;
@@ -4665,7 +4768,7 @@
         }
     }
 
-    const useStyles$5 = core$1.createStyles((theme) => ({
+    const useStyles$4 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -4744,7 +4847,7 @@
     }
     function ItemBuilder(props) {
         var _a;
-        const { classes, cx } = useStyles$5();
+        const { classes, cx } = useStyles$4();
         const resource = props.item;
         const item = props.item;
         const isResource = 'resourceType' in props.item;
@@ -4921,7 +5024,7 @@
         return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
     }
 
-    const useStyles$4 = core$1.createStyles((theme) => ({
+    const useStyles$3 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -5025,7 +5128,7 @@
     }
     function ReferenceRangeGroupEditor(props) {
         const { intervalGroup, unit } = props;
-        const { classes } = useStyles$4();
+        const { classes } = useStyles$3();
         return (React.createElement(core$1.Container, { "data-testid": intervalGroup.id, className: classes.section },
             React.createElement(core$1.Stack, { spacing: 'lg' },
                 React.createElement(core$1.Group, { position: "right" },
@@ -5487,7 +5590,7 @@
         }
     }
 
-    const useStyles$3 = core$1.createStyles((theme) => ({
+    const useStyles$2 = core$1.createStyles((theme) => ({
         container: {
             overflowX: 'auto',
         },
@@ -5536,7 +5639,7 @@
     }));
     function ResourceBlame(props) {
         var _a, _b;
-        const { classes } = useStyles$3();
+        const { classes } = useStyles$2();
         const medplum = useMedplum();
         const [value, setValue] = React.useState(props.history);
         React.useEffect(() => {
@@ -5592,7 +5695,7 @@
         return `${count} ${count === 1 ? noun : noun + 's'} ago`;
     }
 
-    const useStyles$2 = core$1.createStyles((theme) => ({
+    const useStyles$1 = core$1.createStyles((theme) => ({
         removed: {
             color: theme.colors.red[7],
             textDecoration: 'line-through',
@@ -5614,7 +5717,7 @@
         return (React.createElement("pre", { style: { color: 'gray' } }, deltas.map((delta, index) => (React.createElement(ChangeDiff, { key: 'delta' + index, delta: delta })))));
     }
     function ChangeDiff(props) {
-        const { classes } = useStyles$2();
+        const { classes } = useStyles$1();
         return (React.createElement(React.Fragment, null,
             "...",
             React.createElement("br", null),
@@ -5668,134 +5771,6 @@
         return `/${resource.resourceType}/${resource.id}/_history/${(_a = resource.meta) === null || _a === void 0 ? void 0 : _a.versionId}`;
     }
 
-    const useStyles$1 = core$1.createStyles((theme) => ({
-        table: {
-            width: 350,
-            '& th': {
-                fontWeight: 'normal',
-                fontSize: 11,
-                padding: 8,
-                textAlign: 'center',
-            },
-            '& td': {
-                padding: '2px 4px',
-            },
-            '& td button': {
-                width: 44,
-                height: 44,
-                color: theme.colors[theme.primaryColor][5],
-                fontSize: 16,
-                fontWeight: 500,
-                textAlign: 'center',
-                padding: 0,
-                backgroundColor: theme.colors[theme.primaryColor][0],
-                border: 0,
-                borderRadius: '50%',
-                cursor: 'pointer',
-            },
-            '& td button:hover': {
-                backgroundColor: theme.colors[theme.primaryColor][1],
-            },
-            '& td button:disabled': {
-                backgroundColor: 'transparent',
-                cursor: 'default',
-                color: theme.colors.gray[4],
-                fontWeight: 'normal',
-            },
-        },
-    }));
-    /**
-     * Returns a month display string (e.g. "January 2020").
-     * @param date Any date within the month.
-     * @returns The month display string (e.g. "January 2020")
-     */
-    function getMonthString(date) {
-        return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
-    }
-    function CalendarInput(props) {
-        const { classes } = useStyles$1();
-        const { onChangeMonth, onClick } = props;
-        const [month, setMonth] = React.useState(getStartMonth);
-        function moveMonth(delta) {
-            setMonth((currMonth) => {
-                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]);
-        return (React.createElement("div", null,
-            React.createElement(core$1.Group, { position: "apart", spacing: "xs", grow: true, noWrap: true },
-                React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
-                React.createElement(core$1.Group, { position: "right", spacing: "xs" },
-                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
-                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
-            React.createElement("table", { className: classes.table },
-                React.createElement("thead", null,
-                    React.createElement("tr", null,
-                        React.createElement("th", null, "SUN"),
-                        React.createElement("th", null, "MON"),
-                        React.createElement("th", null, "TUE"),
-                        React.createElement("th", null, "WED"),
-                        React.createElement("th", null, "THU"),
-                        React.createElement("th", null, "FRI"),
-                        React.createElement("th", null, "SAT"))),
-                React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement(core$1.Button, { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
-    }
-    function getStartMonth() {
-        const result = new Date();
-        result.setDate(1);
-        result.setHours(0, 0, 0, 0);
-        return result;
-    }
-    function buildGrid(startDate, slots) {
-        const d = new Date(startDate.getFullYear(), startDate.getMonth());
-        const grid = [];
-        let row = [];
-        // Fill leading empty days
-        for (let i = 0; i < d.getDay(); i++) {
-            row.push(undefined);
-        }
-        while (d.getMonth() === startDate.getMonth()) {
-            row.push({
-                date: new Date(d.getTime()),
-                available: isDayAvailable(d, slots),
-            });
-            if (d.getDay() === 6) {
-                grid.push(row);
-                row = [];
-            }
-            d.setDate(d.getDate() + 1);
-        }
-        // Fill trailing empty days
-        if (d.getDay() !== 0) {
-            for (let i = d.getDay(); i < 7; i++) {
-                row.push(undefined);
-            }
-            grid.push(row);
-        }
-        return grid;
-    }
-    /**
-     * Returns true if the given date is available for booking.
-     * @param day The day to check.
-     * @param slots The list of available slots.
-     * @returns True if there are any available slots for the day.
-     */
-    function isDayAvailable(day, slots) {
-        // Note that slot start and end time may or may not be in UTC.
-        for (const slot of slots) {
-            const slotStart = new Date(slot.start);
-            if (slotStart.getFullYear() === day.getFullYear() &&
-                slotStart.getMonth() === day.getMonth() &&
-                slotStart.getDate() === day.getDate()) {
-                return true;
-            }
-        }
-        return false;
-    }
-
     const useStyles = core$1.createStyles((theme) => ({
         container: {
             display: 'flex',
@@ -5934,15 +5909,21 @@
 
     exports.AddressDisplay = AddressDisplay;
     exports.AddressInput = AddressInput;
+    exports.AnnotationInput = AnnotationInput;
     exports.AttachmentArrayDisplay = AttachmentArrayDisplay;
     exports.AttachmentArrayInput = AttachmentArrayInput;
     exports.AttachmentButton = AttachmentButton;
+    exports.AttachmentDisplay = AttachmentDisplay;
     exports.AttachmentInput = AttachmentInput;
+    exports.BackboneElementDisplay = BackboneElementDisplay;
     exports.BackboneElementInput = BackboneElementInput;
+    exports.CalendarInput = CalendarInput;
     exports.CheckboxFormSection = CheckboxFormSection;
     exports.CodeInput = CodeInput;
     exports.CodeableConceptDisplay = CodeableConceptDisplay;
     exports.CodeableConceptInput = CodeableConceptInput;
+    exports.CodingDisplay = CodingDisplay;
+    exports.CodingInput = CodingInput;
     exports.ContactDetailDisplay = ContactDetailDisplay;
     exports.ContactDetailInput = ContactDetailInput;
     exports.ContactPointDisplay = ContactPointDisplay;
@@ -5962,6 +5943,7 @@
     exports.FormSection = FormSection;
     exports.HumanNameDisplay = HumanNameDisplay;
     exports.HumanNameInput = HumanNameInput;
+    exports.IdentifierDisplay = IdentifierDisplay;
     exports.IdentifierInput = IdentifierInput;
     exports.Logo = Logo;
     exports.MedplumLink = MedplumLink;
@@ -5971,11 +5953,14 @@
     exports.ObservationTable = ObservationTable;
     exports.PatientTimeline = PatientTimeline;
     exports.PlanDefinitionBuilder = PlanDefinitionBuilder;
+    exports.QuantityDisplay = QuantityDisplay;
+    exports.QuantityInput = QuantityInput;
     exports.QuestionnaireBuilder = QuestionnaireBuilder;
     exports.QuestionnaireForm = QuestionnaireForm;
     exports.QuestionnaireFormItem = QuestionnaireFormItem;
     exports.RangeDisplay = RangeDisplay;
     exports.RangeInput = RangeInput;
+    exports.ReferenceDisplay = ReferenceDisplay;
     exports.ReferenceInput = ReferenceInput;
     exports.ReferenceRangeEditor = ReferenceRangeEditor;
     exports.ReferenceRangeGroupEditor = ReferenceRangeGroupEditor;
@@ -6007,6 +5992,7 @@
     exports.StatusBadge = StatusBadge;
     exports.Timeline = Timeline;
     exports.TimelineItem = TimelineItem;
+    exports.TimingInput = TimingInput;
     exports.addDateFilterBetween = addDateFilterBetween;
     exports.addField = addField;
     exports.addFilter = addFilter;
@@ -6027,10 +6013,12 @@
     exports.deleteFilter = deleteFilter;
     exports.getErrorsForInput = getErrorsForInput;
     exports.getIssuesForExpression = getIssuesForExpression;
+    exports.getMonthString = getMonthString;
     exports.getOpString = getOpString;
     exports.getRecaptcha = getRecaptcha;
     exports.getSearchOperators = getSearchOperators;
     exports.getSortField = getSortField;
+    exports.getStartMonth = getStartMonth;
     exports.getTimeString = getTimeString;
     exports.getValueAndType = getValueAndType;
     exports.initRecaptcha = initRecaptcha;