@dhis2/ui 8.2.5 → 8.3.1

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 +1479 -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,25 @@ 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
+ |onBackdropClick|function|||Backdrop click handler|
852
+ |onClick|custom|||Click handler - DEPRECATED|
786
853
 
787
854
  ### Legend
788
855
 
@@ -790,18 +857,20 @@ import { Layer } from '@dhis2/ui'
790
857
 
791
858
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
792
859
 
860
+
793
861
  ```js
794
862
  import { Legend } from '@dhis2/ui'
795
863
  ```
796
864
 
865
+
797
866
  #### Props
798
867
 
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 |
868
+ |Name|Type|Default|Required|Description|
869
+ |---|---|---|---|---|
870
+ |children|node||||
871
+ |className|string||||
872
+ |dataTest|string|`'dhis2-uicore-legend'`|||
873
+ |required|boolean|||Indicates the associated field set is required|
805
874
 
806
875
  ### CircularLoader
807
876
 
@@ -809,20 +878,22 @@ import { Legend } from '@dhis2/ui'
809
878
 
810
879
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
811
880
 
881
+
812
882
  ```js
813
883
  import { CircularLoader } from '@dhis2/ui'
814
884
  ```
815
885
 
886
+
816
887
  #### Props
817
888
 
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 | | | |
889
+ |Name|Type|Default|Required|Description|
890
+ |---|---|---|---|---|
891
+ |className|string||||
892
+ |dataTest|string|`'dhis2-uicore-circularloader'`|||
893
+ |extrasmall|custom||||
894
+ |invert|boolean||||
895
+ |large|custom||||
896
+ |small|custom||||
826
897
 
827
898
  ### LinearLoader
828
899
 
@@ -830,20 +901,22 @@ import { CircularLoader } from '@dhis2/ui'
830
901
 
831
902
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
832
903
 
904
+
833
905
  ```js
834
906
  import { LinearLoader } from '@dhis2/ui'
835
907
  ```
836
908
 
909
+
837
910
  #### Props
838
911
 
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 |
912
+ |Name|Type|Default|Required|Description|
913
+ |---|---|---|---|---|
914
+ |amount|number||*|The progression in percent without the '%' sign|
915
+ |className|string||||
916
+ |dataTest|string|`'dhis2-uicore-linearloader'`|||
917
+ |invert|boolean|||Use inverted color scheme|
918
+ |margin|string|`spacers.dp12`||The margin around the loader, can be a full shorthand|
919
+ |width|string|`'300px'`||The width of the entire indicator|
847
920
 
848
921
  ### LogoIcon
849
922
 
@@ -851,16 +924,18 @@ import { LinearLoader } from '@dhis2/ui'
851
924
 
852
925
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
853
926
 
927
+
854
928
  ```js
855
929
  import { LogoIcon } from '@dhis2/ui'
856
930
  ```
857
931
 
932
+
858
933
  #### Props
859
934
 
860
- | Name | Type | Default | Required | Description |
861
- | --------- | ------ | ------------------------- | -------- | ----------- |
862
- | className | string | | | |
863
- | dataTest | string | `'dhis2-uicore-logoicon'` | | |
935
+ |Name|Type|Default|Required|Description|
936
+ |---|---|---|---|---|
937
+ |className|string||||
938
+ |dataTest|string|`'dhis2-uicore-logoicon'`|||
864
939
 
865
940
  ### LogoIconWhite
866
941
 
@@ -868,16 +943,18 @@ import { LogoIcon } from '@dhis2/ui'
868
943
 
869
944
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
870
945
 
946
+
871
947
  ```js
872
948
  import { LogoIconWhite } from '@dhis2/ui'
873
949
  ```
874
950
 
951
+
875
952
  #### Props
876
953
 
877
- | Name | Type | Default | Required | Description |
878
- | --------- | ------ | ------------------------------ | -------- | ----------- |
879
- | className | string | | | |
880
- | dataTest | string | `'dhis2-uicore-logoiconwhite'` | | |
954
+ |Name|Type|Default|Required|Description|
955
+ |---|---|---|---|---|
956
+ |className|string||||
957
+ |dataTest|string|`'dhis2-uicore-logoiconwhite'`|||
881
958
 
882
959
  ### Logo
883
960
 
@@ -885,16 +962,18 @@ import { LogoIconWhite } from '@dhis2/ui'
885
962
 
886
963
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
887
964
 
965
+
888
966
  ```js
889
967
  import { Logo } from '@dhis2/ui'
890
968
  ```
891
969
 
970
+
892
971
  #### Props
893
972
 
894
- | Name | Type | Default | Required | Description |
895
- | --------- | ------ | --------------------- | -------- | ----------- |
896
- | className | string | | | |
897
- | dataTest | string | `'dhis2-uicore-logo'` | | |
973
+ |Name|Type|Default|Required|Description|
974
+ |---|---|---|---|---|
975
+ |className|string||||
976
+ |dataTest|string|`'dhis2-uicore-logo'`|||
898
977
 
899
978
  ### LogoWhite
900
979
 
@@ -902,16 +981,18 @@ import { Logo } from '@dhis2/ui'
902
981
 
903
982
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
904
983
 
984
+
905
985
  ```js
906
986
  import { LogoWhite } from '@dhis2/ui'
907
987
  ```
908
988
 
989
+
909
990
  #### Props
910
991
 
911
- | Name | Type | Default | Required | Description |
912
- | --------- | ------ | -------------------------- | -------- | ----------- |
913
- | className | string | | | |
914
- | dataTest | string | `'dhis2-uicore-logowhite'` | | |
992
+ |Name|Type|Default|Required|Description|
993
+ |---|---|---|---|---|
994
+ |className|string||||
995
+ |dataTest|string|`'dhis2-uicore-logowhite'`|||
915
996
 
916
997
  ### FlyoutMenu
917
998
 
@@ -919,20 +1000,22 @@ import { LogoWhite } from '@dhis2/ui'
919
1000
 
920
1001
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
921
1002
 
1003
+
922
1004
  ```js
923
1005
  import { FlyoutMenu } from '@dhis2/ui'
924
1006
  ```
925
1007
 
1008
+
926
1009
  #### Props
927
1010
 
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'` | | |
1011
+ |Name|Type|Default|Required|Description|
1012
+ |---|---|---|---|---|
1013
+ |children|node|||Typically, but not limited to, `MenuItem` components|
1014
+ |className|string||||
1015
+ |dataTest|string|`'dhis2-uicore-menu'`|||
1016
+ |dense|boolean|||Menu uses smaller dimensions|
1017
+ |maxHeight|string|`'auto'`|||
1018
+ |maxWidth|string|`'380px'`|||
936
1019
 
937
1020
  ### Menu
938
1021
 
@@ -940,18 +1023,20 @@ import { FlyoutMenu } from '@dhis2/ui'
940
1023
 
941
1024
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
942
1025
 
1026
+
943
1027
  ```js
944
1028
  import { Menu } from '@dhis2/ui'
945
1029
  ```
946
1030
 
1031
+
947
1032
  #### Props
948
1033
 
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 |
1034
+ |Name|Type|Default|Required|Description|
1035
+ |---|---|---|---|---|
1036
+ |children|node|||Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader`|
1037
+ |className|string||||
1038
+ |dataTest|string|`'dhis2-uicore-menulist'`|||
1039
+ |dense|boolean|||Applies `dense` property to all child components unless already specified|
955
1040
 
956
1041
  ### MenuDivider
957
1042
 
@@ -959,17 +1044,19 @@ import { Menu } from '@dhis2/ui'
959
1044
 
960
1045
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
961
1046
 
1047
+
962
1048
  ```js
963
1049
  import { MenuDivider } from '@dhis2/ui'
964
1050
  ```
965
1051
 
1052
+
966
1053
  #### Props
967
1054
 
968
- | Name | Type | Default | Required | Description |
969
- | --------- | ------- | ---------------------------- | -------- | ----------- |
970
- | className | string | | | |
971
- | dataTest | string | `'dhis2-uicore-menudivider'` | | |
972
- | dense | boolean | | | |
1055
+ |Name|Type|Default|Required|Description|
1056
+ |---|---|---|---|---|
1057
+ |className|string||||
1058
+ |dataTest|string|`'dhis2-uicore-menudivider'`|||
1059
+ |dense|boolean||||
973
1060
 
974
1061
  ### MenuItem
975
1062
 
@@ -977,30 +1064,32 @@ import { MenuDivider } from '@dhis2/ui'
977
1064
 
978
1065
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
979
1066
 
1067
+
980
1068
  ```js
981
1069
  import { MenuItem } from '@dhis2/ui'
982
1070
  ```
983
1071
 
1072
+
984
1073
  #### Props
985
1074
 
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)` |
1075
+ |Name|Type|Default|Required|Description|
1076
+ |---|---|---|---|---|
1077
+ |active|boolean||||
1078
+ |chevron|boolean||||
1079
+ |children|node|||Nested menu items can become submenus.<br/>See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo|
1080
+ |className|string||||
1081
+ |dataTest|string|`'dhis2-uicore-menuitem'`|||
1082
+ |dense|boolean||||
1083
+ |destructive|boolean||||
1084
+ |disabled|boolean||||
1085
+ |href|string|||For using menu item as a link|
1086
+ |icon|node|||An icon for the left side of the menu item|
1087
+ |label|node|||Text in the menu item|
1088
+ |showSubMenu|boolean|||When true, nested menu items are shown in a Popper|
1089
+ |target|string|||For using menu item as a link|
1090
+ |toggleSubMenu|function|||On click, this function is called (without args)|
1091
+ |value|string|||Value associated with item. Passed as an argument to onClick handler.|
1092
+ |onClick|function|||Click handler called with signature `({ value: string }, event)`|
1004
1093
 
1005
1094
  ### MenuSectionHeader
1006
1095
 
@@ -1008,19 +1097,21 @@ import { MenuItem } from '@dhis2/ui'
1008
1097
 
1009
1098
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1010
1099
 
1100
+
1011
1101
  ```js
1012
1102
  import { MenuSectionHeader } from '@dhis2/ui'
1013
1103
  ```
1014
1104
 
1105
+
1015
1106
  #### Props
1016
1107
 
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 | | | |
1108
+ |Name|Type|Default|Required|Description|
1109
+ |---|---|---|---|---|
1110
+ |className|string||||
1111
+ |dataTest|string|`'dhis2-uicore-menusectionheader'`|||
1112
+ |dense|boolean||||
1113
+ |hideDivider|boolean||||
1114
+ |label|node||||
1024
1115
 
1025
1116
  ### Modal
1026
1117
 
@@ -1028,23 +1119,25 @@ import { MenuSectionHeader } from '@dhis2/ui'
1028
1119
 
1029
1120
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1030
1121
 
