@medplum/react 0.9.17 → 0.9.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/cjs/defaulttheme.css +9 -7
  2. package/dist/cjs/index.js +244 -126
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/index.min.js +1 -1
  5. package/dist/cjs/index.min.js.map +1 -1
  6. package/dist/cjs/styles.css +75 -59
  7. package/dist/esm/defaulttheme.css +9 -7
  8. package/dist/esm/index.js +242 -128
  9. package/dist/esm/index.js.map +1 -1
  10. package/dist/esm/index.min.js +1 -1
  11. package/dist/esm/index.min.js.map +1 -1
  12. package/dist/esm/styles.css +75 -59
  13. package/dist/types/BackboneElementInput.d.ts +2 -3
  14. package/dist/types/Checkbox.d.ts +12 -0
  15. package/dist/types/CheckboxFormSection.d.ts +9 -0
  16. package/dist/types/ContactDetailDisplay.d.ts +6 -0
  17. package/dist/types/ContactDetailInput.d.ts +8 -0
  18. package/dist/types/ContactPointInput.d.ts +1 -1
  19. package/dist/types/GoogleButton.d.ts +3 -3
  20. package/dist/types/Input.d.ts +2 -1
  21. package/dist/types/MedplumLink.d.ts +1 -0
  22. package/dist/types/RequestGroupDisplay.d.ts +3 -1
  23. package/dist/types/SearchControl.d.ts +2 -0
  24. package/dist/types/SignInForm.d.ts +11 -8
  25. package/dist/types/TextArea.d.ts +1 -0
  26. package/dist/types/index.d.ts +4 -0
  27. package/dist/types/stories/SearchControl.stories.d.ts +3 -0
  28. package/package.json +5 -5
package/dist/cjs/styles.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .medplum-input {
2
2
  border: 0.1px solid var(--medplum-gray-300);
3
- border-radius: 3px;
3
+ border-radius: 2px;
4
4
  background: var(--medplum-surface);
5
- box-shadow: 0 1px 1px 0 var(--medplum-shadow);
5
+ box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
6
6
  color: var(--medplum-gray-800);
7
7
  font-size: var(--medplum-font-normal);
8
8
  height: 34px;
@@ -12,6 +12,10 @@
12
12
  width: 100%;
13
13
  }
14
14
 
15
+ .medplum-input::placeholder {
16
+ color: var(--medplum-gray-600);
17
+ }
18
+
15
19
  .medplum-input:focus {
16
20
  background: var(--medplum-surface);
17
21
  color: var(--medplum-gray-900);
@@ -31,26 +35,6 @@
31
35
  color: red;
32
36
  }
33
37
 
