@dhis2/ui 8.2.5 → 8.2.6

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 (2) hide show
  1. package/API.md +1477 -1253
  2. package/package.json +48 -48
package/API.md CHANGED
@@ -4,26 +4,28 @@
4
4
 
5
5
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
6
6
 
7
+
7
8
  ```js
8
9
  import { AlertBar } from '@dhis2/ui'
9
10
  ```
10
11
 
12
+
11
13
  #### Props
12
14
 
13
- | Name | Type | Default | Required | Description |
14
- | --------- | -------- | ------------------------- | -------- | ----------------------------------------------------------------------------------------------------------- |
15
- | actions | custom | | | An array of 0-2 action objects |
16
- | children | string | | | The message string for the alert |
17
- | className | string | | | |
18
- | critical | custom | | | Alert bars with `critical` will not autohide |
19
- | dataTest | string | `'dhis2-uicore-alertbar'` | | |
20
- | duration | number | `8000` | | |
21
- | hidden | boolean | | | |
22
- | icon | custom | `true` | | A specific icon to override the default icon in the bar.<br/>If `false` is provided, no icon will be shown. |
23
- | permanent | boolean | | | |
24
- | success | custom | | | |
25
- | warning | custom | | | Alert bars with `warning` will not autohide |
26
- | onHidden | function | | | |
15
+ |Name|Type|Default|Required|Description|
16
+ |---|---|---|---|---|
17
+ |actions|custom|||An array of 0-2 action objects|
18
+ |children|string|||The message string for the alert|
19
+ |className|string||||
20
+ |critical|custom|||Alert bars with `critical` will not autohide|
21
+ |dataTest|string|`'dhis2-uicore-alertbar'`|||
22
+ |duration|number|`8000`|||
23
+ |hidden|boolean||||
24
+ |icon|custom|`true`||A specific icon to override the default icon in the bar.<br/>If `false` is provided, no icon will be shown.|
25
+ |permanent|boolean||||
26
+ |success|custom||||
27
+ |warning|custom|||Alert bars with `warning` will not autohide|
28
+ |onHidden|function||||
27
29
 
28
30
  ### AlertStack
29
31
 
@@ -31,17 +33,19 @@ import { AlertBar } from '@dhis2/ui'
31
33
 
32
34
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
33
35
 
36
+
34
37
  ```js
35
38
  import { AlertStack } from '@dhis2/ui'
36
39
  ```
37
40
 
41
+
38
42
  #### Props
39
43
 
40
- | Name | Type | Default | Required | Description |
41
- | --------- | ------ | --------------------------- | -------- | ----------- |
42
- | children | node | | | |
43
- | className | string | | | |
44
- | dataTest | string | `'dhis2-uicore-alertstack'` | | |
44
+ |Name|Type|Default|Required|Description|
45
+ |---|---|---|---|---|
46
+ |children|node||||
47
+ |className|string||||
48
+ |dataTest|string|`'dhis2-uicore-alertstack'`|||
45
49
 
46
50
  ### Box
47
51
 
@@ -49,25 +53,27 @@ import { AlertStack } from '@dhis2/ui'
49
53
 
50
54
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
51
55
 
56
+
52
57
  ```js
53
58
  import { Box } from '@dhis2/ui'
54
59
  ```
55
60
 
61
+
56
62
  #### Props
57
63
 
58
- | Name | Type | Default | Required | Description |
59
- | --------- | ------ | -------------------- | -------- | ----------- |
60
- | children | node | | | |
61
- | className | string | | | |
62
- | dataTest | string | `'dhis2-uicore-box'` | | |
63
- | height | string | | | |
64
- | marginTop | string | | | |
65
- | maxHeight | string | | | |
66
- | maxWidth | string | | | |
67
- | minHeight | string | | | |
68
- | minWidth | string | | | |
69
- | overflow | string | | | |
70
- | width | string | | | |
64
+ |Name|Type|Default|Required|Description|
65
+ |---|---|---|---|---|
66
+ |children|node||||
67
+ |className|string||||
68
+ |dataTest|string|`'dhis2-uicore-box'`|||
69
+ |height|string||||
70
+ |marginTop|string||||
71
+ |maxHeight|string||||
72
+ |maxWidth|string||||
73
+ |minHeight|string||||
74
+ |minWidth|string||||
75
+ |overflow|string||||
76
+ |width|string||||
71
77
 
72
78
  ### Button
73
79
 
@@ -75,34 +81,36 @@ import { Box } from '@dhis2/ui'
75
81
 
76
82
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
77
83
 
84
+
78
85
  ```js
79
86
  import { Button } from '@dhis2/ui'
80
87
  ```
81
88
 
89
+
82
90
  #### Props
83
91
 
84
- | Name | Type | Default | Required | Description |
85
- | ------------ | ----------------------------- | ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
86
- | children | node | | | Component to render inside the button |
87
- | className | string | | | A className that will be passed to the `<button>` element |
88
- | dataTest | string | `'dhis2-uicore-button'` | | A string that will be applied as a `data-test` attribute on the button element<br/>for identification during testing |
89
- | destructive | custom | | | Indicates that the button makes potentially dangerous<br/>deletions or data changes.<br/>Mutually exclusive with `primary` and `secondary` props |
90
- | disabled | boolean | | | Applies a greyed-out appearance and makes the button non-interactive |
91
- | icon | element | | | An icon element to display inside the button |
92
- | initialFocus | boolean | | | Use this variant to capture the initial focus on the page. |
93
- | large | custom | | | Makes the button large. Mutually exclusive with `small` |
94
- | loading | boolean | | | Sets the button into a loading state |
95
- | name | string | | | Sets `name` attribute on button element.<br/>Gets passed as part of the first argument to callbacks (see `onClick`). |
96
- | primary | custom | | | Applies 'primary' button appearance.<br/>Mutually exclusive with `destructive` and `secondary` props |
97
- | secondary | custom | | | Applies 'secondary' button appearance.<br/>Mutually exclusive with `primary` and `destructive` props |
98
- | small | custom | | | Makes the button small. Mutually exclusive with `large` prop |
99
- | tabIndex | string | | | Tab index for focusing the button with a keyboard |
100
- | toggled | boolean | | | Changes appearance of button to an on/off state |
101
- | type | 'submit' │ 'reset' │ 'button' | `'button'` | | Sets `type` attribute on `<button>` element |
102
- | value | string | | | Value associated with the button.<br/>Gets passed as part of the first argument to callbacks (see `onClick`). |
103
- | onBlur | function | | | Callback to trigger on de-focus (blur).<br/>Called with same args as `onClick` |
104
- | onClick | function | | | Callback to trigger on click.<br/>Called with args `({ value, name }, event)` |
105
- | onFocus | function | | | Callback to trigger on focus. Called with same args as `onClick` |
92
+ |Name|Type|Default|Required|Description|
93
+ |---|---|---|---|---|
94
+ |children|node|||Component to render inside the button|
95
+ |className|string|||A className that will be passed to the `<button>` element|
96
+ |dataTest|string|`'dhis2-uicore-button'`||A string that will be applied as a `data-test` attribute on the button element<br/>for identification during testing|
97
+ |destructive|custom|||Indicates that the button makes potentially dangerous<br/>deletions or data changes.<br/>Mutually exclusive with `primary` and `secondary` props|
98
+ |disabled|boolean|||Applies a greyed-out appearance and makes the button non-interactive|
99
+ |icon|element|||An icon element to display inside the button|
100
+ |initialFocus|boolean|||Use this variant to capture the initial focus on the page.|
101
+ |large|custom|||Makes the button large. Mutually exclusive with `small`|
102
+ |loading|boolean|||Sets the button into a loading state|
103
+ |name|string|||Sets `name` attribute on button element.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
104
+ |primary|custom|||Applies 'primary' button appearance.<br/>Mutually exclusive with `destructive` and `secondary` props|
105
+ |secondary|custom|||Applies 'secondary' button appearance.<br/>Mutually exclusive with `primary` and `destructive` props|
106
+ |small|custom|||Makes the button small. Mutually exclusive with `large` prop|
107
+ |tabIndex|string|||Tab index for focusing the button with a keyboard|
108
+ |toggled|boolean|||Changes appearance of button to an on/off state|
109
+ |type|'submit' │ 'reset' │ 'button'|`'button'`||Sets `type` attribute on `<button>` element|
110
+ |value|string|||Value associated with the button.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
111
+ |onBlur|function|||Callback to trigger on de-focus (blur).<br/>Called with same args as `onClick`|
112
+ |onClick|function|||Callback to trigger on click.<br/>Called with args `({ value, name }, event)`|
113
+ |onFocus|function|||Callback to trigger on focus. Called with same args as `onClick`|
106
114
 
107
115
  ### ButtonStrip
108
116
 
@@ -110,19 +118,21 @@ import { Button } from '@dhis2/ui'
110
118
 
111
119
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
112
120
 
121
+
113
122
  ```js
114
123
  import { ButtonStrip } from '@dhis2/ui'
115
124
  ```
116
125
 
126
+
117
127
  #### Props
118
128
 
119
- | Name | Type | Default | Required | Description |
120
- | --------- | ------ | ---------------------------- | -------- | ----------------------------------------------------------------------- |
121
- | children | node | | | |
122
- | className | string | | | |
123
- | dataTest | string | `'dhis2-uicore-buttonstrip'` | | |
124
- | end | custom | | | Horizontal alignment for buttons. Mutually exclusive with `middle` prop |
125
- | middle | custom | | | Horizontal alignment. Mutually exclusive with `end` prop |
129
+ |Name|Type|Default|Required|Description|
130
+ |---|---|---|---|---|
131
+ |children|node||||
132
+ |className|string||||
133
+ |dataTest|string|`'dhis2-uicore-buttonstrip'`|||
134
+ |end|custom|||Horizontal alignment for buttons. Mutually exclusive with `middle` prop|
135
+ |middle|custom|||Horizontal alignment. Mutually exclusive with `end` prop|
126
136
 
127
137
  ### DropdownButton
128
138
 
@@ -130,32 +140,34 @@ import { ButtonStrip } from '@dhis2/ui'
130
140
 
131
141
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
132
142
 
143
+
133
144
  ```js
134
145
  import { DropdownButton } from '@dhis2/ui'
135
146
  ```
136
147
 
148
+
137
149
  #### Props
138
150
 
139
- | Name | Type | Default | Required | Description |
140
- | ------------ | ----------------------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
141
- | children | node | | | Children to render inside the buton |
142
- | className | string | | | |
143
- | component | element | | | Component to show/hide when button is clicked |
144
- | dataTest | string | `'dhis2-uicore-dropdownbutton'` | | |
145
- | destructive | custom | | | Button variant. Mutually exclusive with `primary` and `secondary` props |
146
- | disabled | boolean | | | Make the button non-interactive |
147
- | icon | element | | | |
148
- | initialFocus | boolean | | | Grants button initial focus on the page |
149
- | large | custom | | | Button size. Mutually exclusive with `small` prop |
150
- | name | string | | | |
151
- | open | boolean | | | Controls popper visibility. When implementing this prop the component becomes a controlled component |
152
- | primary | custom | | | Button variant. Mutually exclusive with `destructive` and `secondary` props |
153
- | secondary | custom | | | Button variant. Mutually exclusive with `primary` and `destructive` props |
154
- | small | custom | | | Button size. Mutually exclusive with `large` prop |
155
- | tabIndex | string | | | |
156
- | type | 'submit' │ 'reset' │ 'button' | | | Type of button. Can take advantage of different default behavior |
157
- | value | string | | | |
158
- | onClick | custom | | | Callback triggered on click.<br/>Called with signature `({ name: string, value: string, open: bool }, event)`<br/>Is required when using the `open` prop to override the internal<br/>state. |
151
+ |Name|Type|Default|Required|Description|
152
+ |---|---|---|---|---|
153
+ |children|node|||Children to render inside the buton|
154
+ |className|string||||
155
+ |component|element|||Component to show/hide when button is clicked|
156
+ |dataTest|string|`'dhis2-uicore-dropdownbutton'`|||
157
+ |destructive|custom|||Button variant. Mutually exclusive with `primary` and `secondary` props|
158
+ |disabled|boolean|||Make the button non-interactive|
159
+ |icon|element||||
160
+ |initialFocus|boolean|||Grants button initial focus on the page|
161
+ |large|custom|||Button size. Mutually exclusive with `small` prop|
162
+ |name|string||||
163
+ |open|boolean|||Controls popper visibility. When implementing this prop the component becomes a controlled component|
164
+ |primary|custom|||Button variant. Mutually exclusive with `destructive` and `secondary` props|
165
+ |secondary|custom|||Button variant. Mutually exclusive with `primary` and `destructive` props|
166
+ |small|custom|||Button size. Mutually exclusive with `large` prop|
167
+ |tabIndex|string||||
168
+ |type|'submit' │ 'reset' │ 'button'|||Type of button. Can take advantage of different default behavior|
169
+ |value|string||||
170
+ |onClick|custom|||Callback triggered on click.<br/>Called with signature `({ name: string, value: string, open: bool }, event)`<br/>Is required when using the `open` prop to override the internal<br/>state.|
159
171
 
160
172
  ### SplitButton
161
173
 
@@ -163,31 +175,33 @@ import { DropdownButton } from '@dhis2/ui'
163
175
 
164
176
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
165
177
 
178
+
166
179
  ```js
167
180
  import { SplitButton } from '@dhis2/ui'
168
181
  ```
169
182
 
183
+
170
184
  #### Props
171
185
 
172
- | Name | Type | Default | Required | Description |
173
- | ------------ | ----------------------------- | ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- |
174
- | children | string | | | |
175
- | className | string | | | |
176
- | component | element | | | Component to render when the dropdown is opened |
177
- | dataTest | string | `'dhis2-uicore-splitbutton'` | | |
178
- | destructive | custom | | | Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props |
179
- | disabled | boolean | | | Disables the button and makes it uninteractive |
180
- | icon | element | | | An icon to add inside the button |
181
- | initialFocus | boolean | | | Grants the button the initial focus |
182
- | large | custom | | | Changes button size. Mutually exclusive with `small` prop |
183
- | name | string | | | |
184
- | primary | custom | | | Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props |
185
- | secondary | custom | | | Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props |
186
- | small | custom | | | Changes button size. Mutually exclusive with `large` prop |
187
- | tabIndex | string | | | |
188
- | type | 'submit' │ 'reset' │ 'button' | | | Type of button. Applied to html `button` element |
189
- | value | string | | | Value associated with the button. Passed in object to onClick handler |
190
- | onClick | function | | | |
186
+ |Name|Type|Default|Required|Description|
187
+ |---|---|---|---|---|
188
+ |children|string||||
189
+ |className|string||||
190
+ |component|element|||Component to render when the dropdown is opened|
191
+ |dataTest|string|`'dhis2-uicore-splitbutton'`|||
192
+ |destructive|custom|||Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props|
193
+ |disabled|boolean|||Disables the button and makes it uninteractive|
194
+ |icon|element|||An icon to add inside the button|
195
+ |initialFocus|boolean|||Grants the button the initial focus|
196
+ |large|custom|||Changes button size. Mutually exclusive with `small` prop|
197
+ |name|string||||
198
+ |primary|custom|||Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props|
199
+ |secondary|custom|||Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props|
200
+ |small|custom|||Changes button size. Mutually exclusive with `large` prop|
201
+ |tabIndex|string||||
202
+ |type|'submit' │ 'reset' │ 'button'|||Type of button. Applied to html `button` element|
203
+ |value|string|||Value associated with the button. Passed in object to onClick handler|
204
+ |onClick|function||||
191
205
 
192
206
  ### Card
193
207
 
@@ -195,17 +209,19 @@ import { SplitButton } from '@dhis2/ui'
195
209
 
196
210
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
197
211
 
212
+
198
213
  ```js
199
214
  import { Card } from '@dhis2/ui'
200
215
  ```
201
216
 
217
+
202
218
  #### Props
203
219
 
204
- | Name | Type | Default | Required | Description |
205
- | --------- | ------ | --------------------- | -------- | ----------- |
206
- | children | node | | | |
207
- | className | string | | | |
208
- | dataTest | string | `'dhis2-uicore-card'` | | |
220
+ |Name|Type|Default|Required|Description|
221
+ |---|---|---|---|---|
222
+ |children|node||||
223
+ |className|string||||
224
+ |dataTest|string|`'dhis2-uicore-card'`|||
209
225
 
210
226
  ### Center
211
227
 
@@ -213,18 +229,20 @@ import { Card } from '@dhis2/ui'
213
229
 
214
230
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
215
231
 
232
+
216
233
  ```js
217
234
  import { Center } from '@dhis2/ui'
218
235
  ```
219
236
 
237
+
220
238
  #### Props
221
239
 
222
- | Name | Type | Default | Required | Description |
223
- | --------- | --------------------------- | -------------------------------- | -------- | ------------------ |
224
- | children | node | | | |
225
- | className | string | | | |
226
- | dataTest | string | `'dhis2-uicore-centeredcontent'` | | |
227
- | position | 'top' │ 'middle' │ 'bottom' | `'middle'` | | Vertical alignment |
240
+ |Name|Type|Default|Required|Description|
241
+ |---|---|---|---|---|
242
+ |children|node||||
243
+ |className|string||||
244
+ |dataTest|string|`'dhis2-uicore-centeredcontent'`|||
245
+ |position|'top' │ 'middle' │ 'bottom'|`'middle'`||Vertical alignment|
228
246
 
229
247
  ### Checkbox
230
248
 
@@ -232,31 +250,33 @@ import { Center } from '@dhis2/ui'
232
250
 
233
251
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
234
252
 
253
+
235
254
  ```js
236
255
  import { Checkbox } from '@dhis2/ui'
237
256
  ```
238
257
 
258
+
239
259
  #### Props
240
260
 
241
- | Name | Type | Default | Required | Description |
242
- | ------------- | -------- | ------------------------- | -------- | --------------------------------------- |
243
- | checked | custom | `false` | | |
244
- | className | string | | | |
245
- | dataTest | string | `'dhis2-uicore-checkbox'` | | |
246
- | dense | boolean | | | |
247
- | disabled | boolean | | | |
248
- | error | custom | | | |
249
- | indeterminate | custom | `false` | | |
250
- | initialFocus | boolean | | | |
251
- | label | node | | | |
252
- | name | string | | | |
253
- | tabIndex | string | | | |
254
- | valid | custom | | | |
255
- | value | string | | | |
256
- | warning | custom | | | |
257
- | onBlur | function | | | |
258
- | onChange | function | | | Called with signature `(object, event)` |
259
- | onFocus | function | | | |
261
+ |Name|Type|Default|Required|Description|
262
+ |---|---|---|---|---|
263
+ |checked|custom|`false`|||
264
+ |className|string||||
265
+ |dataTest|string|`'dhis2-uicore-checkbox'`|||
266
+ |dense|boolean||||
267
+ |disabled|boolean||||
268
+ |error|custom||||
269
+ |indeterminate|custom|`false`|||
270
+ |initialFocus|boolean||||
271
+ |label|node||||
272
+ |name|string||||
273
+ |tabIndex|string||||
274
+ |valid|custom||||
275
+ |value|string||||
276
+ |warning|custom||||
277
+ |onBlur|function||||
278
+ |onChange|function|||Called with signature `(object, event)`|
279
+ |onFocus|function||||
260
280
 
261
281
  ### CheckboxField
262
282
 
@@ -264,33 +284,35 @@ import { Checkbox } from '@dhis2/ui'
264
284
 
265
285
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
266
286
 
287
+
267
288
  ```js
268
289
  import { CheckboxField } from '@dhis2/ui'
269
290
  ```
270
291
 
292
+
271
293
  #### Props
272
294
 
273
- | Name | Type | Default | Required | Description |
274
- | -------------- | -------- | --------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
275
- | checked | boolean | | | |
276
- | className | string | | | |
277
- | dataTest | string | `'dhis2-uiwidgets-checkboxfield'` | | |
278
- | dense | boolean | | | Smaller dimensions for information-dense layouts |
279
- | disabled | boolean | | | Disables the checkbox |
280
- | error | custom | | | Applies 'error' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `valid` props |
281
- | helpText | string | | | Useful instructions for the user |
282
- | initialFocus | boolean | | | |
283
- | label | node | | | Labels the checkbox |
284
- | name | string | | | Name associate with the checkbox. Passed in object as argument to event handlers |
285
- | required | boolean | | | Adds an asterisk to indicate this field is required |
286
- | tabIndex | string | | | |
287
- | valid | custom | | | Applies 'valid' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `error` props |
288
- | validationText | string | | | Adds text below the checkbox to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses |
289
- | value | string | | | Value associated with the checkbox. Passed in object as argument to event handlers |
290
- | warning | custom | | | Applies 'warning' styling to checkbox and validation text for feedback. Mutually exclusive with `valid` and `error` props |
291
- | onBlur | function | | | Called with signature `({ name: string, value: string, checked: bool }, event)` |
292
- | onChange | function | | | Called with signature `({ name: string, value: string, checked: bool }, event)` |
293
- | onFocus | function | | | Called with signature `({ name: string, value: string, checked: bool }, event)` |
295
+ |Name|Type|Default|Required|Description|
296
+ |---|---|---|---|---|
297
+ |checked|boolean||||
298
+ |className|string||||
299
+ |dataTest|string|`'dhis2-uiwidgets-checkboxfield'`|||
300
+ |dense|boolean|||Smaller dimensions for information-dense layouts|
301
+ |disabled|boolean|||Disables the checkbox|
302
+ |error|custom|||Applies 'error' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `valid` props|
303
+ |helpText|string|||Useful instructions for the user|
304
+ |initialFocus|boolean||||
305
+ |label|node|||Labels the checkbox|
306
+ |name|string|||Name associate with the checkbox. Passed in object as argument to event handlers|
307
+ |required|boolean|||Adds an asterisk to indicate this field is required|
308
+ |tabIndex|string||||
309
+ |valid|custom|||Applies 'valid' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `error` props|
310
+ |validationText|string|||Adds text below the checkbox to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses|
311
+ |value|string|||Value associated with the checkbox. Passed in object as argument to event handlers|
312
+ |warning|custom|||Applies 'warning' styling to checkbox and validation text for feedback. Mutually exclusive with `valid` and `error` props|
313
+ |onBlur|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
314
+ |onChange|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
315
+ |onFocus|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
294
316
 
295
317
  ### Chip
296
318
 
@@ -298,29 +320,31 @@ import { CheckboxField } from '@dhis2/ui'
298
320
 
299
321
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
300
322
 
323
+
301
324
  ```js
302
325
  import { Chip } from '@dhis2/ui'
303
326
  ```
304
327
 
328
+
305
329
  #### Props
306
330
 
307
- | Name | Type | Default | Required | Description |
308
- | ------------ | -------- | --------------------- | -------- | -------------------------------------- |
309
- | children | any | | | |
310
- | className | string | | | |
311
- | dataTest | string | `'dhis2-uicore-chip'` | | |
312
- | dense | boolean | | | |
313
- | disabled | boolean | | | |
314
- | dragging | boolean | | | |
315
- | icon | element | | | |
316
- | marginBottom | number | `4` | | `margin-bottom` value, applied in `px` |
317
- | marginLeft | number | `4` | | `margin-left` value, applied in `px` |
318
- | marginRight | number | `4` | | `margin-right` value, applied in `px` |
319
- | marginTop | number | `4` | | `margin-top` value, applied in `px` |
320
- | overflow | boolean | | | |
321
- | selected | boolean | | | |
322
- | onClick | function | | | |
323
- | onRemove | function | | | |
331
+ |Name|Type|Default|Required|Description|
332
+ |---|---|---|---|---|
333
+ |children|any||||
334
+ |className|string||||
335
+ |dataTest|string|`'dhis2-uicore-chip'`|||
336
+ |dense|boolean||||
337
+ |disabled|boolean||||
338
+ |dragging|boolean||||
339
+ |icon|element||||
340
+ |marginBottom|number|`4`||`margin-bottom` value, applied in `px`|
341
+ |marginLeft|number|`4`||`margin-left` value, applied in `px`|
342
+ |marginRight|number|`4`||`margin-right` value, applied in `px`|
343
+ |marginTop|number|`4`||`margin-top` value, applied in `px`|
344
+ |overflow|boolean||||
345
+ |selected|boolean||||
346
+ |onClick|function||||
347
+ |onRemove|function||||
324
348
 