1122
+
1031
1123
  ```js
1032
1124
  import { Modal } from '@dhis2/ui'
1033
1125
  ```
1034
1126
 
1127
+
1035
1128
  #### Props
1036
1129
 
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 |
1130
+ |Name|Type|Default|Required|Description|
1131
+ |---|---|---|---|---|
1132
+ |children|node||||
1133
+ |className|string||||
1134
+ |dataTest|string|`'dhis2-uicore-modal'`|||
1135
+ |fluid|boolean||||
1136
+ |hide|boolean||||
1137
+ |large|custom||||
1138
+ |position|custom|`'top'`|||
1139
+ |small|custom||||
1140
+ |onClose|function|||Callback used when the Modal closes|
1048
1141
 
1049
1142
  ### ModalActions
1050
1143
 
@@ -1052,16 +1145,18 @@ import { Modal } from '@dhis2/ui'
1052
1145
 
1053
1146
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1054
1147
 
1148
+
1055
1149
  ```js
1056
1150
  import { ModalActions } from '@dhis2/ui'
1057
1151
  ```
1058
1152
 
1153
+
1059
1154
  #### Props
1060
1155
 
1061
- | Name | Type | Default | Required | Description |
1062
- | -------- | ------ | ----------------------------- | -------- | ----------- |
1063
- | children | node | | | |
1064
- | dataTest | string | `'dhis2-uicore-modalactions'` | | |
1156
+ |Name|Type|Default|Required|Description|
1157
+ |---|---|---|---|---|
1158
+ |children|node||||
1159
+ |dataTest|string|`'dhis2-uicore-modalactions'`|||
1065
1160
 
1066
1161
  ### ModalContent
1067
1162
 
@@ -1069,17 +1164,19 @@ import { ModalActions } from '@dhis2/ui'
1069
1164
 
1070
1165
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1071
1166
 
1167
+
1072
1168
  ```js
1073
1169
  import { ModalContent } from '@dhis2/ui'
1074
1170
  ```
1075
1171
 
1172
+
1076
1173
  #### Props
1077
1174
 
1078
- | Name | Type | Default | Required | Description |
1079
- | --------- | ------ | ----------------------------- | -------- | ----------- |
1080
- | children | node | | | |
1081
- | className | string | | | |
1082
- | dataTest | string | `'dhis2-uicore-modalcontent'` | | |
1175
+ |Name|Type|Default|Required|Description|
1176
+ |---|---|---|---|---|
1177
+ |children|node||||
1178
+ |className|string||||
1179
+ |dataTest|string|`'dhis2-uicore-modalcontent'`|||
1083
1180
 
1084
1181
  ### ModalTitle
1085
1182
 
@@ -1087,16 +1184,18 @@ import { ModalContent } from '@dhis2/ui'
1087
1184
 
1088
1185
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1089
1186
 
1187
+
1090
1188
  ```js
1091
1189
  import { ModalTitle } from '@dhis2/ui'
1092
1190
  ```
1093
1191
 
1192
+
1094
1193
  #### Props
1095
1194
 
1096
- | Name | Type | Default | Required | Description |
1097
- | -------- | ------ | --------------------------- | -------- | ----------- |
1098
- | children | string | | | |
1099
- | dataTest | string | `'dhis2-uicore-modaltitle'` | | |
1195
+ |Name|Type|Default|Required|Description|
1196
+ |---|---|---|---|---|
1197
+ |children|string||||
1198
+ |dataTest|string|`'dhis2-uicore-modaltitle'`|||
1100
1199
 
1101
1200
  ### Node
1102
1201
 
@@ -1104,22 +1203,24 @@ import { ModalTitle } from '@dhis2/ui'
1104
1203
 
1105
1204
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1106
1205
 
1206
+
1107
1207
  ```js
1108
1208
  import { Node } from '@dhis2/ui'
1109
1209
  ```
1110
1210
 
1211
+
1111
1212
  #### Props
1112
1213
 
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 | | | |
1214
+ |Name|Type|Default|Required|Description|
1215
+ |---|---|---|---|---|
1216
+ |children|node|||Content below this level of the hierarchy; children are revealed when this leaf is 'open'|
1217
+ |className|string||||
1218
+ |component|element|||Content/label for this leaf, for example a checkbox|
1219
+ |dataTest|string|`'dhis2-uicore-node'`|||
1220
+ |icon|node|||A custom icon to use instead of a toggle arrow|
1221
+ |open|boolean||||
1222
+ |onClose|function||||
1223
+ |onOpen|function||||
1123
1224
 
1124
1225
  ### NoticeBox
1125
1226
 
@@ -1127,20 +1228,22 @@ import { Node } from '@dhis2/ui'
1127
1228
 
1128
1229
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1129
1230
 
1231
+
1130
1232
  ```js
1131
1233
  import { NoticeBox } from '@dhis2/ui'
1132
1234
  ```
1133
1235
 
1236
+
1134
1237
  #### Props
1135
1238
 
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 |
1239
+ |Name|Type|Default|Required|Description|
1240
+ |---|---|---|---|---|
1241
+ |children|node||||
1242
+ |className|string||||
1243
+ |dataTest|string|`'dhis2-uicore-noticebox'`|||
1244
+ |error|custom|||Applies 'error' message styles. Mutually exclusive with the `warning` prop|
1245
+ |title|string||||
1246
+ |warning|custom|||Applies 'warning' message styles. Mutually exclusive with the `error` prop|
1144
1247
 
1145
1248
  ### OrganisationUnitTree
1146
1249
 
@@ -1148,34 +1251,36 @@ import { NoticeBox } from '@dhis2/ui'
1148
1251
 
1149
1252
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1150
1253
 
1254
+
1151
1255
  ```js
1152
1256
  import { OrganisationUnitTree } from '@dhis2/ui'
1153
1257
  ```
1154
1258
 
1259
+
1155
1260
  #### Props
1156
1261
 
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 |
1262
+ |Name|Type|Default|Required|Description|
1263
+ |---|---|---|---|---|
1264
+ |roots|string │ arrayOf(string)||*|Root org unit ID(s)|
1265
+ |onChange|function||*|Will be called with the following object:<br/>`{ id: string, displayName: string, path: string, checked: boolean, selected: string[] }`|
1266
+ |autoExpandLoadingError|boolean|||When set, the error when loading children fails will be shown automatically|
1267
+ |dataTest|string|`'dhis2-uiwidgets-orgunittree'`|||
1268
+ |disableSelection|boolean|||When set to true, no unit can be selected|
1269
+ |expanded|custom||||
1270
+ |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.|
1271
+ |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|
1272
+ |handleCollapse|custom||||
1273
+ |handleExpand|custom||||
1274
+ |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|
1275
+ |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|
1276
+ |isUserDataViewFallback|boolean|||When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units|
1277
+ |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/>```|
1278
+ |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 (`/`)|
1279
+ |singleSelection|boolean|||When set, no checkboxes will be displayed and only the first selected path in `selected` will be highlighted|
1280
+ |suppressAlphabeticalSorting|boolean|||Turns off alphabetical sorting of units|
1281
+ |onChildrenLoaded|function|||Called with the children's data that was loaded|
1282
+ |onCollapse|function|||Called with `{ path: string }` with the path of the parent of the level closed|
1283
+ |onExpand|function|||Called with `{ path: string }` with the path of the parent of the level opened|
1179
1284
 
1180
1285
  ### Label
1181
1286
 
@@ -1183,30 +1288,32 @@ import { OrganisationUnitTree } from '@dhis2/ui'
1183
1288
 
1184
1289
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1185
1290
 
1291
+
1186
1292
  ```js
1187
1293
  import { Label } from '@dhis2/ui'
1188
1294
  ```
1189
1295
 
1296
+
1190
1297
  #### Props
1191
1298
 
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 | | | |
1299
+ |Name|Type|Default|Required|Description|
1300
+ |---|---|---|---|---|
1301
+ |children|any||*||
1302
+ |dataTest|string||*||
1303
+ |fullPath|string||*||
1304
+ |hasChildren|boolean||*||
1305
+ |loading|boolean||*||
1306
+ |node|{<br/> "displayName": "string",<br/> "id": "string",<br/> "children": "number",<br/> "path": "string"<br/>}||*||
1307
+ |open|boolean||*||
1308
+ |rootId|string||*||
1309
+ |onChange|function||*||
1310
+ |onToggleOpen|function||*||
1311
+ |checked|boolean||||
1312
+ |disableSelection|boolean||||
1313
+ |hasSelectedDescendants|boolean||||
1314
+ |highlighted|boolean||||
1315
+ |selected|arrayOf(custom)||||
1316
+ |singleSelection|boolean||||
1210
1317
 
1211
1318
  ### Pagination
1212
1319
 
@@ -1214,34 +1321,36 @@ import { Label } from '@dhis2/ui'
1214
1321
 
1215
1322
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1216
1323
 
1324
+
1217
1325
  ```js
1218
1326
  import { Pagination } from '@dhis2/ui'
1219
1327
  ```
1220
1328
 
1329
+
1221
1330
  #### Props
1222
1331
 
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 | | | |
1332
+ |Name|Type|Default|Required|Description|
1333
+ |---|---|---|---|---|
1334
+ |page|number||*||
1335
+ |pageSize|number||*||
1336
+ |className|string||||
1337
+ |dataTest|string|`'dhis2-uiwidgets-pagination'`|||
1338
+ |disabled|boolean||||
1339
+ |hidePageSelect|boolean||||
1340
+ |hidePageSizeSelect|boolean||||
1341
+ |hidePageSummary|boolean||||
1342
+ |isLastPage|boolean||||
1343
+ |nextPageText|string │ function|`() => i18n.t('Next')`|||
1344
+ |pageCount|number||||
1345
+ |pageLength|custom||||
1346
+ |pageSelectText|string │ function|`() => i18n.t('Page')`|||
1347
+ |pageSizeSelectText|string │ function|`() => i18n.t('Items per page')`|||
1348
+ |pageSizes|arrayOf(string)|`['5', '10', '20', '30', '40', '50', '75', '100']`|||
1349
+ |pageSummaryText|string │ function|`getDefaultPageSummaryText`|||
1350
+ |previousPageText|string │ function|`() => i18n.t('Previous')`|||
1351
+ |total|number||||
1352
+ |onPageChange|function||||
1353
+ |onPageSizeChange|function||||
1245
1354
 
1246
1355
  ### Popover
1247
1356
 
@@ -1249,25 +1358,27 @@ import { Pagination } from '@dhis2/ui'
1249
1358
 
1250
1359
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1251
1360
 
1361
+
1252
1362
  ```js
1253
1363
  import { Popover } from '@dhis2/ui'
