@medplum/react 0.9.17 → 0.9.20

package/dist/esm/styles.css

@@ -1,8 +1,8 @@
 .medplum-input {
   border: 0.1px solid var(--medplum-gray-300);
-  border-radius: 3px;
+  border-radius: 2px;
   background: var(--medplum-surface);
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   color: var(--medplum-gray-800);
   font-size: var(--medplum-font-normal);
   height: 34px;
@@ -12,6 +12,10 @@
   width: 100%;
 }
 
+.medplum-input::placeholder {
+  color: var(--medplum-gray-600);
+}
+
 .medplum-input:focus {
   background: var(--medplum-surface);
   color: var(--medplum-gray-900);
@@ -31,26 +35,6 @@
   color: red;
 }
 
-input[type='checkbox'],
-input[type='radio'] {
-  border: 0.1px solid var(--medplum-gray-300);
-  border-radius: 0;
-  background: var(--medplum-surface);
-  margin: 4px;
-}
-
-input[type='checkbox']:focus,
-input[type='radio']:focus {
-  background: var(--medplum-surface);
-  color: var(--medplum-gray-900);
-  border: 0.1px solid var(--medplum-blue-300);
-}
-
-input[type='checkbox']:disabled,
-input[type='radio']:disabled {
-  background: var(--medplum-gray-100);
-}
-
 .medplum-input-row {
   display: flex;
   width: 100%;
@@ -62,7 +46,7 @@ input[type='radio']:disabled {
 select.medplum-select {
   background: var(--medplum-surface);
   padding: 4px 8px;
-  margin: 1px;
+  margin: 1px 1px 1px 0;
   line-height: 28px;
   border-radius: 3px;
 }
@@ -70,7 +54,7 @@ select.medplum-select {
 select.medplum-select:not([size]) {
   border: 0.1px solid var(--medplum-gray-300);
   border-radius: 3px;
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   color: var(--medplum-gray-800);
   font-size: var(--medplum-font-normal);
   height: 34px;
@@ -98,10 +82,10 @@ select.medplum-select:disabled {
   font-size: var(--medplum-font-normal);
   line-height: 24px;
   color: var(--medplum-gray-800);
-  margin: 1px 2px;
+  margin: 1px 2px 1px 0;
   padding: 4px 12px;
   cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
 }
 
 .medplum-button:hover {
@@ -192,7 +176,7 @@ select.medplum-select:disabled {
   border: 0.1px solid var(--medplum-gray-300);
   border-radius: 3px;
   background: var(--medplum-surface);
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   outline: 2px var(--medplum-surface);
   position: relative;
   cursor: text;
@@ -230,10 +214,10 @@ select.medplum-select:disabled {
 
 .medplum-autocomplete-container li.medplum-autocomplete-item.choice {
   margin: 1px 0 1px 4px;
-  padding: 0 6px;
-  border: 0.1px solid var(--medplum-orange-200);
+  padding: 2px 6px 0 6px;
+  border: 0.1px solid var(--medplum-gray-400);
   border-radius: 4px;
-  background-color: var(--medplum-gray-50);
+  background-color: var(--medplum-gray-200);
   cursor: move;
   line-height: 22px;
 }
@@ -245,7 +229,7 @@ select.medplum-select:disabled {
 .medplum-autocomplete-container li.medplum-autocomplete-item input {
   color: var(--medplum-gray-800);
   display: inline-block;
-  width: 80px;
+  width: 100%;
   height: 28px;
   line-height: 26px;
   padding: 0 0 0 4px;
@@ -376,31 +360,42 @@ select.medplum-select:disabled {
   text-decoration: none;
 }
 
-fieldset {
-  border: 0;
-  margin: 6px 0 16px 0;
-  padding: 2px 0 8px 0;
+.medplum-checkbox-form-section {
+  display: flex;
+  justify-content: space-between;
 }
 
-fieldset.bordered {
-  border: 0.1px solid var(--medplum-gray-300);
-  border-radius: 6px;
-  margin: 6px 0 16px 0;
-  padding: 2px 8px 8px 8px;
+.medplum-checkbox-form-section-checkbox-container {
+  width: 30px;
 }
 
-fieldset label,
-fieldset legend {
-  display: block;
-  margin: 2px 0 4px 0;
-  font-size: var(--medplum-font-small);
+.medplum-checkbox-form-section-details-container {
+  flex: 1;
+  width: 100%;
 }
 
-fieldset small {
+.medplum-checkbox-form-section-details-container > label {
+  font-weight: 500;
+}
+
+fieldset.medplum-form-section {
+  border: 0;
+  margin: 6px 0 12px 0;
+  padding: 2px 0 8px 0;
+}
+
+fieldset.medplum-form-section > label,
+fieldset.medplum-form-section > legend {
   display: block;
-  margin: 2px 0 4px 0;
-  padding: 2px 0 4px 0;
-  font-size: var(--medplum-font-small);
+  margin: 1px 0 3px 0;
+  line-height: 1.75;
+  font-weight: 500;
+}
+
+fieldset.medplum-form-section > p {
+  margin: 1px 0 4px 0;
+  padding: 1px 0 4px 0;
+  line-height: 1.75;
 }
 
 dl.medplum-description-list {
@@ -426,17 +421,41 @@ dl.medplum-description-list.compact dd {
   border: 0;
 }
 
+input[type='checkbox'],
+input[type='radio'] {
+  background: var(--medplum-surface);
+  padding: 10px;
+  margin: 4px;
+  transform: scale(1.25);
+}
+
+input[type='checkbox']:focus,
+input[type='radio']:focus {
+  color: var(--medplum-gray-900);
+  border: 0.1px solid var(--medplum-blue-300);
+}
+
+input[type='checkbox']:disabled,
+input[type='radio']:disabled {
+  background: var(--medplum-gray-100);
+}
+
 .medplum-textarea {
   background: var(--medplum-surface);
   border: 0.1px solid var(--medplum-gray-300);
   border-radius: 3px;
-  box-shadow: 0 1px 1px 0 var(--medplum-shadow);
+  box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
   color: var(--medplum-foreground);
   line-height: 18px;
-  padding: 2px 4px;
+  padding: 8px 12px;
   margin: 0;
 }
 
+.medplum-textarea.monospace {
+  font-family: var(--medplum-monospace-font-family);
+  padding: 2px 4px;
+}
+
 .medplum-textarea:focus {
   background: var(--medplum-surface);
   color: var(--medplum-gray-900);
@@ -773,10 +792,8 @@ table.medplum-diff-table td {
 }
 
 .medplum-document textarea {
-  line-height: 18px;
   margin: 0;
-  min-height: 300px;
-  padding: 2px 4px;
+  min-height: 100px;
   width: 100%;
 }
 
@@ -1015,7 +1032,6 @@ table.medplum-diff-table td {
 .medplum-search-icon-cell input[type='checkbox'] {
   margin: 0;
   padding: 0;
-  border: 0.1px solid var(--medplum-gray-600);
   outline: 0;
 }
 
@@ -1120,7 +1136,7 @@ header a:focus {
 
 .medplum-nav-search-container > ul > li.choice {
   margin: 1px 0 1px 4px;
-  padding: 0 6px;
+  padding: 2px 6px 0 6px;
   border: 0.1px solid var(--medplum-orange-200);
   border-radius: 4px;
   background-color: var(--medplum-gray-50);
@@ -1135,7 +1151,7 @@ header a:focus {
 
 .medplum-nav-search-container > ul > li > input {
   display: inline-block;
-  width: 80px;
+  width: 100%;
   line-height: 26px;
   padding: 0 0 0 6px;
   margin: 2px 0 0 2px;
@@ -1327,7 +1343,7 @@ div.medplum-nav-menu-container {
 }
 
 .medplum-questionnaire-builder .section > .top-actions {
-  top: 0;
+  top: 1px;
   padding: 4px;
   color: var(--medplum-gray-500);
 }
@@ -1339,7 +1355,7 @@ div.medplum-nav-menu-container {
 .medplum-questionnaire-builder .section > .top-actions,
 .medplum-questionnaire-builder .section > .bottom-actions {
   position: absolute;
-  right: 0;
+  right: 4px;
 }
 
 .medplum-questionnaire-builder .section > .top-actions a,

package/dist/types/BackboneElementInput.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { ElementDefinition, OperationOutcome } from '@medplum/fhirtypes';
+import { OperationOutcome } from '@medplum/fhirtypes';
 export interface BackboneElementInputProps {
-    property: ElementDefinition;
-    name: string;
+    typeName: string;
     defaultValue?: any;
     outcome?: OperationOutcome;
     onChange?: (value: any) => void;

package/dist/types/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import './Checkbox.css';
+export interface CheckboxProps {
+    name?: string;
+    defaultValue?: boolean | number;
+    required?: boolean;
+    inputRef?: RefObject<HTMLInputElement>;
+    testid?: string;
+    disabled?: boolean;
+    onChange?: (newValue: boolean) => void;
+}
+export declare function Checkbox(props: CheckboxProps): JSX.Element;

package/dist/types/CheckboxFormSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './CheckboxFormSection.css';
+export interface CheckboxFormSectionProps {
+    htmlFor?: string;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+}
+export declare function CheckboxFormSection(props: CheckboxFormSectionProps): JSX.Element;

package/dist/types/ContactDetailDisplay.d.ts

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

package/dist/types/ContactDetailInput.d.ts

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

package/dist/types/ContactPointInput.d.ts

@@ -3,6 +3,6 @@ import { ContactPoint } from '@medplum/fhirtypes';
 export interface ContactPointInputProps {
     name: string;
     defaultValue?: ContactPoint;
-    onChange?: (value: ContactPoint) => void;
+    onChange?: (value: ContactPoint | undefined) => void;
 }
 export declare function ContactPointInput(props: ContactPointInputProps): JSX.Element;

package/dist/types/GoogleButton.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { LoginAuthenticationResponse } from '@medplum/core';
+import { GoogleCredentialResponse } from '@medplum/core';
 export interface GoogleButtonProps {
-    googleClientId?: string;
-    handleAuthResponse: (response: LoginAuthenticationResponse) => void;
+    readonly googleClientId?: string;
+    readonly handleGoogleCredential: (response: GoogleCredentialResponse) => void;
 }
 export declare function GoogleButton(props: GoogleButtonProps): JSX.Element | null;
 export declare function getGoogleClientId(clientId: string | undefined): string | undefined;

package/dist/types/Input.d.ts

@@ -1,11 +1,12 @@
 import { OperationOutcome } from '@medplum/fhirtypes';
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import './Input.css';
 export interface InputProps {
     name?: string;
     type?: string;
     size?: number;
     step?: number | 'any';
+    style?: React.CSSProperties;
     defaultValue?: string | number;
     required?: boolean;
     autoCapitalize?: string;

package/dist/types/MedplumLink.d.ts

@@ -2,6 +2,7 @@ import { Reference, Resource } from '@medplum/fhirtypes';
 import React from 'react';
 export interface MedplumLinkProps {
     to?: Resource | Reference | string;
+    suffix?: string;
     label?: string;
     id?: string;
     testid?: string;

package/dist/types/RequestGroupDisplay.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { Reference, RequestGroup } from '@medplum/fhirtypes';
+import { Reference, RequestGroup, Task } from '@medplum/fhirtypes';
 import './RequestGroupDisplay.css';
 export interface RequestGroupDisplayProps {
     value?: RequestGroup | Reference<RequestGroup>;
+    onStart: (task: Task, input: Reference) => void;
+    onEdit: (task: Task, input: Reference, output: Reference) => void;
 }
 export declare function RequestGroupDisplay(props: RequestGroupDisplayProps): JSX.Element | null;

package/dist/types/SearchControl.d.ts

@@ -19,6 +19,8 @@ export interface SearchControlProps {
     search: SearchRequest;
     userConfig?: UserConfiguration;
     checkboxesEnabled?: boolean;
+    hideToolbar?: boolean;
+    hideFilters?: boolean;
     onLoad?: (e: SearchLoadEvent) => void;
     onChange?: (e: SearchChangeEvent) => void;
     onClick?: (e: SearchClickEvent) => void;

package/dist/types/SignInForm.d.ts

@@ -2,13 +2,16 @@ import React from 'react';
 import './SignInForm.css';
 import './util.css';
 export interface SignInFormProps {
-    scopes?: string;
-    remember?: boolean;
-    projectId?: string;
-    googleClientId?: string;
-    onSuccess?: () => void;
-    onForgotPassword?: () => void;
-    onRegister?: () => void;
-    children?: React.ReactNode;
+    readonly remember?: boolean;
+    readonly projectId?: string;
+    readonly googleClientId?: string;
+    readonly clientId?: string;
+    readonly scope?: string;
+    readonly nonce?: string;
+    readonly onSuccess?: () => void;
+    readonly onForgotPassword?: () => void;
+    readonly onRegister?: () => void;
+    readonly onCode?: (code: string) => void;
+    readonly children?: React.ReactNode;
 }
 export declare function SignInForm(props: SignInFormProps): JSX.Element;

package/dist/types/TextArea.d.ts

@@ -11,6 +11,7 @@ export interface TextAreaProps {
     outcome?: OperationOutcome;
     placeholder?: string;
     testid?: string;
+    monospace?: boolean;
     style?: React.CSSProperties;
     onChange?: (newValue: string) => void;
 }

package/dist/types/index.d.ts

@@ -7,9 +7,13 @@ export * from './Autocomplete';
 export * from './Avatar';
 export * from './BackboneElementInput';
 export * from './Button';
+export * from './Checkbox';
+export * from './CheckboxFormSection';
 export * from './CodeableConceptDisplay';
 export * from './CodeableConceptInput';
 export * from './CodeInput';
+export * from './ContactDetailDisplay';
+export * from './ContactDetailInput';
 export * from './ContactPointDisplay';
 export * from './ContactPointInput';
 export * from './DateTimeDisplay';

package/dist/types/stories/SearchControl.stories.d.ts

@@ -8,3 +8,6 @@ export declare const AllButtons: () => JSX.Element;
 export declare const ExtraFields: () => JSX.Element;
 export declare const ServiceRequests: () => JSX.Element;
 export declare const Observations: () => JSX.Element;
+export declare const HideToolbar: () => JSX.Element;
+export declare const HideFilters: () => JSX.Element;
+export declare const HideToolbarAndFilters: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medplum/react",
-  "version": "0.9.17",
+  "version": "0.9.20",
   "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.17",
-    "@medplum/fhirtypes": "0.9.17",
-    "@medplum/mock": "0.9.17",
+    "@medplum/core": "0.9.20",
+    "@medplum/fhirtypes": "0.9.20",
+    "@medplum/mock": "0.9.20",
     "@storybook/addon-actions": "6.5.9",
     "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-links": "6.5.9",
@@ -48,7 +48,7 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@medplum/core": "0.9.17",
+    "@medplum/core": "0.9.20",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
     "react-router-dom": "^6.2.2"