@medplum/react 1.0.3 → 1.0.4

package/dist/cjs/Container/Container.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ContainerProps } from '@mantine/core';
+export declare function Container(props: ContainerProps): JSX.Element;

package/dist/cjs/Document/Document.d.ts

@@ -1,6 +1,3 @@
-import React from 'react';
-export interface DocumentProps {
-    width?: number;
-    children?: React.ReactNode;
-}
-export declare function Document(props: DocumentProps): JSX.Element;
+/// <reference types="react" />
+import { PanelProps } from '../Panel/Panel';
+export declare function Document(props: PanelProps): JSX.Element;

package/dist/cjs/Panel/Panel.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PaperProps } from '@mantine/core';
+export interface PanelStylesParams {
+    width?: number;
+    fill?: boolean;
+}
+export interface PanelProps extends PaperProps {
+    width?: number;
+    fill?: boolean;
+}
+export declare function Panel(props: PanelProps): JSX.Element;

package/dist/cjs/Timeline/Timeline.d.ts

@@ -1,16 +1,14 @@
 import { Reference, Resource } from '@medplum/fhirtypes';
 import React from 'react';
+import { PanelProps } from '../Panel/Panel';
 export interface TimelineProps {
     children?: React.ReactNode;
 }
 export declare function Timeline(props: TimelineProps): JSX.Element;
-export interface TimelineItemProps {
+export interface TimelineItemProps extends PanelProps {
     resource: Resource;
     profile?: Reference;
-    socialEnabled?: boolean;
-    children?: React.ReactNode;
     padding?: boolean;
-    className?: string;
     popupMenuItems?: React.ReactNode;
 }
 export declare function TimelineItem(props: TimelineItemProps): JSX.Element;

package/dist/cjs/index.d.ts

@@ -21,6 +21,7 @@ export * from './ContactDetailDisplay/ContactDetailDisplay';
 export * from './ContactDetailInput/ContactDetailInput';
 export * from './ContactPointDisplay/ContactPointDisplay';
 export * from './ContactPointInput/ContactPointInput';
+export * from './Container/Container';
 export * from './DateTimeInput/DateTimeInput';
 export * from './DefaultResourceTimeline/DefaultResourceTimeline';
 export * from './DescriptionList/DescriptionList';
@@ -39,6 +40,7 @@ export * from './IdentifierInput/IdentifierInput';
 export * from './Logo/Logo';
 export * from './MedplumLink/MedplumLink';
 export * from './MedplumProvider/MedplumProvider';
+export * from './Panel/Panel';
 export * from './PatientTimeline/PatientTimeline';
 export * from './PlanDefinitionBuilder/PlanDefinitionBuilder';
 export * from './QuantityDisplay/QuantityDisplay';

package/dist/cjs/index.js

@@ -144,7 +144,7 @@
             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'))));
+                React.createElement(core$1.Anchor, { 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) {
@@ -292,15 +292,6 @@
         return (React.createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React.createElement(core$1.Button, Object.assign({}, props), "Upload...")));
     }
 
-    function Document(props) {
-        let style = undefined;
-        if (props.width) {
-            style = { maxWidth: props.width };
-        }
-        return (React.createElement(core$1.Container, null,
-            React.createElement(core$1.Paper, { style: style, mx: "auto", my: "lg", p: "lg", shadow: "xs", radius: "sm", withBorder: true }, props.children)));
-    }
-
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -338,6 +329,55 @@
         });
     }
 