1254
1364
  ```
1255
1365
 
1366
+
1256
1367
  #### Props
1257
1368
 
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 | | | |
1369
+ |Name|Type|Default|Required|Description|
1370
+ |---|---|---|---|---|
1371
+ |children|node||*||
1372
+ |arrow|boolean|`true`||Show or hide the arrow|
1373
+ |className|string||||
1374
+ |dataTest|string|`'dhis2-uicore-popover'`|||
1375
+ |elevation|string|`elevations.e200`||Box-shadow to create appearance of elevation. Use `elevations` constants from the UI library.|
1376
+ |maxWidth|number|`360`|||
1377
+ |observePopperResize|boolean||||
1378
+ |observeReferenceResize|boolean||||
1379
+ |placement|custom|`'top'`|||
1380
+ |reference|custom|||A React ref that refers to the element the Popover should position against|
1381
+ |onClickOutside|function||||
1271
1382
 
1272
1383
  ### Popper
1273
1384
 
@@ -1275,24 +1386,26 @@ import { Popover } from '@dhis2/ui'
1275
1386
 
1276
1387
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1277
1388
 
1389
+
1278
1390
  ```js
1279
1391
  import { Popper } from '@dhis2/ui'
1280
1392
  ```
1281
1393
 
1394
+
1282
1395
  #### Props
1283
1396
 
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/) |
1397
+ |Name|Type|Default|Required|Description|
1398
+ |---|---|---|---|---|
1399
+ |children|node||*|Content inside the Popper|
1400
+ |className|string||||
1401
+ |dataTest|string|`'dhis2-uicore-popper'`|||
1402
+ |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/)|
1403
+ |observePopperResize|boolean|||Makes the Popper update position when the **Popper content** changes size|
1404
+ |observeReferenceResize|boolean|||Makes the Popper update position when the **reference element** changes size|
1405
+ |placement|custom|`'auto'`||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
1406
+ |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|
1407
+ |strategy|'absolute' │ 'fixed'|||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
1408
+ |onFirstUpdate|function|||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
1296
1409
 
1297
1410
  ### Radio
1298
1411
 
@@ -1300,30 +1413,32 @@ import { Popper } from '@dhis2/ui'
1300
1413
 
1301
1414
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1302
1415
 
1416
+
1303
1417
  ```js
1304
1418
  import { Radio } from '@dhis2/ui'
1305
1419
  ```
1306
1420
 
1421
+
1307
1422
  #### Props
1308
1423
 
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)` |
1424
+ |Name|Type|Default|Required|Description|
1425
+ |---|---|---|---|---|
1426
+ |checked|boolean||||
1427
+ |className|string||||
1428
+ |dataTest|string|`'dhis2-uicore-radio'`|||
1429
+ |dense|boolean||||
1430
+ |disabled|boolean||||
1431
+ |error|custom|||Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props|
1432
+ |initialFocus|boolean||||
1433
+ |label|node||||
1434
+ |name|string|||Name associated with this element. Passed in object to event handler functions|
1435
+ |tabIndex|string||||
1436
+ |valid|custom|||Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props|
1437
+ |value|string|||Value associated with this element. Passed in object to event handler functions|
1438
+ |warning|custom|||Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props|
1439
+ |onBlur|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
1440
+ |onChange|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
1441
+ |onFocus|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
1327
1442
 
1328
1443
  ### Required
1329
1444
 
@@ -1331,15 +1446,17 @@ import { Radio } from '@dhis2/ui'
1331
1446
 
1332
1447
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1333
1448
 
1449
+
1334
1450
  ```js
1335
1451
  import { Required } from '@dhis2/ui'
1336
1452
  ```
1337
1453
 
1454
+
1338
1455
  #### Props
1339
1456
 
1340
- | Name | Type | Default | Required | Description |
1341
- | -------- | ------ | ------- | -------- | ----------- |
1342
- | dataTest | string | | \* | |
1457
+ |Name|Type|Default|Required|Description|
1458
+ |---|---|---|---|---|
1459
+ |dataTest|string||*||
1343
1460
 
1344
1461
  ### SegmentedControl
1345
1462
 
@@ -1347,17 +1464,19 @@ import { Required } from '@dhis2/ui'
1347
1464
 
1348
1465
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1349
1466
 
1467
+
1350
1468
  ```js
1351
1469
  import { SegmentedControl } from '@dhis2/ui'
1352
1470
  ```
1353
1471
 
1472
+
1354
1473
  #### Props
1355
1474
 
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)` |
1475
+ |Name|Type|Default|Required|Description|
1476
+ |---|---|---|---|---|
1477
+ |options|arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>})||*|Options to populate the segmented control|
1478
+ |selected|string||*|An option to select; should match the `value` property of the option to be selected|
1479
+ |onChange|function||*|Called with the signature `({ value: string }, event)`|
1361
1480
 
1362
1481
  ### Input
1363
1482
 
@@ -1365,25 +1484,27 @@ import { SegmentedControl } from '@dhis2/ui'
1365
1484
 
1366
1485
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1367
1486
 
1487
+
1368
1488
  ```js
1369
1489
  import { Input } from '@dhis2/ui'
1370
1490
  ```
1371
1491
 
1492
+
1372
1493
  #### Props
1373
1494
 
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 | | | |
1495
+ |Name|Type|Default|Required|Description|
1496
+ |---|---|---|---|---|
1497
+ |dataTest|string||*||
1498
+ |className|string||||
1499
+ |clearText|custom||||
1500
+ |clearable|boolean||||
1501
+ |disabled|boolean||||
1502
+ |inputMaxHeight|string|`'100px'`|||
1503
+ |options|node||||
1504
+ |placeholder|string||||
1505
+ |prefix|string||||
1506
+ |selected|arrayOf(string)||||
1507
+ |onChange|function||||
1387
1508
 
1388
1509
  ### Menu
1389
1510
 
@@ -1391,19 +1512,21 @@ import { Input } from '@dhis2/ui'
1391
1512
 
1392
1513
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1393
1514
 
1515
+
1394
1516
  ```js
1395
1517
  import { Menu } from '@dhis2/ui'
1396
1518
  ```
1397
1519
 
1520
+
1398
1521
  #### Props
1399
1522
 
1400
- | Name | Type | Default | Required | Description |
1401
- | -------- | --------------- | ------- | -------- | ----------- |
1402
- | dataTest | string | | \* | |
1403
- | empty | node | `''` | | |
1404
- | options | node | | | |
1405
- | selected | arrayOf(string) | | | |
1406
- | onChange | function | | | |
1523
+ |Name|Type|Default|Required|Description|
1524
+ |---|---|---|---|---|
1525
+ |dataTest|string||*||
1526
+ |empty|node|`''`|||
1527
+ |options|node||||
1528
+ |selected|arrayOf(string)||||
1529
+ |onChange|function||||
1407
1530
 
1408
1531
  ### MultiSelect
1409
1532
 
@@ -1411,40 +1534,42 @@ import { Menu } from '@dhis2/ui'
1411
1534
 
1412
1535
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1413
1536
 
1537
+
1414
1538
  ```js
1415
1539
  import { MultiSelect } from '@dhis2/ui'
1416
1540
  ```
1417
1541
 
1542
+
1418
1543
  #### Props
1419
1544
 
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 | | | |
1545
+ |Name|Type|Default|Required|Description|
1546
+ |---|---|---|---|---|
1547
+ |children|node||||
1548
+ |className|string||||
1549
+ |clearText|custom|||Required if `clearable` prop is `true`|
1550
+ |clearable|boolean|||Adds a 'clear' option to the menu|
1551
+ |dataTest|string|`'dhis2-uicore-multiselect'`|||
1552
+ |dense|boolean||||
1553
+ |disabled|boolean||||
1554
+ |empty|node||||
1555
+ |error|custom||||
1556
+ |filterPlaceholder|string||||
1557
+ |filterable|boolean|||Adds a 'filter' field to the menu|
1558
+ |initialFocus|boolean||||
1559
+ |inputMaxHeight|string||||
1560
+ |loading|boolean||||
1561
+ |loadingText|string||||
1562
+ |maxHeight|string||||
1563
+ |noMatchText|custom|||Required if `filterable` prop is `true`|
1564
+ |placeholder|string||||
1565
+ |prefix|string||||
1566
+ |selected|arrayOf(string)|`[]`|||
1567
+ |tabIndex|string||||
1568
+ |valid|custom||||
1569
+ |warning|custom||||
1570
+ |onBlur|function||||
1571
+ |onChange|function||||
1572
+ |onFocus|function||||
1448
1573
 
1449
1574
  ### MultiSelectField
1450
1575
 
@@ -1452,45 +1577,47 @@ import { MultiSelect } from '@dhis2/ui'
1452
1577
 
1453
1578
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1454
1579
 
1580
+
1455
1581
  ```js
1456
1582
  import { MultiSelectField } from '@dhis2/ui'