325
349
  ### Cover
326
350
 
@@ -328,19 +352,21 @@ import { Chip } from '@dhis2/ui'
328
352
 
329
353
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
330
354
 
355
+
331
356
  ```js
332
357
  import { Cover } from '@dhis2/ui'
333
358
  ```
334
359
 
360
+
335
361
  #### Props
336
362
 
337
- | Name | Type | Default | Required | Description |
338
- | ----------- | -------- | ------------------------------- | -------- | ----------------------------------------------- |
339
- | children | node | | | |
340
- | className | string | | | |
341
- | dataTest | string | `'dhis2-uicore-componentcover'` | | |
342
- | translucent | boolean | | | Adds a semi-transparent background to the cover |
343
- | onClick | function | | | |
363
+ |Name|Type|Default|Required|Description|
364
+ |---|---|---|---|---|
365
+ |children|node||||
366
+ |className|string||||
367
+ |dataTest|string|`'dhis2-uicore-componentcover'`|||
368
+ |translucent|boolean|||Adds a semi-transparent background to the cover|
369
+ |onClick|function||||
344
370
 
345
371
  ### CssReset
346
372
 
@@ -348,29 +374,34 @@ import { Cover } from '@dhis2/ui'
348
374
 
349
375
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
350
376
 
377
+
351
378
  ```js
352
379
  import { CssReset } from '@dhis2/ui'
353
380
  ```
354
381
 
382
+
383
+
355
384
  ### CssVariables
356
385
 
357
386
  #### Usage
358
387
 
359
388
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
360
389
 
390
+
361
391
  ```js
362
392
  import { CssVariables } from '@dhis2/ui'
363
393
  ```
364
394
 
395
+
365
396
  #### Props
366
397
 
367
- | Name | Type | Default | Required | Description |
368
- | ---------- | ------- | ------- | -------- | ----------- |
369
- | colors | boolean | `false` | | |
370
- | elevations | boolean | `false` | | |
371
- | layers | boolean | `false` | | |
372
- | spacers | boolean | `false` | | |
373
- | theme | boolean | `false` | | |
398
+ |Name|Type|Default|Required|Description|
399
+ |---|---|---|---|---|
400
+ |colors|boolean|`false`|||
401
+ |elevations|boolean|`false`|||
402
+ |layers|boolean|`false`|||
403
+ |spacers|boolean|`false`|||
404
+ |theme|boolean|`false`|||
374
405
 
375
406
  ### Divider
376
407
 
@@ -378,18 +409,20 @@ import { CssVariables } from '@dhis2/ui'
378
409
 
379
410
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
380
411
 
412
+
381
413
  ```js
382
414
  import { Divider } from '@dhis2/ui'
383
415
  ```
384
416
 
417
+
385
418
  #### Props
386
419
 
387
- | Name | Type | Default | Required | Description |
388
- | --------- | ------- | ------------------------ | -------- | ----------- |
389
- | className | string | | | |
390
- | dataTest | string | `'dhis2-uicore-divider'` | | |
391
- | dense | boolean | | | |
392
- | margin | string | `${spacers.dp8} 0` | | |
420
+ |Name|Type|Default|Required|Description|
421
+ |---|---|---|---|---|
422
+ |className|string||||
423
+ |dataTest|string|`'dhis2-uicore-divider'`|||
424
+ |dense|boolean||||
425
+ |margin|string|``${spacers.dp8} 0``|||
393
426
 
394
427
  ### Field
395
428
 
@@ -397,26 +430,28 @@ import { Divider } from '@dhis2/ui'
397
430
 
398
431
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
399
432
 
433
+
400
434
  ```js
401
435
  import { Field } from '@dhis2/ui'
402
436
  ```
403
437
 
438
+
404
439
  #### Props
405
440
 
406
- | Name | Type | Default | Required | Description |
407
- | -------------- | ------- | ---------------------- | -------- | --------------------------------------------------------------------------------------- |
408
- | children | node | | | |
409
- | className | string | | | |
410
- | dataTest | string | `'dhis2-uicore-field'` | | |
411
- | disabled | boolean | | | Disabled status, shown when mouse is over label |
412
- | error | custom | | | Field status. Mutually exclusive with `valid` and `warning` props |
413
- | helpText | string | | | Useful text within the field |
414
- | label | string | | | Label at the top of the field |
415
- | name | string | | | `name` will become the target of the `for`/`htmlFor` attribute on the `<label>` element |
416
- | required | boolean | | | Inidcates this field is required |
417
- | valid | custom | | | Field status. Mutually exclusive with `error` and `warning` props |
418
- | validationText | string | | | Feedback given related to validation status of field |
419
- | warning | custom | | | Field status. Mutually exclusive with `valid` and `error` props |
441
+ |Name|Type|Default|Required|Description|
442
+ |---|---|---|---|---|
443
+ |children|node||||
444
+ |className|string||||
445
+ |dataTest|string|`'dhis2-uicore-field'`|||
446
+ |disabled|boolean|||Disabled status, shown when mouse is over label|
447
+ |error|custom|||Field status. Mutually exclusive with `valid` and `warning` props|
448
+ |helpText|string|||Useful text within the field|
449
+ |label|string|||Label at the top of the field|
450
+ |name|string|||`name` will become the target of the `for`/`htmlFor` attribute on the `<label>` element|
451
+ |required|boolean|||Inidcates this field is required|
452
+ |valid|custom|||Field status. Mutually exclusive with `error` and `warning` props|
453
+ |validationText|string|||Feedback given related to validation status of field|
454
+ |warning|custom|||Field status. Mutually exclusive with `valid` and `error` props|
420
455
 
421
456
  ### FieldGroup
422
457
 
@@ -424,26 +459,28 @@ import { Field } from '@dhis2/ui'
424
459
 
425
460
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
426
461
 
462
+
427
463
  ```js
428
464
  import { FieldGroup } from '@dhis2/ui'
429
465
  ```
430
466
 
467
+
431
468
  #### Props
432
469
 
433
- | Name | Type | Default | Required | Description |
434
- | -------------- | ------- | --------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
435
- | children | node | | | |
436
- | className | string | | | |
437
- | dataTest | string | `'dhis2-uiwidgets-fieldsetfield'` | | |
438
- | disabled | boolean | | | Disables the form controls within |
439
- | error | custom | | | Applies 'error' styling to validation text for feedback. Mutually exclusive with `warning` and `valid` props |
440
- | helpText | string | | | Useful instructions for the user |
441
- | label | string | | | Labels the Field Group |
442
- | name | string | | | Name associate with the Field Group. Passed in object as argument to event handlers |
443
- | required | boolean | | | Adds an asterisk to indicate this field is required |
444
- | valid | custom | | | Applies 'valid' styling to validation text for feedback. Mutually exclusive with `warning` and `error` props |
445
- | validationText | string | | | Adds text at the bottom of the field to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses |
446
- | warning | custom | | | Applies 'warning' styling to validation text for feedback. Mutually exclusive with `valid` and `error` props |
470
+ |Name|Type|Default|Required|Description|
471
+ |---|---|---|---|---|
472
+ |children|node||||
473
+ |className|string||||
474
+ |dataTest|string|`'dhis2-uiwidgets-fieldsetfield'`|||
475
+ |disabled|boolean|||Disables the form controls within|
476
+ |error|custom|||Applies 'error' styling to validation text for feedback. Mutually exclusive with `warning` and `valid` props|
477
+ |helpText|string|||Useful instructions for the user|
478
+ |label|string|||Labels the Field Group|
479
+ |name|string|||Name associate with the Field Group. Passed in object as argument to event handlers|
480
+ |required|boolean|||Adds an asterisk to indicate this field is required|
481
+ |valid|custom|||Applies 'valid' styling to validation text for feedback. Mutually exclusive with `warning` and `error` props|
482
+ |validationText|string|||Adds text at the bottom of the field to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses|
483
+ |warning|custom|||Applies 'warning' styling to validation text for feedback. Mutually exclusive with `valid` and `error` props|
447
484
 
448
485
  ### FieldSet
449
486
 
@@ -451,17 +488,19 @@ import { FieldGroup } from '@dhis2/ui'
451
488
 
452
489
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
453
490
 
491
+
454
492
  ```js
455
493
  import { FieldSet } from '@dhis2/ui'
456
494
  ```
457
495
 
496
+
458
497
  #### Props
459
498
 
460
- | Name | Type | Default | Required | Description |
461
- | --------- | ------ | ------------------------- | -------- | ----------- |
462
- | children | node | | | |
463
- | className | string | | | |
464
- | dataTest | string | `'dhis2-uicore-fieldset'` | | |
499
+ |Name|Type|Default|Required|Description|
500
+ |---|---|---|---|---|
501
+ |children|node||||
502
+ |className|string||||
503
+ |dataTest|string|`'dhis2-uicore-fieldset'`|||
465
504
 
466
505
  ### FileInput
467
506
 
@@ -469,31 +508,33 @@ import { FieldSet } from '@dhis2/ui'
469
508
 
470
509
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
471
510
 
511
+
472
512
  ```js
473
513
  import { FileInput } from '@dhis2/ui'
474
514
  ```
475
515
 
516
+
476
517
  #### Props
477
518
 
478
- | Name | Type | Default | Required | Description |
479
- | ------------ | -------- | -------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
480
- | accept | string | `'*'` | | The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) |
481
- | buttonLabel | string | | | |
482
- | className | string | | | |
483
- | dataTest | string | `'dhis2-uicore-fileinput'` | | |
484
- | disabled | boolean | | | |
485
- | error | custom | | | Input status. Mutually exclusive with `warning` and `valid` |
486
- | initialFocus | boolean | | | |
487
- | large | custom | | | Button size. Mutually exclusive with `small` |
488
- | multiple | boolean | | | The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) |
489
- | name | string | | | |
490
- | small | custom | | | Button size. Mutually exclusive with `large` |
491
- | tabIndex | string | | | |
492
- | valid | custom | | | Input status. Mutually exclusive with `warning` and `error` |
493
- | warning | custom | | | Input status. Mutually exclusive with `valid` and `error` |
494
- | onBlur | function | | | Called with signature `(object, event)` |
495
- | onChange | function | | | Called with signature `(object, event)` |
496
- | onFocus | function | | | Called with signature `(object, event)` |
519
+ |Name|Type|Default|Required|Description|
520
+ |---|---|---|---|---|
521
+ |accept|string|`'*'`||The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)|
522
+ |buttonLabel|string||||
523
+ |className|string||||
524
+ |dataTest|string|`'dhis2-uicore-fileinput'`|||
525
+ |disabled|boolean||||
526
+ |error|custom|||Input status. Mutually exclusive with `warning` and `valid`|
527
+ |initialFocus|boolean||||
528
+ |large|custom|||Button size. Mutually exclusive with `small`|
529
+ |multiple|boolean|||The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)|
530
+ |name|string||||
531
+ |small|custom|||Button size. Mutually exclusive with `large`|
532
+ |tabIndex|string||||
533
+ |valid|custom|||Input status. Mutually exclusive with `warning` and `error`|
534
+ |warning|custom|||Input status. Mutually exclusive with `valid` and `error`|
535
+ |onBlur|function|||Called with signature `(object, event)`|
536
+ |onChange|function|||Called with signature `(object, event)`|
537
+ |onFocus|function|||Called with signature `(object, event)`|
497
538
 
498
539
  ### FileInputField
499
540
 
@@ -501,37 +542,39 @@ import { FileInput } from '@dhis2/ui'
501
542
 
502
543
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
503
544
 
545
+
504
546
  ```js
505
547
  import { FileInputField } from '@dhis2/ui'
506
548
  ```
507
549
 
550
+
508
551
  #### Props
509
552
 
510
- | Name | Type | Default | Required | Description |
511
- | -------------- | ----------------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
512
- | accept | string | `'*'` | | The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) |
513
- | buttonLabel | string │ function | `() => i18n.t('Upload a file')` | | Text on the button |
514
- | children | node | | | |
515
- | className | string | | | |
516
- | dataTest | string | `'dhis2-uiwidgets-fileinputfield'` | | |
517
- | disabled | boolean | | | Disables the button |
518
- | error | custom | | | Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props |
519
- | helpText | string | | | Useful guiding text for the user |
520
- | initialFocus | boolean | | | |
521
- | label | string | | | A descriptive label above the button |
522
- | large | custom | | | Size of the button. Mutually exclusive with the `small` prop |
523
- | multiple | boolean | | | The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) |
524
- | name | string | | | Name associated with input. Passed to event handler callbacks |
525
- | placeholder | string │ function | `() => i18n.t('No file uploaded yet')` | | Placeholder below the button |
526
- | required | boolean | | | Adds an asterisk to indicate this field is required |
527
- | small | custom | | | Size of the button. Mutually exclusive with the `large` prop |
528
- | tabIndex | string | | | |
529
- | valid | custom | | | Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props |
530
- | validationText | string | | | Text below the button that provides validation feedback |
531
- | warning | custom | | | Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props |
532
- | onBlur | function | | | |
533
- | onChange | function | | | Called with signature `({ name: string, files: [] }, event)` |
534
- | onFocus | function | | | |
553
+ |Name|Type|Default|Required|Description|
554
+ |---|---|---|---|---|
555
+ |accept|string|`'*'`||The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)|
556
+ |buttonLabel|string │ function|`() => i18n.t('Upload a file')`||Text on the button|
557
+ |children|node||||
558
+ |className|string||||
559
+ |dataTest|string|`'dhis2-uiwidgets-fileinputfield'`|||
560
+ |disabled|boolean|||Disables the button|
561
+ |error|custom|||Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props|
562
+ |helpText|string|||Useful guiding text for the user|
563
+ |initialFocus|boolean||||
564
+ |label|string|||A descriptive label above the button|
565
+ |large|custom|||Size of the button. Mutually exclusive with the `small` prop|
566
+ |multiple|boolean|||The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)|
567
+ |name|string|||Name associated with input. Passed to event handler callbacks|
568
+ |placeholder|string │ function|`() => i18n.t('No file uploaded yet')`||Placeholder below the button|
569
+ |required|boolean|||Adds an asterisk to indicate this field is required|
570
+ |small|custom|||Size of the button. Mutually exclusive with the `large` prop|
571
+ |tabIndex|string||||
572
+ |valid|custom|||Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props|
573
+ |validationText|string|||Text below the button that provides validation feedback|
574
+ |warning|custom|||Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props|
575
+ |onBlur|function||||
576
+ |onChange|function|||Called with signature `({ name: string, files: [] }, event)`|
577
+ |onFocus|function||||
535
578
 
536
579
  ### FileListItem
537
580
 
@@ -539,22 +582,24 @@ import { FileInputField } from '@dhis2/ui'
539
582
 
540
583
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
541
584
 
585
+
542
586
  ```js
543
587
  import { FileListItem } from '@dhis2/ui'
544
588
  ```
545
589
 
590
+
546
591
  #### Props
547
592
 
548
- | Name | Type | Default | Required | Description |
549
- | ---------- | -------- | ----------------------------- | -------- | ----------- |
550
- | onRemove | function | | \* | |
551
- | cancelText | string | | | |
552
- | className | string | | | |
553
- | dataTest | string | `'dhis2-uicore-filelistitem'` | | |
554
- | label | string | | | |
555
- | loading | boolean | | | |
556
- | removeText | string | | | |
557
- | onCancel | function | | | |
593
+ |Name|Type|Default|Required|Description|
594
+ |---|---|---|---|---|
595
+ |onRemove|function||*||
596
+ |cancelText|string||||
597
+ |className|string||||
598
+ |dataTest|string|`'dhis2-uicore-filelistitem'`|||
599
+ |label|string||||
600
+ |loading|boolean||||
601
+ |removeText|string||||
602
+ |onCancel|function||||
558
603
 
559
604
  ### FileListPlaceholder
560
605
 
@@ -562,16 +607,18 @@ import { FileListItem } from '@dhis2/ui'
562
607
 
563
608
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
564
609
 
610
+
565
611
  ```js
566
612
  import { FileListPlaceholder } from '@dhis2/ui'
567
613
  ```
568
614
 
615
+
569
616
  #### Props
570
617
 
571
- | Name | Type | Default | Required | Description |
572
- | -------- | ------ | ------------------------------------ | -------- | ----------- |
573
- | children | string | | | |
574
- | dataTest | string | `'dhis2-uicore-filelistplaceholder'` | | |
618
+ |Name|Type|Default|Required|Description|
619
+ |---|---|---|---|---|
620
+ |children|string||||
621
+ |dataTest|string|`'dhis2-uicore-filelistplaceholder'`|||
575
622
 
576
623
  ### FileList
577
624
 
@@ -579,17 +626,19 @@ import { FileListPlaceholder } from '@dhis2/ui'
579
626
 
580
627
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
581
628
 
629
+
582
630
  ```js
583
631
  import { FileList } from '@dhis2/ui'
584
632
  ```
585
633
 
634
+
586
635
  #### Props
587
636
 
588
- | Name | Type | Default | Required | Description |
589
- | --------- | ------ | ------------------------- | -------- | ----------- |
590
- | children | node | | | |
591
- | className | string | | | |
592
- | dataTest | string | `'dhis2-uicore-filelist'` | | |
637
+ |Name|Type|Default|Required|Description|
638
+ |---|---|---|---|---|
639
+ |children|node||||
640
+ |className|string||||
641
+ |dataTest|string|`'dhis2-uicore-filelist'`|||
593
642
 
594
643
  ### HeaderBar
595
644
 
@@ -597,16 +646,18 @@ import { FileList } from '@dhis2/ui'
597
646
 
598
647
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
599
648
 
649
+
600
650
  ```js
601
651
  import { HeaderBar } from '@dhis2/ui'
602
652
  ```
603
653
 
654
+
604
655
  #### Props
605
656
 
606
- | Name | Type | Default | Required | Description |
607
- | --------- | ------ | ------- | -------- | ----------- |
608
- | appName | string | | | |
609
- | className | string | | | |
657
+ |Name|Type|Default|Required|Description|
658
+ |---|---|---|---|---|
659
+ |appName|string||||
660
+ |className|string||||
610
661
 
611
662
  ### Logo
612
663
 
@@ -614,30 +665,35 @@ import { HeaderBar } from '@dhis2/ui'
614
665
 
615
666
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
616
667
 
668
+
617
669
  ```js
618
670
  import { Logo } from '@dhis2/ui'
619
671
  ```
620
672
 
673
+
674
+
621
675
  ### Help
622
676
 
623
677
  #### Usage
624
678
 
625
679
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
626
680
 
681
+
627
682
  ```js
628
683
  import { Help } from '@dhis2/ui'
629
684
  ```
630
685
 
686
+
631
687
  #### Props
632
688
 
633
- | Name | Type | Default | Required | Description |
634
- | --------- | ------ | --------------------- | -------- | ----------- |
635
- | children | string | | | |
636
- | className | string | | | |
637
- | dataTest | string | `'dhis2-uicore-help'` | | |
638
- | error | custom | | | |
639
- | valid | custom | | | |
640
- | warning | custom | | | |
689
+ |Name|Type|Default|Required|Description|
690
+ |---|---|---|---|---|
691
+ |children|string||||
692
+ |className|string||||
693
+ |dataTest|string|`'dhis2-uicore-help'`|||
694
+ |error|custom||||
695
+ |valid|custom||||
696
+ |warning|custom||||
641
697
 
642
698
  ### Input
643
699
 
@@ -645,37 +701,39 @@ import { Help } from '@dhis2/ui'
645
701
 
646
702
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
647
703
 
704
+
648
705
  ```js
649
706
  import { Input } from '@dhis2/ui'
650
707
  ```
651
708
 
709
+
652
710
  #### Props
653
711
 
654
- | Name | Type | Default | Required | Description |
655
- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
656
- | autoComplete | string | | | The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) |
657
- | className | string | | | |
658
- | dataTest | string | `'dhis2-uicore-input'` | | |
659
- | dense | boolean | | | Makes the input smaller |
660
- | disabled | boolean | | | Disables the input |
661
- | error | custom | | | Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props |
662
- | initialFocus | boolean | | | The input grabs initial focus on the page |
663
- | loading | boolean | | | Adds a loading indicator beside the input |
664
- | max | string | | | The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'` |
665
- | min | string | | | The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'` |
666
- | name | string | | | Name associated with the input. Passed to event handler callbacks in object |
667
- | placeholder | string | | | Placeholder text for the input |
668
- | readOnly | boolean | | | Makes the input read-only |
669
- | role | string | | | Sets a role attribute on the input |
670
- | step | string | | | The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'` |
671
- | tabIndex | string | | | |
672
- | type | 'text' │ 'number' │ 'password' │ 'email' │ 'url' │ 'tel' │ 'date' │ 'datetime' │ 'datetime-local' │ 'month' │ 'week' │ 'time' │ 'search' | `'text'` | | The native input `type` attribute |
673
- | valid | custom | | | Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props |
674
- | value | string | | | Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object |
675
- | warning | custom | | | Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props |
676
- | onBlur | function | | | Called with signature `({ name: string, value: string }, event)` |
677
- | onChange | function | | | Called with signature `({ name: string, value: string }, event)` |
678
- | onFocus | function | | | Called with signature `({ name: string, value: string }, event)` |
712
+ |Name|Type|Default|Required|Description|
713
+ |---|---|---|---|---|
714
+ |autoComplete|string|||The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete)|
715
+ |className|string||||
716
+ |dataTest|string|`'dhis2-uicore-input'`|||
717
+ |dense|boolean|||Makes the input smaller|
718
+ |disabled|boolean|||Disables the input|
719
+ |error|custom|||Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props|
720
+ |initialFocus|boolean|||The input grabs initial focus on the page|
721
+ |loading|boolean|||Adds a loading indicator beside the input|
722
+ |max|string|||The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'`|
723
+ |min|string|||The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'`|
724
+ |name|string|||Name associated with the input. Passed to event handler callbacks in object|
725
+ |placeholder|string|||Placeholder text for the input|
726
+ |readOnly|boolean|||Makes the input read-only|
727
+ |role|string|||Sets a role attribute on the input|
728
+ |step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`|
729
+ |tabIndex|string||||
730
+ |type|'text' │ 'number' │ 'password' │ 'email' │ 'url' │ 'tel' │ 'date' │ 'datetime' │ 'datetime-local' │ 'month' │ 'week' │ 'time' │ 'search'|`'text'`||The native input `type` attribute|
731
+ |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props|
732
+ |value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object|
733
+ |warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
734
+ |onBlur|function|||Called with signature `({ name: string, value: string }, event)`|
735
+ |onChange|function|||Called with signature `({ name: string, value: string }, event)`|
736
+ |onFocus|function|||Called with signature `({ name: string, value: string }, event)`|
679
737
 
680
738
  ### InputField
681
739
 
@@ -683,41 +741,43 @@ import { Input } from '@dhis2/ui'
683
741
 
684
742
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
685
743
 
744
+
686
745
  ```js
687
746
  import { InputField } from '@dhis2/ui'
