@medplum/react 0.9.37 → 0.10.0

package/dist/cjs/utils/outcomes.d.ts

@@ -1,2 +1,3 @@
 import { OperationOutcome, OperationOutcomeIssue } from '@medplum/fhirtypes';
+export declare function getErrorsForInput(outcome: OperationOutcome | undefined, expression: string | undefined): string | undefined;
 export declare function getIssuesForExpression(outcome: OperationOutcome | undefined, expression: string | undefined): OperationOutcomeIssue[] | undefined;

package/dist/esm/AddressInput.js

@@ -1,7 +1,5 @@
+import { Group, NativeSelect, TextInput } from '@mantine/core';
 import React, { useState, useRef } from 'react';
-import { Input } from './Input.js';
-import { InputRow } from './InputRow.js';
-import { Select } from './Select.js';
 
 function getLine(address, index) {
     return address && address.line && address.line.length > index ? address.line[index] : '';
@@ -45,24 +43,14 @@ function AddressInput(props) {
     function setPostalCode(postalCode) {
         setValueWrapper(Object.assign(Object.assign({}, valueRef.current), { postalCode }));
     }
-    return (React.createElement(InputRow, null,
-        React.createElement(Select, { testid: "address-use", defaultValue: value === null || value === void 0 ? void 0 : value.use, onChange: setUse },
-            React.createElement("option", null),
-            React.createElement("option", null, "home"),
-            React.createElement("option", null, "mobile"),
-            React.createElement("option", null, "old"),
-            React.createElement("option", null, "temp"),
-            React.createElement("option", null, "work")),
-        React.createElement(Select, { testid: "address-type", defaultValue: value === null || value === void 0 ? void 0 : value.type, onChange: setType },
-            React.createElement("option", null),
-            React.createElement("option", null, "postal"),
-            React.createElement("option", null, "physical"),
-            React.createElement("option", null, "both")),
-        React.createElement(Input, { placeholder: "Line 1", defaultValue: getLine(value, 0), onChange: setLine1 }),
-        React.createElement(Input, { placeholder: "Line 2", defaultValue: getLine(value, 1), onChange: setLine2 }),
-        React.createElement(Input, { placeholder: "City", defaultValue: value.city, onChange: setCity }),
-        React.createElement(Input, { placeholder: "State", defaultValue: value.state, onChange: setState }),
-        React.createElement(Input, { placeholder: "Postal Code", defaultValue: value.postalCode, onChange: setPostalCode })));
+    return (React.createElement(Group, { spacing: "xs", grow: true, noWrap: true },
+        React.createElement(NativeSelect, { "data-testid": "address-use", defaultValue: value === null || value === void 0 ? void 0 : value.use, onChange: (e) => setUse(e.currentTarget.value), data: ['', 'home', 'work', 'temp', 'old', 'billing'] }),
+        React.createElement(NativeSelect, { "data-testid": "address-type", defaultValue: value === null || value === void 0 ? void 0 : value.type, onChange: (e) => setType(e.currentTarget.value), data: ['', 'postal', 'physical', 'both'] }),
+        React.createElement(TextInput, { placeholder: "Line 1", defaultValue: getLine(value, 0), onChange: (e) => setLine1(e.currentTarget.value) }),
+        React.createElement(TextInput, { placeholder: "Line 2", defaultValue: getLine(value, 1), onChange: (e) => setLine2(e.currentTarget.value) }),
+        React.createElement(TextInput, { placeholder: "City", defaultValue: value.city, onChange: (e) => setCity(e.currentTarget.value) }),
+        React.createElement(TextInput, { placeholder: "State", defaultValue: value.state, onChange: (e) => setState(e.currentTarget.value) }),
+        React.createElement(TextInput, { placeholder: "Postal Code", defaultValue: value.postalCode, onChange: (e) => setPostalCode(e.currentTarget.value) })));
 }
 
 export { AddressInput };

package/dist/esm/AddressInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressInput.js","sources":["../../src/AddressInput.tsx"],"sourcesContent":["import { Address } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\nimport { Input } from './Input';\nimport { InputRow } from './InputRow';\nimport { Select } from './Select';\n\nfunction getLine(address: Address, index: number): string {\n  return address && address.line && address.line.length > index ? address.line[index] : '';\n}\n\nfunction setLine(address: Address, index: number, str: string): Address {\n  const line: string[] = address.line || [];\n  while (line.length <= index) {\n    line.push('');\n  }\n  line[index] = str;\n  return { ...address, line };\n}\n\nexport interface AddressInputProps {\n  name: string;\n  defaultValue?: Address;\n  onChange?: (value: Address) => void;\n}\n\nexport function AddressInput(props: AddressInputProps): JSX.Element {\n  const [value, setValue] = useState<Address>(props.defaultValue || {});\n\n  const valueRef = useRef<Address>();\n  valueRef.current = value;\n\n  function setValueWrapper(newValue: Address): void {\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  function setUse(use: 'home' | 'work' | 'temp' | 'old' | 'billing'): void {\n    setValueWrapper({ ...valueRef.current, use });\n  }\n\n  function setType(type: 'postal' | 'physical' | 'both'): void {\n    setValueWrapper({ ...valueRef.current, type });\n  }\n\n  function setLine1(line1: string): void {\n    setValueWrapper(setLine(valueRef.current || {}, 0, line1));\n  }\n\n  function setLine2(line2: string): void {\n    setValueWrapper(setLine(valueRef.current || {}, 1, line2));\n  }\n\n  function setCity(city: string): void {\n    setValueWrapper({ ...valueRef.current, city });\n  }\n\n  function setState(state: string): void {\n    setValueWrapper({ ...valueRef.current, state });\n  }\n\n  function setPostalCode(postalCode: string): void {\n    setValueWrapper({ ...valueRef.current, postalCode });\n  }\n\n  return (\n    <InputRow>\n      <Select testid=\"address-use\" defaultValue={value?.use} onChange={setUse as (use: string) => void}>\n        <option></option>\n        <option>home</option>\n        <option>mobile</option>\n        <option>old</option>\n        <option>temp</option>\n        <option>work</option>\n      </Select>\n      <Select testid=\"address-type\" defaultValue={value?.type} onChange={setType as (use: string) => void}>\n        <option></option>\n        <option>postal</option>\n        <option>physical</option>\n        <option>both</option>\n      </Select>\n      <Input placeholder=\"Line 1\" defaultValue={getLine(value, 0)} onChange={setLine1} />\n      <Input placeholder=\"Line 2\" defaultValue={getLine(value, 1)} onChange={setLine2} />\n      <Input placeholder=\"City\" defaultValue={value.city} onChange={setCity} />\n      <Input placeholder=\"State\" defaultValue={value.state} onChange={setState} />\n      <Input placeholder=\"Postal Code\" defaultValue={value.postalCode} onChange={setPostalCode} />\n    </InputRow>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMA,SAAS,OAAO,CAAC,OAAgB,EAAE,KAAa,EAAA;IAC9C,OAAO,OAAO,IAAI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAC3F,CAAC;AAED,SAAS,OAAO,CAAC,OAAgB,EAAE,KAAa,EAAE,GAAW,EAAA;AAC3D,IAAA,MAAM,IAAI,GAAa,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC;AAC1C,IAAA,OAAO,IAAI,CAAC,MAAM,IAAI,KAAK,EAAE;AAC3B,QAAA,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACf,KAAA;AACD,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;IAClB,OAAY,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,OAAO,CAAE,EAAA,EAAA,IAAI,EAAG,CAAA,CAAA;AAC9B,CAAC;AAQK,SAAU,YAAY,CAAC,KAAwB,EAAA;AACnD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;AAEtE,IAAA,MAAM,QAAQ,GAAG,MAAM,EAAW,CAAC;AACnC,IAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAEzB,SAAS,eAAe,CAAC,QAAiB,EAAA;QACxC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAC1B,SAAA;KACF;IAED,SAAS,MAAM,CAAC,GAAiD,EAAA;AAC/D,QAAA,eAAe,iCAAM,QAAQ,CAAC,OAAO,CAAE,EAAA,EAAA,GAAG,IAAG,CAAC;KAC/C;IAED,SAAS,OAAO,CAAC,IAAoC,EAAA;AACnD,QAAA,eAAe,iCAAM,QAAQ,CAAC,OAAO,CAAE,EAAA,EAAA,IAAI,IAAG,CAAC;KAChD;IAED,SAAS,QAAQ,CAAC,KAAa,EAAA;AAC7B,QAAA,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;KAC5D;IAED,SAAS,QAAQ,CAAC,KAAa,EAAA;AAC7B,QAAA,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;KAC5D;IAED,SAAS,OAAO,CAAC,IAAY,EAAA;AAC3B,QAAA,eAAe,iCAAM,QAAQ,CAAC,OAAO,CAAE,EAAA,EAAA,IAAI,IAAG,CAAC;KAChD;IAED,SAAS,QAAQ,CAAC,KAAa,EAAA;AAC7B,QAAA,eAAe,iCAAM,QAAQ,CAAC,OAAO,CAAE,EAAA,EAAA,KAAK,IAAG,CAAC;KACjD;IAED,SAAS,aAAa,CAAC,UAAkB,EAAA;AACvC,QAAA,eAAe,iCAAM,QAAQ,CAAC,OAAO,CAAE,EAAA,EAAA,UAAU,IAAG,CAAC;KACtD;IAED,QACE,oBAAC,QAAQ,EAAA,IAAA;AACP,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,MAAM,EAAC,aAAa,EAAC,YAAY,EAAE,KAAK,KAAL,IAAA,IAAA,KAAK,uBAAL,KAAK,CAAE,GAAG,EAAE,QAAQ,EAAE,MAA+B,EAAA;YAC9F,KAAiB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,CAAA;YACjB,KAAqB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,CAAA;YACrB,KAAuB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,QAAA,CAAA;YACvB,KAAoB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,KAAA,CAAA;YACpB,KAAqB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,CAAA;AACrB,YAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,CAAqB,CACd;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,MAAM,EAAC,cAAc,EAAC,YAAY,EAAE,KAAK,KAAL,IAAA,IAAA,KAAK,uBAAL,KAAK,CAAE,IAAI,EAAE,QAAQ,EAAE,OAAgC,EAAA;YACjG,KAAiB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,CAAA;YACjB,KAAuB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,QAAA,CAAA;YACvB,KAAyB,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,UAAA,CAAA;AACzB,YAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,CAAqB,CACd;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,WAAW,EAAC,QAAQ,EAAC,YAAY,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA;AACnF,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,WAAW,EAAC,QAAQ,EAAC,YAAY,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA;AACnF,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,MAAM,EAAC,YAAY,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAI,CAAA;AACzE,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,OAAO,EAAC,YAAY,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA;AAC5E,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,WAAW,EAAC,aAAa,EAAC,YAAY,EAAE,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAI,CAAA,CACnF,EACX;AACJ;;;;"}
+{"version":3,"file":"AddressInput.js","sources":["../../src/AddressInput.tsx"],"sourcesContent":["import { Group, NativeSelect, TextInput } from '@mantine/core';\nimport { Address } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\n\nfunction getLine(address: Address, index: number): string {\n  return address && address.line && address.line.length > index ? address.line[index] : '';\n}\n\nfunction setLine(address: Address, index: number, str: string): Address {\n  const line: string[] = address.line || [];\n  while (line.length <= index) {\n    line.push('');\n  }\n  line[index] = str;\n  return { ...address, line };\n}\n\nexport interface AddressInputProps {\n  name: string;\n  defaultValue?: Address;\n  onChange?: (value: Address) => void;\n}\n\nexport function AddressInput(props: AddressInputProps): JSX.Element {\n  const [value, setValue] = useState<Address>(props.defaultValue || {});\n\n  const valueRef = useRef<Address>();\n  valueRef.current = value;\n\n  function setValueWrapper(newValue: Address): void {\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  function setUse(use: 'home' | 'work' | 'temp' | 'old' | 'billing'): void {\n    setValueWrapper({ ...valueRef.current, use });\n  }\n\n  function setType(type: 'postal' | 'physical' | 'both'): void {\n    setValueWrapper({ ...valueRef.current, type });\n  }\n\n  function setLine1(line1: string): void {\n    setValueWrapper(setLine(valueRef.current || {}, 0, line1));\n  }\n\n  function setLine2(line2: string): void {\n    setValueWrapper(setLine(valueRef.current || {}, 1, line2));\n  }\n\n  function setCity(city: string): void {\n    setValueWrapper({ ...valueRef.current, city });\n  }\n\n  function setState(state: string): void {\n    setValueWrapper({ ...valueRef.current, state });\n  }\n\n  function setPostalCode(postalCode: string): void {\n    setValueWrapper({ ...valueRef.current, postalCode });\n  }\n\n  return (\n    <Group spacing=\"xs\" grow noWrap>\n      <NativeSelect\n        data-testid=\"address-use\"\n        defaultValue={value?.use}\n        onChange={(e) => setUse(e.currentTarget.value as 'home' | 'work' | 'temp' | 'old' | 'billing')}\n        data={['', 'home', 'work', 'temp', 'old', 'billing']}\n      />\n      <NativeSelect\n        data-testid=\"address-type\"\n        defaultValue={value?.type}\n        onChange={(e) => setType(e.currentTarget.value as 'postal' | 'physical' | 'both')}\n        data={['', 'postal', 'physical', 'both']}\n      />\n      <TextInput\n        placeholder=\"Line 1\"\n        defaultValue={getLine(value, 0)}\n        onChange={(e) => setLine1(e.currentTarget.value)}\n      />\n      <TextInput\n        placeholder=\"Line 2\"\n        defaultValue={getLine(value, 1)}\n        onChange={(e) => setLine2(e.currentTarget.value)}\n      />\n      <TextInput placeholder=\"City\" defaultValue={value.city} onChange={(e) => setCity(e.currentTarget.value)} />\n      <TextInput placeholder=\"State\" defaultValue={value.state} onChange={(e) => setState(e.currentTarget.value)} />\n      <TextInput\n        placeholder=\"Postal Code\"\n        defaultValue={value.postalCode}\n        onChange={(e) => setPostalCode(e.currentTarget.value)}\n      />\n    </Group>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/AnnotationInput.js

@@ -1,6 +1,6 @@
+import { TextInput } from '@mantine/core';
 import { createReference } from '@medplum/core';
 import React, { useState, useRef } from 'react';
-import { Input } from './Input.js';
 import { useMedplumProfile } from './MedplumProvider.js';
 
 function AnnotationInput(props) {
@@ -21,7 +21,7 @@ function AnnotationInput(props) {
             props.onChange(newValue);
         }
     }
-    return (React.createElement(Input, { name: props.name, type: "text", placeholder: "Annotation text", defaultValue: value.text, onChange: setText }));
+    return (React.createElement(TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
 }
 
 export { AnnotationInput };

package/dist/esm/AnnotationInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationInput.js","sources":["../../src/AnnotationInput.tsx"],"sourcesContent":["import { createReference } from '@medplum/core';\nimport { Annotation } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\nimport { Input } from './Input';\nimport { useMedplumProfile } from './MedplumProvider';\n\nexport interface AnnotationInputProps {\n  name: string;\n  defaultValue?: Annotation;\n  onChange?: (value: Annotation) => void;\n}\n\nexport function AnnotationInput(props: AnnotationInputProps): JSX.Element {\n  const author = useMedplumProfile();\n  const [value, setValue] = useState<Annotation>(props.defaultValue || {});\n\n  const valueRef = useRef<Annotation>();\n  valueRef.current = value;\n\n  function setText(text: string): void {\n    const newValue: Annotation = text\n      ? {\n          text,\n          authorReference: author && createReference(author),\n          time: new Date().toISOString(),\n        }\n      : {};\n\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  return (\n    <Input name={props.name} type=\"text\" placeholder=\"Annotation text\" defaultValue={value.text} onChange={setText} />\n  );\n}\n"],"names":[],"mappings":";;;;;AAYM,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;AACnC,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;AAEzE,IAAA,MAAM,QAAQ,GAAG,MAAM,EAAc,CAAC;AACtC,IAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAEzB,SAAS,OAAO,CAAC,IAAY,EAAA;QAC3B,MAAM,QAAQ,GAAe,IAAI;AAC/B,cAAE;gBACE,IAAI;AACJ,gBAAA,eAAe,EAAE,MAAM,IAAI,eAAe,CAAC,MAAM,CAAC;AAClD,gBAAA,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AAC/B,aAAA;cACD,EAAE,CAAC;QAEP,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAC1B,SAAA;KACF;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,iBAAiB,EAAC,YAAY,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAA,CAAI,EAClH;AACJ;;;;"}
+{"version":3,"file":"AnnotationInput.js","sources":["../../src/AnnotationInput.tsx"],"sourcesContent":["import { TextInput } from '@mantine/core';\nimport { createReference } from '@medplum/core';\nimport { Annotation } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\nimport { useMedplumProfile } from './MedplumProvider';\n\nexport interface AnnotationInputProps {\n  name: string;\n  defaultValue?: Annotation;\n  onChange?: (value: Annotation) => void;\n}\n\nexport function AnnotationInput(props: AnnotationInputProps): JSX.Element {\n  const author = useMedplumProfile();\n  const [value, setValue] = useState<Annotation>(props.defaultValue || {});\n\n  const valueRef = useRef<Annotation>();\n  valueRef.current = value;\n\n  function setText(text: string): void {\n    const newValue: Annotation = text\n      ? {\n          text,\n          authorReference: author && createReference(author),\n          time: new Date().toISOString(),\n        }\n      : {};\n\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  return (\n    <TextInput\n      name={props.name}\n      placeholder=\"Annotation text\"\n      defaultValue={value.text}\n      onChange={(e) => setText(e.currentTarget.value)}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAYM,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;AACnC,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;AAEzE,IAAA,MAAM,QAAQ,GAAG,MAAM,EAAc,CAAC;AACtC,IAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAEzB,SAAS,OAAO,CAAC,IAAY,EAAA;QAC3B,MAAM,QAAQ,GAAe,IAAI;AAC/B,cAAE;gBACE,IAAI;AACJ,gBAAA,eAAe,EAAE,MAAM,IAAI,eAAe,CAAC,MAAM,CAAC;AAClD,gBAAA,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AAC/B,aAAA;cACD,EAAE,CAAC;QAEP,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAC1B,SAAA;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,EACR,EAAA,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAC,iBAAiB,EAC7B,YAAY,EAAE,KAAK,CAAC,IAAI,EACxB,QAAQ,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAA,CAC/C,EACF;AACJ;;;;"}

package/dist/esm/AttachmentArrayInput.js

@@ -1,7 +1,8 @@
+import { ActionIcon } from '@mantine/core';
+import { IconCircleMinus, IconCloudUpload } from '@tabler/icons';
 import React, { useState, useRef } from 'react';
+import { AttachmentButton } from './AttachmentButton.js';
 import { AttachmentDisplay } from './AttachmentDisplay.js';
-import { Button } from './Button.js';
-import { UploadButton } from './UploadButton.js';
 import { killEvent } from './utils/dom.js';
 
 function AttachmentArrayInput(props) {
@@ -17,25 +18,27 @@ function AttachmentArrayInput(props) {
     }
     return (React.createElement("table", { style: { width: '100%' } },
         React.createElement("colgroup", null,
-            React.createElement("col", { width: "90%" }),
-            React.createElement("col", { width: "10%" })),
+            React.createElement("col", { width: "97%" }),
+            React.createElement("col", { width: "3%" })),
         React.createElement("tbody", null,
             values.map((v, index) => (React.createElement("tr", { key: `${index}-${values.length}` },
                 React.createElement("td", null,
                     React.createElement(AttachmentDisplay, { value: v, maxWidth: 200 })),
                 React.createElement("td", { className: "medplum-right" },
-                    React.createElement(Button, { onClick: (e) => {
+                    React.createElement(ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
                             killEvent(e);
                             const copy = values.slice();
                             copy.splice(index, 1);
                             setValuesWrapper(copy);
-                        } }, "Remove"))))),
+                        } },
+                        React.createElement(IconCircleMinus, null)))))),
             React.createElement("tr", null,
                 React.createElement("td", null),
                 React.createElement("td", { className: "medplum-right" },
-                    React.createElement(UploadButton, { onUpload: (attachment) => {
+                    React.createElement(AttachmentButton, { onUpload: (attachment) => {
                             setValuesWrapper([...valuesRef.current, attachment]);
-                        } }))))));
+                        } }, (props) => (React.createElement(ActionIcon, Object.assign({}, props, { title: "Add", size: "sm", color: "green" }),
+                        React.createElement(IconCloudUpload, { size: 16 })))))))));
 }
 
 export { AttachmentArrayInput };

