@medplum/react 0.9.27 → 0.9.30

package/dist/esm/Timeline.js

@@ -1,8 +1,7 @@
-import { getReferenceString } from '@medplum/core';
+import { formatDateTime, getReferenceString } from '@medplum/core';
 import React, { useState } from 'react';
 import { Avatar } from './Avatar.js';
 import { Button } from './Button.js';
-import { DateTimeDisplay } from './DateTimeDisplay.js';
 import { ErrorBoundary } from './ErrorBoundary.js';
 import { MedplumLink } from './MedplumLink.js';
 import { Popup } from './Popup.js';
@@ -23,8 +22,7 @@ function TimelineItem(props) {
             React.createElement("div", { className: "medplum-timeline-item-title" },
                 React.createElement(ResourceName, { value: author, link: true }),
                 React.createElement("div", { className: "medplum-timeline-item-subtitle" },
-                    React.createElement(MedplumLink, { to: props.resource },
-                        React.createElement(DateTimeDisplay, { value: (_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated })),
+                    React.createElement(MedplumLink, { to: props.resource }, formatDateTime((_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated)),
                     React.createElement("span", null, "\u00B7"),
                     React.createElement(MedplumLink, { to: props.resource }, props.resource.resourceType))),
             props.popupMenuItems && (React.createElement("div", { className: "medplum-timeline-item-actions" },

package/dist/esm/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","sources":["../../src/Timeline.tsx"],"sourcesContent":["import { getReferenceString } from '@medplum/core';\nimport { Reference, Resource } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { Avatar } from './Avatar';\nimport { Button } from './Button';\nimport { DateTimeDisplay } from './DateTimeDisplay';\nimport { ErrorBoundary } from './ErrorBoundary';\nimport { MedplumLink } from './MedplumLink';\nimport { Popup } from './Popup';\nimport { ResourceName } from './ResourceName';\nimport { killEvent } from './utils/dom';\nimport './Timeline.css';\n\nexport interface TimelineProps {\n  children?: React.ReactNode;\n}\n\nexport function Timeline(props: TimelineProps): JSX.Element {\n  return <main className=\"medplum-document medplum-timeline\">{props.children}</main>;\n}\n\nexport interface TimelineItemProps {\n  resource: Resource;\n  profile?: Reference;\n  socialEnabled?: boolean;\n  children?: React.ReactNode;\n  padding?: boolean;\n  className?: string;\n  popupMenuItems?: React.ReactNode;\n}\n\nexport function TimelineItem(props: TimelineItemProps): JSX.Element {\n  const [popupAnchor, setPopupAnchor] = useState<DOMRect | undefined>();\n  const author = props.profile ?? props.resource.meta?.author;\n  return (\n    <article className={props.className || 'medplum-timeline-item'} data-testid=\"timeline-item\">\n      <div className=\"medplum-timeline-item-header\">\n        <div className=\"medplum-timeline-item-avatar\">\n          <Avatar value={author} link={true} size=\"medium\" />\n        </div>\n        <div className=\"medplum-timeline-item-title\">\n          <ResourceName value={author} link={true} />\n          <div className=\"medplum-timeline-item-subtitle\">\n            <MedplumLink to={props.resource}>\n              <DateTimeDisplay value={props.resource.meta?.lastUpdated} />\n            </MedplumLink>\n            <span>&middot;</span>\n            <MedplumLink to={props.resource}>{props.resource.resourceType}</MedplumLink>\n          </div>\n        </div>\n        {props.popupMenuItems && (\n          <div className=\"medplum-timeline-item-actions\">\n            <a\n              href=\"#\"\n              aria-label={`Actions for ${getReferenceString(props.resource)}`}\n              onClick={(e) => {\n                killEvent(e);\n                const el = e.currentTarget;\n                const rect = el.getBoundingClientRect();\n                setPopupAnchor(rect);\n              }}\n            >\n              <svg fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <g transform=\"translate(-446 -350)\">\n                  <path d=\"M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0\"></path>\n                </g>\n              </svg>\n            </a>\n          </div>\n        )}\n      </div>\n      <ErrorBoundary>\n        {props.padding && <div style={{ padding: '2px 16px 16px 16px' }}>{props.children}</div>}\n        {!props.padding && <>{props.children}</>}\n      </ErrorBoundary>\n      {props.socialEnabled && (\n        <div className=\"medplum-timeline-item-footer\">\n          <Button borderless={true}>Like</Button>\n          <Button borderless={true}>Comment</Button>\n        </div>\n      )}\n      {props.popupMenuItems && (\n        <Popup visible={!!popupAnchor} anchor={popupAnchor} autoClose={true} onClose={() => setPopupAnchor(undefined)}>\n          {props.popupMenuItems}\n        </Popup>\n      )}\n    </article>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Timeline.js","sources":["../../src/Timeline.tsx"],"sourcesContent":["import { formatDateTime, getReferenceString } from '@medplum/core';\nimport { Reference, Resource } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { Avatar } from './Avatar';\nimport { Button } from './Button';\nimport { ErrorBoundary } from './ErrorBoundary';\nimport { MedplumLink } from './MedplumLink';\nimport { Popup } from './Popup';\nimport { ResourceName } from './ResourceName';\nimport './Timeline.css';\nimport { killEvent } from './utils/dom';\n\nexport interface TimelineProps {\n  children?: React.ReactNode;\n}\n\nexport function Timeline(props: TimelineProps): JSX.Element {\n  return <main className=\"medplum-document medplum-timeline\">{props.children}</main>;\n}\n\nexport interface TimelineItemProps {\n  resource: Resource;\n  profile?: Reference;\n  socialEnabled?: boolean;\n  children?: React.ReactNode;\n  padding?: boolean;\n  className?: string;\n  popupMenuItems?: React.ReactNode;\n}\n\nexport function TimelineItem(props: TimelineItemProps): JSX.Element {\n  const [popupAnchor, setPopupAnchor] = useState<DOMRect | undefined>();\n  const author = props.profile ?? props.resource.meta?.author;\n  return (\n    <article className={props.className || 'medplum-timeline-item'} data-testid=\"timeline-item\">\n      <div className=\"medplum-timeline-item-header\">\n        <div className=\"medplum-timeline-item-avatar\">\n          <Avatar value={author} link={true} size=\"medium\" />\n        </div>\n        <div className=\"medplum-timeline-item-title\">\n          <ResourceName value={author} link={true} />\n          <div className=\"medplum-timeline-item-subtitle\">\n            <MedplumLink to={props.resource}>{formatDateTime(props.resource.meta?.lastUpdated)}</MedplumLink>\n            <span>&middot;</span>\n            <MedplumLink to={props.resource}>{props.resource.resourceType}</MedplumLink>\n          </div>\n        </div>\n        {props.popupMenuItems && (\n          <div className=\"medplum-timeline-item-actions\">\n            <a\n              href=\"#\"\n              aria-label={`Actions for ${getReferenceString(props.resource)}`}\n              onClick={(e) => {\n                killEvent(e);\n                const el = e.currentTarget;\n                const rect = el.getBoundingClientRect();\n                setPopupAnchor(rect);\n              }}\n            >\n              <svg fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <g transform=\"translate(-446 -350)\">\n                  <path d=\"M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0\"></path>\n                </g>\n              </svg>\n            </a>\n          </div>\n        )}\n      </div>\n      <ErrorBoundary>\n        {props.padding && <div style={{ padding: '2px 16px 16px 16px' }}>{props.children}</div>}\n        {!props.padding && <>{props.children}</>}\n      </ErrorBoundary>\n      {props.socialEnabled && (\n        <div className=\"medplum-timeline-item-footer\">\n          <Button borderless={true}>Like</Button>\n          <Button borderless={true}>Comment</Button>\n        </div>\n      )}\n      {props.popupMenuItems && (\n        <Popup visible={!!popupAnchor} anchor={popupAnchor} autoClose={true} onClose={() => setPopupAnchor(undefined)}>\n          {props.popupMenuItems}\n        </Popup>\n      )}\n    </article>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAgBM,SAAU,QAAQ,CAAC,KAAoB,EAAA;IAC3C,OAAO,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mCAAmC,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAAC;AACrF,CAAC;AAYK,SAAU,YAAY,CAAC,KAAwB,EAAA;;IACnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAuB,CAAC;AACtE,IAAA,MAAM,MAAM,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAA,EAAA,GAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,CAAC;IAC5D,QACE,KAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,uBAAuB,EAAA,aAAA,EAAc,eAAe,EAAA;QACzF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;YAC3C,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;AAC3C,gBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,CAC/C;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAAA;gBAC1C,KAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAI,CAAA;gBAC3C,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA;AAC7C,oBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAG,EAAA,cAAc,CAAC,CAAA,EAAA,GAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAW,CAAC,CAAe;oBACjG,KAAqB,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAA,CAAA;AACrB,oBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAG,EAAA,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAe,CACxE,CACF;AACL,YAAA,KAAK,CAAC,cAAc,KACnB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,+BAA+B,EAAA;AAC5C,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAC,GAAG,gBACI,CAAe,YAAA,EAAA,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAC/D,OAAO,EAAE,CAAC,CAAC,KAAI;wBACb,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,wBAAA,MAAM,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC;AAC3B,wBAAA,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;wBACxC,cAAc,CAAC,IAAI,CAAC,CAAC;qBACtB,EAAA;AAED,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAA;wBAC1C,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA;4BACjC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,wGAAwG,EAAA,CAAQ,CACtH,CACA,CACJ,CACA,CACP,CACG;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA;AACX,YAAA,KAAK,CAAC,OAAO,IAAI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,EAAA,EAAG,KAAK,CAAC,QAAQ,CAAO;YACtF,CAAC,KAAK,CAAC,OAAO,IAAI,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAC1B;AACf,QAAA,KAAK,CAAC,aAAa,KAClB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;AAC3C,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,UAAU,EAAE,IAAI,EAAe,EAAA,MAAA,CAAA;AACvC,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,UAAU,EAAE,IAAI,EAAA,EAAA,SAAA,CAAkB,CACtC,CACP;AACA,QAAA,KAAK,CAAC,cAAc,KACnB,KAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,OAAO,EAAE,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC,SAAS,CAAC,EAAA,EAC1G,KAAK,CAAC,cAAc,CACf,CACT,CACO,EACV;AACJ;;;;"}

package/dist/esm/TimingInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Timing } from '@medplum/fhirtypes';
+export interface TimingInputProps {
+    name: string;
+    defaultValue?: Timing;
+    onChange?: (newValue: Timing) => void;
+}
+export declare function TimingInput(props: TimingInputProps): JSX.Element;

package/dist/esm/TimingInput.js

@@ -0,0 +1,90 @@
+import { formatTiming } from '@medplum/core';
+import React, { useState, useRef } from 'react';
+import { Button } from './Button.js';
+import { Checkbox } from './Checkbox.js';
+import { DateTimeInput } from './DateTimeInput.js';
+import { Dialog } from './Dialog.js';
+import { FormSection } from './FormSection.js';
+import { Input } from './Input.js';
+import { InputRow } from './InputRow.js';
+import { Select } from './Select.js';
+
+const daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+function TimingInput(props) {
+    const [value, setValue] = useState(props.defaultValue || {});
+    const [open, setOpen] = useState(false);
+    const valueRef = useRef();
+    valueRef.current = value;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputRow, null,
+            React.createElement("span", null, formatTiming(valueRef.current) || 'No repeat'),
+            React.createElement(Button, { onClick: () => setOpen(true) }, "Edit")),
+        React.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] = useState(props.defaultValue || {});
+    const valueRef = 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.createElement(Dialog, { title: "Timing", visible: props.visible, onOk: () => props.onOk(value), onCancel: () => props.onCancel() },
+        React.createElement("div", { style: { padding: '5px 20px', textAlign: 'left' } },
+            React.createElement(FormSection, { title: "Starts on", htmlFor: 'timing-dialog-start' },
+                React.createElement(DateTimeInput, { name: 'timing-dialog-start', onChange: (newValue) => setStart(newValue) })),
+            React.createElement(FormSection, { title: "Repeat every", htmlFor: 'timing-dialog-period' },
+                React.createElement(InputRow, null,
+                    React.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.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.createElement("option", { value: "d" }, "day"),
+                        React.createElement("option", { value: "wk" }, "week"),
+                        React.createElement("option", { value: "mo" }, "month"),
+                        React.createElement("option", { value: "a" }, "year")))),
+            React.createElement(FormSection, { title: "Repeat on" },
+                React.createElement(InputRow, null, daysOfWeek.map((day) => (React.createElement(React.Fragment, { key: day },
+                    React.createElement("label", { htmlFor: 'timing-dialog-repeat-' + day }, day.charAt(0).toUpperCase()),
+                    React.createElement(Checkbox, { name: 'timing-dialog-repeat-' + day, onChange: (newValue) => setDayOfWeek(day, newValue) })))))))));
+}
+
+export { TimingInput };
+//# sourceMappingURL=TimingInput.js.map

package/dist/esm/TimingInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimingInput.js","sources":["../../src/TimingInput.tsx"],"sourcesContent":["import { formatTiming } from '@medplum/core';\nimport { Timing, TimingRepeat } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\nimport { Button } from './Button';\nimport { Checkbox } from './Checkbox';\nimport { DateTimeInput } from './DateTimeInput';\nimport { Dialog } from './Dialog';\nimport { FormSection } from './FormSection';\nimport { Input } from './Input';\nimport { InputRow } from './InputRow';\nimport { Select } from './Select';\n\nconst daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\n\nexport interface TimingInputProps {\n  name: string;\n  defaultValue?: Timing;\n  onChange?: (newValue: Timing) => void;\n}\n\nexport function TimingInput(props: TimingInputProps): JSX.Element {\n  const [value, setValue] = useState<Timing>(props.defaultValue || {});\n  const [open, setOpen] = useState(false);\n\n  const valueRef = useRef<Timing>();\n  valueRef.current = value;\n\n  return (\n    <>\n      <InputRow>\n        <span>{formatTiming(valueRef.current) || 'No repeat'}</span>\n        <Button onClick={() => setOpen(true)}>Edit</Button>\n      </InputRow>\n      <TimingEditorDialog\n        visible={open}\n        defaultValue={valueRef.current}\n        onOk={(newValue) => {\n          if (props.onChange) {\n            props.onChange(newValue);\n          }\n          setValue(newValue);\n          setOpen(false);\n        }}\n        onCancel={() => setOpen(false)}\n      />\n    </>\n  );\n}\n\ninterface TimingEditorDialogProps {\n  visible: boolean;\n  defaultValue?: Timing;\n  onOk: (newValue: Timing) => void;\n  onCancel: () => void;\n}\n\nfunction TimingEditorDialog(props: TimingEditorDialogProps): JSX.Element {\n  const [value, setValue] = useState<Timing>(props.defaultValue || {});\n\n  const valueRef = useRef<Timing>();\n  valueRef.current = value;\n\n  function setStart(newStart: string): void {\n    setValue({ ...valueRef.current, event: [newStart] });\n  }\n\n  function setRepeat(repeat: TimingRepeat): void {\n    setValue({ ...valueRef.current, repeat });\n  }\n\n  function setPeriod(newPeriod: number | undefined): void {\n    setRepeat({ ...valueRef.current?.repeat, period: newPeriod });\n  }\n\n  function setPeriodUnit(newPeriodUnit: string | undefined): void {\n    setRepeat({ ...valueRef.current?.repeat, periodUnit: newPeriodUnit });\n  }\n\n  function setDayOfWeek(day: string, enabled: boolean): void {\n    if (enabled) {\n      addDayOfWeek(day);\n    } else {\n      removeDayOfWeek(day);\n    }\n  }\n\n  function addDayOfWeek(day: string): void {\n    const existing = valueRef.current?.repeat?.dayOfWeek || [];\n    if (!existing.includes(day)) {\n      setRepeat({ ...valueRef.current?.repeat, dayOfWeek: [...existing, day] });\n    }\n  }\n\n  function removeDayOfWeek(day: string): void {\n    const existing = valueRef.current?.repeat?.dayOfWeek || [];\n    if (existing.includes(day)) {\n      setRepeat({ ...valueRef.current?.repeat, dayOfWeek: existing.filter((d) => d !== day) });\n    }\n  }\n\n  return (\n    <Dialog title=\"Timing\" visible={props.visible} onOk={() => props.onOk(value)} onCancel={() => props.onCancel()}>\n      <div style={{ padding: '5px 20px', textAlign: 'left' }}>\n        <FormSection title=\"Starts on\" htmlFor={'timing-dialog-start'}>\n          <DateTimeInput name={'timing-dialog-start'} onChange={(newValue) => setStart(newValue)} />\n        </FormSection>\n        <FormSection title=\"Repeat every\" htmlFor={'timing-dialog-period'}>\n          <InputRow>\n            <Input\n              type=\"number\"\n              step={1}\n              name={'timing-dialog-period'}\n              defaultValue={value?.repeat?.period}\n              onChange={(newValue) => setPeriod(parseInt(newValue))}\n            />\n            <Select\n              name={'timing-dialog-periodUnit'}\n              defaultValue={value?.repeat?.periodUnit}\n              onChange={(newValue) => setPeriodUnit(newValue)}\n            >\n              <option value=\"d\">day</option>\n              <option value=\"wk\">week</option>\n              <option value=\"mo\">month</option>\n              <option value=\"a\">year</option>\n            </Select>\n          </InputRow>\n        </FormSection>\n        <FormSection title=\"Repeat on\">\n          <InputRow>\n            {daysOfWeek.map((day) => (\n              <React.Fragment key={day}>\n                <label htmlFor={'timing-dialog-repeat-' + day}>{day.charAt(0).toUpperCase()}</label>\n                <Checkbox name={'timing-dialog-repeat-' + day} onChange={(newValue) => setDayOfWeek(day, newValue)} />\n              </React.Fragment>\n            ))}\n          </InputRow>\n        </FormSection>\n      </div>\n    </Dialog>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -16,9 +16,9 @@ export * from './ContactDetailDisplay';
 export * from './ContactDetailInput';
 export * from './ContactPointDisplay';
 export * from './ContactPointInput';
-export * from './DateTimeDisplay';
 export * from './DateTimeInput';
 export * from './DefaultResourceTimeline';
+export * from './DescriptionList';
 export * from './DiagnosticReportDisplay';
 export * from './Document';
 export * from './EncounterTimeline';

package/dist/esm/index.js

@@ -16,9 +16,9 @@ export { ContactDetailDisplay } from './ContactDetailDisplay.js';
 export { ContactDetailInput } from './ContactDetailInput.js';
 export { ContactPointDisplay } from './ContactPointDisplay.js';
 export { ContactPointInput } from './ContactPointInput.js';
-export { DateTimeDisplay } from './DateTimeDisplay.js';
 export { DateTimeInput, convertIsoToLocal, convertLocalToIso } from './DateTimeInput.js';
 export { DefaultResourceTimeline } from './DefaultResourceTimeline.js';
+export { DescriptionList, DescriptionListEntry } from './DescriptionList.js';
 export { DiagnosticReportDisplay, ObservationTable } from './DiagnosticReportDisplay.js';
 export { Document } from './Document.js';
 export { EncounterTimeline } from './EncounterTimeline.js';