688
747
  ```
689
748
 
749
+
690
750
  #### Props
691
751
 
692
- | Name | Type | Default | Required | Description |
693
- | -------------- | -------- | ------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
694
- | autoComplete | string | | | The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) |
695
- | className | string | | | |
696
- | dataTest | string | `'dhis2-uiwidgets-inputfield'` | | |
697
- | dense | boolean | | | Makes the input smaller |
698
- | disabled | boolean | | | Disables the input |
699
- | error | custom | | | Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props |
700
- | helpText | string | | | Guiding text for how to use this input |
701
- | initialFocus | boolean | | | The input grabs initial focus on the page |
702
- | inputWidth | string | | | Defines the width of the input. Can be any valid CSS measurement |
703
- | label | string | | | Label text for the input |
704
- | loading | boolean | | | Adds a loading indicator beside the input |
705
- | max | string | | | The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'` |
706
- | min | string | | | The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'` |
707
- | name | string | | | Name associated with the input. Passed to event handler callbacks in object |
708
- | placeholder | string | | | Placeholder text for the input |
709
- | readOnly | boolean | | | Makes the input read-only |
710
- | required | boolean | | | Indicates this input is required |
711
- | step | string | | | The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'` |
712
- | tabIndex | string | | | |
713
- | type | custom | | | Type of input |
714
- | valid | custom | | | Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props |
715
- | validationText | string | | | Text below input for validation feedback. Receives styles depending on validation status |
716
- | value | string | | | Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object |
717
- | warning | custom | | | Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props |
718
- | onBlur | function | | | Called with signature `({ name: string, value: string }, event)` |
719
- | onChange | function | | | Called with signature `({ name: string, value: string }, event)` |
720
- | onFocus | function | | | Called with signature `({ name: string, value: string }, event)` |
752
+ |Name|Type|Default|Required|Description|
753
+ |---|---|---|---|---|
754
+ |autoComplete|string|||The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete)|
755
+ |className|string||||
756
+ |dataTest|string|`'dhis2-uiwidgets-inputfield'`|||
757
+ |dense|boolean|||Makes the input smaller|
758
+ |disabled|boolean|||Disables the input|
759
+ |error|custom|||Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props|
760
+ |helpText|string|||Guiding text for how to use this input|
761
+ |initialFocus|boolean|||The input grabs initial focus on the page|
762
+ |inputWidth|string|||Defines the width of the input. Can be any valid CSS measurement|
763
+ |label|string|||Label text for the input|
764
+ |loading|boolean|||Adds a loading indicator beside the input|
765
+ |max|string|||The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'`|
766
+ |min|string|||The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'`|
767
+ |name|string|||Name associated with the input. Passed to event handler callbacks in object|
768
+ |placeholder|string|||Placeholder text for the input|
769
+ |readOnly|boolean|||Makes the input read-only|
770
+ |required|boolean|||Indicates this input is required|
771
+ |step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`|
772
+ |tabIndex|string||||
773
+ |type|custom|||Type of input|
774
+ |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props|
775
+ |validationText|string|||Text below input for validation feedback. Receives styles depending on validation status|
776
+ |value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object|
777
+ |warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
778
+ |onBlur|function|||Called with signature `({ name: string, value: string }, event)`|
779
+ |onChange|function|||Called with signature `({ name: string, value: string }, event)`|
780
+ |onFocus|function|||Called with signature `({ name: string, value: string }, event)`|
721
781
 
722
782
  ### IntersectionDetector
723
783
 
@@ -725,20 +785,22 @@ import { InputField } from '@dhis2/ui'
725
785
 
726
786
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
727
787
 
788
+
728
789
  ```js
729
790
  import { IntersectionDetector } from '@dhis2/ui'
730
791
  ```
731
792
 
793
+
732
794
  #### Props
733
795
 
734
- | Name | Type | Default | Required | Description |
735
- | --------- | ------------------------------------------------- | ------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
736
- | rootRef | {<br/> "current": "instanceOf(HTMLElement)"<br/>} | | \* | React ref on other component to detect intersections with |
737
- | onChange | function | | \* | Called with signature `({ isIntersecting: bool })` |
738
- | children | any | | | |
739
- | className | string | | | |
740
- | dataTest | string | `'dhis2-uicore-intersectiondetector'` | | |
741
- | threshold | number | `0` | | The [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) value: a value from 0.0 to 1.0 that controls the point at which an intersecting component is considered 'intersected' or 'visible' and the onChange callback triggers |
796
+ |Name|Type|Default|Required|Description|
797
+ |---|---|---|---|---|
798
+ |rootRef|{<br/> "current": "instanceOf(HTMLElement)"<br/>}||*|React ref on other component to detect intersections with|
799
+ |onChange|function||*|Called with signature `({ isIntersecting: bool })`|
800
+ |children|any||||
801
+ |className|string||||
802
+ |dataTest|string|`'dhis2-uicore-intersectiondetector'`|||
803
+ |threshold|number|`0`||The [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) value: a value from 0.0 to 1.0 that controls the point at which an intersecting component is considered 'intersected' or 'visible' and the onChange callback triggers|
742
804
 
743
805
  ### Label
744
806
 
@@ -746,20 +808,22 @@ import { IntersectionDetector } from '@dhis2/ui'
746
808
 
747
809
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
748
810
 
811
+
749
812
  ```js
750
813
  import { Label } from '@dhis2/ui'
751
814
  ```
752
815
 
816
+
753
817
  #### Props
754
818
 
755
- | Name | Type | Default | Required | Description |
756
- | --------- | ------- | ---------------------- | -------- | ----------- |
757
- | children | string | | | |
758
- | className | string | | | |
759
- | dataTest | string | `'dhis2-uicore-label'` | | |
760
- | disabled | boolean | | | |
761
- | htmlFor | string | | | |
762
- | required | boolean | | | |
819
+ |Name|Type|Default|Required|Description|
820
+ |---|---|---|---|---|
821
+ |children|string||||
822
+ |className|string||||
823
+ |dataTest|string|`'dhis2-uicore-label'`|||
824
+ |disabled|boolean||||
825
+ |htmlFor|string||||
826
+ |required|boolean||||
763
827
 
764
828
  ### Layer
765
829
 
@@ -767,22 +831,24 @@ import { Label } from '@dhis2/ui'
767
831
 
768
832
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
769
833
 
834
+
770
835
  ```js
771
836
  import { Layer } from '@dhis2/ui'
772
837
  ```
773
838
 
839
+
774
840
  #### Props
775
841
 
776
- | Name | Type | Default | Required | Description |
777
- | ------------- | -------------------- | ---------------------- | -------- | --------------------------------------------- |
778
- | children | node | | | |
779
- | className | string | | | |
780
- | dataTest | string | `'dhis2-uicore-layer'` | | |
781
- | disablePortal | boolean | | | Disable the Portal, useful for nesting layers |
782
- | level | number │ string | `'auto'` | | Z-index level |
783
- | position | 'absolute' │ 'fixed' | `'fixed'` | | |
784
- | translucent | boolean | | | Adds a semi-transparent background |
785
- | onClick | function | | | Click handler |
842
+ |Name|Type|Default|Required|Description|
843
+ |---|---|---|---|---|
844
+ |children|node||||
845
+ |className|string||||
846
+ |dataTest|string|`'dhis2-uicore-layer'`|||
847
+ |disablePortal|boolean|||Disable the Portal, useful for nesting layers|
848
+ |level|number │ string|`'auto'`||Z-index level|
849
+ |position|'absolute' │ 'fixed'|`'fixed'`|||
850
+ |translucent|boolean|||Adds a semi-transparent background|
851
+ |onClick|function|||Click handler|
786
852
 
787
853
  ### Legend
788
854
 
@@ -790,18 +856,20 @@ import { Layer } from '@dhis2/ui'
790
856
 
791
857
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
792
858
 
859
+
793
860
  ```js
794
861
  import { Legend } from '@dhis2/ui'
795
862
  ```
796
863
 
864
+
797
865
  #### Props
798
866
 
799
- | Name | Type | Default | Required | Description |
800
- | --------- | ------- | ----------------------- | -------- | ---------------------------------------------- |
801
- | children | node | | | |
802
- | className | string | | | |
803
- | dataTest | string | `'dhis2-uicore-legend'` | | |
804
- | required | boolean | | | Indicates the associated field set is required |
867
+ |Name|Type|Default|Required|Description|
868
+ |---|---|---|---|---|
869
+ |children|node||||
870
+ |className|string||||
871
+ |dataTest|string|`'dhis2-uicore-legend'`|||
872
+ |required|boolean|||Indicates the associated field set is required|
805
873
 
806
874
  ### CircularLoader
807
875
 
@@ -809,20 +877,22 @@ import { Legend } from '@dhis2/ui'
809
877
 
810
878
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
811
879
 
880
+
812
881
  ```js
813
882
  import { CircularLoader } from '@dhis2/ui'
814
883
  ```
815
884
 
885
+
816
886
  #### Props
817
887
 
818
- | Name | Type | Default | Required | Description |
819
- | ---------- | ------- | ------------------------------- | -------- | ----------- |
820
- | className | string | | | |
821
- | dataTest | string | `'dhis2-uicore-circularloader'` | | |
822
- | extrasmall | custom | | | |
823
- | invert | boolean | | | |
824
- | large | custom | | | |
825
- | small | custom | | | |
888
+ |Name|Type|Default|Required|Description|
889
+ |---|---|---|---|---|
890
+ |className|string||||
891
+ |dataTest|string|`'dhis2-uicore-circularloader'`|||
892
+ |extrasmall|custom||||
893
+ |invert|boolean||||
894
+ |large|custom||||
895
+ |small|custom||||
826
896
 
827
897
  ### LinearLoader
828
898
 
@@ -830,20 +900,22 @@ import { CircularLoader } from '@dhis2/ui'
830
900
 
831
901
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
832
902
 
903
+
833
904
  ```js
834
905
  import { LinearLoader } from '@dhis2/ui'
835
906
  ```
836
907
 
908
+
837
909
  #### Props
838
910
 
839
- | Name | Type | Default | Required | Description |
840
- | --------- | ------- | ----------------------------- | -------- | ----------------------------------------------------- |
841
- | amount | number | | \* | The progression in percent without the '%' sign |
842
- | className | string | | | |
843
- | dataTest | string | `'dhis2-uicore-linearloader'` | | |
844
- | invert | boolean | | | Use inverted color scheme |
845
- | margin | string | `spacers.dp12` | | The margin around the loader, can be a full shorthand |
846
- | width | string | `'300px'` | | The width of the entire indicator |
911
+ |Name|Type|Default|Required|Description|
912
+ |---|---|---|---|---|
913
+ |amount|number||*|The progression in percent without the '%' sign|
914
+ |className|string||||
915
+ |dataTest|string|`'dhis2-uicore-linearloader'`|||
916
+ |invert|boolean|||Use inverted color scheme|
917
+ |margin|string|`spacers.dp12`||The margin around the loader, can be a full shorthand|
918
+ |width|string|`'300px'`||The width of the entire indicator|
847
919
 
848
920
  ### LogoIcon
849
921
 
@@ -851,16 +923,18 @@ import { LinearLoader } from '@dhis2/ui'
851
923
 
852
924
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
853
925
 
926
+
854
927
  ```js
855
928
  import { LogoIcon } from '@dhis2/ui'
856
929
  ```
857
930
 
931
+
858
932
  #### Props
859
933
 
860
- | Name | Type | Default | Required | Description |
861
- | --------- | ------ | ------------------------- | -------- | ----------- |
862
- | className | string | | | |
863
- | dataTest | string | `'dhis2-uicore-logoicon'` | | |
934
+ |Name|Type|Default|Required|Description|
935
+ |---|---|---|---|---|
936
+ |className|string||||
937
+ |dataTest|string|`'dhis2-uicore-logoicon'`|||
864
938
 
865
939
  ### LogoIconWhite
866
940
 
@@ -868,16 +942,18 @@ import { LogoIcon } from '@dhis2/ui'
868
942
 
869
943
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
870
944
 
945
+
871
946
  ```js
872
947
  import { LogoIconWhite } from '@dhis2/ui'
873
948
  ```
874
949
 
950
+
875
951
  #### Props
876
952
 
877
- | Name | Type | Default | Required | Description |
878
- | --------- | ------ | ------------------------------ | -------- | ----------- |
879
- | className | string | | | |
880
- | dataTest | string | `'dhis2-uicore-logoiconwhite'` | | |
953
+ |Name|Type|Default|Required|Description|
954
+ |---|---|---|---|---|
955
+ |className|string||||
956
+ |dataTest|string|`'dhis2-uicore-logoiconwhite'`|||
881
957
 
882
958
  ### Logo
883
959
 
@@ -885,16 +961,18 @@ import { LogoIconWhite } from '@dhis2/ui'
885
961
 
886
962
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
887
963
 
964
+
888
965
  ```js
889
966
  import { Logo } from '@dhis2/ui'
890
967
  ```
891
968
 
969
+
892
970
  #### Props
893
971
 
894
- | Name | Type | Default | Required | Description |
895
- | --------- | ------ | --------------------- | -------- | ----------- |
896
- | className | string | | | |
897
- | dataTest | string | `'dhis2-uicore-logo'` | | |
972
+ |Name|Type|Default|Required|Description|
973
+ |---|---|---|---|---|
974
+ |className|string||||
975
+ |dataTest|string|`'dhis2-uicore-logo'`|||
898
976
 
899
977
  ### LogoWhite
900
978
 
@@ -902,16 +980,18 @@ import { Logo } from '@dhis2/ui'
902
980
 
903
981
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
904
982
 
983
+
905
984
  ```js
906
985
  import { LogoWhite } from '@dhis2/ui'
907
986
  ```
908
987
 
988
+
909
989
  #### Props
910
990
 
911
- | Name | Type | Default | Required | Description |
912
- | --------- | ------ | -------------------------- | -------- | ----------- |
913
- | className | string | | | |
914
- | dataTest | string | `'dhis2-uicore-logowhite'` | | |
991
+ |Name|Type|Default|Required|Description|
992
+ |---|---|---|---|---|
993
+ |className|string||||
994
+ |dataTest|string|`'dhis2-uicore-logowhite'`|||
915
995
 
916
996
  ### FlyoutMenu
917
997
 
@@ -919,20 +999,22 @@ import { LogoWhite } from '@dhis2/ui'
919
999
 
920
1000
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
921
1001
 
1002
+
922
1003
  ```js
923
1004
  import { FlyoutMenu } from '@dhis2/ui'
924
1005
  ```
925
1006
 
1007
+
926
1008
  #### Props
927
1009
 
928
- | Name | Type | Default | Required | Description |
929
- | --------- | ------- | --------------------- | -------- | ---------------------------------------------------- |
930
- | children | node | | | Typically, but not limited to, `MenuItem` components |
931
- | className | string | | | |
932
- | dataTest | string | `'dhis2-uicore-menu'` | | |
933
- | dense | boolean | | | Menu uses smaller dimensions |
934
- | maxHeight | string | `'auto'` | | |
935
- | maxWidth | string | `'380px'` | | |
1010
+ |Name|Type|Default|Required|Description|
1011
+ |---|---|---|---|---|
1012
+ |children|node|||Typically, but not limited to, `MenuItem` components|
1013
+ |className|string||||
1014
+ |dataTest|string|`'dhis2-uicore-menu'`|||
1015
+ |dense|boolean|||Menu uses smaller dimensions|
1016
+ |maxHeight|string|`'auto'`|||
1017
+ |maxWidth|string|`'380px'`|||
936
1018
 
937
1019
  ### Menu
938
1020
 
@@ -940,18 +1022,20 @@ import { FlyoutMenu } from '@dhis2/ui'
940
1022
 
941
1023
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
942
1024
 
1025
+
943
1026
  ```js
944
1027
  import { Menu } from '@dhis2/ui'
945
1028
  ```
946
1029
 
1030
+
947
1031
  #### Props
948
1032
 
949
- | Name | Type | Default | Required | Description |
950
- | --------- | ------- | ------------------------- | -------- | ------------------------------------------------------------------------- |
951
- | children | node | | | Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader` |
952
- | className | string | | | |
953
- | dataTest | string | `'dhis2-uicore-menulist'` | | |
954
- | dense | boolean | | | Applies `dense` property to all child components unless already specified |
1033
+ |Name|Type|Default|Required|Description|
1034
+ |---|---|---|---|---|
1035
+ |children|node|||Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader`|
1036
+ |className|string||||
1037
+ |dataTest|string|`'dhis2-uicore-menulist'`|||
1038
+ |dense|boolean|||Applies `dense` property to all child components unless already specified|
955
1039
 
956
1040
  ### MenuDivider
957
1041
 
@@ -959,17 +1043,19 @@ import { Menu } from '@dhis2/ui'
959
1043
 
960
1044
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
961
1045
 
1046
+
962
1047
  ```js
963
1048
  import { MenuDivider } from '@dhis2/ui'
964
1049
  ```
965
1050
 
1051
+
966
1052
  #### Props
967
1053
 
968
- | Name | Type | Default | Required | Description |
969
- | --------- | ------- | ---------------------------- | -------- | ----------- |
970
- | className | string | | | |
971
- | dataTest | string | `'dhis2-uicore-menudivider'` | | |
972
- | dense | boolean | | | |
1054
+ |Name|Type|Default|Required|Description|
1055
+ |---|---|---|---|---|
1056
+ |className|string||||
1057
+ |dataTest|string|`'dhis2-uicore-menudivider'`|||
1058
+ |dense|boolean||||
973
1059
 
974
1060
  ### MenuItem
975
1061
 
@@ -977,30 +1063,32 @@ import { MenuDivider } from '@dhis2/ui'
977
1063
 
978
1064
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
979
1065
 
1066
+
980
1067
  ```js
981
1068
  import { MenuItem } from '@dhis2/ui'
982
1069
  ```
983
1070
 
1071
+
984
1072
  #### Props
985
1073
 
986
- | Name | Type | Default | Required | Description |
987
- | ------------- | -------- | ------------------------- | -------- | ----------------------------------------------------------------------------------------------------------- |
988
- | active | boolean | | | |
989
- | chevron | boolean | | | |
990
- | children | node | | | Nested menu items can become submenus.<br/>See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo |
991
- | className | string | | | |
992
- | dataTest | string | `'dhis2-uicore-menuitem'` | | |
993
- | dense | boolean | | | |
994
- | destructive | boolean | | | |
995
- | disabled | boolean | | | |
996
- | href | string | | | For using menu item as a link |
997
- | icon | node | | | An icon for the left side of the menu item |
998
- | label | node | | | Text in the menu item |
999
- | showSubMenu | boolean | | | When true, nested menu items are shown in a Popper |
1000
- | target | string | | | For using menu item as a link |
1001
- | toggleSubMenu | function | | | On click, this function is called (without args) |
1002
- | value | string | | | Value associated with item. Passed as an argument to onClick handler. |
1003
- | onClick | function | | | Click handler called with signature `({ value: string }, event)` |
1074
+ |Name|Type|Default|Required|Description|
1075
+ |---|---|---|---|---|
1076
+ |active|boolean||||
1077
+ |chevron|boolean||||
1078
+ |children|node|||Nested menu items can become submenus.<br/>See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo|
1079
+ |className|string||||
1080
+ |dataTest|string|`'dhis2-uicore-menuitem'`|||
1081
+ |dense|boolean||||
1082
+ |destructive|boolean||||
1083
+ |disabled|boolean||||
1084
+ |href|string|||For using menu item as a link|
1085
+ |icon|node|||An icon for the left side of the menu item|
1086
+ |label|node|||Text in the menu item|
1087
+ |showSubMenu|boolean|||When true, nested menu items are shown in a Popper|
1088
+ |target|string|||For using menu item as a link|
1089
+ |toggleSubMenu|function|||On click, this function is called (without args)|
1090
+ |value|string|||Value associated with item. Passed as an argument to onClick handler.|
1091
+ |onClick|function|||Click handler called with signature `({ value: string }, event)`|
1004
1092
 
1005
1093
  ### MenuSectionHeader
1006
1094
 
@@ -1008,19 +1096,21 @@ import { MenuItem } from '@dhis2/ui'
1008
1096
 
1009
1097
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1010
1098
 
1099
+
1011
1100
  ```js
1012
1101
  import { MenuSectionHeader } from '@dhis2/ui'
1013
1102
  ```
1014
1103
 
1104
+
1015
1105
  #### Props
1016
1106
 
1017
- | Name | Type | Default | Required | Description |
1018
- | ----------- | ------- | ---------------------------------- | -------- | ----------- |
1019
- | className | string | | | |
1020
- | dataTest | string | `'dhis2-uicore-menusectionheader'` | | |
1021
- | dense | boolean | | | |
1022
- | hideDivider | boolean | | | |
1023
- | label | node | | | |
1107
+ |Name|Type|Default|Required|Description|
1108
+ |---|---|---|---|---|
1109
+ |className|string||||
1110
+ |dataTest|string|`'dhis2-uicore-menusectionheader'`|||
1111
+ |dense|boolean||||
1112
+ |hideDivider|boolean||||
1113
+ |label|node||||
1024
1114
 
1025
1115
  ### Modal
1026
1116
 
@@ -1028,23 +1118,25 @@ import { MenuSectionHeader } from '@dhis2/ui'
1028
1118
 
1029
1119
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1030
1120
 
1121
+
1031
1122
  ```js
1032
1123
  import { Modal } from '@dhis2/ui'
1033
1124
  ```
1034
1125
 
1126
+
1035
1127
  #### Props
1036
1128
 
1037
- | Name | Type | Default | Required | Description |
1038
- | --------- | -------- | ---------------------- | -------- | ----------------------------------- |
1039
- | children | node | | | |
1040
- | className | string | | | |
1041
- | dataTest | string | `'dhis2-uicore-modal'` | | |
1042
- | fluid | boolean | | | |
1043
- | hide | boolean | | | |
1044
- | large | custom | | | |
1045
- | position | custom | `'top'` | | |
1046
- | small | custom | | | |
1047
- | onClose | function | | | Callback used when the Modal closes |
1129
+ |Name|Type|Default|Required|Description|
1130
+ |---|---|---|---|---|
1131
+ |children|node||||
1132
+ |className|string||||
1133
+ |dataTest|string|`'dhis2-uicore-modal'`|||
1134
+ |fluid|boolean||||
1135
+ |hide|boolean||||
1136
+ |large|custom||||
1137
+ |position|custom|`'top'`|||
1138
+ |small|custom||||
1139
+ |onClose|function|||Callback used when the Modal closes|
1048
1140
 
1049
1141
  ### ModalActions
1050
1142
 
@@ -1052,16 +1144,18 @@ import { Modal } from '@dhis2/ui'
1052
1144
 
1053
1145
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1054
1146
 
1147
+
1055
1148
  ```js
1056
1149
  import { ModalActions } from '@dhis2/ui'
1057
1150
  ```
1058
1151
 
1152
+
1059
1153
  #### Props
1060
1154
 
1061
- | Name | Type | Default | Required | Description |
1062
- | -------- | ------ | ----------------------------- | -------- | ----------- |
1063
- | children | node | | | |
1064
- | dataTest | string | `'dhis2-uicore-modalactions'` | | |
1155
+ |Name|Type|Default|Required|Description|
1156
+ |---|---|---|---|---|
1157
+ |children|node||||
1158
+ |dataTest|string|`'dhis2-uicore-modalactions'`|||
1065
1159
 
1066
1160
  ### ModalContent
1067
1161
 
@@ -1069,17 +1163,19 @@ import { ModalActions } from '@dhis2/ui'
1069
1163
 
1070
1164
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1071
1165
 
1166
+
1072
1167
  ```js
1073
1168
  import { ModalContent } from '@dhis2/ui'
1074
1169
  ```
1075
1170
 
1171
+
1076
1172
  #### Props
1077
1173
 
1078
- | Name | Type | Default | Required | Description |
1079
- | --------- | ------ | ----------------------------- | -------- | ----------- |
1080
- | children | node | | | |
1081
- | className | string | | | |
1082
- | dataTest | string | `'dhis2-uicore-modalcontent'` | | |
1174
+ |Name|Type|Default|Required|Description|
1175
+ |---|---|---|---|---|
1176
+ |children|node||||
1177
+ |className|string||||
1178
+ |dataTest|string|`'dhis2-uicore-modalcontent'`|||
1083
1179
 
1084
1180
  ### ModalTitle
1085
1181
 
@@ -1087,16 +1183,18 @@ import { ModalContent } from '@dhis2/ui'
1087
1183
 
1088
1184
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1089
1185
 
1186
+
1090
1187
  ```js