34
- input[type='checkbox'],
35
- input[type='radio'] {
36
- border: 0.1px solid var(--medplum-gray-300);
37
- border-radius: 0;
38
- background: var(--medplum-surface);
39
- margin: 4px;
40
- }
41
-
42
- input[type='checkbox']:focus,
43
- input[type='radio']:focus {
44
- background: var(--medplum-surface);
45
- color: var(--medplum-gray-900);
46
- border: 0.1px solid var(--medplum-blue-300);
47
- }
48
-
49
- input[type='checkbox']:disabled,
50
- input[type='radio']:disabled {
51
- background: var(--medplum-gray-100);
52
- }
53
-
54
38
  .medplum-input-row {
55
39
  display: flex;
56
40
  width: 100%;
@@ -62,7 +46,7 @@ input[type='radio']:disabled {
62
46
  select.medplum-select {
63
47
  background: var(--medplum-surface);
64
48
  padding: 4px 8px;
65
- margin: 1px;
49
+ margin: 1px 1px 1px 0;
66
50
  line-height: 28px;
67
51
  border-radius: 3px;
68
52
  }
@@ -70,7 +54,7 @@ select.medplum-select {
70
54
  select.medplum-select:not([size]) {
71
55
  border: 0.1px solid var(--medplum-gray-300);
72
56
  border-radius: 3px;
73
- box-shadow: 0 1px 1px 0 var(--medplum-shadow);
57
+ box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
74
58
  color: var(--medplum-gray-800);
75
59
  font-size: var(--medplum-font-normal);
76
60
  height: 34px;
@@ -98,10 +82,10 @@ select.medplum-select:disabled {
98
82
  font-size: var(--medplum-font-normal);
99
83
  line-height: 24px;
100
84
  color: var(--medplum-gray-800);
101
- margin: 1px 2px;
85
+ margin: 1px 2px 1px 0;
102
86
  padding: 4px 12px;
103
87
  cursor: pointer;
104
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
88
+ box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
105
89
  }
106
90
 
107
91
  .medplum-button:hover {
@@ -192,7 +176,7 @@ select.medplum-select:disabled {
192
176
  border: 0.1px solid var(--medplum-gray-300);
193
177
  border-radius: 3px;
194
178
  background: var(--medplum-surface);
195
- box-shadow: 0 1px 1px 0 var(--medplum-shadow);
179
+ box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
196
180
  outline: 2px var(--medplum-surface);
197
181
  position: relative;
198
182
  cursor: text;
@@ -230,10 +214,10 @@ select.medplum-select:disabled {
230
214
 
231
215
  .medplum-autocomplete-container li.medplum-autocomplete-item.choice {
232
216
  margin: 1px 0 1px 4px;
233
- padding: 0 6px;
234
- border: 0.1px solid var(--medplum-orange-200);
217
+ padding: 2px 6px 0 6px;
218
+ border: 0.1px solid var(--medplum-gray-400);
235
219
  border-radius: 4px;
236
- background-color: var(--medplum-gray-50);
220
+ background-color: var(--medplum-gray-200);
237
221
  cursor: move;
238
222
  line-height: 22px;
239
223
  }
@@ -245,7 +229,7 @@ select.medplum-select:disabled {
245
229
  .medplum-autocomplete-container li.medplum-autocomplete-item input {
246
230
  color: var(--medplum-gray-800);
247
231
  display: inline-block;
248
- width: 80px;
232
+ width: 100%;
249
233
  height: 28px;
250
234
  line-height: 26px;
251
235
  padding: 0 0 0 4px;
@@ -376,31 +360,42 @@ select.medplum-select:disabled {
376
360
  text-decoration: none;
377
361
  }
378
362
 
379
- fieldset {
380
- border: 0;
381
- margin: 6px 0 16px 0;
382
- padding: 2px 0 8px 0;
363
+ .medplum-checkbox-form-section {
364
+ display: flex;
365
+ justify-content: space-between;
383
366
  }
384
367
 
385
- fieldset.bordered {
386
- border: 0.1px solid var(--medplum-gray-300);
387
- border-radius: 6px;
388
- margin: 6px 0 16px 0;
389
- padding: 2px 8px 8px 8px;
368
+ .medplum-checkbox-form-section-checkbox-container {
369
+ width: 30px;
390
370
  }
391
371
 
392
- fieldset label,
393
- fieldset legend {
394
- display: block;
395
- margin: 2px 0 4px 0;
396
- font-size: var(--medplum-font-small);
372
+ .medplum-checkbox-form-section-details-container {
373
+ flex: 1;
374
+ width: 100%;
397
375
  }
398
376
 
399
- fieldset small {
377
+ .medplum-checkbox-form-section-details-container > label {
378
+ font-weight: 500;
379
+ }
380
+
381
+ fieldset.medplum-form-section {
382
+ border: 0;
383
+ margin: 6px 0 12px 0;
384
+ padding: 2px 0 8px 0;
385
+ }
386
+
387
+ fieldset.medplum-form-section > label,
388
+ fieldset.medplum-form-section > legend {
400
389
  display: block;
401
- margin: 2px 0 4px 0;
402
- padding: 2px 0 4px 0;
403
- font-size: var(--medplum-font-small);
390
+ margin: 1px 0 3px 0;
391
+ line-height: 1.75;
392
+ font-weight: 500;
393
+ }
394
+
395
+ fieldset.medplum-form-section > p {
396
+ margin: 1px 0 4px 0;
397
+ padding: 1px 0 4px 0;
398
+ line-height: 1.75;
404
399
  }
405
400
 
406
401
  dl.medplum-description-list {
@@ -426,17 +421,41 @@ dl.medplum-description-list.compact dd {
426
421
  border: 0;
427
422
  }
428
423
 
424
+ input[type='checkbox'],
425
+ input[type='radio'] {
426
+ background: var(--medplum-surface);
427
+ padding: 10px;
428
+ margin: 4px;
429
+ transform: scale(1.25);
430
+ }
431
+
432
+ input[type='checkbox']:focus,
433
+ input[type='radio']:focus {
434
+ color: var(--medplum-gray-900);
435
+ border: 0.1px solid var(--medplum-blue-300);
436
+ }
437
+
438
+ input[type='checkbox']:disabled,
439
+ input[type='radio']:disabled {
440
+ background: var(--medplum-gray-100);
441
+ }
442
+
429
443
  .medplum-textarea {
430
444
  background: var(--medplum-surface);
431
445
  border: 0.1px solid var(--medplum-gray-300);
432
446
  border-radius: 3px;
433
- box-shadow: 0 1px 1px 0 var(--medplum-shadow);
447
+ box-shadow: 0 0.5px 0.5px 0 var(--medplum-shadow);
434
448
  color: var(--medplum-foreground);
435
449
  line-height: 18px;
436
- padding: 2px 4px;
450
+ padding: 8px 12px;
437
451
  margin: 0;
438
452
  }
439
453
 
454
+ .medplum-textarea.monospace {
455
+ font-family: var(--medplum-monospace-font-family);
456
+ padding: 2px 4px;
457
+ }
458
+
440
459
  .medplum-textarea:focus {
441
460
  background: var(--medplum-surface);
442
461
  color: var(--medplum-gray-900);
@@ -773,10 +792,8 @@ table.medplum-diff-table td {
773
792
  }
774
793
 
775
794
  .medplum-document textarea {
776
- line-height: 18px;
777
795
  margin: 0;
778
- min-height: 300px;
779
- padding: 2px 4px;
796
+ min-height: 100px;
780
797
  width: 100%;
781
798
  }
782
799
 
@@ -1015,7 +1032,6 @@ table.medplum-diff-table td {
1015
1032
  .medplum-search-icon-cell input[type='checkbox'] {
1016
1033
  margin: 0;
1017
1034
  padding: 0;
1018
- border: 0.1px solid var(--medplum-gray-600);
1019
1035
  outline: 0;
1020
1036
  }
1021
1037
 
@@ -1120,7 +1136,7 @@ header a:focus {
1120
1136
 
1121
1137
  .medplum-nav-search-container > ul > li.choice {
1122
1138
  margin: 1px 0 1px 4px;
1123
- padding: 0 6px;
1139
+ padding: 2px 6px 0 6px;
1124
1140
  border: 0.1px solid var(--medplum-orange-200);
1125
1141
  border-radius: 4px;
1126
1142
  background-color: var(--medplum-gray-50);
@@ -1135,7 +1151,7 @@ header a:focus {
1135
1151
 
1136
1152
  .medplum-nav-search-container > ul > li > input {
1137
1153
  display: inline-block;
1138
- width: 80px;
1154
+ width: 100%;
1139
1155
  line-height: 26px;
1140
1156
  padding: 0 0 0 6px;
1141
1157
  margin: 2px 0 0 2px;
@@ -1327,7 +1343,7 @@ div.medplum-nav-menu-container {
1327
1343
  }
1328
1344
 
1329
1345
  .medplum-questionnaire-builder .section > .top-actions {
1330
- top: 0;
1346
+ top: 1px;
1331
1347
  padding: 4px;
1332
1348
  color: var(--medplum-gray-500);
1333
1349
  }
@@ -1339,7 +1355,7 @@ div.medplum-nav-menu-container {
1339
1355
  .medplum-questionnaire-builder .section > .top-actions,
1340
1356
  .medplum-questionnaire-builder .section > .bottom-actions {
1341
1357
  position: absolute;
1342
- right: 0;
1358
+ right: 4px;
1343
1359
  }
1344
1360
 
1345
1361
  .medplum-questionnaire-builder .section > .top-actions a,
package/dist/esm/defaulttheme.css CHANGED
@@ -6,7 +6,9 @@
6
6
  --medplum-navbar-textbox: rgba(255, 255, 255, 0.2);
7
7
  --medplum-navbar-placeholder: rgba(255, 255, 255, 0.6);
8
8
  --medplum-shadow: rgba(0, 0, 0, 0.1);
9
- /* font sizes */
9
+ /* fonts */
10
+ --medplum-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
11
+ --medplum-monospace-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
10
12
  --medplum-font-small: 12px;
11
13
  --medplum-font-normal: 13px;
12
14
  --medplum-font-big: 18px;
@@ -184,7 +186,7 @@
184
186
 
185
187
  html {
186
188
  height: 100%;
187
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
189
+ font-family: var(--medplum-font-family);
188
190
  position: relative;
189
191
  }
190
192
 
@@ -216,14 +218,14 @@ input[type='tel'],
216
218
  input[type='text'],
217
219
  input[type='time'],
218
220
  input[type='url'],
219
- select {
220
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
221
+ select,
222
+ textarea {
223
+ font-family: var(--medplum-font-family);
221
224
  }
222
225
 
223
226
  code,
224
- pre,
225
- textarea {
226
- font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
227
+ pre {
228
+ font-family: var(--medplum-monospace-font-family);
227
229
  }
228
230
 
229
231
  a {