1457
1583
  ```
1458
1584
 
1585
+
1459
1586
  #### Props
1460
1587
 
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)` |
1588
+ |Name|Type|Default|Required|Description|
1589
+ |---|---|---|---|---|
1590
+ |children|node|||Should be `MultiSelectOption` components|
1591
+ |className|string||||
1592
+ |clearText|string │ function|`() => i18n.t('Clear')`||Label for the button that clears selections|
1593
+ |clearable|boolean|||Adds a button to the MultiSelect that clears selections when pressed|
1594
+ |dataTest|string|`'dhis2-uiwidgets-multiselectfield'`|||
1595
+ |dense|boolean|||Makes the MultiSelect smaller|
1596
+ |disabled|boolean|||Disables the MultiSelect|
1597
+ |empty|node │ function|`() => i18n.t('No data found')`||Text to display when there are no options|
1598
+ |error|custom|||Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props|
1599
+ |filterPlaceholder|node │ function|`() => i18n.t('Type to filter options')`||Placeholder text to show in the filter field when it is empty|
1600
+ |filterable|boolean|||Adds a field to filter options|
1601
+ |helpText|string|||Useful guiding text to display below the MultiSelect|
1602
+ |initialFocus|boolean|||Grabs initial focus on the page|
1603
+ |inputMaxHeight|string|||Constrains the height of the input|
1604
+ |inputWidth|string|||Sets the width of the input. Can be any valid CSS measurement|
1605
+ |label|string|||Text for the label above the MultiSelect|
1606
+ |loading|boolean|||Applies a loading appearance to the dropdown options|
1607
+ |loadingText|string │ function|`() => i18n.t('Loading options')`||Text to display when `loading` is true|
1608
+ |maxHeight|string|||Constrains height of the MultiSelect|
1609
+ |noMatchText|string │ function|`() => i18n.t('No options found')`||Text to display when there are no filter results|
1610
+ |placeholder|string|||Placeholder text when the MultiSelect is empty|
1611
+ |prefix|string|||Leading text to prefix selections|
1612
+ |required|boolean|||Indicates that a selection is required|
1613
+ |selected|arrayOf(string)|`[]`||Selected items in the MultiSelect (each string should refer to the item's `value` attribute)|
1614
+ |tabIndex|string||||
1615
+ |valid|custom|||Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props|
1616
+ |validationText|string|||Text to provide form validation feedback. Receives styles according to validation status|
1617
+ |warning|custom|||Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props|
1618
+ |onBlur|function|||Called with signature `({ selected: [String] }, event)`|
1619
+ |onChange|function|||Called with signature `({ selected: [String] }, event)`|
1620
+ |onFocus|function|||Called with signature `({ selected: [String] }, event)`|
1494
1621
 
1495
1622
  ### MultiSelectOption
1496
1623
 
@@ -1498,21 +1625,23 @@ import { MultiSelectField } from '@dhis2/ui'
1498
1625
 
1499
1626
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1500
1627
 
1628
+
1501
1629
  ```js
1502
1630
  import { MultiSelectOption } from '@dhis2/ui'
1503
1631
  ```
1504
1632
 
1633
+
1505
1634
  #### Props
1506
1635
 
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 | | | |
1636
+ |Name|Type|Default|Required|Description|
1637
+ |---|---|---|---|---|
1638
+ |label|string||*||
1639
+ |value|string||*||
1640
+ |active|boolean||||
1641
+ |className|string||||
1642
+ |dataTest|string|`'dhis2-uicore-multiselectoption'`|||
1643
+ |disabled|boolean||||
1644
+ |onClick|function||||
1516
1645
 
1517
1646
  ### Input
1518
1647
 
@@ -1520,25 +1649,27 @@ import { MultiSelectOption } from '@dhis2/ui'
1520
1649
 
1521
1650
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1522
1651
 
1652
+
1523
1653
  ```js
1524
1654
  import { Input } from '@dhis2/ui'
1525
1655
  ```
1526
1656
 
1657
+
1527
1658
  #### Props
1528
1659
 
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 | | | |
1660
+ |Name|Type|Default|Required|Description|
1661
+ |---|---|---|---|---|
1662
+ |dataTest|string||*||
1663
+ |className|string||||
1664
+ |clearText|custom||||
1665
+ |clearable|boolean||||
1666
+ |disabled|boolean||||
1667
+ |inputMaxHeight|string|`'100px'`|||
1668
+ |options|node||||
1669
+ |placeholder|string||||
1670
+ |prefix|string||||
1671
+ |selected|string||||
1672
+ |onChange|function||||
1542
1673
 
1543
1674
  ### Menu
1544
1675
 
@@ -1546,21 +1677,23 @@ import { Input } from '@dhis2/ui'
1546
1677
 
1547
1678
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1548
1679
 
1680
+
1549
1681
  ```js
1550
1682
  import { Menu } from '@dhis2/ui'
1551
1683
  ```
1552
1684
 
1685
+
1553
1686
  #### Props
1554
1687
 
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 | | | |
1688
+ |Name|Type|Default|Required|Description|
1689
+ |---|---|---|---|---|
1690
+ |dataTest|string||*||
1691
+ |empty|node|`''`|||
1692
+ |handleClose|function||||
1693
+ |handleFocusInput|function||||
1694
+ |options|node||||
1695
+ |selected|string||||
1696
+ |onChange|function||||
1564
1697
 
1565
1698
  ### SingleSelect
1566
1699
 
@@ -1568,40 +1701,42 @@ import { Menu } from '@dhis2/ui'
1568
1701
 
1569
1702
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1570
1703
 
1704
+
1571
1705
  ```js
1572
1706
  import { SingleSelect } from '@dhis2/ui'
1573
1707
  ```
1574
1708
 
1709
+
1575
1710
  #### Props
1576
1711
 
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 | | | |
1712
+ |Name|Type|Default|Required|Description|
1713
+ |---|---|---|---|---|
1714
+ |children|node||||
1715
+ |className|string||||
1716
+ |clearText|custom|||Text on button that clears selection. Required if `clearable` prop is true|
1717
+ |clearable|boolean|||Adds a button to clear selection|
1718
+ |dataTest|string|`'dhis2-uicore-singleselect'`|||
1719
+ |dense|boolean||||
1720
+ |disabled|boolean||||
1721
+ |empty|node|||Text or component to display when there are no options|
1722
+ |error|custom|||Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props|
1723
+ |filterPlaceholder|string||||
1724
+ |filterable|boolean|||Adds a filter field to add text to filter options|
1725
+ |initialFocus|boolean||||
1726
+ |inputMaxHeight|string||||
1727
+ |loading|boolean||||
1728
+ |loadingText|string||||
1729
+ |maxHeight|string||||
1730
+ |noMatchText|custom|||Text to show when filter returns no results. Required if `filterable` prop is true|
1731
+ |placeholder|string||||
1732
+ |prefix|string||||
1733
+ |selected|string|`''`|||
1734
+ |tabIndex|string||||
1735
+ |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props|
1736
+ |warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
1737
+ |onBlur|function||||
1738
+ |onChange|function||||
1739
+ |onFocus|function||||
1605
1740
 
1606
1741
  ### SingleSelectField
1607
1742
 
@@ -1609,45 +1744,47 @@ import { SingleSelect } from '@dhis2/ui'
1609
1744
 
1610
1745
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1611
1746
 
1747
+
1612
1748
  ```js
1613
1749
  import { SingleSelectField } from '@dhis2/ui'
1614
1750
  ```
1615
1751
 
1752
+
1616
1753
  #### Props
1617
1754
 
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)` |
1755
+ |Name|Type|Default|Required|Description|
1756
+ |---|---|---|---|---|
1757
+ |children|node|||Should be `SingleSelectOption` components|
1758
+ |className|string||||
1759
+ |clearText|string │ function|`() => i18n.t('Clear')`||Label for the button that clears selections|
1760
+ |clearable|boolean|||Adds a button to the SingleSelect that clears selections when pressed|
1761
+ |dataTest|string|`'dhis2-uiwidgets-singleselectfield'`|||
1762
+ |dense|boolean|||Makes the SingleSelect smaller|
1763
+ |disabled|boolean|||Disables the SingleSelect|
1764
+ |empty|node │ function|`() => i18n.t('No data found')`||Text to display when there are no options|
1765
+ |error|custom|||Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props|
1766
+ |filterPlaceholder|node │ function|`() => i18n.t('Type to filter options')`||Placeholder text to show in the filter field when it is empty|
1767
+ |filterable|boolean|||Adds a field to filter options|
1768
+ |helpText|string|||Useful guiding text to display below the SingleSelect|
1769
+ |initialFocus|boolean|||Grabs initial focus on the page|
1770
+ |inputMaxHeight|string|||Constrains the height of the input|
1771
+ |inputWidth|string|||Sets the width of the input. Can be any valid CSS measurement|
1772
+ |label|string|||Text for the label above the SingleSelect|
1773
+ |loading|boolean|||Applies a loading appearance to the dropdown options|
1774
+ |loadingText|string │ function|`() => i18n.t('Loading options')`||Text to display when `loading` is true|
1775
+ |maxHeight|string|||Constrains height of the SingleSelect|
1776
+ |noMatchText|string │ function|`() => i18n.t('No options found')`||Text to display when there are no filter results|
1777
+ |placeholder|string|||Placeholder text when the SingleSelect is empty|
1778
+ |prefix|string|||Leading text to prefix selections|
1779
+ |required|boolean|||Indicates that a selection is required|
1780
+ |selected|string|`''`||Selected item in the SingleSelect (the string should refer to the item's `value` attribute)|
1781
+ |tabIndex|string||||
1782
+ |valid|custom|||Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props|
1783
+ |validationText|string|||Text to provide form validation feedback. Receives styles according to validation status|
1784
+ |warning|custom|||Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props|
1785
+ |onBlur|function|||Called with signature `({ selected: string }, event)`|
1786
+ |onChange|function|||Called with signature `({ selected: string }, event)`|
1787
+ |onFocus|function|||Called with signature `({ selected: string }, event)`|
1651
1788
 
1652
1789
  ### SingleSelectOption
1653
1790
 
@@ -1655,21 +1792,23 @@ import { SingleSelectField } from '@dhis2/ui'
1655
1792
 
1656
1793
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1657
1794
 
1795
+
1658
1796
  ```js
1659
1797
  import { SingleSelectOption } from '@dhis2/ui'
1660
1798
  ```
1661
1799
 
1800
+
1662
1801
  #### Props
1663
1802
 
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 | | | |
1803
+ |Name|Type|Default|Required|Description|
1804
+ |---|---|---|---|---|
1805
+ |label|string||*||
1806
+ |value|string||*||
1807
+ |active|boolean||||
1808
+ |className|string||||
1809
+ |dataTest|string|`'dhis2-uicore-singleselectoption'`|||
1810
+ |disabled|boolean||||
1811
+ |onClick|function||||
1673
1812
 
1674
1813
  ### SelectorBar
1675
1814
 
@@ -1677,20 +1816,22 @@ import { SingleSelectOption } from '@dhis2/ui'
1677
1816
 
1678
1817
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1679
1818
 
1819
+
1680
1820
  ```js
1681
1821
  import { SelectorBar } from '@dhis2/ui'
1682
1822
  ```
1683
1823
 
1824
+
1684
1825
  #### Props
1685
1826
 
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 | | | |
1827
+ |Name|Type|Default|Required|Description|
1828
+ |---|---|---|---|---|
1829
+ |children|any||*||
1830
+ |additionalContent|any||||
1831
+ |className|string||||
1832
+ |dataTest|string|`'dhis2-ui-selectorbar'`|||
1833
+ |disableClearSelections|boolean||||
1834
+ |onClearSelectionClick|function||||
1694
1835
 
1695
1836
  ### SelectorBarItem
1696
1837
 
@@ -1698,23 +1839,25 @@ import { SelectorBar } from '@dhis2/ui'
1698
1839
 
1699
1840
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1700
1841
 
1842
+
1701
1843
  ```js
1702
1844
  import { SelectorBarItem } from '@dhis2/ui'
1703
1845
  ```
1704
1846
 
1847
+
1705
1848
  #### Props
1706
1849
 
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 | | | |
1850
+ |Name|Type|Default|Required|Description|
1851
+ |---|---|---|---|---|
1852
+ |children|any||*||
1853
+ |label|string||*||
1854
+ |noValueMessage|string||*||
1855
+ |open|boolean||*||
1856
+ |setOpen|function||*||
1857
+ |className|string||||
1858
+ |dataTest|string|`'dhis2-ui-selectorbaritem'`|||
1859
+ |disabled|boolean||||
1860
+ |value|string||||
1718
1861
 
1719
1862
  ### SharingDialog
1720
1863
 
@@ -1722,17 +1865,18 @@ import { SelectorBarItem } from '@dhis2/ui'
1722
1865
 
1723
1866
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1724
1867
 
1868
+
1725
1869
  ```js