+    const useStyles$d = core$1.createStyles(() => ({
+        root: {
+            '@media (max-width: 800px)': {
+                paddingLeft: 4,
+                paddingRight: 4,
+            },
+        },
+    }));
+    function Container(props) {
+        const { children } = props, others = __rest(props, ["children"]);
+        const { classes } = useStyles$d();
+        return (React.createElement(core$1.Container, Object.assign({ className: classes.root }, others), children));
+    }
+
+    const useStyles$c = core$1.createStyles((theme, { width, fill }) => ({
+        paper: {
+            maxWidth: width,
+            margin: `${theme.spacing.xl}px auto`,
+            padding: fill ? 0 : theme.spacing.md,
+            '@media (max-width: 800px)': {
+                padding: fill ? 0 : 8,
+            },
+            '& img': {
+                width: '100%',
+                maxWidth: '100%',
+            },
+            '& video': {
+                width: '100%',
+                maxWidth: '100%',
+            },
+        },
+    }));
+    const defaultProps$1 = {
+        shadow: 'xs',
+        radius: 'md',
+        withBorder: true,
+    };
+    function Panel(props) {
+        const _a = core$1.useComponentDefaultProps('Panel', defaultProps$1, props), { className, children, width, fill, unstyled } = _a, others = __rest(_a, ["className", "children", "width", "fill", "unstyled"]);
+        const { classes, cx } = useStyles$c({ width, fill }, { name: 'Panel', unstyled });
+        return (React.createElement(core$1.Paper, Object.assign({ className: cx(classes.paper, className) }, others), children));
+    }
+
+    function Document(props) {
+        const { children } = props, others = __rest(props, ["children"]);
+        return (React.createElement(Container, null,
+            React.createElement(Panel, Object.assign({}, others), children)));
+    }
+
     /**
      * Parses an HTML form and returns the result as a JavaScript object.
      * @param form The HTML form element.
@@ -452,10 +492,11 @@
             React.createElement(core$1.Stack, { spacing: "xl" },
                 React.createElement(core$1.TextInput, { name: "projectName", label: "Project Name", placeholder: "My Project", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
                 React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
-                    "By clicking submit you agree to the Medplum ",
-                    React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    "By clicking submit you agree to the Medplum",
+                    ' ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     ".")),
             React.createElement(core$1.Group, { position: "right", mt: "xl", noWrap: true },
                 React.createElement(core$1.Button, { type: "submit" }, "Create project"))));
@@ -596,17 +637,18 @@
                 React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, error: getErrorsForInput(outcome, 'email') }),
                 React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') }),
                 React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
-                    "By clicking submit you agree to the Medplum ",
-                    React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    "By clicking submit you agree to the Medplum",
+                    ' ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     "."),
                 React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
                     "This site is protected by reCAPTCHA and the Google",
                     ' ',
-                    React.createElement("a", { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
+                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React.createElement("a", { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     " apply.")),
             React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
                 React.createElement(core$1.Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
@@ -680,10 +722,10 @@
             React.createElement(core$1.Stack, { spacing: "xl" },
                 React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
                 React.createElement(core$1.PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
-            React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
                 onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
                 onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
-                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs" }),
+                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),
                 React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
     }
 
@@ -1028,6 +1070,7 @@
             case core.PropertyType.Period:
                 return React.createElement(React.Fragment, null, core.formatPeriod(value));
             case core.PropertyType.Quantity:
+            case core.PropertyType.Duration:
                 return React.createElement(QuantityDisplay, { value: value });
             case core.PropertyType.Range:
                 return React.createElement(RangeDisplay, { value: value });
@@ -1037,6 +1080,9 @@
                 return React.createElement(ReferenceDisplay, { value: value, link: props.link });
             case core.PropertyType.Timing:
                 return React.createElement(React.Fragment, null, core.formatTiming(value));
+            case core.PropertyType.Dosage:
+            case core.PropertyType.UsageContext:
+                return (React.createElement(BackboneElementDisplay, { value: { type: propertyType, value }, compact: true, ignoreMissingValues: props.ignoreMissingValues }));
             default:
                 if (!(property === null || property === void 0 ? void 0 : property.path)) {
                     throw Error(`Displaying property of type ${props.propertyType} requires element definition path`);
@@ -1093,6 +1139,9 @@
                 return null;
             }
             const property = entry[1];
+            if (!property.path) {
+                property.path = typeName + '.' + key;
+            }
             const [propertyValue, propertyType] = getValueAndType(typedValue, key);
             if (props.ignoreMissingValues &&
                 (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {
@@ -1645,6 +1694,7 @@
         Observation: 'code',
         RequestGroup: '_id',
         ActivityDefinition: 'name',
+        User: 'email',
     };
     function ResourceInput(props) {
         const medplum = useMedplum();
@@ -1968,6 +2018,7 @@
                 return React.createElement(IdentifierInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Period:
                 return React.createElement(PeriodInput, { name: name, defaultValue: value, onChange: props.onChange });
+            case core.PropertyType.Duration:
             case core.PropertyType.Quantity:
                 return React.createElement(QuantityInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Range:
@@ -1978,6 +2029,9 @@
                 return (React.createElement(ReferenceInput, { name: name, defaultValue: value, targetTypes: getTargetTypes(property), onChange: props.onChange }));
             case core.PropertyType.Timing:
                 return React.createElement(TimingInput, { name: name, defaultValue: value, onChange: props.onChange });
+            case core.PropertyType.Dosage:
+            case core.PropertyType.UsageContext:
+                return (React.createElement(BackboneElementInput, { typeName: propertyType, defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
             default:
                 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 }));
         }
@@ -2396,29 +2450,30 @@
     }
 
     function Timeline(props) {
-        return React.createElement(core$1.Container, null, props.children);
+        return React.createElement(Container, null, props.children);
     }
     function TimelineItem(props) {
-        var _a, _b, _c;
-        const author = (_a = props.profile) !== null && _a !== void 0 ? _a : (_b = props.resource.meta) === null || _b === void 0 ? void 0 : _b.author;
-        return (React.createElement(core$1.Paper, { "data-testid": "timeline-item", m: "lg", p: "sm", shadow: "xs", radius: "sm", withBorder: true, className: props.className },
-            React.createElement(core$1.Group, { position: "apart", spacing: 8 },
+        var _a, _b;
+        const { resource, profile, padding, popupMenuItems } = props, others = __rest(props, ["resource", "profile", "padding", "popupMenuItems"]);
+        const author = profile !== null && profile !== void 0 ? profile : (_a = resource.meta) === null || _a === void 0 ? void 0 : _a.author;
+        return (React.createElement(Panel, Object.assign({ "data-testid": "timeline-item", fill: true }, others),
+            React.createElement(core$1.Group, { position: "apart", spacing: 8, mx: "xs", my: "sm" },
                 React.createElement(ResourceAvatar, { value: author, link: true, size: "md" }),
                 React.createElement("div", { style: { flex: 1 } },
                     React.createElement(core$1.Text, { size: "sm" },
                         React.createElement(ResourceName, { color: "dark", weight: 500, value: author, link: true })),
                     React.createElement(core$1.Text, { size: "xs" },
-                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, core.formatDateTime((_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated)),
+                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, core.formatDateTime((_b = props.resource.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated)),
                         React.createElement(core$1.Text, { component: "span", color: "dimmed", mx: 8 }, "\u00B7"),
                         React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, props.resource.resourceType))),
-                props.popupMenuItems && (React.createElement(core$1.Menu, { position: "bottom-end", shadow: "md", width: 200 },
+                popupMenuItems && (React.createElement(core$1.Menu, { position: "bottom-end", shadow: "md", width: 200 },
                     React.createElement(core$1.Menu.Target, null,
                         React.createElement(core$1.ActionIcon, { radius: "xl", "aria-label": `Actions for ${core.getReferenceString(props.resource)}` },
                             React.createElement(icons.IconDots, null))),
-                    props.popupMenuItems))),
+                    popupMenuItems))),
             React.createElement(ErrorBoundary, null,
-                props.padding && React.createElement("div", { style: { padding: '2px 16px 16px 16px' } }, props.children),
-                !props.padding && React.createElement(React.Fragment, null, props.children))));
+                padding && React.createElement("div", { style: { padding: '0 16px 16px 16px' } }, props.children),
+                !padding && React.createElement(React.Fragment, null, props.children))));
     }
 
     /**
@@ -2625,7 +2680,7 @@
                 React.createElement(core$1.Loader, null)));
         }
         return (React.createElement(Timeline, null,
-            props.createCommunication && (React.createElement(core$1.Paper, { m: "lg", p: "sm", shadow: "xs", radius: "sm", withBorder: true },
+            props.createCommunication && (React.createElement(Panel, null,
                 React.createElement(Form, { testid: "timeline-form", onSubmit: (formData) => {
                         createComment(formData.text);
                         const input = inputRef.current;
@@ -4049,7 +4104,7 @@
                     checkboxColumn && (React.createElement("td", null,
                         React.createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!state.selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
                     fields.map((field) => (React.createElement("td", { key: field.name }, renderValue(resource, field))))))))),
-            (resources === null || resources === void 0 ? void 0 : resources.length) === 0 && (React.createElement(core$1.Container, null,
+            (resources === null || resources === void 0 ? void 0 : resources.length) === 0 && (React.createElement(Container, null,
                 React.createElement(core$1.Center, null,
                     React.createElement(core$1.Text, { size: "xl", color: "dimmed" }, "No results")))),
             (lastResult === null || lastResult === void 0 ? void 0 : lastResult.total) !== undefined && lastResult.total > 0 && (React.createElement(core$1.Center, { m: "md", p: "md" },
@@ -4341,7 +4396,7 @@
             props.actions.map((action) => (React.createElement("div", { key: action.id },
                 React.createElement(ActionBuilder, { action: action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: changeAction, onRemove: () => removeAction(action) })))),
             React.createElement("div", { className: classes.bottomActions },
-                React.createElement("a", { href: "#", onClick: (e) => {
+                React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                         killEvent(e);
                         addAction({ id: generateId$1() });
                     } }, "Add action"))));
@@ -4367,7 +4422,7 @@
         return (React.createElement("div", { "data-testid": action.id, className: className, onClick: onClick, onMouseOver: onHover },
             editing ? (React.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.createElement(ActionDisplay, { action: action, actionType: actionType })),
             React.createElement("div", { className: classes.bottomActions },
-                React.createElement("a", { href: "#", onClick: (e) => {
+                React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                         e.preventDefault();
                         props.onRemove();
                     } }, "Remove"))));
@@ -4917,7 +4972,7 @@
                     ] })))) : (React.createElement("div", null, linkId)))),
             React.createElement("div", { className: classes.bottomActions },
                 isContainer && (React.createElement(React.Fragment, null,
-                    React.createElement("a", { href: "#", onClick: (e) => {
+                    React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                             e.preventDefault();
                             addItem({
                                 id: generateId(),
@@ -4926,7 +4981,7 @@
                                 text: 'Question',
                             });
                         } }, "Add item"),
-                    React.createElement("a", { href: "#", onClick: (e) => {
+                    React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                             e.preventDefault();
                             addItem({
                                 id: generateId(),
@@ -4935,7 +4990,7 @@
                                 text: 'Group',
                             });
                         } }, "Add group"))),
-                editing && !isResource && (React.createElement("a", { href: "#", onClick: (e) => {
+                editing && !isResource && (React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                         e.preventDefault();
                         if (props.onRemove) {
                             props.onRemove();
@@ -4964,12 +5019,12 @@
                                 props.onChange(newOptions);
                             } })),
                     React.createElement("div", null,
-                        React.createElement("a", { href: "#", onClick: (e) => {
+                        React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                                 killEvent(e);
                                 props.onChange(options.filter((o) => o.id !== option.id));
                             } }, "Remove"))));
             }),
-            React.createElement("a", { href: "#", onClick: (e) => {
+            React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                     killEvent(e);
                     props.onChange([
                         ...options,
@@ -5129,7 +5184,7 @@
     function ReferenceRangeGroupEditor(props) {
         const { intervalGroup, unit } = props;
         const { classes } = useStyles$3();
-        return (React.createElement(core$1.Container, { "data-testid": intervalGroup.id, className: classes.section },
+        return (React.createElement(Container, { "data-testid": intervalGroup.id, className: classes.section },
             React.createElement(core$1.Stack, { spacing: 'lg' },
                 React.createElement(core$1.Group, { position: "right" },
                     React.createElement(core$1.ActionIcon, { title: "Remove Group", "data-testid": `remove-group-button-${intervalGroup.id}`, key: `remove-group-button-${intervalGroup.id}`, size: "sm", onClick: (e) => {
@@ -5928,6 +5983,7 @@
     exports.ContactDetailInput = ContactDetailInput;
     exports.ContactPointDisplay = ContactPointDisplay;
     exports.ContactPointInput = ContactPointInput;
+    exports.Container = Container;
     exports.DateTimeInput = DateTimeInput;
     exports.DefaultResourceTimeline = DefaultResourceTimeline;
     exports.DescriptionList = DescriptionList;
@@ -5951,6 +6007,7 @@
     exports.MemoizedFhirPathTable = MemoizedFhirPathTable;
     exports.MemoizedSearchControl = MemoizedSearchControl;
     exports.ObservationTable = ObservationTable;
+    exports.Panel = Panel;
     exports.PatientTimeline = PatientTimeline;
     exports.PlanDefinitionBuilder = PlanDefinitionBuilder;
     exports.QuantityDisplay = QuantityDisplay;