package/dist/esm/AttachmentArrayInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentArrayInput.js","sources":["../../src/AttachmentArrayInput.tsx"],"sourcesContent":["import { Attachment } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\nimport { AttachmentDisplay } from './AttachmentDisplay';\nimport { Button } from './Button';\nimport { UploadButton } from './UploadButton';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentArrayInputProps {\n  name: string;\n  defaultValue?: Attachment[];\n  arrayElement?: boolean;\n  onChange?: (value: Attachment[]) => void;\n}\n\nexport function AttachmentArrayInput(props: AttachmentArrayInputProps): JSX.Element {\n  const [values, setValues] = useState<Attachment[]>(props.defaultValue ?? []);\n\n  const valuesRef = useRef<Attachment[]>();\n  valuesRef.current = values;\n\n  function setValuesWrapper(newValues: Attachment[]): void {\n    setValues(newValues);\n    if (props.onChange) {\n      props.onChange(newValues);\n    }\n  }\n\n  return (\n    <table style={{ width: '100%' }}>\n      <colgroup>\n        <col width=\"90%\" />\n        <col width=\"10%\" />\n      </colgroup>\n      <tbody>\n        {values.map((v: Attachment, index: number) => (\n          <tr key={`${index}-${values.length}`}>\n            <td>\n              <AttachmentDisplay value={v} maxWidth={200} />\n            </td>\n            <td className=\"medplum-right\">\n              <Button\n                onClick={(e) => {\n                  killEvent(e);\n                  const copy = values.slice();\n                  copy.splice(index, 1);\n                  setValuesWrapper(copy);\n                }}\n              >\n                Remove\n              </Button>\n            </td>\n          </tr>\n        ))}\n        <tr>\n          <td></td>\n          <td className=\"medplum-right\">\n            <UploadButton\n              onUpload={(attachment: Attachment) => {\n                setValuesWrapper([...(valuesRef.current as Attachment[]), attachment]);\n              }}\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAcM,SAAU,oBAAoB,CAAC,KAAgC,EAAA;;AACnE,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,EAAE,CAAC,CAAC;AAE7E,IAAA,MAAM,SAAS,GAAG,MAAM,EAAgB,CAAC;AACzC,IAAA,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;IAE3B,SAAS,gBAAgB,CAAC,SAAuB,EAAA;QAC/C,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AAC3B,SAAA;KACF;IAED,QACE,+BAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA;AAC7B,QAAA,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA;YACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EAAG,CAAA;AACnB,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,KAAK,EAAA,CAAG,CACV;AACX,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA;YACG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAa,EAAE,KAAa,MACvC,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,CAAG,EAAA,KAAK,IAAI,MAAM,CAAC,MAAM,CAAE,CAAA,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;oBACE,KAAC,CAAA,aAAA,CAAA,iBAAiB,EAAC,EAAA,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAA,CAAI,CAC3C;gBACL,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;AAC3B,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,OAAO,EAAE,CAAC,CAAC,KAAI;4BACb,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,4BAAA,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;AAC5B,4BAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;4BACtB,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACzB,yBAAC,EAGM,EAAA,QAAA,CAAA,CACN,CACF,CACN,CAAC;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;gBACE,KAAS,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAAA;gBACT,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;AAC3B,oBAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,QAAQ,EAAE,CAAC,UAAsB,KAAI;4BACnC,gBAAgB,CAAC,CAAC,GAAI,SAAS,CAAC,OAAwB,EAAE,UAAU,CAAC,CAAC,CAAC;AACzE,yBAAC,GACD,CACC,CACF,CACC,CACF,EACR;AACJ;;;;"}
+{"version":3,"file":"AttachmentArrayInput.js","sources":["../../src/AttachmentArrayInput.tsx"],"sourcesContent":["import { ActionIcon } from '@mantine/core';\nimport { Attachment } from '@medplum/fhirtypes';\nimport { IconCircleMinus, IconCloudUpload } from '@tabler/icons';\nimport React, { useRef, useState } from 'react';\nimport { AttachmentButton } from './AttachmentButton';\nimport { AttachmentDisplay } from './AttachmentDisplay';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentArrayInputProps {\n  name: string;\n  defaultValue?: Attachment[];\n  arrayElement?: boolean;\n  onChange?: (value: Attachment[]) => void;\n}\n\nexport function AttachmentArrayInput(props: AttachmentArrayInputProps): JSX.Element {\n  const [values, setValues] = useState<Attachment[]>(props.defaultValue ?? []);\n\n  const valuesRef = useRef<Attachment[]>();\n  valuesRef.current = values;\n\n  function setValuesWrapper(newValues: Attachment[]): void {\n    setValues(newValues);\n    if (props.onChange) {\n      props.onChange(newValues);\n    }\n  }\n\n  return (\n    <table style={{ width: '100%' }}>\n      <colgroup>\n        <col width=\"97%\" />\n        <col width=\"3%\" />\n      </colgroup>\n      <tbody>\n        {values.map((v: Attachment, index: number) => (\n          <tr key={`${index}-${values.length}`}>\n            <td>\n              <AttachmentDisplay value={v} maxWidth={200} />\n            </td>\n            <td className=\"medplum-right\">\n              <ActionIcon\n                title=\"Remove\"\n                size=\"sm\"\n                onClick={(e: React.MouseEvent) => {\n                  killEvent(e);\n                  const copy = values.slice();\n                  copy.splice(index, 1);\n                  setValuesWrapper(copy);\n                }}\n              >\n                <IconCircleMinus />\n              </ActionIcon>\n            </td>\n          </tr>\n        ))}\n        <tr>\n          <td></td>\n          <td className=\"medplum-right\">\n            <AttachmentButton\n              onUpload={(attachment: Attachment) => {\n                setValuesWrapper([...(valuesRef.current as Attachment[]), attachment]);\n              }}\n            >\n              {(props) => (\n                <ActionIcon {...props} title=\"Add\" size=\"sm\" color=\"green\">\n                  <IconCloudUpload size={16} />\n                </ActionIcon>\n              )}\n            </AttachmentButton>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/AttachmentButton.d.ts

@@ -0,0 +1,9 @@
+import { Attachment } from '@medplum/fhirtypes';
+import React from 'react';
+export interface AttachmentButtonProps {
+    onUpload: (attachment: Attachment) => void;
+    children(props: {
+        onClick(e: React.MouseEvent): void;
+    }): React.ReactNode;
+}
+export declare function AttachmentButton(props: AttachmentButtonProps): JSX.Element;

package/dist/esm/{UploadButton.js → AttachmentButton.js}

@@ -1,11 +1,15 @@
 import React, { useRef } from 'react';
-import { Button } from './Button.js';
 import { useMedplum } from './MedplumProvider.js';
 import { killEvent } from './utils/dom.js';
 
-function UploadButton(props) {
+function AttachmentButton(props) {
     const medplum = useMedplum();
     const fileInputRef = useRef(null);
+    function onClick(e) {
+        var _a;
+        killEvent(e);
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
     function onFileChange(e) {
         killEvent(e);
         const files = e.target.files;
@@ -44,12 +48,8 @@ function UploadButton(props) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement("input", { type: "file", "data-testid": "upload-file-input", style: { display: 'none' }, ref: fileInputRef, onChange: (e) => onFileChange(e) }),
-        React.createElement(Button, { testid: "upload-button", onClick: (e) => {
-                var _a;
-                killEvent(e);
-                (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-            } }, props.children || 'Upload...')));
+        props.children({ onClick })));
 }
 
-export { UploadButton };
-//# sourceMappingURL=UploadButton.js.map
+export { AttachmentButton };
+//# sourceMappingURL=AttachmentButton.js.map

package/dist/esm/AttachmentButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentButton.js","sources":["../../src/AttachmentButton.tsx"],"sourcesContent":["import { Attachment, Binary, OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useRef } from 'react';\nimport { useMedplum } from './MedplumProvider';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentButtonProps {\n  onUpload: (attachment: Attachment) => void;\n  children(props: { onClick(e: React.MouseEvent): void }): React.ReactNode;\n}\n\nexport function AttachmentButton(props: AttachmentButtonProps): JSX.Element {\n  const medplum = useMedplum();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  function onClick(e: React.MouseEvent): void {\n    killEvent(e);\n    fileInputRef.current?.click();\n  }\n\n  function onFileChange(e: React.ChangeEvent): void {\n    killEvent(e);\n    const files = (e.target as HTMLInputElement).files;\n    if (files) {\n      Array.from(files).forEach(processFile);\n    }\n  }\n\n  /**\n   * Processes a single file.\n   *\n   * @param {File} file The file descriptor.\n   */\n  function processFile(file: File): void {\n    if (!file) {\n      return;\n    }\n\n    const fileName = file.name;\n    if (!fileName) {\n      return;\n    }\n\n    const filename = file.name;\n    const contentType = file.type || 'application/octet-stream';\n    medplum\n      .createBinary(file, filename, contentType)\n      .then((binary: Binary) => {\n        props.onUpload({\n          contentType: binary.contentType,\n          url: binary.url,\n          title: filename,\n        });\n      })\n      .catch((outcome: OperationOutcome) => {\n        alert(outcome?.issue?.[0]?.details?.text);\n      });\n  }\n\n  return (\n    <>\n      <input\n        type=\"file\"\n        data-testid=\"upload-file-input\"\n        style={{ display: 'none' }}\n        ref={fileInputRef}\n        onChange={(e) => onFileChange(e)}\n      />\n      {props.children({ onClick })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAUM,SAAU,gBAAgB,CAAC,KAA4B,EAAA;AAC3D,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;AAC7B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,SAAS,OAAO,CAAC,CAAmB,EAAA;;QAClC,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,QAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;KAC/B;IAED,SAAS,YAAY,CAAC,CAAoB,EAAA;QACxC,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,QAAA,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;AACnD,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AACxC,SAAA;KACF;AAED;;;;AAIG;IACH,SAAS,WAAW,CAAC,IAAU,EAAA;QAC7B,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;AACR,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;AACR,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;AAC3B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,0BAA0B,CAAC;QAC5D,OAAO;AACJ,aAAA,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC;AACzC,aAAA,IAAI,CAAC,CAAC,MAAc,KAAI;YACvB,KAAK,CAAC,QAAQ,CAAC;gBACb,WAAW,EAAE,MAAM,CAAC,WAAW;gBAC/B,GAAG,EAAE,MAAM,CAAC,GAAG;AACf,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;AACD,aAAA,KAAK,CAAC,CAAC,OAAyB,KAAI;;AACnC,YAAA,KAAK,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,CAAC,CAAC;AAC5C,SAAC,CAAC,CAAC;KACN;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,MAAM,EAAA,aAAA,EACC,mBAAmB,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAChC,CAAA;QACD,KAAK,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAC3B,EACH;AACJ;;;;"}

package/dist/esm/AttachmentInput.js

@@ -1,7 +1,7 @@
+import { Button } from '@mantine/core';
 import React, { useState } from 'react';
+import { AttachmentButton } from './AttachmentButton.js';
 import { AttachmentDisplay } from './AttachmentDisplay.js';
-import { Button } from './Button.js';
-import { UploadButton } from './UploadButton.js';
 import { killEvent } from './utils/dom.js';
 
 function AttachmentInput(props) {
@@ -20,7 +20,7 @@ function AttachmentInput(props) {
                     setValueWrapper(undefined);
                 } }, "Remove")));
     }