1091
1188
  import { ModalTitle } from '@dhis2/ui'
1092
1189
  ```
1093
1190
 
1191
+
1094
1192
  #### Props
1095
1193
 
1096
- | Name | Type | Default | Required | Description |
1097
- | -------- | ------ | --------------------------- | -------- | ----------- |
1098
- | children | string | | | |
1099
- | dataTest | string | `'dhis2-uicore-modaltitle'` | | |
1194
+ |Name|Type|Default|Required|Description|
1195
+ |---|---|---|---|---|
1196
+ |children|string||||
1197
+ |dataTest|string|`'dhis2-uicore-modaltitle'`|||
1100
1198
 
1101
1199
  ### Node
1102
1200
 
@@ -1104,22 +1202,24 @@ import { ModalTitle } from '@dhis2/ui'
1104
1202
 
1105
1203
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1106
1204
 
1205
+
1107
1206
  ```js
1108
1207
  import { Node } from '@dhis2/ui'
1109
1208
  ```
1110
1209
 
1210
+
1111
1211
  #### Props
1112
1212
 
1113
- | Name | Type | Default | Required | Description |
1114
- | --------- | -------- | --------------------- | -------- | ----------------------------------------------------------------------------------------- |
1115
- | children | node | | | Content below this level of the hierarchy; children are revealed when this leaf is 'open' |
1116
- | className | string | | | |
1117
- | component | element | | | Content/label for this leaf, for example a checkbox |
1118
- | dataTest | string | `'dhis2-uicore-node'` | | |
1119
- | icon | node | | | A custom icon to use instead of a toggle arrow |
1120
- | open | boolean | | | |
1121
- | onClose | function | | | |
1122
- | onOpen | function | | | |
1213
+ |Name|Type|Default|Required|Description|
1214
+ |---|---|---|---|---|
1215
+ |children|node|||Content below this level of the hierarchy; children are revealed when this leaf is 'open'|
1216
+ |className|string||||
1217
+ |component|element|||Content/label for this leaf, for example a checkbox|
1218
+ |dataTest|string|`'dhis2-uicore-node'`|||
1219
+ |icon|node|||A custom icon to use instead of a toggle arrow|
1220
+ |open|boolean||||
1221
+ |onClose|function||||
1222
+ |onOpen|function||||
1123
1223
 
1124
1224
  ### NoticeBox
1125
1225
 
@@ -1127,20 +1227,22 @@ import { Node } from '@dhis2/ui'
1127
1227
 
1128
1228
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1129
1229
 
1230
+
1130
1231
  ```js
1131
1232
  import { NoticeBox } from '@dhis2/ui'
1132
1233
  ```
1133
1234
 
1235
+
1134
1236
  #### Props
1135
1237
 
1136
- | Name | Type | Default | Required | Description |
1137
- | --------- | ------ | -------------------------- | -------- | -------------------------------------------------------------------------- |
1138
- | children | node | | | |
1139
- | className | string | | | |
1140
- | dataTest | string | `'dhis2-uicore-noticebox'` | | |
1141
- | error | custom | | | Applies 'error' message styles. Mutually exclusive with the `warning` prop |
1142
- | title | string | | | |
1143
- | warning | custom | | | Applies 'warning' message styles. Mutually exclusive with the `error` prop |
1238
+ |Name|Type|Default|Required|Description|
1239
+ |---|---|---|---|---|
1240
+ |children|node||||
1241
+ |className|string||||
1242
+ |dataTest|string|`'dhis2-uicore-noticebox'`|||
1243
+ |error|custom|||Applies 'error' message styles. Mutually exclusive with the `warning` prop|
1244
+ |title|string||||
1245
+ |warning|custom|||Applies 'warning' message styles. Mutually exclusive with the `error` prop|
1144
1246
 
1145
1247
  ### OrganisationUnitTree
1146
1248
 
@@ -1148,34 +1250,36 @@ import { NoticeBox } from '@dhis2/ui'
1148
1250
 
1149
1251
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1150
1252
 
1253
+
1151
1254
  ```js
1152
1255
  import { OrganisationUnitTree } from '@dhis2/ui'
1153
1256
  ```
1154
1257
 
1258
+
1155
1259
  #### Props
1156
1260
 
1157
- | Name | Type | Default | Required | Description |
1158
- | --------------------------- | ------------------------ | ------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1159
- | roots | string │ arrayOf(string) | | \* | Root org unit ID(s) |
1160
- | onChange | function | | \* | Will be called with the following object:<br/>`{ id: string, displayName: string, path: string, checked: boolean, selected: string[] }` |
1161
- | autoExpandLoadingError | boolean | | | When set, the error when loading children fails will be shown automatically |
1162
- | dataTest | string | `'dhis2-uiwidgets-orgunittree'` | | |
1163
- | disableSelection | boolean | | | When set to true, no unit can be selected |
1164
- | expanded | custom | | | |
1165
- | filter | arrayOf(custom) | `[]` | | All organisation units with a path that includes the provided paths will be shown.<br/>All others will not be rendered. When not provided, all org units will be shown. |
1166
- | forceReload | boolean | | | When true, everything will be reloaded. In order to load it again after reloading, `forceReload` has to be set to `false` and then to `true` again |
1167
- | handleCollapse | custom | | | |
1168
- | handleExpand | custom | | | |
1169
- | highlighted | arrayOf(custom) | `[]` | | All units provided to "highlighted" as path will be visually<br/>highlighted.<br/>Note:<br/>The d2-ui component used two props for this:<br/>_ searchResults<br/>_ highlightSearchResults |
1170
- | initiallyExpanded | arrayOf(custom) | `[]` | | An array of OU paths that will be expanded automatically<br/>as soon as they are encountered.<br/>The path of an OU is the UIDs of the OU<br/>and all its parent OUs separated by slashes (/)<br/>Note: This replaces "openFirstLevel" as that's redundant |
1171
- | isUserDataViewFallback | boolean | | | When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units |
1172
- | renderNodeLabel | function | `defaultRenderNodeLabel` | | Renders the actual node component for each leaf, can be used to<br/>customize the node. The default function just returns the node's<br/>displayName<br/><br/>Shape of the object passed to the callback:<br/>`` <br/>{<br/> label: string,<br/> node: {<br/> displayName: string,<br/> id: string,<br/> // Only provided once `loading` is false<br/> path?: string,<br/> // Only provided once `loading` is false<br/> children?: Array.<{<br/> id: string,<br/> path: string,<br/> displayName: string<br/> }><br/> },<br/> loading: boolean,<br/> error: string,<br/> open: boolean,<br/> selected: string[],<br/> singleSelection: boolean,<br/> disableSelection: boolean,<br/>}<br/> `` |
1173
- | selected | arrayOf(custom) | `[]` | | An array of paths of selected OUs. The path of an OU is the UIDs of the OU and all its parent OUs separated by slashes (`/`) |
1174
- | singleSelection | boolean | | | When set, no checkboxes will be displayed and only the first selected path in `selected` will be highlighted |
1175
- | suppressAlphabeticalSorting | boolean | | | Turns off alphabetical sorting of units |
1176
- | onChildrenLoaded | function | | | Called with the children's data that was loaded |
1177
- | onCollapse | function | | | Called with `{ path: string }` with the path of the parent of the level closed |
1178
- | onExpand | function | | | Called with `{ path: string }` with the path of the parent of the level opened |
1261
+ |Name|Type|Default|Required|Description|
1262
+ |---|---|---|---|---|
1263
+ |roots|string │ arrayOf(string)||*|Root org unit ID(s)|
1264
+ |onChange|function||*|Will be called with the following object:<br/>`{ id: string, displayName: string, path: string, checked: boolean, selected: string[] }`|
1265
+ |autoExpandLoadingError|boolean|||When set, the error when loading children fails will be shown automatically|
1266
+ |dataTest|string|`'dhis2-uiwidgets-orgunittree'`|||
1267
+ |disableSelection|boolean|||When set to true, no unit can be selected|
1268
+ |expanded|custom||||
1269
+ |filter|arrayOf(custom)|`[]`||All organisation units with a path that includes the provided paths will be shown.<br/>All others will not be rendered. When not provided, all org units will be shown.|
1270
+ |forceReload|boolean|||When true, everything will be reloaded. In order to load it again after reloading, `forceReload` has to be set to `false` and then to `true` again|
1271
+ |handleCollapse|custom||||
1272
+ |handleExpand|custom||||
1273
+ |highlighted|arrayOf(custom)|`[]`||All units provided to "highlighted" as path will be visually<br/>highlighted.<br/>Note:<br/>The d2-ui component used two props for this:<br/>* searchResults<br/>* highlightSearchResults|
1274
+ |initiallyExpanded|arrayOf(custom)|`[]`||An array of OU paths that will be expanded automatically<br/>as soon as they are encountered.<br/>The path of an OU is the UIDs of the OU<br/>and all its parent OUs separated by slashes (/)<br/>Note: This replaces "openFirstLevel" as that's redundant|
1275
+ |isUserDataViewFallback|boolean|||When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units|
1276
+ |renderNodeLabel|function|`defaultRenderNodeLabel`||Renders the actual node component for each leaf, can be used to<br/>customize the node. The default function just returns the node's<br/>displayName<br/><br/>Shape of the object passed to the callback:<br/>```<br/>{<br/> label: string,<br/> node: {<br/> displayName: string,<br/> id: string,<br/> // Only provided once `loading` is false<br/> path?: string,<br/> // Only provided once `loading` is false<br/> children?: Array.<{<br/> id: string,<br/> path: string,<br/> displayName: string<br/> }><br/> },<br/> loading: boolean,<br/> error: string,<br/> open: boolean,<br/> selected: string[],<br/> singleSelection: boolean,<br/> disableSelection: boolean,<br/>}<br/>```|
1277
+ |selected|arrayOf(custom)|`[]`||An array of paths of selected OUs. The path of an OU is the UIDs of the OU and all its parent OUs separated by slashes (`/`)|
1278
+ |singleSelection|boolean|||When set, no checkboxes will be displayed and only the first selected path in `selected` will be highlighted|
1279
+ |suppressAlphabeticalSorting|boolean|||Turns off alphabetical sorting of units|
1280
+ |onChildrenLoaded|function|||Called with the children's data that was loaded|
1281
+ |onCollapse|function|||Called with `{ path: string }` with the path of the parent of the level closed|
1282
+ |onExpand|function|||Called with `{ path: string }` with the path of the parent of the level opened|
1179
1283
 
1180
1284
  ### Label
1181
1285
 
@@ -1183,30 +1287,32 @@ import { OrganisationUnitTree } from '@dhis2/ui'
1183
1287
 
1184
1288
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1185
1289
 
1290
+
1186
1291
  ```js
1187
1292
  import { Label } from '@dhis2/ui'
1188
1293
  ```
1189
1294
 
1295
+
1190
1296
  #### Props
1191
1297
 
1192
- | Name | Type | Default | Required | Description |
1193
- | ---------------------- | ----------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
1194
- | children | any | | \* | |
1195
- | dataTest | string | | \* | |
1196
- | fullPath | string | | \* | |
1197
- | hasChildren | boolean | | \* | |
1198
- | loading | boolean | | \* | |
1199
- | node | {<br/> "displayName": "string",<br/> "id": "string",<br/> "children": "number",<br/> "path": "string"<br/>} | | \* | |
1200
- | open | boolean | | \* | |
1201
- | rootId | string | | \* | |
1202
- | onChange | function | | \* | |
1203
- | onToggleOpen | function | | \* | |
1204
- | checked | boolean | | | |
1205
- | disableSelection | boolean | | | |
1206
- | hasSelectedDescendants | boolean | | | |
1207
- | highlighted | boolean | | | |
1208
- | selected | arrayOf(custom) | | | |
1209
- | singleSelection | boolean | | | |
1298
+ |Name|Type|Default|Required|Description|
1299
+ |---|---|---|---|---|
1300
+ |children|any||*||
1301
+ |dataTest|string||*||
1302
+ |fullPath|string||*||
1303
+ |hasChildren|boolean||*||
1304
+ |loading|boolean||*||
1305
+ |node|{<br/> "displayName": "string",<br/> "id": "string",<br/> "children": "number",<br/> "path": "string"<br/>}||*||
1306
+ |open|boolean||*||
1307
+ |rootId|string||*||
1308
+ |onChange|function||*||
1309
+ |onToggleOpen|function||*||
1310
+ |checked|boolean||||
1311
+ |disableSelection|boolean||||
1312
+ |hasSelectedDescendants|boolean||||
1313
+ |highlighted|boolean||||
1314
+ |selected|arrayOf(custom)||||
1315
+ |singleSelection|boolean||||
1210
1316
 
1211
1317
  ### Pagination
1212
1318
 
@@ -1214,34 +1320,36 @@ import { Label } from '@dhis2/ui'
1214
1320
 
1215
1321
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1216
1322
 
1323
+
1217
1324
  ```js
1218
1325
  import { Pagination } from '@dhis2/ui'
1219
1326
  ```
1220
1327
 
1328
+
1221
1329
  #### Props
1222
1330
 
1223
- | Name | Type | Default | Required | Description |
1224
- | ------------------ | ----------------- | -------------------------------------------------- | -------- | ----------- |
1225
- | page | number | | \* | |
1226
- | pageSize | number | | \* | |
1227
- | className | string | | | |
1228
- | dataTest | string | `'dhis2-uiwidgets-pagination'` | | |
1229
- | disabled | boolean | | | |
1230
- | hidePageSelect | boolean | | | |
1231
- | hidePageSizeSelect | boolean | | | |
1232
- | hidePageSummary | boolean | | | |
1233
- | isLastPage | boolean | | | |
1234
- | nextPageText | string │ function | `() => i18n.t('Next')` | | |
1235
- | pageCount | number | | | |
1236
- | pageLength | custom | | | |
1237
- | pageSelectText | string │ function | `() => i18n.t('Page')` | | |
1238
- | pageSizeSelectText | string │ function | `() => i18n.t('Items per page')` | | |
1239
- | pageSizes | arrayOf(string) | `['5', '10', '20', '30', '40', '50', '75', '100']` | | |
1240
- | pageSummaryText | string │ function | `getDefaultPageSummaryText` | | |
1241
- | previousPageText | string │ function | `() => i18n.t('Previous')` | | |
1242
- | total | number | | | |
1243
- | onPageChange | function | | | |
1244
- | onPageSizeChange | function | | | |
1331
+ |Name|Type|Default|Required|Description|
1332
+ |---|---|---|---|---|
1333
+ |page|number||*||
1334
+ |pageSize|number||*||
1335
+ |className|string||||
1336
+ |dataTest|string|`'dhis2-uiwidgets-pagination'`|||
1337
+ |disabled|boolean||||
1338
+ |hidePageSelect|boolean||||
1339
+ |hidePageSizeSelect|boolean||||
1340
+ |hidePageSummary|boolean||||
1341
+ |isLastPage|boolean||||
1342
+ |nextPageText|string │ function|`() => i18n.t('Next')`|||
1343
+ |pageCount|number||||
1344
+ |pageLength|custom||||
1345
+ |pageSelectText|string │ function|`() => i18n.t('Page')`|||
1346
+ |pageSizeSelectText|string │ function|`() => i18n.t('Items per page')`|||
1347
+ |pageSizes|arrayOf(string)|`['5', '10', '20', '30', '40', '50', '75', '100']`|||
1348
+ |pageSummaryText|string │ function|`getDefaultPageSummaryText`|||
1349
+ |previousPageText|string │ function|`() => i18n.t('Previous')`|||
1350
+ |total|number||||
1351
+ |onPageChange|function||||
1352
+ |onPageSizeChange|function||||
1245
1353
 
1246
1354
  ### Popover
1247
1355
 
@@ -1249,25 +1357,27 @@ import { Pagination } from '@dhis2/ui'
1249
1357
 
1250
1358
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1251
1359
 
1360
+
1252
1361
  ```js
1253
1362
  import { Popover } from '@dhis2/ui'
1254
1363
  ```
1255
1364
 
1365
+
1256
1366
  #### Props
1257
1367
 
1258
- | Name | Type | Default | Required | Description |
1259
- | ---------------------- | -------- | ------------------------ | -------- | --------------------------------------------------------------------------------------------- |
1260
- | children | node | | \* | |
1261
- | arrow | boolean | `true` | | Show or hide the arrow |
1262
- | className | string | | | |
1263
- | dataTest | string | `'dhis2-uicore-popover'` | | |
1264
- | elevation | string | `elevations.e200` | | Box-shadow to create appearance of elevation. Use `elevations` constants from the UI library. |
1265
- | maxWidth | number | `360` | | |
1266
- | observePopperResize | boolean | | | |
1267
- | observeReferenceResize | boolean | | | |
1268
- | placement | custom | `'top'` | | |
1269
- | reference | custom | | | A React ref that refers to the element the Popover should position against |
1270
- | onClickOutside | function | | | |
1368
+ |Name|Type|Default|Required|Description|
1369
+ |---|---|---|---|---|
1370
+ |children|node||*||
1371
+ |arrow|boolean|`true`||Show or hide the arrow|
1372
+ |className|string||||
1373
+ |dataTest|string|`'dhis2-uicore-popover'`|||
1374
+ |elevation|string|`elevations.e200`||Box-shadow to create appearance of elevation. Use `elevations` constants from the UI library.|
1375
+ |maxWidth|number|`360`|||
1376
+ |observePopperResize|boolean||||
1377
+ |observeReferenceResize|boolean||||
1378
+ |placement|custom|`'top'`|||
1379
+ |reference|custom|||A React ref that refers to the element the Popover should position against|
1380
+ |onClickOutside|function||||
1271
1381
 
1272
1382
  ### Popper
1273
1383
 
@@ -1275,24 +1385,26 @@ import { Popover } from '@dhis2/ui'
1275
1385
 
1276
1386
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1277
1387
 
1388
+
1278
1389
  ```js
1279
1390
  import { Popper } from '@dhis2/ui'
1280
1391
  ```
1281
1392
 
1393
+
1282
1394
  #### Props
1283
1395
 
1284
- | Name | Type | Default | Required | Description |
1285
- | ---------------------- | ---------------------------------------------------------------- | ----------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
1286
- | children | node | | \* | Content inside the Popper |
1287
- | className | string | | | |
1288
- | dataTest | string | `'dhis2-uicore-popper'` | | |
1289
- | modifiers | arrayOf({<br/> "name": "string",<br/> "options": "object"<br/>}) | `[]` | | A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) |
1290
- | observePopperResize | boolean | | | Makes the Popper update position when the **Popper content** changes size |
1291
- | observeReferenceResize | boolean | | | Makes the Popper update position when the **reference element** changes size |
1292
- | placement | custom | `'auto'` | | A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) |
1293
- | reference | custom | | | A React ref, DOM node, or [virtual element](https://popper.js.org/docs/v2/virtual-elements/) for the popper to position itself against |
1294
- | strategy | 'absolute' │ 'fixed' | | | A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) |
1295
- | onFirstUpdate | function | | | A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) |
1396
+ |Name|Type|Default|Required|Description|
1397
+ |---|---|---|---|---|
1398
+ |children|node||*|Content inside the Popper|
1399
+ |className|string||||
1400
+ |dataTest|string|`'dhis2-uicore-popper'`|||
1401
+ |modifiers|arrayOf({<br/> "name": "string",<br/> "options": "object"<br/>})|`[]`||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
1402
+ |observePopperResize|boolean|||Makes the Popper update position when the **Popper content** changes size|
1403
+ |observeReferenceResize|boolean|||Makes the Popper update position when the **reference element** changes size|
1404
+ |placement|custom|`'auto'`||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
1405
+ |reference|custom|||A React ref, DOM node, or [virtual element](https://popper.js.org/docs/v2/virtual-elements/) for the popper to position itself against|
1406
+ |strategy|'absolute' │ 'fixed'|||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
1407
+ |onFirstUpdate|function|||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
1296
1408
 
1297
1409
  ### Radio
1298
1410
 
@@ -1300,30 +1412,32 @@ import { Popper } from '@dhis2/ui'
1300
1412
 
1301
1413
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1302
1414
 
1415
+
1303
1416
  ```js
1304
1417
  import { Radio } from '@dhis2/ui'
1305
1418
  ```
1306
1419
 
1420
+
1307
1421
  #### Props
1308
1422
 
1309
- | Name | Type | Default | Required | Description |
1310
- | ------------ | -------- | ---------------------- | -------- | -------------------------------------------------------------------------------------- |
1311
- | checked | boolean | | | |
1312
- | className | string | | | |
1313
- | dataTest | string | `'dhis2-uicore-radio'` | | |
1314
- | dense | boolean | | | |
1315
- | disabled | boolean | | | |
1316
- | error | custom | | | Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props |
1317
- | initialFocus | boolean | | | |
1318
- | label | node | | | |
1319
- | name | string | | | Name associated with this element. Passed in object to event handler functions |
1320
- | tabIndex | string | | | |
1321
- | valid | custom | | | Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props |
1322
- | value | string | | | Value associated with this element. Passed in object to event handler functions |
1323
- | warning | custom | | | Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props |
1324
- | onBlur | function | | | Called with the signature `({ name: string, value: string, checked: bool }, event)` |
1325
- | onChange | function | | | Called with the signature `({ name: string, value: string, checked: bool }, event)` |
1326
- | onFocus | function | | | Called with the signature `({ name: string, value: string, checked: bool }, event)` |
1423
+ |Name|Type|Default|Required|Description|
1424
+ |---|---|---|---|---|
1425
+ |checked|boolean||||
1426
+ |className|string||||
1427
+ |dataTest|string|`'dhis2-uicore-radio'`|||
1428
+ |dense|boolean||||
1429
+ |disabled|boolean||||
1430
+ |error|custom|||Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props|
1431
+ |initialFocus|boolean||||
1432
+ |label|node||||
1433
+ |name|string|||Name associated with this element. Passed in object to event handler functions|
1434
+ |tabIndex|string||||
1435
+ |valid|custom|||Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props|
1436
+ |value|string|||Value associated with this element. Passed in object to event handler functions|
1437
+ |warning|custom|||Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props|
1438
+ |onBlur|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
1439
+ |onChange|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
1440
+ |onFocus|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
1327
1441
 
1328
1442
  ### Required
1329
1443
 
@@ -1331,15 +1445,17 @@ import { Radio } from '@dhis2/ui'
1331
1445
 
1332
1446
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1333
1447
 
1448
+
1334
1449
  ```js
1335
1450
  import { Required } from '@dhis2/ui'
1336
1451
  ```
1337
1452
 
1453
+
1338
1454
  #### Props
1339
1455
 
1340
- | Name | Type | Default | Required | Description |
1341
- | -------- | ------ | ------- | -------- | ----------- |
1342
- | dataTest | string | | \* | |
1456
+ |Name|Type|Default|Required|Description|
1457
+ |---|---|---|---|---|
1458
+ |dataTest|string||*||
1343
1459
 
1344
1460
  ### SegmentedControl
1345
1461
 
@@ -1347,17 +1463,19 @@ import { Required } from '@dhis2/ui'
1347
1463
 
1348
1464
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1349
1465
 
1466
+
1350
1467
  ```js
1351
1468
  import { SegmentedControl } from '@dhis2/ui'
1352
1469
  ```
1353
1470
 
1471
+
1354
1472
  #### Props
1355
1473
 
1356
- | Name | Type | Default | Required | Description |
1357
- | -------- | ------------------------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------- |
1358
- | options | arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>}) | | \* | Options to populate the segmented control |
1359
- | selected | string | | \* | An option to select; should match the `value` property of the option to be selected |
1360
- | onChange | function | | \* | Called with the signature `({ value: string }, event)` |
1474
+ |Name|Type|Default|Required|Description|
1475
+ |---|---|---|---|---|
1476
+ |options|arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>})||*|Options to populate the segmented control|
1477
+ |selected|string||*|An option to select; should match the `value` property of the option to be selected|
1478
+ |onChange|function||*|Called with the signature `({ value: string }, event)`|
1361
1479
 