1726
1870
  import { SharingDialog } from '@dhis2/ui'
1727
1871
  ```
1728
1872
 
1729
- #### Props
1730
1873
 
1731
- | Name | Type | Default | Required | Description |
1732
- | ---- | -------- | ------- | -------- | ----------------------------- |
1733
- | id | string | | \* | The id of the object to share |
1734
- | type | import { |
1874
+ #### Props
1735
1875
 
1876
+ |Name|Type|Default|Required|Description|
1877
+ |---|---|---|---|---|
1878
+ |id|string||*|The id of the object to share|
1879
+ |type|import {
1736
1880
  ACCESS_NONE,
1737
1881
  ACCESS_VIEW_ONLY,
1738
1882
  ACCESS_VIEW_AND_EDIT,
@@ -1740,33 +1884,38 @@ import { SharingDialog } from '@dhis2/ui'
1740
1884
  DASHBOARD,
1741
1885
  EVENT_VISUALIZATION,
1742
1886
  INTERPRETATION,
1743
-
1744
1887
  } 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,
1888
+ ACCESS_NONE,
1889
+ ACCESS_VIEW_ONLY,
1890
+ ACCESS_VIEW_AND_EDIT,
1891
+ VISUALIZATION,
1892
+ DASHBOARD,
1893
+ EVENT_VISUALIZATION,
1894
+ INTERPRETATION,
1752
1895
  } 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,
1896
+ ACCESS_NONE,
1897
+ ACCESS_VIEW_ONLY,
1898
+ ACCESS_VIEW_AND_EDIT,
1899
+ VISUALIZATION,
1900
+ DASHBOARD,
1901
+ EVENT_VISUALIZATION,
1902
+ INTERPRETATION,
1760
1903
  } 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|
1904
+ ACCESS_NONE,
1905
+ ACCESS_VIEW_ONLY,
1906
+ ACCESS_VIEW_AND_EDIT,
1907
+ VISUALIZATION,
1908
+ DASHBOARD,
1909
+ EVENT_VISUALIZATION,
1910
+ INTERPRETATION,
1911
+ } from './constants.js'||*|The type of object to share|
1912
+ |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/>}|`{
1913
+ name: '',
1914
+ allowPublic: true,
1915
+ public: ACCESS_NONE,
1916
+ groups: {},
1917
+ users: {},
1918
+ }`||Used to seed the component with data to show whilst loading|
1770
1919
  |onClose|function|`() => {}`|||
1771
1920
  |onError|function|`() => {}`|||
1772
1921
  |onSave|function|`() => {}`|||
@@ -1777,17 +1926,19 @@ INTERPRETATION,
1777
1926
 
1778
1927
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1779
1928
 
1929
+
1780
1930
  ```js
1781
1931
  import { Modal } from '@dhis2/ui'
1782
1932
  ```
1783
1933
 
1934
+
1784
1935
  #### Props
1785
1936
 
1786
- | Name | Type | Default | Required | Description |
1787
- | -------- | -------- | ------- | -------- | ----------- |
1788
- | children | node | | \* | |
1789
- | name | string | | | |
1790
- | onClose | function | | | |
1937
+ |Name|Type|Default|Required|Description|
1938
+ |---|---|---|---|---|
1939
+ |children|node||*||
1940
+ |name|string||||
1941
+ |onClose|function||||
1791
1942
 
1792
1943
  ### Switch
1793
1944
 
@@ -1795,32 +1946,34 @@ import { Modal } from '@dhis2/ui'
1795
1946
 
1796
1947
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1797
1948
 
1949
+
1798
1950
  ```js
1799
1951
  import { Switch } from '@dhis2/ui'
1800
1952
  ```
1801
1953
 
1954
+
1802
1955
  #### Props
1803
1956
 
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)` |
1957
+ |Name|Type|Default|Required|Description|
1958
+ |---|---|---|---|---|
1959
+ |ariaLabel|string|||Sets an aria-label attribute on the input|
1960
+ |checked|boolean|`false`|||
1961
+ |className|string||||
1962
+ |dataTest|string|`'dhis2-uicore-switch'`|||
1963
+ |dense|boolean|||Makes the switch smaller for information-dense layouts|
1964
+ |disabled|boolean|||Disables the switch|
1965
+ |error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` prop types|
1966
+ |initialFocus|boolean|||Grab initial focus on the page|
1967
+ |label|node|||Label for the switch. Can be a string or an element, for example an image|
1968
+ |name|string|||Name associated with the switch. Passed to event handlers in object|
1969
+ |role|string|`'switch'`||Sets a role attribute on the input|
1970
+ |tabIndex|string||||
1971
+ |valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `error` and `warning` prop types|
1972
+ |value|string|||Value associated with the switch. Passed to event handlers in object|
1973
+ |warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` prop types|
1974
+ |onBlur|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
1975
+ |onChange|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
1976
+ |onFocus|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
1824
1977
 
1825
1978
  ### SwitchField
1826
1979
 
@@ -1828,33 +1981,35 @@ import { Switch } from '@dhis2/ui'
1828
1981
 
1829
1982
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1830
1983
 
1984
+
1831
1985
  ```js
1832
1986
  import { SwitchField } from '@dhis2/ui'
1833
1987
  ```
1834
1988
 
1989
+
1835
1990
  #### Props
1836
1991
 
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) |
1992
+ |Name|Type|Default|Required|Description|
1993
+ |---|---|---|---|---|
1994
+ |checked|boolean||||
1995
+ |className|string||||
1996
+ |dataTest|string|`'dhis2-uiwidgets-switchfield'`|||
1997
+ |dense|boolean|||Smaller dimensions for information-dense layouts|
1998
+ |disabled|boolean|||Disables the switch|
1999
+ |error|custom|||Applies 'error' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `valid` props|
2000
+ |helpText|string|||Useful instructions for the user|
2001
+ |initialFocus|boolean||||
2002
+ |label|node|||Labels the switch|
2003
+ |name|string|||Name associate with the switch. Passed in object as argument to event handlers|
2004
+ |required|boolean|||Adds an asterisk to indicate this field is required|
2005
+ |tabIndex|string||||
2006
+ |valid|custom|||Applies 'valid' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `error` props|
2007
+ |validationText|string|||Adds text below the switch to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses|
2008
+ |value|string|||Value associated with the switch. Passed in object as argument to event handlers|
2009
+ |warning|custom|||Applies 'warning' styling to switch and validation text for feedback. Mutually exclusive with `valid` and `error` props|
2010
+ |onBlur|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
2011
+ |onChange|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
2012
+ |onFocus|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
1858
2013
 
1859
2014
  ### Tab
1860
2015
 
@@ -1862,21 +2017,23 @@ import { SwitchField } from '@dhis2/ui'
1862
2017
 
1863
2018
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1864
2019
 
2020
+
1865
2021
  ```js
1866
2022
  import { Tab } from '@dhis2/ui'
1867
2023
  ```
1868
2024
 
2025
+
1869
2026
  #### Props
1870
2027
 
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)` |
2028
+ |Name|Type|Default|Required|Description|
2029
+ |---|---|---|---|---|
2030
+ |children|node||||
2031
+ |className|string||||
2032
+ |dataTest|string|`'dhis2-uicore-tab'`|||
2033
+ |disabled|boolean||||
2034
+ |icon|element||||
2035
+ |selected|boolean|||Indicates this tab is selected|
2036
+ |onClick|function|||Called with the signature `({}, event)`|
1880
2037
 
1881
2038
  ### TabBar
1882
2039
 
@@ -1884,19 +2041,21 @@ import { Tab } from '@dhis2/ui'
1884
2041
 
1885
2042
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1886
2043
 
2044
+
1887
2045
  ```js
1888
2046
  import { TabBar } from '@dhis2/ui'
1889
2047
  ```
1890
2048
 
2049
+
1891
2050
  #### Props
1892
2051
 
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 |
2052
+ |Name|Type|Default|Required|Description|
2053
+ |---|---|---|---|---|
2054
+ |children|node||||
2055
+ |className|string||||
2056
+ |dataTest|string|`'dhis2-uicore-tabbar'`|||
2057
+ |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.|
2058
+ |scrollable|boolean|||Enables horizontal scrolling for many tabs that don't fit the width of the container|
1900
2059
 
1901
2060
  ### DataTableCell
1902
2061
 
@@ -1904,34 +2063,37 @@ import { TabBar } from '@dhis2/ui'
1904
2063
 
1905
2064
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1906
2065
 
2066
+
1907
2067
  ```js
1908
2068
  import { DataTableCell } from '@dhis2/ui'
1909
2069
  ```
1910
2070
 
2071
+
1911
2072
  #### Props
1912
2073
 
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 | | | |
2074
+ |Name|Type|Default|Required|Description|
2075
+ |---|---|---|---|---|
2076
+ |active|boolean|||To toggle border color, for example for editing|
2077
+ |align|'left' │ 'center' │ 'right'|`'left'`|||
2078
+ |backgroundColor|string|||Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states|
2079
+ |bordered|boolean||||
2080
+ |children|node||||
2081
+ |className|string||||
2082
+ |colSpan|string||||
2083
+ |dataTest|string|`'dhis2-uicore-datatablecell'`|||
2084
+ |error|custom|||Mutually exclusive with muted and valid|
2085
+ |fixed|boolean|||When true a TableHeaderCell with sticky positioning will be rendered|
2086
+ |large|boolean||||
2087
+ |left|custom|`'auto'`||Required when fixed|
2088
+ |muted|custom|||Mutually exclusive with error and valid|
2089
+ |role|string||||
2090
+ |rowSpan|string||||
2091
+ |scope|string||||
2092
+ |staticStyle|boolean|||Surpress hover and active event styles|
2093
+ |tag|'td' │ 'th'|||Render a TableDataCell or TableHeaderCell respectively|
2094
+ |valid|custom|||Mutually exclusive with error and muted|
2095
+ |width|custom|`'auto'`||Required when fixed|
2096
+ |onClick|function||||
1935
2097
 
1936
2098
  ### DataTable
1937
2099
 
@@ -1939,22 +2101,24 @@ import { DataTableCell } from '@dhis2/ui'
1939
2101
 
1940
2102
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1941
2103
 
2104
+
1942
2105
  ```js
1943
2106
  import { DataTable } from '@dhis2/ui'
1944
2107
  ```
1945
2108
 
2109
+
1946
2110
  #### Props
1947
2111
 
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. |
2112
+ |Name|Type|Default|Required|Description|
2113
+ |---|---|---|---|---|
2114
+ |children|node|||Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components|
2115
+ |className|string||||
2116
+ |dataTest|string|`'dhis2-uicore-datatable'`|||
2117
+ |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.|
2118
+ |role|string||||
2119
+ |scrollHeight|string|||Sets max-height of scrollbox|
2120
+ |scrollWidth|string|||Sets max-width of scrollbox|
2121
+ |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
2122
 
1959
2123
  ### StackedTableBody
1960
2124
 
@@ -1962,17 +2126,19 @@ import { DataTable } from '@dhis2/ui'
1962
2126
 
1963
2127
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1964
2128
 
2129
+
1965
2130
  ```js