-    return React.createElement(UploadButton, { onUpload: setValueWrapper });
+    return (React.createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React.createElement(Button, Object.assign({}, props), "Upload...")));
 }
 
 export { AttachmentInput };

package/dist/esm/AttachmentInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentInput.js","sources":["../../src/AttachmentInput.tsx"],"sourcesContent":["import { Attachment } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { AttachmentDisplay } from './AttachmentDisplay';\nimport { Button } from './Button';\nimport { UploadButton } from './UploadButton';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentInputProps {\n  name: string;\n  defaultValue?: Attachment;\n  arrayElement?: boolean;\n  onChange?: (value: Attachment | undefined) => void;\n}\n\nexport function AttachmentInput(props: AttachmentInputProps): JSX.Element {\n  const [value, setValue] = useState(props.defaultValue);\n\n  function setValueWrapper(newValue: Attachment | undefined): void {\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  if (value) {\n    return (\n      <>\n        <AttachmentDisplay value={value} maxWidth={200} />\n        <Button\n          onClick={(e) => {\n            killEvent(e);\n            setValueWrapper(undefined);\n          }}\n        >\n          Remove\n        </Button>\n      </>\n    );\n  }\n\n  return <UploadButton onUpload={setValueWrapper} />;\n}\n"],"names":[],"mappings":";;;;;;AAcM,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAEvD,SAAS,eAAe,CAAC,QAAgC,EAAA;QACvD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAC1B,SAAA;KACF;AAED,IAAA,IAAI,KAAK,EAAE;AACT,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;YACE,KAAC,CAAA,aAAA,CAAA,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAI,CAAA;AAClD,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,OAAO,EAAE,CAAC,CAAC,KAAI;oBACb,SAAS,CAAC,CAAC,CAAC,CAAC;oBACb,eAAe,CAAC,SAAS,CAAC,CAAC;iBAC5B,EAAA,EAAA,QAAA,CAGM,CACR,EACH;AACH,KAAA;AAED,IAAA,OAAO,oBAAC,YAAY,EAAA,EAAC,QAAQ,EAAE,eAAe,GAAI,CAAC;AACrD;;;;"}
+{"version":3,"file":"AttachmentInput.js","sources":["../../src/AttachmentInput.tsx"],"sourcesContent":["import { Button } from '@mantine/core';\nimport { Attachment } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { AttachmentButton } from './AttachmentButton';\nimport { AttachmentDisplay } from './AttachmentDisplay';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentInputProps {\n  name: string;\n  defaultValue?: Attachment;\n  arrayElement?: boolean;\n  onChange?: (value: Attachment | undefined) => void;\n}\n\nexport function AttachmentInput(props: AttachmentInputProps): JSX.Element {\n  const [value, setValue] = useState(props.defaultValue);\n\n  function setValueWrapper(newValue: Attachment | undefined): void {\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  if (value) {\n    return (\n      <>\n        <AttachmentDisplay value={value} maxWidth={200} />\n        <Button\n          onClick={(e: React.MouseEvent) => {\n            killEvent(e);\n            setValueWrapper(undefined);\n          }}\n        >\n          Remove\n        </Button>\n      </>\n    );\n  }\n\n  return (\n    <AttachmentButton onUpload={setValueWrapper}>{(props) => <Button {...props}>Upload...</Button>}</AttachmentButton>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAcM,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAEvD,SAAS,eAAe,CAAC,QAAgC,EAAA;QACvD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAC1B,SAAA;KACF;AAED,IAAA,IAAI,KAAK,EAAE;AACT,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;YACE,KAAC,CAAA,aAAA,CAAA,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAI,CAAA;AAClD,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,OAAO,EAAE,CAAC,CAAmB,KAAI;oBAC/B,SAAS,CAAC,CAAC,CAAC,CAAC;oBACb,eAAe,CAAC,SAAS,CAAC,CAAC;iBAC5B,EAAA,EAAA,QAAA,CAGM,CACR,EACH;AACH,KAAA;IAED,QACE,oBAAC,gBAAgB,EAAA,EAAC,QAAQ,EAAE,eAAe,IAAG,CAAC,KAAK,KAAK,oBAAC,MAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,CAAoB,EAAA,WAAA,CAAA,CAAoB,EAClH;AACJ;;;;"}

package/dist/esm/CalendarInput.js

@@ -1,6 +1,5 @@
+import { Group, Button } from '@mantine/core';
 import React, { useState, useMemo } from 'react';
-import { Button } from './Button.js';
-import { InputRow } from './InputRow.js';
 
 /**
  * Returns a month display string (e.g. "January 2020").
@@ -23,11 +22,11 @@ function CalendarInput(props) {
     }
     const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
     return (React.createElement("div", null,
-        React.createElement(InputRow, null,
+        React.createElement(Group, { position: "apart", spacing: "xs", grow: true, noWrap: true },
             React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
-            React.createElement("p", null,
-                React.createElement(Button, { label: "Previous month", onClick: () => moveMonth(-1) }, "<"),
-                React.createElement(Button, { label: "Next month", onClick: () => moveMonth(1) }, ">"))),
+            React.createElement(Group, { position: "right", spacing: "xs" },
+                React.createElement(Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                React.createElement(Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
         React.createElement("table", { className: "medplum-calendar-table" },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -38,7 +37,7 @@ function CalendarInput(props) {
                     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("button", { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
+            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(Button, { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
 }
 function getStartMonth() {
     const result = new Date();

package/dist/esm/CalendarInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarInput.js","sources":["../../src/CalendarInput.tsx"],"sourcesContent":["import { Slot } from '@medplum/fhirtypes';\nimport React, { useMemo, useState } from 'react';\nimport { Button } from './Button';\nimport { InputRow } from './InputRow';\nimport './CalendarInput.css';\n\nexport interface CalendarInputProps {\n  slots: Slot[];\n  onChangeMonth: (date: Date) => void;\n  onClick: (date: Date) => void;\n}\n\n/**\n * Returns a month display string (e.g. \"January 2020\").\n * @param date Any date within the month.\n * @returns The month display string (e.g. \"January 2020\")\n */\nexport function getMonthString(date: Date): string {\n  return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();\n}\n\ninterface CalendarCell {\n  date: Date;\n  available: boolean;\n}\n\ntype OptionalCalendarCell = CalendarCell | undefined;\n\nexport function CalendarInput(props: CalendarInputProps): JSX.Element {\n  const { onChangeMonth, onClick } = props;\n  const [month, setMonth] = useState<Date>(getStartMonth);\n\n  function moveMonth(delta: number): void {\n    setMonth((currMonth) => {\n      const newMonth = new Date(currMonth.getTime());\n      newMonth.setMonth(currMonth.getMonth() + delta);\n      onChangeMonth(newMonth);\n      return newMonth;\n    });\n  }\n\n  const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);\n\n  return (\n    <div>\n      <InputRow>\n        <p style={{ flex: 1 }}>{getMonthString(month)}</p>\n        <p>\n          <Button label=\"Previous month\" onClick={() => moveMonth(-1)}>\n            &lt;\n          </Button>\n          <Button label=\"Next month\" onClick={() => moveMonth(1)}>\n            &gt;\n          </Button>\n        </p>\n      </InputRow>\n      <table className=\"medplum-calendar-table\">\n        <thead>\n          <tr>\n            <th>SUN</th>\n            <th>MON</th>\n            <th>TUE</th>\n            <th>WED</th>\n            <th>THU</th>\n            <th>FRI</th>\n            <th>SAT</th>\n          </tr>\n        </thead>\n        <tbody>\n          {grid.map((week, weekIndex) => (\n            <tr key={'week-' + weekIndex}>\n              {week.map((day, dayIndex) => (\n                <td key={'day-' + dayIndex}>\n                  {day && (\n                    <button disabled={!day.available} onClick={() => onClick(day.date)}>\n                      {day.date.getDate()}\n                    </button>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport function getStartMonth(): Date {\n  const result = new Date();\n  result.setDate(1);\n  result.setHours(0, 0, 0, 0);\n  return result;\n}\n\nfunction buildGrid(startDate: Date, slots: Slot[]): OptionalCalendarCell[][] {\n  const d = new Date(startDate.getFullYear(), startDate.getMonth());\n  const grid: OptionalCalendarCell[][] = [];\n  let row: OptionalCalendarCell[] = [];\n\n  // Fill leading empty days\n  for (let i = 0; i < d.getDay(); i++) {\n    row.push(undefined);\n  }\n\n  while (d.getMonth() === startDate.getMonth()) {\n    row.push({\n      date: new Date(d.getTime()),\n      available: isDayAvailable(d, slots),\n    });\n\n    if (d.getDay() === 6) {\n      grid.push(row);\n      row = [];\n    }\n\n    d.setDate(d.getDate() + 1);\n  }\n\n  // Fill trailing empty days\n  if (d.getDay() !== 0) {\n    for (let i = d.getDay(); i < 7; i++) {\n      row.push(undefined);\n    }\n    grid.push(row);\n  }\n\n  return grid;\n}\n\n/**\n * Returns true if the given date is available for booking.\n * @param day The day to check.\n * @param slots The list of available slots.\n * @returns True if there are any available slots for the day.\n */\nfunction isDayAvailable(day: Date, slots: Slot[]): boolean {\n  // Note that slot start and end time may or may not be in UTC.\n  for (const slot of slots) {\n    const slotStart = new Date(slot.start as string);\n    if (\n      slotStart.getFullYear() === day.getFullYear() &&\n      slotStart.getMonth() === day.getMonth() &&\n      slotStart.getDate() === day.getDate()\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarInput.js","sources":["../../src/CalendarInput.tsx"],"sourcesContent":["import { Button, Group } from '@mantine/core';\nimport { Slot } from '@medplum/fhirtypes';\nimport React, { useMemo, useState } from 'react';\n\nimport './CalendarInput.css';\n\nexport interface CalendarInputProps {\n  slots: Slot[];\n  onChangeMonth: (date: Date) => void;\n  onClick: (date: Date) => void;\n}\n\n/**\n * Returns a month display string (e.g. \"January 2020\").\n * @param date Any date within the month.\n * @returns The month display string (e.g. \"January 2020\")\n */\nexport function getMonthString(date: Date): string {\n  return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();\n}\n\ninterface CalendarCell {\n  date: Date;\n  available: boolean;\n}\n\ntype OptionalCalendarCell = CalendarCell | undefined;\n\nexport function CalendarInput(props: CalendarInputProps): JSX.Element {\n  const { onChangeMonth, onClick } = props;\n  const [month, setMonth] = useState<Date>(getStartMonth);\n\n  function moveMonth(delta: number): void {\n    setMonth((currMonth) => {\n      const newMonth = new Date(currMonth.getTime());\n      newMonth.setMonth(currMonth.getMonth() + delta);\n      onChangeMonth(newMonth);\n      return newMonth;\n    });\n  }\n\n  const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);\n\n  return (\n    <div>\n      <Group position=\"apart\" spacing=\"xs\" grow noWrap>\n        <p style={{ flex: 1 }}>{getMonthString(month)}</p>\n        <Group position=\"right\" spacing=\"xs\">\n          <Button variant=\"outline\" aria-label=\"Previous month\" onClick={() => moveMonth(-1)}>\n            &lt;\n          </Button>\n          <Button variant=\"outline\" aria-label=\"Next month\" onClick={() => moveMonth(1)}>\n            &gt;\n          </Button>\n        </Group>\n      </Group>\n      <table className=\"medplum-calendar-table\">\n        <thead>\n          <tr>\n            <th>SUN</th>\n            <th>MON</th>\n            <th>TUE</th>\n            <th>WED</th>\n            <th>THU</th>\n            <th>FRI</th>\n            <th>SAT</th>\n          </tr>\n        </thead>\n        <tbody>\n          {grid.map((week, weekIndex) => (\n            <tr key={'week-' + weekIndex}>\n              {week.map((day, dayIndex) => (\n                <td key={'day-' + dayIndex}>\n                  {day && (\n                    <Button disabled={!day.available} onClick={() => onClick(day.date)}>\n                      {day.date.getDate()}\n                    </Button>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport function getStartMonth(): Date {\n  const result = new Date();\n  result.setDate(1);\n  result.setHours(0, 0, 0, 0);\n  return result;\n}\n\nfunction buildGrid(startDate: Date, slots: Slot[]): OptionalCalendarCell[][] {\n  const d = new Date(startDate.getFullYear(), startDate.getMonth());\n  const grid: OptionalCalendarCell[][] = [];\n  let row: OptionalCalendarCell[] = [];\n\n  // Fill leading empty days\n  for (let i = 0; i < d.getDay(); i++) {\n    row.push(undefined);\n  }\n\n  while (d.getMonth() === startDate.getMonth()) {\n    row.push({\n      date: new Date(d.getTime()),\n      available: isDayAvailable(d, slots),\n    });\n\n    if (d.getDay() === 6) {\n      grid.push(row);\n      row = [];\n    }\n\n    d.setDate(d.getDate() + 1);\n  }\n\n  // Fill trailing empty days\n  if (d.getDay() !== 0) {\n    for (let i = d.getDay(); i < 7; i++) {\n      row.push(undefined);\n    }\n    grid.push(row);\n  }\n\n  return grid;\n}\n\n/**\n * Returns true if the given date is available for booking.\n * @param day The day to check.\n * @param slots The list of available slots.\n * @returns True if there are any available slots for the day.\n */\nfunction isDayAvailable(day: Date, slots: Slot[]): boolean {\n  // Note that slot start and end time may or may not be in UTC.\n  for (const slot of slots) {\n    const slotStart = new Date(slot.start as string);\n    if (\n      slotStart.getFullYear() === day.getFullYear() &&\n      slotStart.getMonth() === day.getMonth() &&\n      slotStart.getDate() === day.getDate()\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/CodeInput.d.ts

@@ -3,7 +3,8 @@ import { ElementDefinition } from '@medplum/fhirtypes';
 export interface CodeInputProps {
     property: ElementDefinition;
     name: string;
+    placeholder?: string;
     defaultValue?: string;
-    onChange?: (value: string) => void;
+    onChange?: (value: string | undefined) => void;
 }
 export declare function CodeInput(props: CodeInputProps): JSX.Element;

package/dist/esm/CodeInput.js

@@ -1,27 +1,22 @@
-import React from 'react';
-import { Autocomplete } from './Autocomplete.js';
-import { useMedplum } from './MedplumProvider.js';
+import React, { useState } from 'react';
+import { ValueSetAutocomplete } from './ValueSetAutocomplete.js';
 
-const cachedDisplayValues = {};
 function CodeInput(props) {
-    const medplum = useMedplum();
-    let defaultValue = undefined;
-    if (props.defaultValue) {
-        defaultValue = [props.defaultValue];
+    const [value, setValue] = useState(props.defaultValue);
+    function handleChange(newValue) {
+        const newCode = valueSetElementToCode(newValue);
+        setValue(newCode);
+        if (props.onChange) {
+            props.onChange(newCode);
+        }
     }
-    return (React.createElement(Autocomplete, { loadOptions: (input) => {
-            var _a;
-            const system = (_a = props.property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
-            return medplum.searchValueSet(system, input).then((valueSet) => {
-                const contains = valueSet.expansion.contains;
-                contains.forEach((e) => (cachedDisplayValues[e.code] = e.display));
-                return contains.map((e) => e.code);
-            });
-        }, buildUnstructured: (str) => str, getId: (item) => item, getDisplay: (item) => React.createElement(React.Fragment, null, cachedDisplayValues[item] || item), name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
-            if (props.onChange) {
-                props.onChange(values[0]);
-            }
-        } }));
+    return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange }));
+}
+function codeToValueSetElement(code) {
+    return { code };
+}
+function valueSetElementToCode(element) {
+    return element.code;
 }
 
 export { CodeInput };

package/dist/esm/CodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.js","sources":["../../src/CodeInput.tsx"],"sourcesContent":["import { ElementDefinition, ValueSet, ValueSetExpansion, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React from 'react';\nimport { Autocomplete } from './Autocomplete';\nimport { useMedplum } from './MedplumProvider';\n\nexport interface CodeInputProps {\n  property: ElementDefinition;\n  name: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nconst cachedDisplayValues: Record<string, string> = {};\n\nexport function CodeInput(props: CodeInputProps): JSX.Element {\n  const medplum = useMedplum();\n\n  let defaultValue = undefined;\n  if (props.defaultValue) {\n    defaultValue = [props.defaultValue];\n  }\n\n  return (\n    <Autocomplete\n      loadOptions={(input: string): Promise<string[]> => {\n        const system = props.property.binding?.valueSet as string;\n        return medplum.searchValueSet(system, input).then((valueSet: ValueSet) => {\n          const contains = (valueSet.expansion as ValueSetExpansion).contains as ValueSetExpansionContains[];\n          contains.forEach((e) => (cachedDisplayValues[e.code as string] = e.display as string));\n          return contains.map((e) => e.code as string);\n        });\n      }}\n      buildUnstructured={(str: string) => str}\n      getId={(item: string) => item}\n      getDisplay={(item: string) => <>{cachedDisplayValues[item] || item}</>}\n      name={props.name}\n      defaultValue={defaultValue}\n      loadOnFocus={true}\n      onChange={(values: string[]) => {\n        if (props.onChange) {\n          props.onChange(values[0]);\n        }\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAYA,MAAM,mBAAmB,GAA2B,EAAE,CAAC;AAEjD,SAAU,SAAS,CAAC,KAAqB,EAAA;AAC7C,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,IAAI,YAAY,GAAG,SAAS,CAAC;IAC7B,IAAI,KAAK,CAAC,YAAY,EAAE;AACtB,QAAA,YAAY,GAAG,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;AACrC,KAAA;IAED,QACE,oBAAC,YAAY,EAAA,EACX,WAAW,EAAE,CAAC,KAAa,KAAuB;;YAChD,MAAM,MAAM,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAkB,CAAC;AAC1D,YAAA,OAAO,OAAO,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,QAAkB,KAAI;AACvE,gBAAA,MAAM,QAAQ,GAAI,QAAQ,CAAC,SAA+B,CAAC,QAAuC,CAAC;gBACnG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,mBAAmB,CAAC,CAAC,CAAC,IAAc,CAAC,GAAG,CAAC,CAAC,OAAiB,CAAC,CAAC,CAAC;AACvF,gBAAA,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAc,CAAC,CAAC;AAC/C,aAAC,CAAC,CAAC;SACJ,EACD,iBAAiB,EAAE,CAAC,GAAW,KAAK,GAAG,EACvC,KAAK,EAAE,CAAC,IAAY,KAAK,IAAI,EAC7B,UAAU,EAAE,CAAC,IAAY,KAAK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,mBAAmB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAI,EACtE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,IAAI,EACjB,QAAQ,EAAE,CAAC,MAAgB,KAAI;YAC7B,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3B,aAAA;SACF,EAAA,CACD,EACF;AACJ;;;;"}
+{"version":3,"file":"CodeInput.js","sources":["../../src/CodeInput.tsx"],"sourcesContent":["import { ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodeInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onChange?: (value: string | undefined) => void;\n}\n\nexport function CodeInput(props: CodeInputProps): JSX.Element {\n  const [value, setValue] = useState<string | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains): void {\n    const newCode = valueSetElementToCode(newValue);\n    setValue(newCode);\n    if (props.onChange) {\n      props.onChange(newCode);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={codeToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codeToValueSetElement(code: string | undefined): ValueSetExpansionContains {\n  return { code };\n}\n\nfunction valueSetElementToCode(element: ValueSetExpansionContains): string | undefined {\n  return element.code;\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,SAAS,CAAC,KAAqB,EAAA;AAC7C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,KAAK,CAAC,YAAY,CAAC,CAAC;IAE3E,SAAS,YAAY,CAAC,QAAmC,EAAA;AACvD,QAAA,MAAM,OAAO,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QAChD,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACzB,SAAA;KACF;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAC1C,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAwB,EAAA;IACrD,OAAO,EAAE,IAAI,EAAE,CAAC;AAClB,CAAC;AAED,SAAS,qBAAqB,CAAC,OAAkC,EAAA;IAC/D,OAAO,OAAO,CAAC,IAAI,CAAC;AACtB;;;;"}

package/dist/esm/CodeableConceptInput.d.ts

@@ -3,6 +3,7 @@ import { CodeableConcept, ElementDefinition } from '@medplum/fhirtypes';
 export interface CodeableConceptInputProps {
     property: ElementDefinition;
     name: string;
+    placeholder?: string;
     defaultValue?: CodeableConcept;
     onChange?: (value: CodeableConcept) => void;
 }

package/dist/esm/CodeableConceptInput.js

@@ -1,25 +1,24 @@
-import { stringify } from '@medplum/core';
-import React from 'react';
-import { Autocomplete } from './Autocomplete.js';
-import { useMedplum } from './MedplumProvider.js';
+import React, { useState } from 'react';
+import { ValueSetAutocomplete } from './ValueSetAutocomplete.js';
 
 function CodeableConceptInput(props) {
-    const medplum = useMedplum();
-    let defaultValue = undefined;
-    if (props.defaultValue) {
-        defaultValue = [props.defaultValue];
+    const [value, setValue] = useState(props.defaultValue);
+    function handleChange(newValue) {
+        const newConcept = valueSetElementToCodeableConcept(newValue);
+        setValue(newConcept);
+        if (props.onChange) {
+            props.onChange(newConcept);
+        }
     }
-    return (React.createElement(Autocomplete, { loadOptions: (input) => {
-            var _a;
-            const system = (_a = props.property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
-            return medplum.searchValueSet(system, input).then((valueSet) => {
-                return valueSet.expansion.contains.map(valueSetElementToCodeableConcept);
-            });
-        }, buildUnstructured: buildUnstructured, getId: getId, getDisplay: getDisplay, name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
-            if (props.onChange) {
-                props.onChange(values[0]);
-            }
-        } }));
+    return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codeableConceptToValueSetElement(value), onChange: handleChange }));
+}
+function codeableConceptToValueSetElement(concept) {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+        system: (_b = (_a = concept.coding) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.system,
+        code: (_d = (_c = concept.coding) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.code,
+        display: (_f = (_e = concept.coding) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.display,
+    };
 }
 function valueSetElementToCodeableConcept(element) {
     return {
@@ -33,20 +32,6 @@ function valueSetElementToCodeableConcept(element) {
         ],
     };
 }
-function buildUnstructured(str) {
-    return { text: str };
-}
-function getId(concept) {
-    if (concept.coding && concept.coding.length > 0) {
-        return concept.coding[0].code;
-    }
-    return stringify(concept);
-}
-function getDisplay(concept) {
-    var _a, _b, _c, _d, _e, _f;
-    const text = (_f = (_c = (_b = (_a = concept.coding) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.display) !== null && _c !== void 0 ? _c : (_e = (_d = concept.coding) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.code) !== null && _f !== void 0 ? _f : concept.text;
-    return React.createElement(React.Fragment, null, text);
-}
 
 export { CodeableConceptInput };
 //# sourceMappingURL=CodeableConceptInput.js.map

package/dist/esm/CodeableConceptInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeableConceptInput.js","sources":["../../src/CodeableConceptInput.tsx"],"sourcesContent":["import { stringify } from '@medplum/core';\nimport {\n  CodeableConcept,\n  ElementDefinition,\n  ValueSet,\n  ValueSetExpansion,\n  ValueSetExpansionContains,\n} from '@medplum/fhirtypes';\nimport React from 'react';\nimport { Autocomplete } from './Autocomplete';\nimport { useMedplum } from './MedplumProvider';\n\nexport interface CodeableConceptInputProps {\n  property: ElementDefinition;\n  name: string;\n  defaultValue?: CodeableConcept;\n  onChange?: (value: CodeableConcept) => void;\n}\n\nexport function CodeableConceptInput(props: CodeableConceptInputProps): JSX.Element {\n  const medplum = useMedplum();\n\n  let defaultValue = undefined;\n  if (props.defaultValue) {\n    defaultValue = [props.defaultValue];\n  }\n\n  return (\n    <Autocomplete\n      loadOptions={(input: string): Promise<CodeableConcept[]> => {\n        const system = props.property.binding?.valueSet as string;\n        return medplum.searchValueSet(system, input).then((valueSet: ValueSet) => {\n          return ((valueSet.expansion as ValueSetExpansion).contains as ValueSetExpansionContains[]).map(\n            valueSetElementToCodeableConcept\n          );\n        });\n      }}\n      buildUnstructured={buildUnstructured}\n      getId={getId}\n      getDisplay={getDisplay}\n      name={props.name}\n      defaultValue={defaultValue}\n      loadOnFocus={true}\n      onChange={(values: CodeableConcept[]) => {\n        if (props.onChange) {\n          props.onChange(values[0]);\n        }\n      }}\n    />\n  );\n}\n\nfunction valueSetElementToCodeableConcept(element: ValueSetExpansionContains): CodeableConcept {\n  return {\n    text: element.display,\n    coding: [\n      {\n        system: element.system,\n        code: element.code,\n        display: element.display,\n      },\n    ],\n  };\n}\n\nfunction buildUnstructured(str: string): CodeableConcept {\n  return { text: str };\n}\n\nfunction getId(concept: CodeableConcept): string {\n  if (concept.coding && concept.coding.length > 0) {\n    return concept.coding[0].code as string;\n  }\n  return stringify(concept);\n}\n\nfunction getDisplay(concept: CodeableConcept): JSX.Element {\n  const text = concept.coding?.[0]?.display ?? concept.coding?.[0]?.code ?? concept.text;\n  return <>{text}</>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CodeableConceptInput.js","sources":["../../src/CodeableConceptInput.tsx"],"sourcesContent":["import { CodeableConcept, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodeableConceptInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: CodeableConcept;\n  onChange?: (value: CodeableConcept) => void;\n}\n\nexport function CodeableConceptInput(props: CodeableConceptInputProps): JSX.Element {\n  const [value, setValue] = useState<CodeableConcept | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains): void {\n    const newConcept = valueSetElementToCodeableConcept(newValue);\n    setValue(newConcept);\n    if (props.onChange) {\n      props.onChange(newConcept);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={value && codeableConceptToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codeableConceptToValueSetElement(concept: CodeableConcept): ValueSetExpansionContains {\n  return {\n    system: concept.coding?.[0]?.system,\n    code: concept.coding?.[0]?.code,\n    display: concept.coding?.[0]?.display,\n  };\n}\n\nfunction valueSetElementToCodeableConcept(element: ValueSetExpansionContains): CodeableConcept {\n  return {\n    text: element.display,\n    coding: [\n      {\n        system: element.system,\n        code: element.code,\n        display: element.display,\n      },\n    ],\n  };\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA8B,KAAK,CAAC,YAAY,CAAC,CAAC;IAEpF,SAAS,YAAY,CAAC,QAAmC,EAAA;AACvD,QAAA,MAAM,UAAU,GAAG,gCAAgC,CAAC,QAAQ,CAAC,CAAC;QAC9D,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,oBAAoB,EACnB,EAAA,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,KAAK,IAAI,gCAAgC,CAAC,KAAK,CAAC,EAC9D,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,gCAAgC,CAAC,OAAwB,EAAA;;IAChE,OAAO;QACL,MAAM,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM;QACnC,IAAI,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,IAAI;QAC/B,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO;KACtC,CAAC;AACJ,CAAC;AAED,SAAS,gCAAgC,CAAC,OAAkC,EAAA;IAC1E,OAAO;QACL,IAAI,EAAE,OAAO,CAAC,OAAO;AACrB,QAAA,MAAM,EAAE;AACN,YAAA;gBACE,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,OAAO,EAAE,OAAO,CAAC,OAAO;AACzB,aAAA;AACF,SAAA;KACF,CAAC;AACJ;;;;"}

package/dist/esm/CodingInput.d.ts

@@ -3,6 +3,7 @@ import { Coding, ElementDefinition } from '@medplum/fhirtypes';
 export interface CodingInputProps {
     property: ElementDefinition;
     name: string;
+    placeholder?: string;
     defaultValue?: Coding;
     onChange?: (value: Coding) => void;
 }