1362
1480
  ### Input
1363
1481
 
@@ -1365,25 +1483,27 @@ import { SegmentedControl } from '@dhis2/ui'
1365
1483
 
1366
1484
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1367
1485
 
1486
+
1368
1487
  ```js
1369
1488
  import { Input } from '@dhis2/ui'
1370
1489
  ```
1371
1490
 
1491
+
1372
1492
  #### Props
1373
1493
 
1374
- | Name | Type | Default | Required | Description |
1375
- | -------------- | --------------- | --------- | -------- | ----------- |
1376
- | dataTest | string | | \* | |
1377
- | className | string | | | |
1378
- | clearText | custom | | | |
1379
- | clearable | boolean | | | |
1380
- | disabled | boolean | | | |
1381
- | inputMaxHeight | string | `'100px'` | | |
1382
- | options | node | | | |
1383
- | placeholder | string | | | |
1384
- | prefix | string | | | |
1385
- | selected | arrayOf(string) | | | |
1386
- | onChange | function | | | |
1494
+ |Name|Type|Default|Required|Description|
1495
+ |---|---|---|---|---|
1496
+ |dataTest|string||*||
1497
+ |className|string||||
1498
+ |clearText|custom||||
1499
+ |clearable|boolean||||
1500
+ |disabled|boolean||||
1501
+ |inputMaxHeight|string|`'100px'`|||
1502
+ |options|node||||
1503
+ |placeholder|string||||
1504
+ |prefix|string||||
1505
+ |selected|arrayOf(string)||||
1506
+ |onChange|function||||
1387
1507
 
1388
1508
  ### Menu
1389
1509
 
@@ -1391,19 +1511,21 @@ import { Input } from '@dhis2/ui'
1391
1511
 
1392
1512
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1393
1513
 
1514
+
1394
1515
  ```js
1395
1516
  import { Menu } from '@dhis2/ui'
1396
1517
  ```
1397
1518
 
1519
+
1398
1520
  #### Props
1399
1521
 
1400
- | Name | Type | Default | Required | Description |
1401
- | -------- | --------------- | ------- | -------- | ----------- |
1402
- | dataTest | string | | \* | |
1403
- | empty | node | `''` | | |
1404
- | options | node | | | |
1405
- | selected | arrayOf(string) | | | |
1406
- | onChange | function | | | |
1522
+ |Name|Type|Default|Required|Description|
1523
+ |---|---|---|---|---|
1524
+ |dataTest|string||*||
1525
+ |empty|node|`''`|||
1526
+ |options|node||||
1527
+ |selected|arrayOf(string)||||
1528
+ |onChange|function||||
1407
1529
 
1408
1530
  ### MultiSelect
1409
1531
 
@@ -1411,40 +1533,42 @@ import { Menu } from '@dhis2/ui'
1411
1533
 
1412
1534
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1413
1535
 
1536
+
1414
1537
  ```js
1415
1538
  import { MultiSelect } from '@dhis2/ui'
1416
1539
  ```
1417
1540
 
1541
+
1418
1542
  #### Props
1419
1543
 
1420
- | Name | Type | Default | Required | Description |
1421
- | ----------------- | --------------- | ---------------------------- | -------- | --------------------------------------- |
1422
- | children | node | | | |
1423
- | className | string | | | |
1424
- | clearText | custom | | | Required if `clearable` prop is `true` |
1425
- | clearable | boolean | | | Adds a 'clear' option to the menu |
1426
- | dataTest | string | `'dhis2-uicore-multiselect'` | | |
1427
- | dense | boolean | | | |
1428
- | disabled | boolean | | | |
1429
- | empty | node | | | |
1430
- | error | custom | | | |
1431
- | filterPlaceholder | string | | | |
1432
- | filterable | boolean | | | Adds a 'filter' field to the menu |
1433
- | initialFocus | boolean | | | |
1434
- | inputMaxHeight | string | | | |
1435
- | loading | boolean | | | |
1436
- | loadingText | string | | | |
1437
- | maxHeight | string | | | |
1438
- | noMatchText | custom | | | Required if `filterable` prop is `true` |
1439
- | placeholder | string | | | |
1440
- | prefix | string | | | |
1441
- | selected | arrayOf(string) | `[]` | | |
1442
- | tabIndex | string | | | |
1443
- | valid | custom | | | |
1444
- | warning | custom | | | |
1445
- | onBlur | function | | | |
1446
- | onChange | function | | | |
1447
- | onFocus | function | | | |
1544
+ |Name|Type|Default|Required|Description|
1545
+ |---|---|---|---|---|
1546
+ |children|node||||
1547
+ |className|string||||
1548
+ |clearText|custom|||Required if `clearable` prop is `true`|
1549
+ |clearable|boolean|||Adds a 'clear' option to the menu|
1550
+ |dataTest|string|`'dhis2-uicore-multiselect'`|||
1551
+ |dense|boolean||||
1552
+ |disabled|boolean||||
1553
+ |empty|node||||
1554
+ |error|custom||||
1555
+ |filterPlaceholder|string||||
1556
+ |filterable|boolean|||Adds a 'filter' field to the menu|
1557
+ |initialFocus|boolean||||
1558
+ |inputMaxHeight|string||||
1559
+ |loading|boolean||||
1560
+ |loadingText|string||||
1561
+ |maxHeight|string||||
1562
+ |noMatchText|custom|||Required if `filterable` prop is `true`|
1563
+ |placeholder|string||||
1564
+ |prefix|string||||
1565
+ |selected|arrayOf(string)|`[]`|||
1566
+ |tabIndex|string||||
1567
+ |valid|custom||||
1568
+ |warning|custom||||
1569
+ |onBlur|function||||
1570
+ |onChange|function||||
1571
+ |onFocus|function||||
1448
1572
 
1449
1573
  ### MultiSelectField
1450
1574
 
@@ -1452,45 +1576,47 @@ import { MultiSelect } from '@dhis2/ui'
1452
1576
 
1453
1577
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1454
1578
 
1579
+
1455
1580
  ```js
1456
1581
  import { MultiSelectField } from '@dhis2/ui'
1457
1582
  ```
1458
1583
 
1584
+
1459
1585
  #### Props
1460
1586
 
