@medplum/react 2.0.7 → 2.0.10

package/dist/cjs/index.cjs

@@ -1792,6 +1792,9 @@
             React.createElement(ResourcePropertyDisplay, { arrayElement: true, property: property, propertyType: propertyType, value: v, ignoreMissingValues: props.ignoreMissingValues, link: props.link }))))));
     }
 
+    /**
+     * Low-level component that renders a property from a given resource, given type information
+     */
     function ResourcePropertyDisplay(props) {
         const { property, propertyType, value } = props;
         if (property?.max === '*' && !props.arrayElement) {
@@ -1929,11 +1932,11 @@
         return (React.createElement(core$1.Group, { noWrap: true },
             React.createElement("div", null, props.children),
             React.createElement("div", null,
-                React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description }, (() => null)()))));
+                React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, withAsterisk: props.withAsterisk }, (() => null)()))));
     }
 
     function FormSection(props) {
-        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
+        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, withAsterisk: props.withAsterisk, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
     }
 
     /**
@@ -2059,6 +2062,9 @@
             display: input,
         };
     }
+    /**
+     * A low-level component to autocomplete based on a FHIR Valueset.
+     */
     function ValueSetAutocomplete(props) {
         const medplum = useMedplum();
         const { elementDefinition, ...rest } = props;
@@ -2235,7 +2241,7 @@
      * @returns The JSX element to render.
      */
     function DateTimeInput(props) {
-        return (React.createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name, placeholder: props.placeholder, type: getInputType(), defaultValue: convertIsoToLocal(props.defaultValue), error: getErrorsForInput(props.outcome, props.name), onChange: (e) => {
+        return (React.createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name, placeholder: props.placeholder, required: props.required, type: getInputType(), defaultValue: convertIsoToLocal(props.defaultValue), error: getErrorsForInput(props.outcome, props.name), onChange: (e) => {
                 if (props.onChange) {
                     const newValue = e.currentTarget.value;
                     props.onChange(convertLocalToIso(newValue));
@@ -2290,7 +2296,7 @@
     }
 
     function ExtensionInput(props) {
-        return (React.createElement(core$1.JsonInput, { id: props.name, name: props.name, "data-testid": "extension-input", defaultValue: core.stringify(props.defaultValue), onChange: (newValue) => {
+        return (React.createElement(core$1.JsonInput, { id: props.name, name: props.name, "data-testid": "extension-input", defaultValue: core.stringify(props.defaultValue), deserialize: JSON.parse, onChange: (newValue) => {
                 if (props.onChange) {
                     props.onChange(JSON.parse(newValue));
                 }
@@ -2335,11 +2341,11 @@
             });
         }
         return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React.createElement(core$1.NativeSelect, { defaultValue: value?.use, "data-testid": "use", onChange: (e) => setUse(e.currentTarget.value), data: ['', 'temp', 'old', 'usual', 'official', 'nickname', 'anonymous', 'maiden'] }),
-            React.createElement(core$1.TextInput, { placeholder: "Prefix", defaultValue: value?.prefix?.join(' '), onChange: (e) => setPrefix(e.currentTarget.value) }),
-            React.createElement(core$1.TextInput, { placeholder: "Given", defaultValue: value?.given?.join(' '), onChange: (e) => setGiven(e.currentTarget.value) }),
-            React.createElement(core$1.TextInput, { placeholder: "Family", defaultValue: value?.family, onChange: (e) => setFamily(e.currentTarget.value) }),
-            React.createElement(core$1.TextInput, { placeholder: "Suffix", defaultValue: value?.suffix?.join(' '), onChange: (e) => setSuffix(e.currentTarget.value) })));
+            React.createElement(core$1.NativeSelect, { defaultValue: value?.use, name: props.name + '-use', "data-testid": "use", onChange: (e) => setUse(e.currentTarget.value), data: ['', 'temp', 'old', 'usual', 'official', 'nickname', 'anonymous', 'maiden'] }),
+            React.createElement(core$1.TextInput, { placeholder: "Prefix", name: props.name + '-prefix', defaultValue: value?.prefix?.join(' '), onChange: (e) => setPrefix(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "Given", name: props.name + '-given', defaultValue: value?.given?.join(' '), onChange: (e) => setGiven(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { name: props.name + '-family', placeholder: "Family", defaultValue: value?.family, onChange: (e) => setFamily(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "Suffix", name: props.name + '-suffix', defaultValue: value?.suffix?.join(' '), onChange: (e) => setSuffix(e.currentTarget.value) })));
     }
 
     function IdentifierInput(props) {
@@ -2777,6 +2783,7 @@
         const propertyType = props.elementDefinitionType.code;
         const name = props.name;
         const value = props.defaultValue;
+        const required = property.min !== undefined && property.min > 0;
         switch (propertyType) {
             // 2.24.0.1 Primitive Types
             // https://www.hl7.org/fhir/datatypes.html#primitive
@@ -2786,13 +2793,13 @@
             case core.PropertyType.time:
             case core.PropertyType.uri:
             case core.PropertyType.url:
-                return (React.createElement(core$1.TextInput, { id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.TextInput, { id: name, name: name, "data-testid": name, defaultValue: value, required: required, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.value);
                         }
                     }, error: getErrorsForInput(props.outcome, name) }));
             case core.PropertyType.date:
-                return (React.createElement(core$1.TextInput, { type: "date", id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.TextInput, { type: "date", id: name, name: name, "data-testid": name, defaultValue: value, required: required, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.value);
                         }
@@ -2804,7 +2811,7 @@
             case core.PropertyType.integer:
             case core.PropertyType.positiveInt:
             case core.PropertyType.unsignedInt:
-                return (React.createElement(core$1.TextInput, { type: "number", step: propertyType === core.PropertyType.decimal ? 'any' : '1', id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.TextInput, { type: "number", step: propertyType === core.PropertyType.decimal ? 'any' : '1', id: name, name: name, "data-testid": name, defaultValue: value, required: required, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.valueAsNumber);
                         }
@@ -2818,7 +2825,7 @@
                         }
                     } }));
             case core.PropertyType.markdown:
-                return (React.createElement(core$1.Textarea, { id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.Textarea, { id: name, name: name, "data-testid": name, defaultValue: value, required: required, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.value);
                         }
@@ -2897,14 +2904,15 @@
                 return null;
             }
             const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+            const required = property.min !== undefined && property.min > 0;
             if (property.type.length === 1 && property.type[0].code === 'boolean') {
                 return (React.createElement(CheckboxFormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key },
                     React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
                             setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));
                         } })));
             }
-            return (React.createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
-                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+            return (React.createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, withAsterisk: required, htmlFor: key, outcome: props.outcome },
+                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, onChange: (newValue, propName) => {
                         setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));
                     } })));
         })));
@@ -3051,6 +3059,11 @@
         return (React.createElement(core$1.Stack, { justify: "flex-start", spacing: "xs" }, value.map((note, index) => note.text && (React.createElement(core$1.Blockquote, { key: `note-${index}`, classNames: { cite: classes.noteCite, body: classes.noteBody, root: classes.noteRoot }, cite: note.authorReference?.display || note.authorString, icon: null }, note.text)))));
     }
 
+    /**
+     * Renders the name of a resource, given either the resource itself or a reference to the resource.
+     * @param props
+     * @returns
+     */
     function ResourceName(props) {
         const { value, link, ...rest } = props;
         const [outcome, setOutcome] = React.useState();
@@ -3875,6 +3888,7 @@
         'not-in': 'not in',
         'of-type': 'of type',
         missing: 'missing',
+        identifier: 'identifier',
     };
     /**
      * Sets the array of filters.