1966
2131
  import { StackedTableBody } from '@dhis2/ui'
1967
2132
  ```
1968
2133
 
2134
+
1969
2135
  #### Props
1970
2136
 
1971
- | Name | Type | Default | Required | Description |
1972
- | --------- | ------ | --------------------------------- | -------- | ----------- |
1973
- | children | node | | | |
1974
- | className | string | | | |
1975
- | dataTest | string | `'dhis2-uicore-stackedtablebody'` | | |
2137
+ |Name|Type|Default|Required|Description|
2138
+ |---|---|---|---|---|
2139
+ |children|node||||
2140
+ |className|string||||
2141
+ |dataTest|string|`'dhis2-uicore-stackedtablebody'`|||
1976
2142
 
1977
2143
  ### StackedTableCellHead
1978
2144
 
@@ -1980,19 +2146,21 @@ import { StackedTableBody } from '@dhis2/ui'
1980
2146
 
1981
2147
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
1982
2148
 
2149
+
1983
2150
  ```js
1984
2151
  import { StackedTableCellHead } from '@dhis2/ui'
1985
2152
  ```
1986
2153
 
2154
+
1987
2155
  #### Props
1988
2156
 
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 | | | |
2157
+ |Name|Type|Default|Required|Description|
2158
+ |---|---|---|---|---|
2159
+ |children|string|`''`|||
2160
+ |className|string||||
2161
+ |colSpan|string||||
2162
+ |dataTest|string|`'dhis2-uicore-stackedtablecellhead'`|||
2163
+ |rowSpan|string||||
1996
2164
 
1997
2165
  ### StackedTableCell
1998
2166
 
@@ -2000,23 +2168,25 @@ import { StackedTableCellHead } from '@dhis2/ui'
2000
2168
 
2001
2169
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2002
2170
 
2171
+
2003
2172
  ```js
2004
2173
  import { StackedTableCell } from '@dhis2/ui'
2005
2174
  ```
2006
2175
 
2176
+
2007
2177
  #### Props
2008
2178
 
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 | | | |
2179
+ |Name|Type|Default|Required|Description|
2180
+ |---|---|---|---|---|
2181
+ |children|node||||
2182
+ |className|string||||
2183
+ |colSpan|string||||
2184
+ |column|number||||
2185
+ |dataTest|string|`'dhis2-uicore-stackedtablecell'`|||
2186
+ |headerLabels|arrayOf(string)|`[]`|||
2187
+ |hideTitle|boolean||||
2188
+ |rowSpan|string||||
2189
+ |title|string||||
2020
2190
 
2021
2191
  ### StackedTableFoot
2022
2192
 
@@ -2024,17 +2194,19 @@ import { StackedTableCell } from '@dhis2/ui'
2024
2194
 
2025
2195
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2026
2196
 
2197
+
2027
2198
  ```js
2028
2199
  import { StackedTableFoot } from '@dhis2/ui'
2029
2200
  ```
2030
2201
 
2202
+
2031
2203
  #### Props
2032
2204
 
2033
- | Name | Type | Default | Required | Description |
2034
- | --------- | ------ | --------------------------------- | -------- | ----------- |
2035
- | children | node | | | |
2036
- | className | string | | | |
2037
- | dataTest | string | `'dhis2-uicore-stackedtablefoot'` | | |
2205
+ |Name|Type|Default|Required|Description|
2206
+ |---|---|---|---|---|
2207
+ |children|node||||
2208
+ |className|string||||
2209
+ |dataTest|string|`'dhis2-uicore-stackedtablefoot'`|||
2038
2210
 
2039
2211
  ### StackedTableHead
2040
2212
 
@@ -2042,17 +2214,19 @@ import { StackedTableFoot } from '@dhis2/ui'
2042
2214
 
2043
2215
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2044
2216
 
2217
+
2045
2218
  ```js
2046
2219
  import { StackedTableHead } from '@dhis2/ui'
2047
2220
  ```
2048
2221
 
2222
+
2049
2223
  #### Props
2050
2224
 
2051
- | Name | Type | Default | Required | Description |
2052
- | --------- | ------ | --------------------------------- | -------- | ----------- |
2053
- | children | node | | | |
2054
- | className | string | | | |
2055
- | dataTest | string | `'dhis2-uicore-stackedtablehead'` | | |
2225
+ |Name|Type|Default|Required|Description|
2226
+ |---|---|---|---|---|
2227
+ |children|node||||
2228
+ |className|string||||
2229
+ |dataTest|string|`'dhis2-uicore-stackedtablehead'`|||
2056
2230
 
2057
2231
  ### StackedTableRowHead
2058
2232
 
@@ -2060,17 +2234,19 @@ import { StackedTableHead } from '@dhis2/ui'
2060
2234
 
2061
2235
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2062
2236
 
2237
+
2063
2238
  ```js
2064
2239
  import { StackedTableRowHead } from '@dhis2/ui'
2065
2240
  ```
2066
2241
 
2242
+
2067
2243
  #### Props
2068
2244
 
2069
- | Name | Type | Default | Required | Description |
2070
- | --------- | ------ | ------------------------------------ | -------- | ----------- |
2071
- | children | node | | | |
2072
- | className | string | | | |
2073
- | dataTest | string | `'dhis2-uicore-stackedtablerowhead'` | | |
2245
+ |Name|Type|Default|Required|Description|
2246
+ |---|---|---|---|---|
2247
+ |children|node||||
2248
+ |className|string||||
2249
+ |dataTest|string|`'dhis2-uicore-stackedtablerowhead'`|||
2074
2250
 
2075
2251
  ### StackedTableRow
2076
2252
 
@@ -2078,17 +2254,19 @@ import { StackedTableRowHead } from '@dhis2/ui'
2078
2254
 
2079
2255
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2080
2256
 
2257
+
2081
2258
  ```js
2082
2259
  import { StackedTableRow } from '@dhis2/ui'
2083
2260
  ```
2084
2261
 
2262
+
2085
2263
  #### Props
2086
2264
 
2087
- | Name | Type | Default | Required | Description |
2088
- | --------- | ------ | -------------------------------- | -------- | ----------- |
2089
- | children | node | | | |
2090
- | className | string | | | |
2091
- | dataTest | string | `'dhis2-uicore-stackedtablerow'` | | |
2265
+ |Name|Type|Default|Required|Description|
2266
+ |---|---|---|---|---|
2267
+ |children|node||||
2268
+ |className|string||||
2269
+ |dataTest|string|`'dhis2-uicore-stackedtablerow'`|||
2092
2270
 
2093
2271
  ### StackedTable
2094
2272
 
@@ -2096,18 +2274,20 @@ import { StackedTableRow } from '@dhis2/ui'
2096
2274
 
2097
2275
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2098
2276
 
2277
+
2099
2278
  ```js
2100
2279
  import { StackedTable } from '@dhis2/ui'
2101
2280
  ```
2102
2281
 
2282
+
2103
2283
  #### Props
2104
2284
 
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. |
2285
+ |Name|Type|Default|Required|Description|
2286
+ |---|---|---|---|---|
2287
+ |children|node||||
2288
+ |className|string||||
2289
+ |dataTest|string|`'dhis2-uicore-stackedtable'`|||
2290
+ |headerLabels|arrayOf(string)|||Labels for columns. Use an empty string for a column without a header.|
2111
2291
 
2112
2292
  ### Table
2113
2293
 
@@ -2115,17 +2295,19 @@ import { StackedTable } from '@dhis2/ui'
2115
2295
 
2116
2296
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2117
2297
 
2298
+
2118
2299
  ```js
2119
2300
  import { Table } from '@dhis2/ui'
2120
2301
  ```
2121
2302
 
2303
+
2122
2304
  #### Props
2123
2305
 
2124
- | Name | Type | Default | Required | Description |
2125
- | --------- | ------ | ------- | -------- | ----------- |
2126
- | children | node | | \* | |
2127
- | className | string | | | |
2128
- | dataTest | string | | | |
2306
+ |Name|Type|Default|Required|Description|
2307
+ |---|---|---|---|---|
2308
+ |children|node||*||
2309
+ |className|string||||
2310
+ |dataTest|string||||
2129
2311
 
2130
2312
  ### TableBody
2131
2313
 
@@ -2133,18 +2315,20 @@ import { Table } from '@dhis2/ui'
2133
2315
 
2134
2316
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2135
2317
 
2318
+
2136
2319
  ```js
2137
2320
  import { TableBody } from '@dhis2/ui'
2138
2321
  ```
2139
2322
 
2323
+
2140
2324
  #### Props
2141
2325
 
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 | | | |
2326
+ |Name|Type|Default|Required|Description|
2327
+ |---|---|---|---|---|
2328
+ |children|node|||Should be `<TableRow>` components|
2329
+ |className|string||||
2330
+ |dataTest|string|`'dhis2-uicore-tablebody'`|||
2331
+ |role|string||||
2148
2332
 
2149
2333
  ### TableCellHead
2150
2334
 
@@ -2152,21 +2336,23 @@ import { TableBody } from '@dhis2/ui'
2152
2336
 
2153
2337
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2154
2338
 
2339
+
2155
2340
  ```js
2156
2341
  import { TableCellHead } from '@dhis2/ui'
2157
2342
  ```
2158
2343
 
2344
+
2159
2345
  #### Props
2160
2346
 
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 | | | |
2347
+ |Name|Type|Default|Required|Description|
2348
+ |---|---|---|---|---|
2349
+ |children|node||||
2350
+ |className|string||||
2351
+ |colSpan|string||||
2352
+ |dataTest|string|`'dhis2-uicore-tablecellhead'`|||
2353
+ |dense|boolean|||Uses less padding and height for information-dense layouts|
2354
+ |role|string||||
2355
+ |rowSpan|string||||
2170
2356
 
2171
2357
  ### TableCell
2172
2358
 
@@ -2174,21 +2360,23 @@ import { TableCellHead } from '@dhis2/ui'
2174
2360
 
2175
2361
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2176
2362
 
2363
+
2177
2364
  ```js
2178
2365
  import { TableCell } from '@dhis2/ui'
2179
2366
  ```
2180
2367
 
2368
+
2181
2369
  #### Props
2182
2370
 
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 | | | |
2371
+ |Name|Type|Default|Required|Description|
2372
+ |---|---|---|---|---|
2373
+ |children|node||||
2374
+ |className|string||||
2375
+ |colSpan|string||||
2376
+ |dataTest|string|`'dhis2-uicore-tablecell'`|||
2377
+ |dense|boolean|||Usees less padding and height for information-dense layouts|
2378
+ |role|string||||
2379
+ |rowSpan|string||||
2192
2380
 
2193
2381
  ### TableFoot
2194
2382
 
@@ -2196,18 +2384,20 @@ import { TableCell } from '@dhis2/ui'
2196
2384
 
2197
2385
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2198
2386
 
2387
+
2199
2388
  ```js