1461
- | Name | Type | Default | Required | Description |
1462
- | ----------------- | ----------------- | ---------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
1463
- | children | node | | | Should be `MultiSelectOption` components |
1464
- | className | string | | | |
1465
- | clearText | string │ function | `() => i18n.t('Clear')` | | Label for the button that clears selections |
1466
- | clearable | boolean | | | Adds a button to the MultiSelect that clears selections when pressed |
1467
- | dataTest | string | `'dhis2-uiwidgets-multiselectfield'` | | |
1468
- | dense | boolean | | | Makes the MultiSelect smaller |
1469
- | disabled | boolean | | | Disables the MultiSelect |
1470
- | empty | node │ function | `() => i18n.t('No data found')` | | Text to display when there are no options |
1471
- | error | custom | | | Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props |
1472
- | filterPlaceholder | node │ function | `() => i18n.t('Type to filter options')` | | Placeholder text to show in the filter field when it is empty |
1473
- | filterable | boolean | | | Adds a field to filter options |
1474
- | helpText | string | | | Useful guiding text to display below the MultiSelect |
1475
- | initialFocus | boolean | | | Grabs initial focus on the page |
1476
- | inputMaxHeight | string | | | Constrains the height of the input |
1477
- | inputWidth | string | | | Sets the width of the input. Can be any valid CSS measurement |
1478
- | label | string | | | Text for the label above the MultiSelect |
1479
- | loading | boolean | | | Applies a loading appearance to the dropdown options |
1480
- | loadingText | string │ function | `() => i18n.t('Loading options')` | | Text to display when `loading` is true |
1481
- | maxHeight | string | | | Constrains height of the MultiSelect |
1482
- | noMatchText | string │ function | `() => i18n.t('No options found')` | | Text to display when there are no filter results |
1483
- | placeholder | string | | | Placeholder text when the MultiSelect is empty |
1484
- | prefix | string | | | Leading text to prefix selections |
1485
- | required | boolean | | | Indicates that a selection is required |
1486
- | selected | arrayOf(string) | `[]` | | Selected items in the MultiSelect (each string should refer to the item's `value` attribute) |
1487
- | tabIndex | string | | | |
1488
- | valid | custom | | | Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props |
1489
- | validationText | string | | | Text to provide form validation feedback. Receives styles according to validation status |
1490
- | warning | custom | | | Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props |
1491
- | onBlur | function | | | Called with signature `({ selected: [String] }, event)` |
1492
- | onChange | function | | | Called with signature `({ selected: [String] }, event)` |
1493
- | onFocus | function | | | Called with signature `({ selected: [String] }, event)` |
1587
+ |Name|Type|Default|Required|Description|
1588
+ |---|---|---|---|---|
1589
+ |children|node|||Should be `MultiSelectOption` components|
1590
+ |className|string||||
1591
+ |clearText|string │ function|`() => i18n.t('Clear')`||Label for the button that clears selections|
1592
+ |clearable|boolean|||Adds a button to the MultiSelect that clears selections when pressed|
1593
+ |dataTest|string|`'dhis2-uiwidgets-multiselectfield'`|||
1594
+ |dense|boolean|||Makes the MultiSelect smaller|
1595
+ |disabled|boolean|||Disables the MultiSelect|
1596
+ |empty|node │ function|`() => i18n.t('No data found')`||Text to display when there are no options|
1597
+ |error|custom|||Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props|
1598
+ |filterPlaceholder|node │ function|`() => i18n.t('Type to filter options')`||Placeholder text to show in the filter field when it is empty|
1599
+ |filterable|boolean|||Adds a field to filter options|
1600
+ |helpText|string|||Useful guiding text to display below the MultiSelect|
1601
+ |initialFocus|boolean|||Grabs initial focus on the page|
1602
+ |inputMaxHeight|string|||Constrains the height of the input|
1603
+ |inputWidth|string|||Sets the width of the input. Can be any valid CSS measurement|
1604
+ |label|string|||Text for the label above the MultiSelect|
1605
+ |loading|boolean|||Applies a loading appearance to the dropdown options|
1606
+ |loadingText|string │ function|`() => i18n.t('Loading options')`||Text to display when `loading` is true|
1607
+ |maxHeight|string|||Constrains height of the MultiSelect|
1608
+ |noMatchText|string │ function|`() => i18n.t('No options found')`||Text to display when there are no filter results|
1609
+ |placeholder|string|||Placeholder text when the MultiSelect is empty|
1610
+ |prefix|string|||Leading text to prefix selections|
1611
+ |required|boolean|||Indicates that a selection is required|
1612
+ |selected|arrayOf(string)|`[]`||Selected items in the MultiSelect (each string should refer to the item's `value` attribute)|
1613
+ |tabIndex|string||||
1614
+ |valid|custom|||Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props|
1615
+ |validationText|string|||Text to provide form validation feedback. Receives styles according to validation status|
1616
+ |warning|custom|||Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props|
1617
+ |onBlur|function|||Called with signature `({ selected: [String] }, event)`|
1618
+ |onChange|function|||Called with signature `({ selected: [String] }, event)`|
1619
+ |onFocus|function|||Called with signature `({ selected: [String] }, event)`|
1494
1620
 
1495
1621
  ### MultiSelectOption
1496
1622
 
@@ -1498,21 +1624,23 @@ import { MultiSelectField } from '@dhis2/ui'
1498
1624
 
1499
1625
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1500
1626
 
1627
+
1501
1628
  ```js
1502
1629
  import { MultiSelectOption } from '@dhis2/ui'
1503
1630
  ```
1504
1631
 
1632
+
1505
1633
  #### Props
1506
1634
 
1507
- | Name | Type | Default | Required | Description |
1508
- | --------- | -------- | ---------------------------------- | -------- | ----------- |
1509
- | label | string | | \* | |
1510
- | value | string | | \* | |
1511
- | active | boolean | | | |
1512
- | className | string | | | |
1513
- | dataTest | string | `'dhis2-uicore-multiselectoption'` | | |
1514
- | disabled | boolean | | | |
1515
- | onClick | function | | | |
1635
+ |Name|Type|Default|Required|Description|
1636
+ |---|---|---|---|---|
1637
+ |label|string||*||
1638
+ |value|string||*||
1639
+ |active|boolean||||
1640
+ |className|string||||
1641
+ |dataTest|string|`'dhis2-uicore-multiselectoption'`|||
1642
+ |disabled|boolean||||
1643
+ |onClick|function||||
1516
1644
 
1517
1645
  ### Input
1518
1646
 
@@ -1520,25 +1648,27 @@ import { MultiSelectOption } from '@dhis2/ui'
1520
1648
 
1521
1649
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1522
1650
 
1651
+
1523
1652
  ```js
1524
1653
  import { Input } from '@dhis2/ui'
1525
1654
  ```
1526
1655
 
1656
+
1527
1657
  #### Props
1528
1658
 
1529
- | Name | Type | Default | Required | Description |
1530
- | -------------- | -------- | --------- | -------- | ----------- |
1531
- | dataTest | string | | \* | |
1532
- | className | string | | | |
1533
- | clearText | custom | | | |
1534
- | clearable | boolean | | | |
1535
- | disabled | boolean | | | |
1536
- | inputMaxHeight | string | `'100px'` | | |
1537
- | options | node | | | |
1538
- | placeholder | string | | | |
1539
- | prefix | string | | | |
1540
- | selected | string | | | |
1541
- | onChange | function | | | |
1659
+ |Name|Type|Default|Required|Description|
1660
+ |---|---|---|---|---|
1661
+ |dataTest|string||*||
1662
+ |className|string||||
1663
+ |clearText|custom||||
1664
+ |clearable|boolean||||
1665
+ |disabled|boolean||||
1666
+ |inputMaxHeight|string|`'100px'`|||
1667
+ |options|node||||
1668
+ |placeholder|string||||
1669
+ |prefix|string||||
1670
+ |selected|string||||
1671
+ |onChange|function||||
1542
1672
 
1543
1673
  ### Menu
1544
1674
 
@@ -1546,21 +1676,23 @@ import { Input } from '@dhis2/ui'
1546
1676
 
1547
1677
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1548
1678
 
1679
+
1549
1680
  ```js
1550
1681
  import { Menu } from '@dhis2/ui'
1551
1682
  ```
1552
1683
 
1684
+
1553
1685
  #### Props
1554
1686
 
1555
- | Name | Type | Default | Required | Description |
1556
- | ---------------- | -------- | ------- | -------- | ----------- |
1557
- | dataTest | string | | \* | |
1558
- | empty | node | `''` | | |
1559
- | handleClose | function | | | |
1560
- | handleFocusInput | function | | | |
1561
- | options | node | | | |
1562
- | selected | string | | | |
1563
- | onChange | function | | | |
1687
+ |Name|Type|Default|Required|Description|
1688
+ |---|---|---|---|---|
1689
+ |dataTest|string||*||
1690
+ |empty|node|`''`|||
1691
+ |handleClose|function||||
1692
+ |handleFocusInput|function||||
1693
+ |options|node||||
1694
+ |selected|string||||
1695
+ |onChange|function||||
1564
1696
 
1565
1697
  ### SingleSelect
1566
1698
 
@@ -1568,40 +1700,42 @@ import { Menu } from '@dhis2/ui'
1568
1700
 
1569
1701
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1570
1702
 
1703
+
1571
1704
  ```js
1572
1705
  import { SingleSelect } from '@dhis2/ui'
1573
1706
  ```
1574
1707
 
1708
+
1575
1709
  #### Props
1576
1710
 
1577
- | Name | Type | Default | Required | Description |
1578
- | ----------------- | -------- | ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
1579
- | children | node | | | |
1580
- | className | string | | | |
1581
- | clearText | custom | | | Text on button that clears selection. Required if `clearable` prop is true |
1582
- | clearable | boolean | | | Adds a button to clear selection |
1583
- | dataTest | string | `'dhis2-uicore-singleselect'` | | |
1584
- | dense | boolean | | | |
1585
- | disabled | boolean | | | |
1586
- | empty | node | | | Text or component to display when there are no options |
1587
- | error | custom | | | Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props |
1588
- | filterPlaceholder | string | | | |
1589
- | filterable | boolean | | | Adds a filter field to add text to filter options |
1590
- | initialFocus | boolean | | | |
1591
- | inputMaxHeight | string | | | |
1592
- | loading | boolean | | | |
1593
- | loadingText | string | | | |
1594
- | maxHeight | string | | | |
1595
- | noMatchText | custom | | | Text to show when filter returns no results. Required if `filterable` prop is true |
1596
- | placeholder | string | | | |
1597
- | prefix | string | | | |
1598
- | selected | string | `''` | | |
1599
- | tabIndex | string | | | |
1600
- | valid | custom | | | Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props |
1601
- | warning | custom | | | Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props |
1602
- | onBlur | function | | | |
1603
- | onChange | function | | | |
1604
- | onFocus | function | | | |
1711
+ |Name|Type|Default|Required|Description|
1712
+ |---|---|---|---|---|
1713
+ |children|node||||
1714
+ |className|string||||
1715
+ |clearText|custom|||Text on button that clears selection. Required if `clearable` prop is true|
1716
+ |clearable|boolean|||Adds a button to clear selection|
1717
+ |dataTest|string|`'dhis2-uicore-singleselect'`|||
1718
+ |dense|boolean||||
1719
+ |disabled|boolean||||
1720
+ |empty|node|||Text or component to display when there are no options|
1721
+ |error|custom|||Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props|
1722
+ |filterPlaceholder|string||||
1723
+ |filterable|boolean|||Adds a filter field to add text to filter options|
1724
+ |initialFocus|boolean||||
1725
+ |inputMaxHeight|string||||
1726
+ |loading|boolean||||
1727
+ |loadingText|string||||
1728
+ |maxHeight|string||||
1729
+ |noMatchText|custom|||Text to show when filter returns no results. Required if `filterable` prop is true|
1730
+ |placeholder|string||||
1731
+ |prefix|string||||
1732
+ |selected|string|`''`|||
1733
+ |tabIndex|string||||
1734
+ |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props|
1735
+ |warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
1736
+ |onBlur|function||||
1737
+ |onChange|function||||
1738
+ |onFocus|function||||
1605
1739
 
1606
1740
  ### SingleSelectField
1607
1741
 
@@ -1609,45 +1743,47 @@ import { SingleSelect } from '@dhis2/ui'
1609
1743
 
1610
1744
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1611
1745
 
1746
+
1612
1747
  ```js
1613
1748
  import { SingleSelectField } from '@dhis2/ui'
1614
1749
  ```
1615
1750
 
1751
+
1616
1752
  #### Props
1617
1753
 
1618
- | Name | Type | Default | Required | Description |
1619
- | ----------------- | ----------------- | ---------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
1620
- | children | node | | | Should be `SingleSelectOption` components |
1621
- | className | string | | | |
1622
- | clearText | string │ function | `() => i18n.t('Clear')` | | Label for the button that clears selections |
1623
- | clearable | boolean | | | Adds a button to the SingleSelect that clears selections when pressed |
1624
- | dataTest | string | `'dhis2-uiwidgets-singleselectfield'` | | |
1625
- | dense | boolean | | | Makes the SingleSelect smaller |
1626
- | disabled | boolean | | | Disables the SingleSelect |
1627
- | empty | node │ function | `() => i18n.t('No data found')` | | Text to display when there are no options |
1628
- | error | custom | | | Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props |
1629
- | filterPlaceholder | node │ function | `() => i18n.t('Type to filter options')` | | Placeholder text to show in the filter field when it is empty |
1630
- | filterable | boolean | | | Adds a field to filter options |
1631
- | helpText | string | | | Useful guiding text to display below the SingleSelect |
1632
- | initialFocus | boolean | | | Grabs initial focus on the page |
1633
- | inputMaxHeight | string | | | Constrains the height of the input |
1634
- | inputWidth | string | | | Sets the width of the input. Can be any valid CSS measurement |
1635
- | label | string | | | Text for the label above the SingleSelect |
1636
- | loading | boolean | | | Applies a loading appearance to the dropdown options |
1637
- | loadingText | string │ function | `() => i18n.t('Loading options')` | | Text to display when `loading` is true |
1638
- | maxHeight | string | | | Constrains height of the SingleSelect |
1639
- | noMatchText | string │ function | `() => i18n.t('No options found')` | | Text to display when there are no filter results |
1640
- | placeholder | string | | | Placeholder text when the SingleSelect is empty |
1641
- | prefix | string | | | Leading text to prefix selections |
1642
- | required | boolean | | | Indicates that a selection is required |
1643
- | selected | string | `''` | | Selected item in the SingleSelect (the string should refer to the item's `value` attribute) |
1644
- | tabIndex | string | | | |
1645
- | valid | custom | | | Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props |
1646
- | validationText | string | | | Text to provide form validation feedback. Receives styles according to validation status |
1647
- | warning | custom | | | Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props |
1648
- | onBlur | function | | | Called with signature `({ selected: string }, event)` |
1649
- | onChange | function | | | Called with signature `({ selected: string }, event)` |
1650
- | onFocus | function | | | Called with signature `({ selected: string }, event)` |
1754
+ |Name|Type|Default|Required|Description|
1755
+ |---|---|---|---|---|
1756
+ |children|node|||Should be `SingleSelectOption` components|
1757
+ |className|string||||
1758
+ |clearText|string │ function|`() => i18n.t('Clear')`||Label for the button that clears selections|
1759
+ |clearable|boolean|||Adds a button to the SingleSelect that clears selections when pressed|
1760
+ |dataTest|string|`'dhis2-uiwidgets-singleselectfield'`|||
1761
+ |dense|boolean|||Makes the SingleSelect smaller|
1762
+ |disabled|boolean|||Disables the SingleSelect|
1763
+ |empty|node │ function|`() => i18n.t('No data found')`||Text to display when there are no options|
1764
+ |error|custom|||Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props|
1765
+ |filterPlaceholder|node │ function|`() => i18n.t('Type to filter options')`||Placeholder text to show in the filter field when it is empty|
1766
+ |filterable|boolean|||Adds a field to filter options|
1767
+ |helpText|string|||Useful guiding text to display below the SingleSelect|
1768
+ |initialFocus|boolean|||Grabs initial focus on the page|
1769
+ |inputMaxHeight|string|||Constrains the height of the input|
1770
+ |inputWidth|string|||Sets the width of the input. Can be any valid CSS measurement|
1771
+ |label|string|||Text for the label above the SingleSelect|
1772
+ |loading|boolean|||Applies a loading appearance to the dropdown options|
1773
+ |loadingText|string │ function|`() => i18n.t('Loading options')`||Text to display when `loading` is true|
1774
+ |maxHeight|string|||Constrains height of the SingleSelect|
1775
+ |noMatchText|string │ function|`() => i18n.t('No options found')`||Text to display when there are no filter results|
1776
+ |placeholder|string|||Placeholder text when the SingleSelect is empty|
1777
+ |prefix|string|||Leading text to prefix selections|
1778
+ |required|boolean|||Indicates that a selection is required|
1779
+ |selected|string|`''`||Selected item in the SingleSelect (the string should refer to the item's `value` attribute)|
1780
+ |tabIndex|string||||
1781
+ |valid|custom|||Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props|
1782
+ |validationText|string|||Text to provide form validation feedback. Receives styles according to validation status|
1783
+ |warning|custom|||Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props|
1784
+ |onBlur|function|||Called with signature `({ selected: string }, event)`|
1785
+ |onChange|function|||Called with signature `({ selected: string }, event)`|
1786
+ |onFocus|function|||Called with signature `({ selected: string }, event)`|
1651
1787
 
1652
1788
  ### SingleSelectOption
1653
1789
 
@@ -1655,21 +1791,23 @@ import { SingleSelectField } from '@dhis2/ui'
1655
1791
 
1656
1792
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1657
1793
 
1794
+
1658
1795
  ```js
1659
1796
  import { SingleSelectOption } from '@dhis2/ui'
1660
1797
  ```
1661
1798
 
1799
+
1662
1800
  #### Props
1663
1801
 
1664
- | Name | Type | Default | Required | Description |
1665
- | --------- | -------- | ----------------------------------- | -------- | ----------- |
1666
- | label | string | | \* | |
1667
- | value | string | | \* | |
1668
- | active | boolean | | | |
1669
- | className | string | | | |
1670
- | dataTest | string | `'dhis2-uicore-singleselectoption'` | | |
1671
- | disabled | boolean | | | |
1672
- | onClick | function | | | |
1802
+ |Name|Type|Default|Required|Description|
1803
+ |---|---|---|---|---|
1804
+ |label|string||*||
1805
+ |value|string||*||
1806
+ |active|boolean||||
1807
+ |className|string||||
1808
+ |dataTest|string|`'dhis2-uicore-singleselectoption'`|||
1809
+ |disabled|boolean||||
1810
+ |onClick|function||||
1673
1811
 
1674
1812
  ### SelectorBar
1675
1813
 
@@ -1677,20 +1815,22 @@ import { SingleSelectOption } from '@dhis2/ui'
1677
1815
 
1678
1816
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1679
1817
 
1818
+
1680
1819
  ```js
1681
1820
  import { SelectorBar } from '@dhis2/ui'
1682
1821
  ```
1683
1822
 
1823
+
1684
1824
  #### Props
1685
1825
 
1686
- | Name | Type | Default | Required | Description |
1687
- | ---------------------- | -------- | ------------------------ | -------- | ----------- |
1688
- | children | any | | \* | |
1689
- | additionalContent | any | | | |
1690
- | className | string | | | |
1691
- | dataTest | string | `'dhis2-ui-selectorbar'` | | |
1692
- | disableClearSelections | boolean | | | |
1693
- | onClearSelectionClick | function | | | |
1826
+ |Name|Type|Default|Required|Description|
1827
+ |---|---|---|---|---|
1828
+ |children|any||*||
1829
+ |additionalContent|any||||
1830
+ |className|string||||
1831
+ |dataTest|string|`'dhis2-ui-selectorbar'`|||
1832
+ |disableClearSelections|boolean||||
1833
+ |onClearSelectionClick|function||||
1694
1834
 
1695
1835
  ### SelectorBarItem
1696
1836
 
@@ -1698,23 +1838,25 @@ import { SelectorBar } from '@dhis2/ui'
1698
1838
 
1699
1839
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1700
1840
 
1841
+
1701
1842
  ```js
1702
1843
  import { SelectorBarItem } from '@dhis2/ui'
1703
1844
  ```
1704
1845
 
1846
+
1705
1847
  #### Props
1706
1848
 
1707
- | Name | Type | Default | Required | Description |
1708
- | -------------- | -------- | ---------------------------- | -------- | ----------- |
1709
- | children | any | | \* | |
1710
- | label | string | | \* | |
1711
- | noValueMessage | string | | \* | |
1712
- | open | boolean | | \* | |
1713
- | setOpen | function | | \* | |
1714
- | className | string | | | |
1715
- | dataTest | string | `'dhis2-ui-selectorbaritem'` | | |
1716
- | disabled | boolean | | | |
1717
- | value | string | | | |
1849
+ |Name|Type|Default|Required|Description|
1850
+ |---|---|---|---|---|
1851
+ |children|any||*||
1852
+ |label|string||*||
1853
+ |noValueMessage|string||*||
1854
+ |open|boolean||*||
1855
+ |setOpen|function||*||
1856
+ |className|string||||
1857
+ |dataTest|string|`'dhis2-ui-selectorbaritem'`|||
1858
+ |disabled|boolean||||
1859
+ |value|string||||
1718
1860
 
1719
1861
  ### SharingDialog
1720
1862
 
@@ -1722,17 +1864,18 @@ import { SelectorBarItem } from '@dhis2/ui'
1722
1864
 
1723
1865
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1724
1866
 
1867
+
1725
1868
  ```js
1726
1869
  import { SharingDialog } from '@dhis2/ui'
1727
1870
  ```
1728
1871
 
1729
- #### Props
1730
1872
 
1731
- | Name | Type | Default | Required | Description |
1732
- | ---- | -------- | ------- | -------- | ----------------------------- |
1733
- | id | string | | \* | The id of the object to share |
1734
- | type | import { |
1873
+ #### Props
1735
1874
 
1875
+ |Name|Type|Default|Required|Description|
1876
+ |---|---|---|---|---|
1877
+ |id|string||*|The id of the object to share|
1878
+ |type|import {
1736
1879
  ACCESS_NONE,
1737
1880
  ACCESS_VIEW_ONLY,
1738
1881
  ACCESS_VIEW_AND_EDIT,
@@ -1740,33 +1883,38 @@ import { SharingDialog } from '@dhis2/ui'
1740
1883
  DASHBOARD,
1741
1884
  EVENT_VISUALIZATION,
1742
1885
  INTERPRETATION,
1743
-
1744
1886
  } from './constants.js' │ import {
1745
- ACCESS_NONE,
1746
- ACCESS_VIEW_ONLY,
1747
- ACCESS_VIEW_AND_EDIT,
1748
- VISUALIZATION,
1749
- DASHBOARD,
1750
- EVENT_VISUALIZATION,
1751
- INTERPRETATION,
1887
+ ACCESS_NONE,
1888
+ ACCESS_VIEW_ONLY,
1889
+ ACCESS_VIEW_AND_EDIT,
1890
+ VISUALIZATION,
1891
+ DASHBOARD,
1892
+ EVENT_VISUALIZATION,
1893
+ INTERPRETATION,
1752
1894
  } from './constants.js' │ import {
1753
- ACCESS_NONE,
1754
- ACCESS_VIEW_ONLY,
1755
- ACCESS_VIEW_AND_EDIT,
1756
- VISUALIZATION,
1757
- DASHBOARD,
1758
- EVENT_VISUALIZATION,
1759
- INTERPRETATION,
1895
+ ACCESS_NONE,
1896
+ ACCESS_VIEW_ONLY,
1897
+ ACCESS_VIEW_AND_EDIT,
1898
+ VISUALIZATION,
1899
+ DASHBOARD,
1900
+ EVENT_VISUALIZATION,
1901
+ INTERPRETATION,
1760
1902
  } from './constants.js' │ import {
1761
- ACCESS_NONE,
1762
- ACCESS_VIEW_ONLY,
1763
- ACCESS_VIEW_AND_EDIT,
1764
- VISUALIZATION,
1765
- DASHBOARD,
1766
- EVENT_VISUALIZATION,
1767
- INTERPRETATION,
1768
- } from './constants.js'||\*|The type of object to share|
1769
- |initialSharingSettings|{<br/> "allowPublic": "boolean",<br/> "groups": "objectOf",<br/> "name": "string",<br/> "public": "import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js'",<br/> "users": "objectOf"<br/>}|`{ name: '', allowPublic: true, public: ACCESS_NONE, groups: {}, users: {}, }`||Used to seed the component with data to show whilst loading|
1903
+ ACCESS_NONE,
1904
+ ACCESS_VIEW_ONLY,
1905
+ ACCESS_VIEW_AND_EDIT,
1906
+ VISUALIZATION,
1907
+ DASHBOARD,
1908
+ EVENT_VISUALIZATION,
1909
+ INTERPRETATION,
1910
+ } from './constants.js'||*|The type of object to share|
1911
+ |initialSharingSettings|{<br/> "allowPublic": "boolean",<br/> "groups": "objectOf",<br/> "name": "string",<br/> "public": "import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js'",<br/> "users": "objectOf"<br/>}|`{
1912
+ name: '',
1913
+ allowPublic: true,
1914
+ public: ACCESS_NONE,
1915
+ groups: {},
1916
+ users: {},
1917
+ }`||Used to seed the component with data to show whilst loading|
1770
1918
  |onClose|function|`() => {}`|||
1771
1919
  |onError|function|`() => {}`|||
1772
1920
  |onSave|function|`() => {}`|||
@@ -1777,17 +1925,19 @@ INTERPRETATION,
1777
1925
 
1778
1926
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1779
1927
 
1928
+
1780
1929
  ```js
1781
1930
  import { Modal } from '@dhis2/ui'
1782
1931
  ```
1783
1932
 
1933
+
1784
1934
  #### Props
1785
1935
 
1786
- | Name | Type | Default | Required | Description |
1787
- | -------- | -------- | ------- | -------- | ----------- |
1788
- | children | node | | \* | |
1789
- | name | string | | | |
1790
- | onClose | function | | | |
1936
+ |Name|Type|Default|Required|Description|
1937
+ |---|---|---|---|---|
1938
+ |children|node||*||
1939
+ |name|string||||
1940
+ |onClose|function||||
1791
1941
 
1792
1942
  ### Switch
1793
1943
 
@@ -1795,32 +1945,34 @@ import { Modal } from '@dhis2/ui'
1795
1945
 
1796
1946
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1797
1947
 
1948
+
1798
1949
  ```js
1799
1950
  import { Switch } from '@dhis2/ui'
1800
1951
  ```
1801
1952
 
1953
+
1802
1954
  #### Props
1803
1955
 
1804
- | Name | Type | Default | Required | Description |
1805
- | ------------ | -------- | ----------------------- | -------- | -------------------------------------------------------------------------------------------------------- |
1806
- | ariaLabel | string | | | Sets an aria-label attribute on the input |
1807
- | checked | boolean | `false` | | |
1808
- | className | string | | | |
1809
- | dataTest | string | `'dhis2-uicore-switch'` | | |
1810
- | dense | boolean | | | Makes the switch smaller for information-dense layouts |
1811
- | disabled | boolean | | | Disables the switch |
1812
- | error | custom | | | Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` prop types |
1813
- | initialFocus | boolean | | | Grab initial focus on the page |
1814
- | label | node | | | Label for the switch. Can be a string or an element, for example an image |
1815
- | name | string | | | Name associated with the switch. Passed to event handlers in object |
1816
- | role | string | `'switch'` | | Sets a role attribute on the input |
1817
- | tabIndex | string | | | |
1818
- | valid | custom | | | Applies 'valid' styles for validation feedback. Mutually exclusive with `error` and `warning` prop types |
1819
- | value | string | | | Value associated with the switch. Passed to event handlers in object |
1820
- | warning | custom | | | Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` prop types |
1821
- | onBlur | function | | | Called with signature `({ name: string, value: string, checked: bool }, event)` |
1822
- | onChange | function | | | Called with signature `({ name: string, value: string, checked: bool }, event)` |
1823
- | onFocus | function | | | Called with signature `({ name: string, value: string, checked: bool }, event)` |
1956
+ |Name|Type|Default|Required|Description|
1957
+ |---|---|---|---|---|
1958
+ |ariaLabel|string|||Sets an aria-label attribute on the input|
1959
+ |checked|boolean|`false`|||
1960
+ |className|string||||
1961
+ |dataTest|string|`'dhis2-uicore-switch'`|||
1962
+ |dense|boolean|||Makes the switch smaller for information-dense layouts|
1963
+ |disabled|boolean|||Disables the switch|
1964
+ |error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` prop types|
1965
+ |initialFocus|boolean|||Grab initial focus on the page|
1966
+ |label|node|||Label for the switch. Can be a string or an element, for example an image|
1967
+ |name|string|||Name associated with the switch. Passed to event handlers in object|
1968
+ |role|string|`'switch'`||Sets a role attribute on the input|
1969
+ |tabIndex|string||||
1970
+ |valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `error` and `warning` prop types|
1971
+ |value|string|||Value associated with the switch. Passed to event handlers in object|
1972
+ |warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` prop types|
1973
+ |onBlur|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
1974
+ |onChange|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
1975
+ |onFocus|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
1824
1976
 
1825
1977
  ### SwitchField
1826
1978
 
@@ -1828,33 +1980,35 @@ import { Switch } from '@dhis2/ui'
1828
1980
 
1829
1981
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1830
1982
 
1983
+
1831
1984
  ```js
1832
1985
  import { SwitchField } from '@dhis2/ui'
1833
1986
  ```
1834
1987
 
1988
+
1835
1989
  #### Props
1836
1990
 
1837
- | Name | Type | Default | Required | Description |
1838
- | -------------- | -------- | ------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
1839
- | checked | boolean | | | |
1840
- | className | string | | | |
1841
- | dataTest | string | `'dhis2-uiwidgets-switchfield'` | | |
1842
- | dense | boolean | | | Smaller dimensions for information-dense layouts |
1843
- | disabled | boolean | | | Disables the switch |
1844
- | error | custom | | | Applies 'error' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `valid` props |
1845
- | helpText | string | | | Useful instructions for the user |
1846
- | initialFocus | boolean | | | |
1847
- | label | node | | | Labels the switch |
1848
- | name | string | | | Name associate with the switch. Passed in object as argument to event handlers |
1849
- | required | boolean | | | Adds an asterisk to indicate this field is required |
1850
- | tabIndex | string | | | |
1851
- | valid | custom | | | Applies 'valid' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `error` props |
1852
- | validationText | string | | | Adds text below the switch to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses |
1853
- | value | string | | | Value associated with the switch. Passed in object as argument to event handlers |
1854
- | warning | custom | | | Applies 'warning' styling to switch and validation text for feedback. Mutually exclusive with `valid` and `error` props |
1855
- | onBlur | function | | | Called with signature ({ name: string, value: string, checked: bool }, event) |
1856
- | onChange | function | | | Called with signature ({ name: string, value: string, checked: bool }, event) |
1857
- | onFocus | function | | | Called with signature ({ name: string, value: string, checked: bool }, event) |
1991
+ |Name|Type|Default|Required|Description|
1992
+ |---|---|---|---|---|
1993
+ |checked|boolean||||
1994
+ |className|string||||
1995
+ |dataTest|string|`'dhis2-uiwidgets-switchfield'`|||
1996
+ |dense|boolean|||Smaller dimensions for information-dense layouts|
1997
+ |disabled|boolean|||Disables the switch|
1998
+ |error|custom|||Applies 'error' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `valid` props|
1999
+ |helpText|string|||Useful instructions for the user|
2000
+ |initialFocus|boolean||||
2001
+ |label|node|||Labels the switch|
2002
+ |name|string|||Name associate with the switch. Passed in object as argument to event handlers|
2003
+ |required|boolean|||Adds an asterisk to indicate this field is required|
2004
+ |tabIndex|string||||
2005
+ |valid|custom|||Applies 'valid' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `error` props|
2006
+ |validationText|string|||Adds text below the switch to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses|
2007
+ |value|string|||Value associated with the switch. Passed in object as argument to event handlers|
2008
+ |warning|custom|||Applies 'warning' styling to switch and validation text for feedback. Mutually exclusive with `valid` and `error` props|
2009
+ |onBlur|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
2010
+ |onChange|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
2011
+ |onFocus|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
1858
2012
 
1859
2013
  ### Tab
1860
2014
 
@@ -1862,21 +2016,23 @@ import { SwitchField } from '@dhis2/ui'
1862
2016
 
1863
2017
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1864
2018
 
2019
+
1865
2020
  ```js
1866
2021
  import { Tab } from '@dhis2/ui'
1867
2022
  ```
1868
2023
 
2024
+
1869
2025
  #### Props
1870
2026
 
1871
- | Name | Type | Default | Required | Description |
1872
- | --------- | -------- | -------------------- | -------- | --------------------------------------- |
1873
- | children | node | | | |
1874
- | className | string | | | |
1875
- | dataTest | string | `'dhis2-uicore-tab'` | | |
1876
- | disabled | boolean | | | |
1877
- | icon | element | | | |
1878
- | selected | boolean | | | Indicates this tab is selected |
1879
- | onClick | function | | | Called with the signature `({}, event)` |
2027
+ |Name|Type|Default|Required|Description|
2028
+ |---|---|---|---|---|
2029
+ |children|node||||
2030
+ |className|string||||
2031
+ |dataTest|string|`'dhis2-uicore-tab'`|||
2032
+ |disabled|boolean||||
2033
+ |icon|element||||
2034
+ |selected|boolean|||Indicates this tab is selected|
2035
+ |onClick|function|||Called with the signature `({}, event)`|
1880
2036
 
1881
2037
  ### TabBar
1882
2038
 
@@ -1884,19 +2040,21 @@ import { Tab } from '@dhis2/ui'
1884
2040
 
1885
2041
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1886
2042
 
2043
+
1887
2044
  ```js
1888
2045
  import { TabBar } from '@dhis2/ui'
1889
2046
  ```
1890
2047
 
2048
+
1891
2049
  #### Props
1892
2050
 
1893
- | Name | Type | Default | Required | Description |
1894
- | ---------- | ------- | ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1895
- | children | node | | | |
1896
- | className | string | | | |
1897
- | dataTest | string | `'dhis2-uicore-tabbar'` | | |
1898
- | fixed | boolean | | | Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time. |
1899
- | scrollable | boolean | | | Enables horizontal scrolling for many tabs that don't fit the width of the container |
2051
+ |Name|Type|Default|Required|Description|
2052
+ |---|---|---|---|---|
2053
+ |children|node||||
2054
+ |className|string||||
2055
+ |dataTest|string|`'dhis2-uicore-tabbar'`|||
2056
+ |fixed|boolean|||Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time.|
2057
+ |scrollable|boolean|||Enables horizontal scrolling for many tabs that don't fit the width of the container|
1900
2058
 
1901
2059
  ### DataTableCell
1902
2060
 
@@ -1904,34 +2062,36 @@ import { TabBar } from '@dhis2/ui'
1904
2062
 
1905
2063
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1906
2064
 
2065
+
1907
2066
  ```js
1908
2067
  import { DataTableCell } from '@dhis2/ui'
1909
2068
  ```
1910
2069
 
2070
+
1911
2071
  #### Props
1912
2072
 
1913
- | Name | Type | Default | Required | Description |
1914
- | ----------- | --------------------------- | ------------------------------ | -------- | -------------------------------------------------------------------- |
1915
- | active | boolean | | | To toggle background color, for example for editing |
1916
- | align | 'left' │ 'center' │ 'right' | `'left'` | | |
1917
- | bordered | boolean | | | |
1918
- | children | node | | | |
1919
- | className | string | | | |
1920
- | colSpan | string | | | |
1921
- | dataTest | string | `'dhis2-uicore-datatablecell'` | | |
1922
- | error | custom | | | Mutually exclusive with muted and valid |
1923
- | fixed | boolean | | | When true a TableHeaderCell with sticky positioning will be rendered |
1924
- | large | boolean | | | |
1925
- | left | custom | `'auto'` | | Required when fixed |
1926
- | muted | custom | | | Mutually exclusive with error and valid |
1927
- | role | string | | | |
1928
- | rowSpan | string | | | |
1929
- | scope | string | | | |
1930
- | staticStyle | boolean | | | Surpress hover and active event styles |
1931
- | tag | 'td' │ 'th' | | | Render a TableDataCell or TableHeaderCell respectively |
1932
- | valid | custom | | | Mutually exclusive with error and muted |
1933
- | width | custom | `'auto'` | | Required when fixed |
1934
- | onClick | function | | | |
2073
+ |Name|Type|Default|Required|Description|
2074
+ |---|---|---|---|---|
2075
+ |active|boolean|||To toggle background color, for example for editing|
2076
+ |align|'left' │ 'center' │ 'right'|`'left'`|||
2077
+ |bordered|boolean||||
2078
+ |children|node||||
2079
+ |className|string||||
2080
+ |colSpan|string||||
2081
+ |dataTest|string|`'dhis2-uicore-datatablecell'`|||
2082
+ |error|custom|||Mutually exclusive with muted and valid|
2083
+ |fixed|boolean|||When true a TableHeaderCell with sticky positioning will be rendered|
2084
+ |large|boolean||||
2085
+ |left|custom|`'auto'`||Required when fixed|
2086
+ |muted|custom|||Mutually exclusive with error and valid|
2087
+ |role|string||||
2088
+ |rowSpan|string||||
2089
+ |scope|string||||
2090
+ |staticStyle|boolean|||Surpress hover and active event styles|
2091
+ |tag|'td' │ 'th'|||Render a TableDataCell or TableHeaderCell respectively|
2092
+ |valid|custom|||Mutually exclusive with error and muted|
2093
+ |width|custom|`'auto'`||Required when fixed|
2094
+ |onClick|function||||
1935
2095
 
1936
2096
  ### DataTable
1937
2097
 
@@ -1939,22 +2099,24 @@ import { DataTableCell } from '@dhis2/ui'
1939
2099
 
1940
2100
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1941
2101
 
2102
+
1942
2103
  ```js
1943
2104
  import { DataTable } from '@dhis2/ui'
1944
2105
  ```
1945
2106
 
2107
+
1946
2108
  #### Props
1947
2109
 
1948
- | Name | Type | Default | Required | Description |
1949
- | ------------ | ---------------------------------------- | -------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1950
- | children | node | | | Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components |
1951
- | className | string | | | |
1952
- | dataTest | string | `'dhis2-uicore-datatable'` | | |
1953
- | layout | 'auto' │ 'fixed' │ 'initial' │ 'inherit' | `'auto'` | | Sets the `datatable-layout` property. Switching to `fixed` can prevent style<br/>issues when dealing with a datatable with multiple frozen columns or when dealing<br/>with filter elements in the datatable headers. |
1954
- | role | string | | | |
1955
- | scrollHeight | string | | | Sets max-height of scrollbox |
1956
- | scrollWidth | string | | | Sets max-width of scrollbox |
1957
- | width | string | `'100%'` | | Sets the `width` property. Providing an explicit width can prevent style<br/>issues when dealing with horizontally scrolling datatables with a fixed layout. |
2110
+ |Name|Type|Default|Required|Description|
2111
+ |---|---|---|---|---|
2112
+ |children|node|||Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components|
2113
+ |className|string||||
2114
+ |dataTest|string|`'dhis2-uicore-datatable'`|||
2115
+ |layout|'auto' │ 'fixed' │ 'initial' │ 'inherit'|`'auto'`||Sets the `datatable-layout` property. Switching to `fixed` can prevent style<br/>issues when dealing with a datatable with multiple frozen columns or when dealing<br/>with filter elements in the datatable headers.|
2116
+ |role|string||||
2117
+ |scrollHeight|string|||Sets max-height of scrollbox|
2118
+ |scrollWidth|string|||Sets max-width of scrollbox|
2119
+ |width|string|`'100%'`||Sets the `width` property. Providing an explicit width can prevent style<br/>issues when dealing with horizontally scrolling datatables with a fixed layout.|
1958
2120
 
1959
2121
  ### StackedTableBody
1960
2122
 
@@ -1962,17 +2124,19 @@ import { DataTable } from '@dhis2/ui'
1962
2124
 
1963
2125
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1964
2126
 
2127
+
1965
2128
  ```js
1966
2129
  import { StackedTableBody } from '@dhis2/ui'
1967
2130
  ```
1968
2131
 
2132
+
1969
2133
  #### Props
1970
2134
 
1971
- | Name | Type | Default | Required | Description |
1972
- | --------- | ------ | --------------------------------- | -------- | ----------- |
1973
- | children | node | | | |
1974
- | className | string | | | |
1975
- | dataTest | string | `'dhis2-uicore-stackedtablebody'` | | |
2135
+ |Name|Type|Default|Required|Description|
2136
+ |---|---|---|---|---|
2137
+ |children|node||||
2138
+ |className|string||||
2139
+ |dataTest|string|`'dhis2-uicore-stackedtablebody'`|||
1976
2140
 
1977
2141
  ### StackedTableCellHead
1978
2142
 
@@ -1980,19 +2144,21 @@ import { StackedTableBody } from '@dhis2/ui'
1980
2144
 
1981
2145
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1982
2146
 
2147
+
1983
2148
  ```js
1984
2149
  import { StackedTableCellHead } from '@dhis2/ui'
1985
2150
  ```
1986
2151
 
2152
+
1987
2153
  #### Props
1988
2154
 
1989
- | Name | Type | Default | Required | Description |
1990
- | --------- | ------ | ------------------------------------- | -------- | ----------- |
1991
- | children | string | `''` | | |
1992
- | className | string | | | |
1993
- | colSpan | string | | | |
1994
- | dataTest | string | `'dhis2-uicore-stackedtablecellhead'` | | |
1995
- | rowSpan | string | | | |
2155
+ |Name|Type|Default|Required|Description|
2156
+ |---|---|---|---|---|
2157
+ |children|string|`''`|||
2158
+ |className|string||||
2159
+ |colSpan|string||||
2160
+ |dataTest|string|`'dhis2-uicore-stackedtablecellhead'`|||
2161
+ |rowSpan|string||||
1996
2162
 
1997
2163
  ### StackedTableCell
1998
2164
 
@@ -2000,23 +2166,25 @@ import { StackedTableCellHead } from '@dhis2/ui'
2000
2166
 
2001
2167
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2002
2168
 
2169
+
2003
2170
  ```js
2004
2171
  import { StackedTableCell } from '@dhis2/ui'
2005
2172
  ```
2006
2173
 
2174
+
2007
2175
  #### Props
2008
2176
 
2009
- | Name | Type | Default | Required | Description |
2010
- | ------------ | --------------- | --------------------------------- | -------- | ----------- |
2011
- | children | node | | | |
2012
- | className | string | | | |
2013
- | colSpan | string | | | |
2014
- | column | number | | | |
2015
- | dataTest | string | `'dhis2-uicore-stackedtablecell'` | | |
2016
- | headerLabels | arrayOf(string) | `[]` | | |
2017
- | hideTitle | boolean | | | |
2018
- | rowSpan | string | | | |
2019
- | title | string | | | |
2177
+ |Name|Type|Default|Required|Description|
2178
+ |---|---|---|---|---|
2179
+ |children|node||||
2180
+ |className|string||||
2181
+ |colSpan|string||||
2182
+ |column|number||||
2183
+ |dataTest|string|`'dhis2-uicore-stackedtablecell'`|||
2184
+ |headerLabels|arrayOf(string)|`[]`|||
2185
+ |hideTitle|boolean||||
2186
+ |rowSpan|string||||
2187
+ |title|string||||
2020
2188
 
2021
2189
  ### StackedTableFoot
2022
2190
 
@@ -2024,17 +2192,19 @@ import { StackedTableCell } from '@dhis2/ui'
2024
2192
 
2025
2193
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2026
2194
 
2195
+
2027
2196
  ```js
2028
2197
  import { StackedTableFoot } from '@dhis2/ui'
2029
2198
  ```
2030
2199
 
2200
+
2031
2201
  #### Props
2032
2202
 
2033
- | Name | Type | Default | Required | Description |
2034
- | --------- | ------ | --------------------------------- | -------- | ----------- |
2035
- | children | node | | | |
2036
- | className | string | | | |
2037
- | dataTest | string | `'dhis2-uicore-stackedtablefoot'` | | |
2203
+ |Name|Type|Default|Required|Description|
2204
+ |---|---|---|---|---|
2205
+ |children|node||||
2206
+ |className|string||||
2207
+ |dataTest|string|`'dhis2-uicore-stackedtablefoot'`|||
2038
2208
 
2039
2209
  ### StackedTableHead
2040
2210
 
@@ -2042,17 +2212,19 @@ import { StackedTableFoot } from '@dhis2/ui'
2042
2212
 
2043
2213
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2044
2214
 
2215
+
2045
2216
  ```js
2046
2217
  import { StackedTableHead } from '@dhis2/ui'
2047
2218
  ```
2048
2219
 
2220
+
2049
2221
  #### Props
2050
2222
 
2051
- | Name | Type | Default | Required | Description |
2052
- | --------- | ------ | --------------------------------- | -------- | ----------- |
2053
- | children | node | | | |
2054
- | className | string | | | |
2055
- | dataTest | string | `'dhis2-uicore-stackedtablehead'` | | |
2223
+ |Name|Type|Default|Required|Description|
2224
+ |---|---|---|---|---|
2225
+ |children|node||||
2226
+ |className|string||||
2227
+ |dataTest|string|`'dhis2-uicore-stackedtablehead'`|||
2056
2228
 
2057
2229
  ### StackedTableRowHead
2058
2230
 
@@ -2060,17 +2232,19 @@ import { StackedTableHead } from '@dhis2/ui'
2060
2232
 
2061
2233
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2062
2234
 
2235
+
2063
2236
  ```js
2064
2237
  import { StackedTableRowHead } from '@dhis2/ui'
2065
2238
  ```
2066
2239
 
2240
+
2067
2241
  #### Props
2068
2242
 
2069
- | Name | Type | Default | Required | Description |
2070
- | --------- | ------ | ------------------------------------ | -------- | ----------- |
2071
- | children | node | | | |
2072
- | className | string | | | |
2073
- | dataTest | string | `'dhis2-uicore-stackedtablerowhead'` | | |
2243
+ |Name|Type|Default|Required|Description|
2244
+ |---|---|---|---|---|
2245
+ |children|node||||
2246
+ |className|string||||
2247
+ |dataTest|string|`'dhis2-uicore-stackedtablerowhead'`|||
2074
2248
 
2075
2249
  ### StackedTableRow
2076
2250
 
@@ -2078,17 +2252,19 @@ import { StackedTableRowHead } from '@dhis2/ui'
2078
2252
 
2079
2253
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2080
2254
 
2255
+
2081
2256
  ```js
2082
2257
  import { StackedTableRow } from '@dhis2/ui'
2083
2258
  ```
2084
2259
 
2260
+
2085
2261
  #### Props
2086
2262
 
2087
- | Name | Type | Default | Required | Description |
2088
- | --------- | ------ | -------------------------------- | -------- | ----------- |
2089
- | children | node | | | |
2090
- | className | string | | | |
2091
- | dataTest | string | `'dhis2-uicore-stackedtablerow'` | | |
2263
+ |Name|Type|Default|Required|Description|
2264
+ |---|---|---|---|---|
2265
+ |children|node||||
2266
+ |className|string||||
2267
+ |dataTest|string|`'dhis2-uicore-stackedtablerow'`|||
2092
2268
 
2093
2269
  ### StackedTable
2094
2270
 
@@ -2096,18 +2272,20 @@ import { StackedTableRow } from '@dhis2/ui'
2096
2272
 
2097
2273
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2098
2274
 
2275
+
2099
2276
  ```js
2100
2277
  import { StackedTable } from '@dhis2/ui'
2101
2278
  ```
2102
2279
 
2280
+
2103
2281
  #### Props
2104
2282
 
2105
- | Name | Type | Default | Required | Description |
2106
- | ------------ | --------------- | ----------------------------- | -------- | ---------------------------------------------------------------------- |
2107
- | children | node | | | |
2108
- | className | string | | | |
2109
- | dataTest | string | `'dhis2-uicore-stackedtable'` | | |
2110
- | headerLabels | arrayOf(string) | | | Labels for columns. Use an empty string for a column without a header. |
2283
+ |Name|Type|Default|Required|Description|
2284
+ |---|---|---|---|---|
2285
+ |children|node||||
2286
+ |className|string||||
2287
+ |dataTest|string|`'dhis2-uicore-stackedtable'`|||
2288
+ |headerLabels|arrayOf(string)|||Labels for columns. Use an empty string for a column without a header.|
2111
2289
 
2112
2290
  ### Table
2113
2291
 
@@ -2115,17 +2293,19 @@ import { StackedTable } from '@dhis2/ui'
2115
2293
 
2116
2294
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2117
2295
 
2296
+
2118
2297
  ```js
2119
2298
  import { Table } from '@dhis2/ui'
2120
2299
  ```
2121
2300
 
2301
+
2122
2302
  #### Props
2123
2303
 
2124
- | Name | Type | Default | Required | Description |
2125
- | --------- | ------ | ------- | -------- | ----------- |
2126
- | children | node | | \* | |
2127
- | className | string | | | |
2128
- | dataTest | string | | | |
2304
+ |Name|Type|Default|Required|Description|
2305
+ |---|---|---|---|---|
2306
+ |children|node||*||
2307
+ |className|string||||
2308
+ |dataTest|string||||
2129
2309
 
2130
2310
  ### TableBody
2131
2311
 
@@ -2133,18 +2313,20 @@ import { Table } from '@dhis2/ui'
2133
2313
 
2134
2314
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2135
2315
 
2316
+
2136
2317
  ```js
2137
2318
  import { TableBody } from '@dhis2/ui'
2138
2319
  ```
2139
2320
 
2321
+
2140
2322
  #### Props
2141
2323
 
2142
- | Name | Type | Default | Required | Description |
2143
- | --------- | ------ | -------------------------- | -------- | --------------------------------- |
2144
- | children | node | | | Should be `<TableRow>` components |
2145
- | className | string | | | |
2146
- | dataTest | string | `'dhis2-uicore-tablebody'` | | |
2147
- | role | string | | | |
2324
+ |Name|Type|Default|Required|Description|
2325
+ |---|---|---|---|---|
2326
+ |children|node|||Should be `<TableRow>` components|
2327
+ |className|string||||
2328
+ |dataTest|string|`'dhis2-uicore-tablebody'`|||
2329
+ |role|string||||
2148
2330
 
2149
2331
  ### TableCellHead
2150
2332
 
@@ -2152,21 +2334,23 @@ import { TableBody } from '@dhis2/ui'
2152
2334
 
2153
2335
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2154
2336
 
2337
+
2155
2338
  ```js
2156
2339
  import { TableCellHead } from '@dhis2/ui'
2157
2340
  ```
2158
2341
 
2342
+
2159
2343
  #### Props
2160
2344
 
2161
- | Name | Type | Default | Required | Description |
2162
- | --------- | ------- | ------------------------------ | -------- | ---------------------------------------------------------- |
2163
- | children | node | | | |
2164
- | className | string | | | |
2165
- | colSpan | string | | | |
2166
- | dataTest | string | `'dhis2-uicore-tablecellhead'` | | |
2167
- | dense | boolean | | | Uses less padding and height for information-dense layouts |
2168
- | role | string | | | |
2169
- | rowSpan | string | | | |
2345
+ |Name|Type|Default|Required|Description|
2346
+ |---|---|---|---|---|
2347
+ |children|node||||
2348
+ |className|string||||
2349
+ |colSpan|string||||
2350
+ |dataTest|string|`'dhis2-uicore-tablecellhead'`|||
2351
+ |dense|boolean|||Uses less padding and height for information-dense layouts|
2352
+ |role|string||||
2353
+ |rowSpan|string||||
2170
2354
 
2171
2355
  ### TableCell
2172
2356
 
@@ -2174,21 +2358,23 @@ import { TableCellHead } from '@dhis2/ui'
2174
2358
 
2175
2359
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2176
2360
 
2361
+
2177
2362
  ```js
2178
2363
  import { TableCell } from '@dhis2/ui'
2179
2364
  ```
2180
2365
 
2366
+
2181
2367
  #### Props
2182
2368
 
2183
- | Name | Type | Default | Required | Description |
2184
- | --------- | ------- | -------------------------- | -------- | ----------------------------------------------------------- |
2185
- | children | node | | | |
2186
- | className | string | | | |
2187
- | colSpan | string | | | |
2188
- | dataTest | string | `'dhis2-uicore-tablecell'` | | |
2189
- | dense | boolean | | | Usees less padding and height for information-dense layouts |
2190
- | role | string | | | |
2191
- | rowSpan | string | | | |
2369
+ |Name|Type|Default|Required|Description|
2370
+ |---|---|---|---|---|
2371
+ |children|node||||
2372
+ |className|string||||
2373
+ |colSpan|string||||
2374
+ |dataTest|string|`'dhis2-uicore-tablecell'`|||
2375
+ |dense|boolean|||Usees less padding and height for information-dense layouts|
2376
+ |role|string||||
2377
+ |rowSpan|string||||
2192
2378
 
2193
2379
  ### TableFoot
2194
2380
 
@@ -2196,18 +2382,20 @@ import { TableCell } from '@dhis2/ui'
2196
2382
 
2197
2383
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2198
2384
 
2385
+
2199
2386
  ```js
2200
2387
  import { TableFoot } from '@dhis2/ui'
2201
2388
  ```
2202
2389
 
2390
+
2203
2391
  #### Props
2204
2392
 
2205
- | Name | Type | Default | Required | Description |
2206
- | --------- | ------ | -------------------------- | -------- | --------------------------------- |
2207
- | children | node | | | Should be `<TableRow>` components |
2208
- | className | string | | | |
2209
- | dataTest | string | `'dhis2-uicore-tablefoot'` | | |
2210
- | role | string | | | |
2393
+ |Name|Type|Default|Required|Description|
2394
+ |---|---|---|---|---|
2395
+ |children|node|||Should be `<TableRow>` components|
2396
+ |className|string||||
2397
+ |dataTest|string|`'dhis2-uicore-tablefoot'`|||
2398
+ |role|string||||
2211
2399
 
2212
2400
  ### TableHead
2213
2401
 
@@ -2215,18 +2403,20 @@ import { TableFoot } from '@dhis2/ui'
2215
2403
 
2216
2404
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2217
2405
 
2406
+
2218
2407
  ```js
2219
2408
  import { TableHead } from '@dhis2/ui'
2220
2409
  ```
2221
2410
 
2411
+
2222
2412
  #### Props
2223
2413
 
2224
- | Name | Type | Default | Required | Description |
2225
- | --------- | ------ | -------------------------- | -------- | ------------------------------------- |
2226
- | children | node | | | Should be `<TableRowHead>` components |
2227
- | className | string | | | |
2228
- | dataTest | string | `'dhis2-uicore-tablehead'` | | |
2229
- | role | string | | | |
2414
+ |Name|Type|Default|Required|Description|
2415
+ |---|---|---|---|---|
2416
+ |children|node|||Should be `<TableRowHead>` components|
2417
+ |className|string||||
2418
+ |dataTest|string|`'dhis2-uicore-tablehead'`|||
2419
+ |role|string||||
2230
2420
 
2231
2421
  ### TableRowHead
2232
2422
 
@@ -2234,19 +2424,21 @@ import { TableHead } from '@dhis2/ui'
2234
2424
 
2235
2425
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2236
2426
 
2427
+
2237
2428
  ```js
2238
2429
  import { TableRowHead } from '@dhis2/ui'
2239
2430
  ```
2240
2431
 
2432
+
2241
2433
  #### Props
2242
2434
 
2243
- | Name | Type | Default | Required | Description |
2244
- | --------------------- | ------- | ----------------------------- | -------- | ---------------------------------------------- |
2245
- | children | node | | | Should be `<TableCellHead>` components |
2246
- | className | string | | | |
2247
- | dataTest | string | `'dhis2-uicore-tablerowhead'` | | |
2248
- | role | string | | | |
2249
- | suppressZebraStriping | boolean | | | Disables the default row striping for this row |
2435
+ |Name|Type|Default|Required|Description|
2436
+ |---|---|---|---|---|
2437
+ |children|node|||Should be `<TableCellHead>` components|
2438
+ |className|string||||
2439
+ |dataTest|string|`'dhis2-uicore-tablerowhead'`|||
2440
+ |role|string||||
2441
+ |suppressZebraStriping|boolean|||Disables the default row striping for this row|
2250
2442
 
2251
2443
  ### TableRow
2252
2444
 
@@ -2254,19 +2446,21 @@ import { TableRowHead } from '@dhis2/ui'
2254
2446
 
2255
2447
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2256
2448
 
2449
+
2257
2450
  ```js
2258
2451
  import { TableRow } from '@dhis2/ui'
2259
2452
  ```
2260
2453
 
2454
+
2261
2455
  #### Props
2262
2456
 
2263
- | Name | Type | Default | Required | Description |
2264
- | --------------------- | ------- | ------------------------- | -------- | ------------------------------------------------------- |
2265
- | children | node | | | Should be `<TableCell>` or `<TableCellHead>` components |
2266
- | className | string | | | |
2267
- | dataTest | string | `'dhis2-uicore-tablerow'` | | |
2268
- | role | string | | | |
2269
- | suppressZebraStriping | boolean | | | Disables the default row striping for this row |
2457
+ |Name|Type|Default|Required|Description|
2458
+ |---|---|---|---|---|
2459
+ |children|node|||Should be `<TableCell>` or `<TableCellHead>` components|
2460
+ |className|string||||
2461
+ |dataTest|string|`'dhis2-uicore-tablerow'`|||
2462
+ |role|string||||
2463
+ |suppressZebraStriping|boolean|||Disables the default row striping for this row|
2270
2464
 
2271
2465
  ### Table
2272
2466
 
@@ -2274,19 +2468,21 @@ import { TableRow } from '@dhis2/ui'
2274
2468
 
2275
2469
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2276
2470
 
2471
+
2277
2472
  ```js
2278
2473
  import { Table } from '@dhis2/ui'
2279
2474
  ```
2280
2475
 
2476
+
2281
2477
  #### Props
2282
2478
 
2283
- | Name | Type | Default | Required | Description |
2284
- | --------------------- | ------- | ---------------------- | -------- | -------------------------------------------------------------------- |
2285
- | children | node | | | Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components |
2286
- | className | string | | | |
2287
- | dataTest | string | `'dhis2-uicore-table'` | | |
2288
- | role | string | | | |
2289
- | suppressZebraStriping | boolean | | | Remove the default striping on alternating rows |
2479
+ |Name|Type|Default|Required|Description|
2480
+ |---|---|---|---|---|
2481
+ |children|node|||Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components|
2482
+ |className|string||||
2483
+ |dataTest|string|`'dhis2-uicore-table'`|||
2484
+ |role|string||||
2485
+ |suppressZebraStriping|boolean|||Remove the default striping on alternating rows|
2290
2486
 
2291
2487
  ### DataTableColumnHeader
2292
2488
 
@@ -2294,34 +2490,36 @@ import { Table } from '@dhis2/ui'
2294
2490
 
2295
2491
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2296
2492
 
2493
+
2297
2494
  ```js
2298
2495
  import { DataTableColumnHeader } from '@dhis2/ui'
2299
2496
  ```
2300
2497
 
2498
+
2301
2499
  #### Props
2302
2500
 
2303
- | Name | Type | Default | Required | Description |
2304
- | ----------------- | --------------------------- | ---------------------------------- | -------- | ----------------------------------------------------------------------------------- |
2305
- | align | 'left' │ 'center' │ 'right' | | | |
2306
- | children | node | | | |
2307
- | className | string | | | |
2308
- | colSpan | string | | | |
2309
- | dataTest | string | `'dhis2-uicore-datatablecellhead'` | | |
2310
- | filter | custom | | | The filter element (JSX), required when onFilterIconClick or showFilter are present |
2311
- | fixed | boolean | | | |
2312
- | large | boolean | | | |
2313
- | left | custom | | | Left or top required when fixed |
2314
- | name | string | | | Can be used to match a column with a property name |
2315
- | role | string | | | |
2316
- | rowSpan | string | | | |
2317
- | scope | string | | | |
2318
- | showFilter | custom | | | |
2319
- | sortDirection | custom | | | |
2320
- | sortIconTitle | string | | | |
2321
- | top | custom | | | Left or top required when fixed |
2322
- | width | string | | | |
2323
- | onFilterIconClick | custom | | | |
2324
- | onSortIconClick | custom | | | Sort icon click callback with `nextSortDirection` and `name` in payload |
2501
+ |Name|Type|Default|Required|Description|
2502
+ |---|---|---|---|---|
2503
+ |align|'left' │ 'center' │ 'right'||||
2504
+ |children|node||||
2505
+ |className|string||||
2506
+ |colSpan|string||||
2507
+ |dataTest|string|`'dhis2-uicore-datatablecellhead'`|||
2508
+ |filter|custom|||The filter element (JSX), required when onFilterIconClick or showFilter are present|
2509
+ |fixed|boolean||||
2510
+ |large|boolean||||
2511
+ |left|custom|||Left or top required when fixed|
2512
+ |name|string|||Can be used to match a column with a property name|
2513
+ |role|string||||
2514
+ |rowSpan|string||||
2515
+ |scope|string||||
2516
+ |showFilter|custom||||
2517
+ |sortDirection|custom||||
2518
+ |sortIconTitle|string||||
2519
+ |top|custom|||Left or top required when fixed|
2520
+ |width|string||||
2521
+ |onFilterIconClick|custom||||
2522
+ |onSortIconClick|custom|||Sort icon click callback with `nextSortDirection` and `name` in payload|
2325
2523
 
2326
2524
  ### DataTableRow
2327
2525
 
@@ -2329,23 +2527,25 @@ import { DataTableColumnHeader } from '@dhis2/ui'
2329
2527
 
2330
2528
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2331
2529
 
2530
+
2332
2531
  ```js
2333
2532
  import { DataTableRow } from '@dhis2/ui'
2334
2533
  ```
2335
2534
 
2535
+
2336
2536
  #### Props
2337
2537
 
2338
- | Name | Type | Default | Required | Description |
2339
- | ----------------- | ------- | ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2340
- | children | node | | | Should be `<DataTableCell>` or `<DataTableCellHead>` components |
2341
- | className | string | | | |
2342
- | dataTest | string | `'dhis2-uicore-datatablerow'` | | |
2343
- | draggable | boolean | | | Renders and additional table cell with drag icon and applies draggable styles |
2344
- | expandableContent | custom | | | This content will be rendered into an additional row with fullwidth cell and the presence of this prop will display an additional table cell with expand icon |
2345
- | expanded | boolean | | | Toggles expand icon (up/down) and expandable content visibility |
2346
- | role | string | | | |
2347
- | selected | boolean | | | Adds a green background color |
2348
- | onExpandToggle | custom | | | Callback for expand icon cell clicks |
2538
+ |Name|Type|Default|Required|Description|
2539
+ |---|---|---|---|---|
2540
+ |children|node|||Should be `<DataTableCell>` or `<DataTableCellHead>` components|
2541
+ |className|string||||
2542
+ |dataTest|string|`'dhis2-uicore-datatablerow'`|||
2543
+ |draggable|boolean|||Renders and additional table cell with drag icon and applies draggable styles|
2544
+ |expandableContent|custom|||This content will be rendered into an additional row with fullwidth cell and the presence of this prop will display an additional table cell with expand icon|
2545
+ |expanded|boolean|||Toggles expand icon (up/down) and expandable content visibility|
2546
+ |role|string||||
2547
+ |selected|boolean|||Adds a green background color|
2548
+ |onExpandToggle|custom|||Callback for expand icon cell clicks|
2349
2549
 
2350
2550
  ### TableBody
2351
2551
 
@@ -2353,19 +2553,21 @@ import { DataTableRow } from '@dhis2/ui'
2353
2553
 
2354
2554
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2355
2555
 
2556
+
2356
2557
  ```js
2357
2558
  import { TableBody } from '@dhis2/ui'
2358
2559
  ```
2359
2560
 
2561
+
2360
2562
  #### Props
2361
2563
 
2362
- | Name | Type | Default | Required | Description |
2363
- | --------- | ------- | -------------------------- | -------- | --------------------------------- |
2364
- | children | node | | | Should be `<TableRow>` components |
2365
- | className | string | | | |
2366
- | dataTest | string | `'dhis2-uicore-tablebody'` | | |
2367
- | loading | boolean | | | |
2368
- | role | string | | | |
2564
+ |Name|Type|Default|Required|Description|
2565
+ |---|---|---|---|---|
2566
+ |children|node|||Should be `<TableRow>` components|
2567
+ |className|string||||
2568
+ |dataTest|string|`'dhis2-uicore-tablebody'`|||
2569
+ |loading|boolean||||
2570
+ |role|string||||
2369
2571
 
2370
2572
  ### TableFoot
2371
2573
 
@@ -2373,18 +2575,20 @@ import { TableBody } from '@dhis2/ui'
2373
2575
 
2374
2576
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2375
2577
 
2578
+
2376
2579
  ```js
2377
2580
  import { TableFoot } from '@dhis2/ui'
2378
2581
  ```
2379
2582
 
2583
+
2380
2584
  #### Props
2381
2585
 
2382
- | Name | Type | Default | Required | Description |
2383
- | --------- | ------ | -------------------------- | -------- | --------------------------------- |
2384
- | children | node | | | Should be `<TableRow>` components |
2385
- | className | string | | | |
2386
- | dataTest | string | `'dhis2-uicore-tablefoot'` | | |
2387
- | role | string | | | |
2586
+ |Name|Type|Default|Required|Description|
2587
+ |---|---|---|---|---|
2588
+ |children|node|||Should be `<TableRow>` components|
2589
+ |className|string||||
2590
+ |dataTest|string|`'dhis2-uicore-tablefoot'`|||
2591
+ |role|string||||
2388
2592
 
2389
2593
  ### TableHead
2390
2594
 
@@ -2392,18 +2596,20 @@ import { TableFoot } from '@dhis2/ui'
2392
2596
 
2393
2597
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2394
2598
 
2599
+
2395
2600
  ```js
2396
2601
  import { TableHead } from '@dhis2/ui'
2397
2602
  ```
2398
2603
 
2604
+
2399
2605
  #### Props
2400
2606
 
2401
- | Name | Type | Default | Required | Description |
2402
- | --------- | ------ | -------------------------- | -------- | ------------------------------------- |
2403
- | children | node | | | Should be `<TableRowHead>` components |
2404
- | className | string | | | |
2405
- | dataTest | string | `'dhis2-uicore-tablehead'` | | |
2406
- | role | string | | | |
2607
+ |Name|Type|Default|Required|Description|
2608
+ |---|---|---|---|---|
2609
+ |children|node|||Should be `<TableRowHead>` components|
2610
+ |className|string||||
2611
+ |dataTest|string|`'dhis2-uicore-tablehead'`|||
2612
+ |role|string||||
2407
2613
 
2408
2614
  ### TableRow
2409
2615
 
@@ -2411,20 +2617,22 @@ import { TableHead } from '@dhis2/ui'
2411
2617
 
2412
2618
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2413
2619
 
2620
+
2414
2621
  ```js
2415
2622
  import { TableRow } from '@dhis2/ui'
2416
2623
  ```
2417
2624
 
2625
+
2418
2626
  #### Props
2419
2627
 
2420
- | Name | Type | Default | Required | Description |
2421
- | --------- | ------- | ------------------------- | -------- | --------------------------------------------------------------- |
2422
- | children | node | | | Should be `<TableDataCell>` or `<TableDataCellHead>` components |
2423
- | className | string | | | |
2424
- | dataTest | string | `'dhis2-uicore-tablerow'` | | |
2425
- | draggable | boolean | | | Applies draggable cursor styles |
2426
- | role | string | | | |
2427
- | selected | boolean | | | Sets a selected (teal) background color |
2628
+ |Name|Type|Default|Required|Description|
2629
+ |---|---|---|---|---|
2630
+ |children|node|||Should be `<TableDataCell>` or `<TableDataCellHead>` components|
2631
+ |className|string||||
2632
+ |dataTest|string|`'dhis2-uicore-tablerow'`|||
2633
+ |draggable|boolean|||Applies draggable cursor styles|
2634
+ |role|string||||
2635
+ |selected|boolean|||Sets a selected (teal) background color|
2428
2636
 
2429
2637
  ### Table
2430
2638
 
@@ -2432,21 +2640,23 @@ import { TableRow } from '@dhis2/ui'
2432
2640
 
2433
2641
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2434
2642
 
2643
+
2435
2644
  ```js
2436
2645
  import { Table } from '@dhis2/ui'
2437
2646
  ```
2438
2647
 
2648
+
2439
2649
  #### Props
2440
2650
 
2441
- | Name | Type | Default | Required | Description |
2442
- | ---------- | ---------------------------------------- | ---------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2443
- | borderless | boolean | | | Removes border from the table |
2444
- | children | node | | | Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components |
2445
- | className | string | | | |
2446
- | dataTest | string | `'dhis2-uicore-table'` | | |
2447
- | layout | 'auto' │ 'fixed' │ 'initial' │ 'inherit' | `'auto'` | | Sets the `table-layout` property. Switching to `fixed` can prevent style<br/>issues when dealing with a table with multiple frozen columns or when dealing<br/>with filter elements in the table headers. |
2448
- | role | string | | | |
2449
- | width | string | `'100%'` | | Sets the `width` property. Providing an explicit width can prevent style<br/>issues when dealing with horizontally scrolling tables with a fixed layout. |
2651
+ |Name|Type|Default|Required|Description|
2652
+ |---|---|---|---|---|
2653
+ |borderless|boolean|||Removes border from the table|
2654
+ |children|node|||Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components|
2655
+ |className|string||||
2656
+ |dataTest|string|`'dhis2-uicore-table'`|||
2657
+ |layout|'auto' │ 'fixed' │ 'initial' │ 'inherit'|`'auto'`||Sets the `table-layout` property. Switching to `fixed` can prevent style<br/>issues when dealing with a table with multiple frozen columns or when dealing<br/>with filter elements in the table headers.|
2658
+ |role|string||||
2659
+ |width|string|`'100%'`||Sets the `width` property. Providing an explicit width can prevent style<br/>issues when dealing with horizontally scrolling tables with a fixed layout.|
2450
2660
 
2451
2661
  ### Tag
2452
2662
 
@@ -2454,23 +2664,25 @@ import { Table } from '@dhis2/ui'
2454
2664
 
2455
2665
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2456
2666
 
2667
+
2457
2668
  ```js
2458
2669
  import { Tag } from '@dhis2/ui'
2459
2670
  ```
2460
2671
 
2672
+
2461
2673
  #### Props
2462
2674
 
2463
- | Name | Type | Default | Required | Description |
2464
- | --------- | ------- | -------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2465
- | bold | boolean | | | Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused. |
2466
- | children | string | | | |
2467
- | className | string | | | |
2468
- | dataTest | string | `'dhis2-uicore-tag'` | | |
2469
- | icon | node | | | Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon. |
2470
- | maxWidth | string | `'240px'` | | |
2471
- | negative | custom | | | Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props |
2472
- | neutral | custom | | | Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props |
2473
- | positive | custom | | | Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props |
2675
+ |Name|Type|Default|Required|Description|
2676
+ |---|---|---|---|---|
2677
+ |bold|boolean|||Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused.|
2678
+ |children|string||||
2679
+ |className|string||||
2680
+ |dataTest|string|`'dhis2-uicore-tag'`|||
2681
+ |icon|node|||Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon.|
2682
+ |maxWidth|string|`'240px'`|||
2683
+ |negative|custom|||Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props|
2684
+ |neutral|custom|||Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props|
2685
+ |positive|custom|||Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props|
2474
2686
 
2475
2687
  ### TextArea
2476
2688
 
@@ -2478,35 +2690,37 @@ import { Tag } from '@dhis2/ui'
2478
2690
 
2479
2691
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2480
2692
 
2693
+
2481
2694
  ```js
2482
2695
  import { TextArea } from '@dhis2/ui'
2483
2696
  ```
2484
2697
 
2698
+
2485
2699
  #### Props
2486
2700
 
2487
- | Name | Type | Default | Required | Description |
2488
- | ------------ | ------------------------------------------- | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
2489
- | autoGrow | boolean | | | Grow the text area in response to overflow instead of adding a scroll bar |
2490
- | className | string | | | |
2491
- | dataTest | string | `'dhis2-uicore-textarea'` | | |
2492
- | dense | boolean | | | Compact mode |
2493
- | disabled | boolean | | | Disables the textarea and makes in non-interactive |
2494
- | error | custom | | | Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props |
2495
- | initialFocus | boolean | | | Grabs initial focus on the page |
2496
- | loading | boolean | | | Adds a loading spinner |
2497
- | name | string | | | Name associated with the text area. Passed in object argument to event handlers. |
2498
- | placeholder | string | | | Placeholder text for an empty textarea |
2499
- | readOnly | boolean | | | Makes the textarea read-only |
2500
- | resize | 'none' │ 'both' │ 'horizontal' │ 'vertical' | `'vertical'` | | [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element |
2501
- | rows | number | `4` | | Initial height of the textarea, in lines of text |
2502
- | tabIndex | string | | | |
2503
- | valid | custom | | | Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props |
2504
- | value | string | | | Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers. |
2505
- | warning | custom | | | Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props |
2506
- | width | string | `'100%'` | | Width of the text area. Can be any valid CSS measurement |
2507
- | onBlur | function | | | Called with signature ({ name: string, value: string }, event) |
2508
- | onChange | function | | | Called with signature ({ name: string, value: string }, event) |
2509
- | onFocus | function | | | Called with signature ({ name: string, value: string }, event) |
2701
+ |Name|Type|Default|Required|Description|
2702
+ |---|---|---|---|---|
2703
+ |autoGrow|boolean|||Grow the text area in response to overflow instead of adding a scroll bar|
2704
+ |className|string||||
2705
+ |dataTest|string|`'dhis2-uicore-textarea'`|||
2706
+ |dense|boolean|||Compact mode|
2707
+ |disabled|boolean|||Disables the textarea and makes in non-interactive|
2708
+ |error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props|
2709
+ |initialFocus|boolean|||Grabs initial focus on the page|
2710
+ |loading|boolean|||Adds a loading spinner|
2711
+ |name|string|||Name associated with the text area. Passed in object argument to event handlers.|
2712
+ |placeholder|string|||Placeholder text for an empty textarea|
2713
+ |readOnly|boolean|||Makes the textarea read-only|
2714
+ |resize|'none' │ 'both' │ 'horizontal' │ 'vertical'|`'vertical'`||[Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element|
2715
+ |rows|number|`4`||Initial height of the textarea, in lines of text|
2716
+ |tabIndex|string||||
2717
+ |valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props|
2718
+ |value|string|||Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.|
2719
+ |warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props|
2720
+ |width|string|`'100%'`||Width of the text area. Can be any valid CSS measurement|
2721
+ |onBlur|function|||Called with signature ({ name: string, value: string }, event)|
2722
+ |onChange|function|||Called with signature ({ name: string, value: string }, event)|
2723
+ |onFocus|function|||Called with signature ({ name: string, value: string }, event)|
2510
2724
 
2511
2725
  ### TextAreaField
2512
2726
 
@@ -2514,39 +2728,41 @@ import { TextArea } from '@dhis2/ui'
2514
2728
 
2515
2729
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2516
2730
 
2731
+
2517
2732
  ```js
2518
2733
  import { TextAreaField } from '@dhis2/ui'
2519
2734
  ```
2520
2735
 
2736
+
2521
2737
  #### Props
2522
2738
 
2523
- | Name | Type | Default | Required | Description |
2524
- | -------------- | ------------------------------------------- | --------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
2525
- | autoGrow | boolean | | | Grow the text area in response to overflow instead of adding a scroll bar |
2526
- | className | string | | | |
2527
- | dataTest | string | `'dhis2-uiwidgets-textareafield'` | | |
2528
- | dense | boolean | | | Compact mode |
2529
- | disabled | boolean | | | Disables the textarea and makes in non-interactive |
2530
- | error | custom | | | Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props |
2531
- | helpText | string | | | Adds useful help text below the textarea |
2532
- | initialFocus | boolean | | | Grabs initial focus on the page |
2533
- | inputWidth | string | | | Sets the width of the textarea. Minimum 220px. Any valid CSS measurement can be used |
2534
- | label | string | | | Labels the textarea |
2535
- | loading | boolean | | | Adds a loading spinner |
2536
- | name | string | | | Name associated with the text area. Passed in object argument to event handlers. |
2537
- | placeholder | string | | | Placeholder text for an empty textarea |
2538
- | readOnly | boolean | | | Makes the textarea read-only |
2539
- | required | boolean | | | Adds an asterisk to the label to indicate this field is required |
2540
- | resize | 'none' │ 'both' │ 'horizontal' │ 'vertical' | `'vertical'` | | [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element |
2541
- | rows | number | `4` | | Initial height of the textarea, in lines of text |
2542
- | tabIndex | string | | | |
2543
- | valid | custom | | | Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props |
2544
- | validationText | string | | | Validation text below the textarea to provide validation feedback. Changes appearance depending on validation status |
2545
- | value | string | | | Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers. |
2546
- | warning | custom | | | Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props |
2547
- | onBlur | function | | | Called with signature ({ name: string, value: string }, event) |
2548
- | onChange | function | | | Called with signature ({ name: string, value: string }, event) |
2549
- | onFocus | function | | | Called with signature ({ name: string, value: string }, event) |
2739
+ |Name|Type|Default|Required|Description|
2740
+ |---|---|---|---|---|
2741
+ |autoGrow|boolean|||Grow the text area in response to overflow instead of adding a scroll bar|
2742
+ |className|string||||
2743
+ |dataTest|string|`'dhis2-uiwidgets-textareafield'`|||
2744
+ |dense|boolean|||Compact mode|
2745
+ |disabled|boolean|||Disables the textarea and makes in non-interactive|
2746
+ |error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props|
2747
+ |helpText|string|||Adds useful help text below the textarea|
2748
+ |initialFocus|boolean|||Grabs initial focus on the page|
2749
+ |inputWidth|string|||Sets the width of the textarea. Minimum 220px. Any valid CSS measurement can be used|
2750
+ |label|string|||Labels the textarea|
2751
+ |loading|boolean|||Adds a loading spinner|
2752
+ |name|string|||Name associated with the text area. Passed in object argument to event handlers.|
2753
+ |placeholder|string|||Placeholder text for an empty textarea|
2754
+ |readOnly|boolean|||Makes the textarea read-only|
2755
+ |required|boolean|||Adds an asterisk to the label to indicate this field is required|
2756
+ |resize|'none' │ 'both' │ 'horizontal' │ 'vertical'|`'vertical'`||[Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element|
2757
+ |rows|number|`4`||Initial height of the textarea, in lines of text|
2758
+ |tabIndex|string||||
2759
+ |valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props|
2760
+ |validationText|string|||Validation text below the textarea to provide validation feedback. Changes appearance depending on validation status|
2761
+ |value|string|||Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.|
2762
+ |warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props|
2763
+ |onBlur|function|||Called with signature ({ name: string, value: string }, event)|
2764
+ |onChange|function|||Called with signature ({ name: string, value: string }, event)|
2765
+ |onFocus|function|||Called with signature ({ name: string, value: string }, event)|
2550
2766
 
2551
2767
  ### Tooltip
2552
2768
 
@@ -2554,22 +2770,24 @@ import { TextAreaField } from '@dhis2/ui'
2554
2770
 
2555
2771
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2556
2772
 
2773
+
2557
2774
  ```js
2558
2775
  import { Tooltip } from '@dhis2/ui'
2559
2776
  ```
2560
2777
 
2778
+
2561
2779
  #### Props
2562
2780
 
2563
- | Name | Type | Default | Required | Description |
2564
- | ---------- | ----------------------------------- | ------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2565
- | children | node │ function | | | If child is a function, it's called with `{ onMouseOver, onMouseOut, ref }` args to apply to a reference element. If child is a node, it is wrapped in a `span` with the appropriate attributes and handlers. |
2566
- | className | string | | | |
2567
- | closeDelay | number | `200` | | Time (in ms) until tooltip closes after mouse out |
2568
- | content | node | | | Content to display when the tooltip is open |
2569
- | dataTest | string | `'dhis2-uicore-tooltip'` | | |
2570
- | maxWidth | number | `300` | | Max width of the tooltip in px |
2571
- | openDelay | number | `200` | | Time (in ms) until tooltip open after mouse over |
2572
- | placement | 'top' │ 'right' │ 'bottom' │ 'left' | `'top'` | | Where to place the tooltip relative to its reference |
2781
+ |Name|Type|Default|Required|Description|
2782
+ |---|---|---|---|---|
2783
+ |children|node │ function|||If child is a function, it's called with `{ onMouseOver, onMouseOut, ref }` args to apply to a reference element. If child is a node, it is wrapped in a `span` with the appropriate attributes and handlers.|
2784
+ |className|string||||
2785
+ |closeDelay|number|`200`||Time (in ms) until tooltip closes after mouse out|
2786
+ |content|node|||Content to display when the tooltip is open|
2787
+ |dataTest|string|`'dhis2-uicore-tooltip'`|||
2788
+ |maxWidth|number|`300`||Max width of the tooltip in px|
2789
+ |openDelay|number|`200`||Time (in ms) until tooltip open after mouse over|
2790
+ |placement|'top' │ 'right' │ 'bottom' │ 'left'|`'top'`||Where to place the tooltip relative to its reference|
2573
2791
 
2574
2792
  ### TransferOption
2575
2793
 
@@ -2577,22 +2795,24 @@ import { Tooltip } from '@dhis2/ui'
2577
2795
 
2578
2796
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2579
2797
 
2798
+
2580
2799
  ```js
2581
2800
  import { TransferOption } from '@dhis2/ui'
2582
2801
  ```
2583
2802
 
2803
+
2584
2804
  #### Props
2585
2805
 
2586
- | Name | Type | Default | Required | Description |
2587
- | ------------- | -------- | ------------------------------- | -------- | ----------- |
2588
- | label | node | | \* | |
2589
- | value | string | | \* | |
2590
- | className | string | | | |
2591
- | dataTest | string | `'dhis2-uicore-transferoption'` | | |
2592
- | disabled | boolean | | | |
2593
- | highlighted | boolean | | | |
2594
- | onClick | function | | | |
2595
- | onDoubleClick | function | | | |
2806
+ |Name|Type|Default|Required|Description|
2807
+ |---|---|---|---|---|
2808
+ |label|node||*||
2809
+ |value|string||*||
2810
+ |className|string||||
2811
+ |dataTest|string|`'dhis2-uicore-transferoption'`|||
2812
+ |disabled|boolean||||
2813
+ |highlighted|boolean||||
2814
+ |onClick|function||||
2815
+ |onDoubleClick|function||||
2596
2816
 
2597
2817
  ### Transfer
2598
2818
 
@@ -2600,56 +2820,58 @@ import { TransferOption } from '@dhis2/ui'
2600
2820
 
2601
2821
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2602
2822
 
2823
+
2603
2824
  ```js
2604
2825
  import { Transfer } from '@dhis2/ui'
2605
2826
  ```
2606
2827
 
2828
+
2607
2829
  #### Props
2608
2830
 
2609
- | Name | Type | Default | Required | Description |
2610
- | ----------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ----------- |
2611
- | options | arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>}) | | \* | |
2612
- | onChange | function | | \* | |
2613
- | addAllText | string | | | |
2614
- | addIndividualText | string | | | |
2615
- | className | string | | | |
2616
- | dataTest | string | `'dhis2-uicore-transfer'` | | |
2617
- | disabled | boolean | | | |
2618
- | enableOrderChange | boolean | | | |
2619
- | filterCallback | function | `defaultFilterCallback` | | |
2620
- | filterCallbackPicked | function | `defaultFilterCallback` | | |
2621
- | filterLabel | string | | | |
2622
- | filterLabelPicked | string | | | |
2623
- | filterPlaceholder | string | | | |
2624
- | filterPlaceholderPicked | string | | | |
2625
- | filterable | boolean | | | |
2626
- | filterablePicked | boolean | | | |
2627
- | height | string | `'240px'` | | |
2628
- | hideFilterInput | boolean | | | |
2629
- | hideFilterInputPicked | boolean | | | |
2630
- | initialSearchTerm | string | `''` | | |
2631
- | initialSearchTermPicked | string | `''` | | |
2632
- | leftFooter | node | | | |
2633
- | leftHeader | node | | | |
2634
- | loading | boolean | | | |
2635
- | loadingPicked | boolean | | | |
2636
- | maxSelections | 1 │ Infinity | `Infinity` | | |
2637
- | optionsWidth | string | `'320px'` | | |
2638
- | removeAllText | string | | | |
2639
- | removeIndividualText | string | | | |
2640
- | renderOption | function | `(option) => <TransferOption {...option} />` | | |
2641
- | rightFooter | node | | | |
2642
- | rightHeader | node | | | |
2643
- | searchTerm | string | | | |
2644
- | searchTermPicked | string | | | |
2645
- | selected | arrayOf(string) | `[]` | | |
2646
- | selectedEmptyComponent | node | | | |
2647
- | selectedWidth | string | `'320px'` | | |
2648
- | sourceEmptyPlaceholder | node | | | |
2649
- | onEndReached | function | | | |
2650
- | onEndReachedPicked | function | | | |
2651
- | onFilterChange | function | | | |
2652
- | onFilterChangePicked | function | | | |
2831
+ |Name|Type|Default|Required|Description|
2832
+ |---|---|---|---|---|
2833
+ |options|arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>})||*||
2834
+ |onChange|function||*||
2835
+ |addAllText|string||||
2836
+ |addIndividualText|string||||
2837
+ |className|string||||
2838
+ |dataTest|string|`'dhis2-uicore-transfer'`|||
2839
+ |disabled|boolean||||
2840
+ |enableOrderChange|boolean||||
2841
+ |filterCallback|function|`defaultFilterCallback`|||
2842
+ |filterCallbackPicked|function|`defaultFilterCallback`|||
2843
+ |filterLabel|string||||
2844
+ |filterLabelPicked|string||||
2845
+ |filterPlaceholder|string||||
2846
+ |filterPlaceholderPicked|string||||
2847
+ |filterable|boolean||||
2848
+ |filterablePicked|boolean||||
2849
+ |height|string|`'240px'`|||
2850
+ |hideFilterInput|boolean||||
2851
+ |hideFilterInputPicked|boolean||||
2852
+ |initialSearchTerm|string|`''`|||
2853
+ |initialSearchTermPicked|string|`''`|||
2854
+ |leftFooter|node||||
2855
+ |leftHeader|node||||
2856
+ |loading|boolean||||
2857
+ |loadingPicked|boolean||||
2858
+ |maxSelections|1 │ Infinity|`Infinity`|||
2859
+ |optionsWidth|string|`'320px'`|||
2860
+ |removeAllText|string||||
2861
+ |removeIndividualText|string||||
2862
+ |renderOption|function|`(option) => <TransferOption {...option} />`|||
2863
+ |rightFooter|node||||
2864
+ |rightHeader|node||||
2865
+ |searchTerm|string||||
2866
+ |searchTermPicked|string||||
2867
+ |selected|arrayOf(string)|`[]`|||
2868
+ |selectedEmptyComponent|node||||
2869
+ |selectedWidth|string|`'320px'`|||
2870
+ |sourceEmptyPlaceholder|node||||
2871
+ |onEndReached|function||||
2872
+ |onEndReachedPicked|function||||
2873
+ |onFilterChange|function||||
2874
+ |onFilterChangePicked|function||||
2653
2875
 
2654
2876
  ### UserAvatar
2655
2877
 
@@ -2657,20 +2879,22 @@ import { Transfer } from '@dhis2/ui'
2657
2879
 
2658
2880
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2659
2881
 
2882
+
2660
2883
  ```js
2661
2884
  import { UserAvatar } from '@dhis2/ui'
2662
2885
  ```
2663
2886
 
2887
+
2664
2888
  #### Props
2665
2889
 
2666
- | Name | Type | Default | Required | Description |
2667
- | ---------- | ------ | --------------------------- | -------- | ----------- |
2668
- | name | string | | \* | |
2669
- | avatarId | string | | | |
2670
- | className | string | | | |
2671
- | dataTest | string | `'dhis2-uicore-useravatar'` | | |
2672
- | extralarge | custom | | | |
2673
- | extrasmall | custom | | | |
2674
- | large | custom | | | |
2675
- | medium | custom | | | |
2676
- | small | custom | | | |
2890
+ |Name|Type|Default|Required|Description|
2891
+ |---|---|---|---|---|
2892
+ |name|string||*||
2893
+ |avatarId|string||||
2894
+ |className|string||||
2895
+ |dataTest|string|`'dhis2-uicore-useravatar'`|||
2896
+ |extralarge|custom||||
2897
+ |extrasmall|custom||||
2898
+ |large|custom||||
2899
+ |medium|custom||||
2900
+ |small|custom||||