@medplum/react 0.9.26 → 0.9.29

package/dist/esm/stories/Autocomplete.stories.d.ts

@@ -6,3 +6,4 @@ export declare const Single: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;
 export declare const Prefilled: () => JSX.Element;
 export declare const HelpText: () => JSX.Element;
+export declare const LoadOnFocus: () => JSX.Element;

package/dist/esm/stories/CodeableConceptDisplay.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Empty: () => JSX.Element;
+export declare const TextValue: () => JSX.Element;
+export declare const CodeValue: () => JSX.Element;
+export declare const MultipleValues: () => JSX.Element;

package/dist/esm/stories/TimingInput.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Example: () => JSX.Element;
+export declare const DefaultValue: () => JSX.Element;

package/dist/esm/styles.css

@@ -468,11 +468,75 @@ input[type='radio']:disabled {
   background: var(--medplum-gray-100);
 }
 
-.medplum-resource-badge {
-  display: inline-flex;
+.modal-dialog {
+  background: var(--medplum-gray-600);
+  border: 0.1px solid var(--medplum-gray-700);
+  color: var(--medplum-foreground);
+  padding: 0;
+  position: absolute;
+  z-index: 21;
+  box-shadow: var(--medplum-shadow) 0 2px 6px;
+  outline: 0;
+}
+
+.modal-dialog a,
+.modal-dialog a:link,
+.modal-dialog a:visited {
+  color: var(--medplum-blue-800);
+  cursor: pointer;
+}
+
+.modal-dialog-bg {
+  background: rgba(0, 0, 0, 0.5);
+  left: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+}
+
+.modal-dialog-title {
+  background: var(--medplum-gray-800);
+  color: var(--medplum-surface);
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 4px;
-  white-space: nowrap;
+}
+
+.modal-dialog-title-close {
+  cursor: pointer;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.modal-dialog-title-close:hover {
+  background-color: var(--medplum-gray-700);
+}
+
+.modal-dialog-title-close > svg {
+  width: 20px;
+  height: 20px;
+}
+
+.modal-dialog-content {
+  text-align: center;
+  background-color: var(--medplum-surface);
+  padding: 8px;
+}
+
+.modal-dialog-buttons {
+  text-align: right;
+  background-color: var(--medplum-gray-100);
+  border-top: 1px solid var(--medplum-gray-400);
+  padding: 8px;
+}
+
+.modal-dialog-buttons button {
+  padding: 1px 6px;
 }
 
 .medplum-diagnostic-report-header {
@@ -513,6 +577,13 @@ input[type='radio']:disabled {
   margin: 0;
 }
 
+.medplum-resource-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
 table.medplum-table {
   border-collapse: collapse;
   width: 100%;
@@ -797,125 +868,6 @@ table.medplum-diff-table td {
   width: 100%;
 }
 
-.modal-dialog {
-  background: var(--medplum-gray-600);
-  border: 0.1px solid var(--medplum-gray-700);
-  color: var(--medplum-foreground);
-  padding: 0;
-  position: absolute;
-  z-index: 21;
-  box-shadow: var(--medplum-shadow) 0 2px 6px;
-  outline: 0;
-}
-
-.modal-dialog a,
-.modal-dialog a:link,
-.modal-dialog a:visited {
-  color: var(--medplum-blue-800);
-  cursor: pointer;
-}
-
-.modal-dialog-bg {
-  background: rgba(0, 0, 0, 0.5);
-  left: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 20;
-}
-
-.modal-dialog-title {
-  background: var(--medplum-gray-800);
-  color: var(--medplum-surface);
-  cursor: pointer;
-  padding: 6px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.modal-dialog-title-close {
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.modal-dialog-title-close:hover {
-  background-color: var(--medplum-gray-700);
-}
-
-.modal-dialog-title-close > svg {
-  width: 20px;
-  height: 20px;
-}
-
-.modal-dialog-content {
-  text-align: center;
-  background-color: var(--medplum-surface);
-  padding: 8px;
-}
-
-.modal-dialog-buttons {
-  text-align: right;
-  background-color: var(--medplum-gray-100);
-  border-top: 1px solid var(--medplum-gray-400);
-  padding: 8px;
-}
-
-.modal-dialog-buttons button {
-  padding: 1px 6px;
-}
-
-.medplum-filter-editor {
-  text-align: left;
-  width: 900px;
-  max-width: 900px;
-}
-
-.medplum-filter-editor-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.medplum-menu-separator {
-  border-top: 0.1px solid var(--medplum-gray-400);
-  margin: 4px 0;
-  padding: 0;
-}
-
-.medplum-submenu-arrow {
-  color: var(--medplum-foreground);
-  left: auto;
-  padding-right: 6px;
-  position: absolute;
-  right: 0;
-  text-align: right;
-  user-select: none;
-}
-
-.medplum-title-bar {
-  display: flex;
-  width: 100%;
-  height: 50px;
-  padding: 15px;
-  justify-content: space-between;
-  background: var(--medplum-surface);
-  border-bottom: 2px solid var(--medplum-gray-200);
-  color: var(--medplum-gray-800);
-}
-
-.medplum-title-bar > div {
-  display: flex;
-  align-items: center;
-}
-
-.medplum-title-bar h1 {
-  font-size: 14px;
-  font-weight: bold;
-  padding: 0 4px 0 1px;
-  margin: 0 4px 0 1px;
-  color: var(--medplum-gray-800);
-}
-
 .medplum-search-control {
   max-width: 100%;
   overflow: auto;
@@ -1035,6 +987,57 @@ table.medplum-diff-table td {
   outline: 0;
 }
 
+.medplum-filter-editor {
+  text-align: left;
+  width: 900px;
+  max-width: 900px;
+}
+
+.medplum-filter-editor-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.medplum-menu-separator {
+  border-top: 0.1px solid var(--medplum-gray-400);
+  margin: 4px 0;
+  padding: 0;
+}
+
+.medplum-submenu-arrow {
+  color: var(--medplum-foreground);
+  left: auto;
+  padding-right: 6px;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  user-select: none;
+}
+
+.medplum-title-bar {
+  display: flex;
+  width: 100%;
+  height: 50px;
+  padding: 15px;
+  justify-content: space-between;
+  background: var(--medplum-surface);
+  border-bottom: 2px solid var(--medplum-gray-200);
+  color: var(--medplum-gray-800);
+}
+
+.medplum-title-bar > div {
+  display: flex;
+  align-items: center;
+}
+
+.medplum-title-bar h1 {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 4px 0 1px;
+  margin: 0 4px 0 1px;
+  color: var(--medplum-gray-800);
+}
+
 .medplum-footer {
   text-align: center;
   font-size: 12px;
@@ -1316,10 +1319,10 @@ div.medplum-nav-menu-container {
 
 .medplum-questionnaire-builder .section {
   position: relative;
-  margin: 4px;
-  padding: 16px 12px 16px 4px;
+  margin: 4px 4px 4px 0;
+  padding: 4px 12px 16px 2px;
   background-color: var(--medplum-surface);
-  border: 1px solid var(--medplum-gray-300);
+  border: 1px solid var(--medplum-surface);
   border-radius: 8px;
 }
 
@@ -1328,18 +1331,19 @@ div.medplum-nav-menu-container {
 }
 
 .medplum-questionnaire-builder .section.hovering {
-  border-color: var(--medplum-blue-500);
+  border: 1px solid var(--medplum-blue-500);
 }
 
 .medplum-questionnaire-builder .section.editing {
-  margin: 8px 4px 12px 4px;
-  padding: 4px 4px 20px 4px;
+  margin: 8px 4px 12px 0;
+  padding: 4px 4px 20px 12px;
+  border: 1px solid var(--medplum-gray-300);
   border-left: 4px solid var(--medplum-blue-500);
 }
 
 .medplum-questionnaire-builder .section.editing input,
 .medplum-questionnaire-builder .section.editing select {
-  margin: 2px 4px;
+  margin: 2px 4px 2px 0;
 }
 
 .medplum-questionnaire-builder .section > .top-actions {
@@ -1393,6 +1397,7 @@ div.medplum-nav-menu-container {
 .medplum-signin-google-container {
   padding: 20px 0 10px 0;
   margin: 20px 0 10px 0;
+  height: 70px;
   text-align: center;
   display: flex;
   align-items: center;

package/dist/esm/utils/recaptcha.js

@@ -1,3 +1,4 @@
+import { __awaiter } from '../node_modules/tslib/tslib.es6.js';
 import { createScriptTag } from '../utils.js';
 
 /**
@@ -16,10 +17,15 @@ function initRecaptcha(siteKey) {
  * @returns Promise to a recaptcha token for the current user.
  */
 function getRecaptcha(siteKey) {
-    return new Promise((resolve) => {
-        grecaptcha.ready(() => {
-            grecaptcha.execute(siteKey, { action: 'submit' }).then(resolve);
-        });
+    return new Promise((resolve, reject) => {
+        grecaptcha.ready(() => __awaiter(this, void 0, void 0, function* () {
+            try {
+                resolve(yield grecaptcha.execute(siteKey, { action: 'submit' }));
+            }
+            catch (err) {
+                reject(err);
+            }
+        }));
     });
 }
 

package/dist/esm/utils/recaptcha.js.map

@@ -1 +1 @@
-{"version":3,"file":"recaptcha.js","sources":["../../../src/utils/recaptcha.ts"],"sourcesContent":["import { createScriptTag } from '../utils';\n\n/**\n * Dynamically loads the recaptcha script.\n * We do not want to load the script on page load unless the user needs it.\n * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.\n */\nexport function initRecaptcha(siteKey: string): void {\n  if (typeof grecaptcha === 'undefined') {\n    createScriptTag('https://www.google.com/recaptcha/api.js?render=' + siteKey);\n  }\n}\n\n/**\n * Starts a request to generate a recapcha token.\n * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.\n * @returns Promise to a recaptcha token for the current user.\n */\nexport function getRecaptcha(siteKey: string): Promise<string> {\n  return new Promise((resolve) => {\n    grecaptcha.ready(() => {\n      grecaptcha.execute(siteKey, { action: 'submit' }).then(resolve);\n    });\n  });\n}\n"],"names":[],"mappings":";;AAEA;;;;AAIG;AACG,SAAU,aAAa,CAAC,OAAe,EAAA;AAC3C,IAAA,IAAI,OAAO,UAAU,KAAK,WAAW,EAAE;AACrC,QAAA,eAAe,CAAC,iDAAiD,GAAG,OAAO,CAAC,CAAC;AAC9E,KAAA;AACH,CAAC;AAED;;;;AAIG;AACG,SAAU,YAAY,CAAC,OAAe,EAAA;AAC1C,IAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AAC7B,QAAA,UAAU,CAAC,KAAK,CAAC,MAAK;AACpB,YAAA,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClE,SAAC,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;AACL;;;;"}
+{"version":3,"file":"recaptcha.js","sources":["../../../src/utils/recaptcha.ts"],"sourcesContent":["import { createScriptTag } from '../utils';\n\n/**\n * Dynamically loads the recaptcha script.\n * We do not want to load the script on page load unless the user needs it.\n * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.\n */\nexport function initRecaptcha(siteKey: string): void {\n  if (typeof grecaptcha === 'undefined') {\n    createScriptTag('https://www.google.com/recaptcha/api.js?render=' + siteKey);\n  }\n}\n\n/**\n * Starts a request to generate a recapcha token.\n * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.\n * @returns Promise to a recaptcha token for the current user.\n */\nexport function getRecaptcha(siteKey: string): Promise<string> {\n  return new Promise((resolve, reject) => {\n    grecaptcha.ready(async () => {\n      try {\n        resolve(await grecaptcha.execute(siteKey, { action: 'submit' }));\n      } catch (err) {\n        reject(err);\n      }\n    });\n  });\n}\n"],"names":[],"mappings":";;;AAEA;;;;AAIG;AACG,SAAU,aAAa,CAAC,OAAe,EAAA;AAC3C,IAAA,IAAI,OAAO,UAAU,KAAK,WAAW,EAAE;AACrC,QAAA,eAAe,CAAC,iDAAiD,GAAG,OAAO,CAAC,CAAC;AAC9E,KAAA;AACH,CAAC;AAED;;;;AAIG;AACG,SAAU,YAAY,CAAC,OAAe,EAAA;IAC1C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,KAAI;AACrC,QAAA,UAAU,CAAC,KAAK,CAAC,MAAW,SAAA,CAAA,IAAA,EAAA,KAAA,CAAA,EAAA,KAAA,CAAA,EAAA,aAAA;YAC1B,IAAI;AACF,gBAAA,OAAO,CAAC,MAAM,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AAClE,aAAA;AAAC,YAAA,OAAO,GAAG,EAAE;gBACZ,MAAM,CAAC,GAAG,CAAC,CAAC;AACb,aAAA;SACF,CAAA,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;AACL;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medplum/react",
-  "version": "0.9.26",
+  "version": "0.9.29",
   "description": "Medplum React Component Library",
   "author": "Medplum <hello@medplum.com>",
   "license": "Apache-2.0",
@@ -19,9 +19,9 @@
     "storybook": "build-storybook"
   },
   "devDependencies": {
-    "@medplum/core": "0.9.26",
-    "@medplum/fhirtypes": "0.9.26",
-    "@medplum/mock": "0.9.26",
+    "@medplum/core": "0.9.29",
+    "@medplum/fhirtypes": "0.9.29",
+    "@medplum/mock": "0.9.29",
     "@storybook/addon-actions": "6.5.9",
     "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-links": "6.5.9",
@@ -32,7 +32,7 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
     "@types/jest": "28.1.6",
-    "@types/node": "18.0.6",
+    "@types/node": "18.6.3",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@types/react-router-dom": "5.3.3",
@@ -48,7 +48,7 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@medplum/core": "0.9.26",
+    "@medplum/core": "0.9.29",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
     "react-router-dom": "^6.2.2"

package/dist/esm/DateTimeDisplay.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface DateTimeDisplayProps {
-    value?: string;
-}
-export declare function DateTimeDisplay(props: DateTimeDisplayProps): JSX.Element | null;

package/dist/esm/DateTimeDisplay.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function DateTimeDisplay(props) {
-    if (!props.value) {
-        return null;
-    }
-    return React.createElement(React.Fragment, null, new Date(props.value).toLocaleString());
-}
-
-export { DateTimeDisplay };
-//# sourceMappingURL=DateTimeDisplay.js.map

package/dist/esm/DateTimeDisplay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateTimeDisplay.js","sources":["../../src/DateTimeDisplay.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface DateTimeDisplayProps {\n  value?: string;\n}\n\nexport function DateTimeDisplay(props: DateTimeDisplayProps): JSX.Element | null {\n  if (!props.value) {\n    return null;\n  }\n  return <>{new Date(props.value).toLocaleString()}</>;\n}\n"],"names":[],"mappings":";;AAMM,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AAChB,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AACD,IAAA,OAAO,KAAG,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAI,CAAC;AACvD;;;;"}

package/dist/esm/PeriodDisplay.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { Period } from '@medplum/fhirtypes';
-export interface PeriodDisplayProps {
-    value?: Period;
-}
-export declare function PeriodDisplay(props: PeriodDisplayProps): JSX.Element | null;

package/dist/esm/PeriodDisplay.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { DateTimeDisplay } from './DateTimeDisplay.js';
-
-function PeriodDisplay(props) {
-    const value = props.value;
-    if (!value || (!value.start && !value.end)) {
-        return null;
-    }
-    return (React.createElement("span", null,
-        React.createElement(DateTimeDisplay, { value: value.start }),
-        "-",
-        React.createElement(DateTimeDisplay, { value: value.end })));
-}
-
-export { PeriodDisplay };
-//# sourceMappingURL=PeriodDisplay.js.map

package/dist/esm/PeriodDisplay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PeriodDisplay.js","sources":["../../src/PeriodDisplay.tsx"],"sourcesContent":["import { Period } from '@medplum/fhirtypes';\nimport React from 'react';\nimport { DateTimeDisplay } from './DateTimeDisplay';\n\nexport interface PeriodDisplayProps {\n  value?: Period;\n}\n\nexport function PeriodDisplay(props: PeriodDisplayProps): JSX.Element | null {\n  const value = props.value;\n  if (!value || (!value.start && !value.end)) {\n    return null;\n  }\n\n  return (\n    <span>\n      <DateTimeDisplay value={value.start} />\n      -\n      <DateTimeDisplay value={value.end} />\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;AAQM,SAAU,aAAa,CAAC,KAAyB,EAAA;AACrD,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAC1B,IAAA,IAAI,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AAC1C,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAI,CAAA;;QAEvC,KAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,GAAG,EAAA,CAAI,CAChC,EACP;AACJ;;;;"}

package/tsconfig.cjs.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist/cjs"
-  },
-  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
-}

package/tsconfig.esm.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist/esm"
-  },
-  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
-}