2200
2389
  import { TableFoot } from '@dhis2/ui'
2201
2390
  ```
2202
2391
 
2392
+
2203
2393
  #### Props
2204
2394
 
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 | | | |
2395
+ |Name|Type|Default|Required|Description|
2396
+ |---|---|---|---|---|
2397
+ |children|node|||Should be `<TableRow>` components|
2398
+ |className|string||||
2399
+ |dataTest|string|`'dhis2-uicore-tablefoot'`|||
2400
+ |role|string||||
2211
2401
 
2212
2402
  ### TableHead
2213
2403
 
@@ -2215,18 +2405,20 @@ import { TableFoot } from '@dhis2/ui'
2215
2405
 
2216
2406
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2217
2407
 
2408
+
2218
2409
  ```js
2219
2410
  import { TableHead } from '@dhis2/ui'
2220
2411
  ```
2221
2412
 
2413
+
2222
2414
  #### Props
2223
2415
 
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 | | | |
2416
+ |Name|Type|Default|Required|Description|
2417
+ |---|---|---|---|---|
2418
+ |children|node|||Should be `<TableRowHead>` components|
2419
+ |className|string||||
2420
+ |dataTest|string|`'dhis2-uicore-tablehead'`|||
2421
+ |role|string||||
2230
2422
 
2231
2423
  ### TableRowHead
2232
2424
 
@@ -2234,19 +2426,21 @@ import { TableHead } from '@dhis2/ui'
2234
2426
 
2235
2427
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2236
2428
 
2429
+
2237
2430
  ```js
2238
2431
  import { TableRowHead } from '@dhis2/ui'
2239
2432
  ```
2240
2433
 
2434
+
2241
2435
  #### Props
2242
2436
 
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 |
2437
+ |Name|Type|Default|Required|Description|
2438
+ |---|---|---|---|---|
2439
+ |children|node|||Should be `<TableCellHead>` components|
2440
+ |className|string||||
2441
+ |dataTest|string|`'dhis2-uicore-tablerowhead'`|||
2442
+ |role|string||||
2443
+ |suppressZebraStriping|boolean|||Disables the default row striping for this row|
2250
2444
 
2251
2445
  ### TableRow
2252
2446
 
@@ -2254,19 +2448,21 @@ import { TableRowHead } from '@dhis2/ui'
2254
2448
 
2255
2449
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2256
2450
 
2451
+
2257
2452
  ```js
2258
2453
  import { TableRow } from '@dhis2/ui'
2259
2454
  ```
2260
2455
 
2456
+
2261
2457
  #### Props
2262
2458
 
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 |
2459
+ |Name|Type|Default|Required|Description|
2460
+ |---|---|---|---|---|
2461
+ |children|node|||Should be `<TableCell>` or `<TableCellHead>` components|
2462
+ |className|string||||
2463
+ |dataTest|string|`'dhis2-uicore-tablerow'`|||
2464
+ |role|string||||
2465
+ |suppressZebraStriping|boolean|||Disables the default row striping for this row|
2270
2466
 
2271
2467
  ### Table
2272
2468
 
@@ -2274,19 +2470,21 @@ import { TableRow } from '@dhis2/ui'
2274
2470
 
2275
2471
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2276
2472
 
2473
+
2277
2474
  ```js
2278
2475
  import { Table } from '@dhis2/ui'
2279
2476
  ```
2280
2477
 
2478
+
2281
2479
  #### Props
2282
2480
 
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 |
2481
+ |Name|Type|Default|Required|Description|
2482
+ |---|---|---|---|---|
2483
+ |children|node|||Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components|
2484
+ |className|string||||
2485
+ |dataTest|string|`'dhis2-uicore-table'`|||
2486
+ |role|string||||
2487
+ |suppressZebraStriping|boolean|||Remove the default striping on alternating rows|
2290
2488
 
2291
2489
  ### DataTableColumnHeader
2292
2490
 
@@ -2294,34 +2492,36 @@ import { Table } from '@dhis2/ui'
2294
2492
 
2295
2493
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2296
2494
 
2495
+
2297
2496
  ```js
2298
2497
  import { DataTableColumnHeader } from '@dhis2/ui'
2299
2498
  ```
2300
2499
 
2500
+
2301
2501
  #### Props
2302
2502
 
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 |
2503
+ |Name|Type|Default|Required|Description|
2504
+ |---|---|---|---|---|
2505
+ |align|'left' │ 'center' │ 'right'||||
2506
+ |children|node||||
2507
+ |className|string||||
2508
+ |colSpan|string||||
2509
+ |dataTest|string|`'dhis2-uicore-datatablecellhead'`|||
2510
+ |filter|custom|||The filter element (JSX), required when onFilterIconClick or showFilter are present|
2511
+ |fixed|boolean||||
2512
+ |large|boolean||||
2513
+ |left|custom|||Left or top required when fixed|
2514
+ |name|string|||Can be used to match a column with a property name|
2515
+ |role|string||||
2516
+ |rowSpan|string||||
2517
+ |scope|string||||
2518
+ |showFilter|custom||||
2519
+ |sortDirection|custom||||
2520
+ |sortIconTitle|string||||
2521
+ |top|custom|||Left or top required when fixed|
2522
+ |width|string||||
2523
+ |onFilterIconClick|custom||||
2524
+ |onSortIconClick|custom|||Sort icon click callback with `nextSortDirection` and `name` in payload|
2325
2525
 
2326
2526
  ### DataTableRow
2327
2527
 
@@ -2329,23 +2529,25 @@ import { DataTableColumnHeader } from '@dhis2/ui'
2329
2529
 
2330
2530
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2331
2531
 
2532
+
2332
2533
  ```js
2333
2534
  import { DataTableRow } from '@dhis2/ui'
2334
2535
  ```
2335
2536
 
2537
+
2336
2538
  #### Props
2337
2539
 
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 |
2540
+ |Name|Type|Default|Required|Description|
2541
+ |---|---|---|---|---|
2542
+ |children|node|||Should be `<DataTableCell>` or `<DataTableCellHead>` components|
2543
+ |className|string||||
2544
+ |dataTest|string|`'dhis2-uicore-datatablerow'`|||
2545
+ |draggable|boolean|||Renders and additional table cell with drag icon and applies draggable styles|
2546
+ |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|
2547
+ |expanded|boolean|||Toggles expand icon (up/down) and expandable content visibility|
2548
+ |role|string||||
2549
+ |selected|boolean|||Adds a green background color|
2550
+ |onExpandToggle|custom|||Callback for expand icon cell clicks|
2349
2551
 
2350
2552
  ### TableBody
2351
2553
 
@@ -2353,19 +2555,21 @@ import { DataTableRow } from '@dhis2/ui'
2353
2555
 
2354
2556
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2355
2557
 
2558
+
2356
2559
  ```js
2357
2560
  import { TableBody } from '@dhis2/ui'
2358
2561
  ```
2359
2562
 
2563
+
2360
2564
  #### Props
2361
2565
 
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 | | | |
2566
+ |Name|Type|Default|Required|Description|
2567
+ |---|---|---|---|---|
2568
+ |children|node|||Should be `<TableRow>` components|
2569
+ |className|string||||
2570
+ |dataTest|string|`'dhis2-uicore-tablebody'`|||
2571
+ |loading|boolean||||
2572
+ |role|string||||
2369
2573
 
2370
2574
  ### TableFoot
2371
2575
 
@@ -2373,18 +2577,20 @@ import { TableBody } from '@dhis2/ui'
2373
2577
 
2374
2578
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2375
2579
 
2580
+
2376
2581
  ```js
2377
2582
  import { TableFoot } from '@dhis2/ui'
2378
2583
  ```
2379
2584
 
2585
+
2380
2586
  #### Props
2381
2587
 
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 | | | |
2588
+ |Name|Type|Default|Required|Description|
2589
+ |---|---|---|---|---|
2590
+ |children|node|||Should be `<TableRow>` components|
2591
+ |className|string||||
2592
+ |dataTest|string|`'dhis2-uicore-tablefoot'`|||
2593
+ |role|string||||
2388
2594
 
2389
2595
  ### TableHead
2390
2596
 
@@ -2392,18 +2598,20 @@ import { TableFoot } from '@dhis2/ui'
2392
2598
 
2393
2599
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2394
2600
 
2601
+
2395
2602
  ```js
2396
2603
  import { TableHead } from '@dhis2/ui'
2397
2604
  ```
2398
2605
 
2606
+
2399
2607
  #### Props
2400
2608
 
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 | | | |
2609
+ |Name|Type|Default|Required|Description|
2610
+ |---|---|---|---|---|
2611
+ |children|node|||Should be `<TableRowHead>` components|
2612
+ |className|string||||
2613
+ |dataTest|string|`'dhis2-uicore-tablehead'`|||
2614
+ |role|string||||
2407
2615
 
2408
2616
  ### TableRow
2409
2617
 
@@ -2411,20 +2619,22 @@ import { TableHead } from '@dhis2/ui'
2411
2619
 
2412
2620
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2413
2621
 
2622
+
2414
2623
  ```js
2415
2624
  import { TableRow } from '@dhis2/ui'
2416
2625
  ```
2417
2626
 
2627
+
2418
2628
  #### Props
2419
2629
 
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 |
2630
+ |Name|Type|Default|Required|Description|
2631
+ |---|---|---|---|---|
2632
+ |children|node|||Should be `<TableDataCell>` or `<TableDataCellHead>` components|
2633
+ |className|string||||
2634
+ |dataTest|string|`'dhis2-uicore-tablerow'`|||
2635
+ |draggable|boolean|||Applies draggable cursor styles|
2636
+ |role|string||||
2637
+ |selected|boolean|||Sets a selected (teal) background color|
2428
2638
 
2429
2639
  ### Table
2430
2640
 
@@ -2432,21 +2642,23 @@ import { TableRow } from '@dhis2/ui'
2432
2642
 
2433
2643
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2434
2644
 
2645
+
2435
2646
  ```js
2436
2647
  import { Table } from '@dhis2/ui'
2437
2648
  ```
2438
2649
 
2650
+
2439
2651
  #### Props
2440
2652
 
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. |
2653
+ |Name|Type|Default|Required|Description|
2654
+ |---|---|---|---|---|
2655
+ |borderless|boolean|||Removes border from the table|
2656
+ |children|node|||Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components|
2657
+ |className|string||||
2658
+ |dataTest|string|`'dhis2-uicore-table'`|||
2659
+ |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.|
2660
+ |role|string||||
2661
+ |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
2662
 
2451
2663
  ### Tag
2452
2664
 
@@ -2454,23 +2666,25 @@ import { Table } from '@dhis2/ui'
2454
2666
 
2455
2667
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2456
2668
 
2669
+
2457
2670
  ```js
2458
2671
  import { Tag } from '@dhis2/ui'
2459
2672
  ```
2460
2673
 
2674
+
2461
2675
  #### Props
2462
2676
 
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 |
2677
+ |Name|Type|Default|Required|Description|
2678
+ |---|---|---|---|---|
2679
+ |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.|
2680
+ |children|string||||
2681
+ |className|string||||
2682
+ |dataTest|string|`'dhis2-uicore-tag'`|||
2683
+ |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.|
2684
+ |maxWidth|string|`'240px'`|||
2685
+ |negative|custom|||Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props|
2686
+ |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|
2687
+ |positive|custom|||Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props|
2474
2688
 
2475
2689
  ### TextArea
2476
2690
 
@@ -2478,35 +2692,37 @@ import { Tag } from '@dhis2/ui'
2478
2692
 
2479
2693
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2480
2694
 
2695
+
2481
2696
  ```js
2482
2697
  import { TextArea } from '@dhis2/ui'
2483
2698
  ```
2484
2699
 
2700
+
2485
2701
  #### Props
2486
2702
 
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) |
2703
+ |Name|Type|Default|Required|Description|
2704
+ |---|---|---|---|---|
2705
+ |autoGrow|boolean|||Grow the text area in response to overflow instead of adding a scroll bar|
2706
+ |className|string||||
2707
+ |dataTest|string|`'dhis2-uicore-textarea'`|||
2708
+ |dense|boolean|||Compact mode|
2709
+ |disabled|boolean|||Disables the textarea and makes in non-interactive|
2710
+ |error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props|
2711
+ |initialFocus|boolean|||Grabs initial focus on the page|
2712
+ |loading|boolean|||Adds a loading spinner|
2713
+ |name|string|||Name associated with the text area. Passed in object argument to event handlers.|
2714
+ |placeholder|string|||Placeholder text for an empty textarea|
2715
+ |readOnly|boolean|||Makes the textarea read-only|
2716
+ |resize|'none' │ 'both' │ 'horizontal' │ 'vertical'|`'vertical'`||[Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element|
2717
+ |rows|number|`4`||Initial height of the textarea, in lines of text|
2718
+ |tabIndex|string||||
2719
+ |valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props|
2720
+ |value|string|||Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.|
2721
+ |warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props|
2722
+ |width|string|`'100%'`||Width of the text area. Can be any valid CSS measurement|
2723
+ |onBlur|function|||Called with signature ({ name: string, value: string }, event)|
2724
+ |onChange|function|||Called with signature ({ name: string, value: string }, event)|
2725
+ |onFocus|function|||Called with signature ({ name: string, value: string }, event)|
2510
2726
 
2511
2727
  ### TextAreaField
2512
2728
 
@@ -2514,39 +2730,41 @@ import { TextArea } from '@dhis2/ui'
2514
2730
 
2515
2731
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2516
2732
 
2733
+
2517
2734
  ```js
2518
2735
  import { TextAreaField } from '@dhis2/ui'
2519
2736
  ```
2520
2737
 
2738
+
2521
2739
  #### Props
2522
2740
 
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) |
2741
+ |Name|Type|Default|Required|Description|
2742
+ |---|---|---|---|---|
2743
+ |autoGrow|boolean|||Grow the text area in response to overflow instead of adding a scroll bar|
2744
+ |className|string||||
2745
+ |dataTest|string|`'dhis2-uiwidgets-textareafield'`|||
2746
+ |dense|boolean|||Compact mode|
2747
+ |disabled|boolean|||Disables the textarea and makes in non-interactive|
2748
+ |error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props|
2749
+ |helpText|string|||Adds useful help text below the textarea|
2750
+ |initialFocus|boolean|||Grabs initial focus on the page|
2751
+ |inputWidth|string|||Sets the width of the textarea. Minimum 220px. Any valid CSS measurement can be used|
2752
+ |label|string|||Labels the textarea|
2753
+ |loading|boolean|||Adds a loading spinner|
2754
+ |name|string|||Name associated with the text area. Passed in object argument to event handlers.|
2755
+ |placeholder|string|||Placeholder text for an empty textarea|
2756
+ |readOnly|boolean|||Makes the textarea read-only|
2757
+ |required|boolean|||Adds an asterisk to the label to indicate this field is required|
2758
+ |resize|'none' │ 'both' │ 'horizontal' │ 'vertical'|`'vertical'`||[Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element|
2759
+ |rows|number|`4`||Initial height of the textarea, in lines of text|
2760
+ |tabIndex|string||||
2761
+ |valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props|
2762
+ |validationText|string|||Validation text below the textarea to provide validation feedback. Changes appearance depending on validation status|
2763
+ |value|string|||Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.|
2764
+ |warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props|
2765
+ |onBlur|function|||Called with signature ({ name: string, value: string }, event)|
2766
+ |onChange|function|||Called with signature ({ name: string, value: string }, event)|
2767
+ |onFocus|function|||Called with signature ({ name: string, value: string }, event)|
2550
2768
 
2551
2769
  ### Tooltip
2552
2770
 
@@ -2554,22 +2772,24 @@ import { TextAreaField } from '@dhis2/ui'
2554
2772
 
2555
2773
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2556
2774
 
2775
+
2557
2776
  ```js
2558
2777
  import { Tooltip } from '@dhis2/ui'
2559
2778
  ```
2560
2779
 
2780
+
2561
2781
  #### Props
2562
2782
 
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 |
2783
+ |Name|Type|Default|Required|Description|
2784
+ |---|---|---|---|---|
2785
+ |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.|
2786
+ |className|string||||
2787
+ |closeDelay|number|`200`||Time (in ms) until tooltip closes after mouse out|
2788
+ |content|node|||Content to display when the tooltip is open|
2789
+ |dataTest|string|`'dhis2-uicore-tooltip'`|||
2790
+ |maxWidth|number|`300`||Max width of the tooltip in px|
2791
+ |openDelay|number|`200`||Time (in ms) until tooltip open after mouse over|
2792
+ |placement|'top' │ 'right' │ 'bottom' │ 'left'|`'top'`||Where to place the tooltip relative to its reference|
2573
2793
 
2574
2794
  ### TransferOption
2575
2795
 
@@ -2577,22 +2797,24 @@ import { Tooltip } from '@dhis2/ui'
2577
2797
 
2578
2798
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2579
2799
 
2800
+
2580
2801
  ```js
2581
2802
  import { TransferOption } from '@dhis2/ui'
2582
2803
  ```
2583
2804
 
2805
+
2584
2806
  #### Props
2585
2807
 
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 | | | |
2808
+ |Name|Type|Default|Required|Description|
2809
+ |---|---|---|---|---|
2810
+ |label|node||*||
2811
+ |value|string||*||
2812
+ |className|string||||
2813
+ |dataTest|string|`'dhis2-uicore-transferoption'`|||
2814
+ |disabled|boolean||||
2815
+ |highlighted|boolean||||
2816
+ |onClick|function||||
2817
+ |onDoubleClick|function||||
2596
2818
 
2597
2819
  ### Transfer
2598
2820
 
@@ -2600,56 +2822,58 @@ import { TransferOption } from '@dhis2/ui'
2600
2822
 
2601
2823
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2602
2824
 
2825
+
2603
2826
  ```js
2604
2827
  import { Transfer } from '@dhis2/ui'
2605
2828
  ```
2606
2829
 
2830
+
2607
2831
  #### Props
2608
2832
 
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 | | | |
2833
+ |Name|Type|Default|Required|Description|
2834
+ |---|---|---|---|---|
2835
+ |options|arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>})||*||
2836
+ |onChange|function||*||
2837
+ |addAllText|string||||
2838
+ |addIndividualText|string||||
2839
+ |className|string||||
2840
+ |dataTest|string|`'dhis2-uicore-transfer'`|||
2841
+ |disabled|boolean||||
2842
+ |enableOrderChange|boolean||||
2843
+ |filterCallback|function|`defaultFilterCallback`|||
2844
+ |filterCallbackPicked|function|`defaultFilterCallback`|||
2845
+ |filterLabel|string||||
2846
+ |filterLabelPicked|string||||
2847
+ |filterPlaceholder|string||||
2848
+ |filterPlaceholderPicked|string||||
2849
+ |filterable|boolean||||
2850
+ |filterablePicked|boolean||||
2851
+ |height|string|`'240px'`|||
2852
+ |hideFilterInput|boolean||||
2853
+ |hideFilterInputPicked|boolean||||
2854
+ |initialSearchTerm|string|`''`|||
2855
+ |initialSearchTermPicked|string|`''`|||
2856
+ |leftFooter|node||||
2857
+ |leftHeader|node||||
2858
+ |loading|boolean||||
2859
+ |loadingPicked|boolean||||
2860
+ |maxSelections|1 │ Infinity|`Infinity`|||
2861
+ |optionsWidth|string|`'320px'`|||
2862
+ |removeAllText|string||||
2863
+ |removeIndividualText|string||||
2864
+ |renderOption|function|`(option) => <TransferOption {...option} />`|||
2865
+ |rightFooter|node||||
2866
+ |rightHeader|node||||
2867
+ |searchTerm|string||||
2868
+ |searchTermPicked|string||||
2869
+ |selected|arrayOf(string)|`[]`|||
2870
+ |selectedEmptyComponent|node||||
2871
+ |selectedWidth|string|`'320px'`|||
2872
+ |sourceEmptyPlaceholder|node||||
2873
+ |onEndReached|function||||
2874
+ |onEndReachedPicked|function||||
2875
+ |onFilterChange|function||||
2876
+ |onFilterChangePicked|function||||
2653
2877
 
2654
2878
  ### UserAvatar
2655
2879
 
@@ -2657,20 +2881,22 @@ import { Transfer } from '@dhis2/ui'
2657
2881
 
2658
2882
  **Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
2659
2883
 
2884
+
2660
2885
  ```js
2661
2886
  import { UserAvatar } from '@dhis2/ui'
2662
2887
  ```
2663
2888
 
2889
+
2664
2890
  #### Props
2665
2891
 
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 | | | |
2892
+ |Name|Type|Default|Required|Description|
2893
+ |---|---|---|---|---|
2894
+ |name|string||*||
2895
+ |avatarId|string||||
2896
+ |className|string||||
2897
+ |dataTest|string|`'dhis2-uicore-useravatar'`|||
2898
+ |extralarge|custom||||
2899
+ |extrasmall|custom||||
2900
+ |large|custom||||
2901
+ |medium|custom||||
2902
+ |small|custom||||