@oliasoft-open-source/react-ui-library 6.14.0-beta-9 → 6.15.0
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.
- package/README.md +1070 -1016
- package/dist/components/button/button.d.ts +1 -3
- package/dist/components/button/button.d.ts.map +1 -1
- package/dist/components/color-input/color-input.test-case.stories.d.ts.map +1 -1
- package/dist/components/option-dropdown/layer.d.ts +1 -0
- package/dist/components/option-dropdown/layer.d.ts.map +1 -1
- package/dist/components/option-dropdown/option-dropdown.d.ts +1 -0
- package/dist/components/option-dropdown/option-dropdown.d.ts.map +1 -1
- package/dist/components/option-dropdown/option-dropdown.test-case.stories.d.ts +7 -0
- package/dist/components/option-dropdown/option-dropdown.test-case.stories.d.ts.map +1 -0
- package/dist/components/option-dropdown/option.d.ts.map +1 -1
- package/dist/components/popover/popover.d.ts +1 -9
- package/dist/components/popover/popover.d.ts.map +1 -1
- package/dist/components/popover/popover.stories.d.ts +0 -2
- package/dist/components/popover/popover.stories.d.ts.map +1 -1
- package/dist/components/unit-slider/unit-slider.d.ts.map +1 -1
- package/dist/components/unit-slider/unit-slider.test-case.stories.d.ts.map +1 -1
- package/dist/global.css +1 -1
- package/dist/index.js +2498 -2576
- package/package.json +28 -30
- package/dist/components/popover/popover.test-case.stories.d.ts +0 -18
- package/dist/components/popover/popover.test-case.stories.d.ts.map +0 -1
- package/dist/helpers/overlay-trigger/index.d.ts +0 -5
- package/dist/helpers/overlay-trigger/index.d.ts.map +0 -1
- package/dist/helpers/overlay-trigger/overlay-trigger-child.d.ts +0 -28
- package/dist/helpers/overlay-trigger/overlay-trigger-child.d.ts.map +0 -1
- package/dist/helpers/overlay-trigger/utils.d.ts +0 -30
- package/dist/helpers/overlay-trigger/utils.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -15,6 +15,7 @@ npm install @oliasoft-open-source/react-ui-library
|
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
Using yarn:
|
|
18
|
+
|
|
18
19
|
```bash
|
|
19
20
|
yarn add @oliasoft-open-source/react-ui-library
|
|
20
21
|
```
|
|
@@ -24,10 +25,12 @@ yarn add @oliasoft-open-source/react-ui-library
|
|
|
24
25
|
To quickly start a new project using the React UI Library with Vite, you can use the `create-vite` tool, which sets up everything for you in a few simple steps:
|
|
25
26
|
|
|
26
27
|
1. **Create a New Vite Project:** Use the `create-vite` command to scaffold a new React project. Run:
|
|
28
|
+
|
|
27
29
|
```bash
|
|
28
30
|
npm create vite@latest my-new-project -- --template react
|
|
29
31
|
```
|
|
30
|
-
|
|
32
|
+
|
|
33
|
+
Or with yarn
|
|
31
34
|
|
|
32
35
|
```bash
|
|
33
36
|
yarn create vite my-new-project --template react
|
|
@@ -35,15 +38,16 @@ To quickly start a new project using the React UI Library with Vite, you can use
|
|
|
35
38
|
|
|
36
39
|
2. **Navigate into the Project Directory:**
|
|
37
40
|
|
|
38
|
-
|
|
41
|
+
```bash
|
|
39
42
|
cd my-new-project
|
|
40
|
-
|
|
43
|
+
```
|
|
41
44
|
|
|
42
45
|
3. **Install React UI Library: Add the React UI Library to your project:**
|
|
43
46
|
|
|
44
47
|
```bash
|
|
45
48
|
npm install @oliasoft-open-source/react-ui-library
|
|
46
49
|
```
|
|
50
|
+
|
|
47
51
|
Or with yarn
|
|
48
52
|
|
|
49
53
|
```bash
|
|
@@ -52,26 +56,27 @@ To quickly start a new project using the React UI Library with Vite, you can use
|
|
|
52
56
|
|
|
53
57
|
4. **Modify the Sample Page:** Open the src/App.jsx file and import a component from the React UI Library to use it:
|
|
54
58
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
59
|
+
```bash
|
|
60
|
+
import React from 'react';
|
|
61
|
+
import { Text } from '@oliasoft-open-source/react-ui-library';
|
|
62
|
+
|
|
63
|
+
function App() {
|
|
64
|
+
return (
|
|
65
|
+
<div className="App">
|
|
66
|
+
<Text>Hello World!</Text>
|
|
67
|
+
</div>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default App;
|
|
72
|
+
```
|
|
69
73
|
|
|
70
74
|
5. **Start the Development Server: Begin development by starting the Vite server:**
|
|
71
75
|
|
|
72
76
|
```bash
|
|
73
77
|
npm run dev
|
|
74
78
|
```
|
|
79
|
+
|
|
75
80
|
Or with yarn
|
|
76
81
|
|
|
77
82
|
```bash
|
|
@@ -164,17 +169,17 @@ The `Accordion` component provides a versatile way to toggle visibility of conte
|
|
|
164
169
|
|
|
165
170
|
## Properties
|
|
166
171
|
|
|
167
|
-
| Prop Name | Description
|
|
168
|
-
|
|
169
|
-
| `heading` | The content displayed in the accordion header.
|
|
170
|
-
| `expanded` | If true, the accordion will be initially expanded.
|
|
171
|
-
| `managed` | Determines if the accordion's expansion state is controlled externally.
|
|
172
|
-
| `bordered` | If true, adds a border to the accordion.
|
|
173
|
-
| `padding` | If true, adds padding inside the accordion content area.
|
|
174
|
-
| `children` | The content to be displayed within the accordion when it is expanded.
|
|
175
|
-
| `onClick` | Function to handle click events on the accordion header.
|
|
176
|
-
| `squareBottom` | If true, the bottom of the accordion will be square instead of rounded.
|
|
177
|
-
| `testId` | An optional identifier used for testing.
|
|
172
|
+
| Prop Name | Description | Default Value |
|
|
173
|
+
| -------------- | ----------------------------------------------------------------------- | --------------- |
|
|
174
|
+
| `heading` | The content displayed in the accordion header. | None (required) |
|
|
175
|
+
| `expanded` | If true, the accordion will be initially expanded. | `false` |
|
|
176
|
+
| `managed` | Determines if the accordion's expansion state is controlled externally. | `false` |
|
|
177
|
+
| `bordered` | If true, adds a border to the accordion. | `false` |
|
|
178
|
+
| `padding` | If true, adds padding inside the accordion content area. | `true` |
|
|
179
|
+
| `children` | The content to be displayed within the accordion when it is expanded. | None (optional) |
|
|
180
|
+
| `onClick` | Function to handle click events on the accordion header. | None (optional) |
|
|
181
|
+
| `squareBottom` | If true, the bottom of the accordion will be square instead of rounded. | `false` |
|
|
182
|
+
| `testId` | An optional identifier used for testing. | None (optional) |
|
|
178
183
|
|
|
179
184
|
## Usage Example
|
|
180
185
|
|
|
@@ -183,7 +188,7 @@ The `Accordion` component provides a versatile way to toggle visibility of conte
|
|
|
183
188
|
heading="Section 1"
|
|
184
189
|
expanded
|
|
185
190
|
bordered
|
|
186
|
-
onClick={() => console.log(
|
|
191
|
+
onClick={() => console.log('Accordion clicked')}
|
|
187
192
|
>
|
|
188
193
|
Content goes here
|
|
189
194
|
</Accordion>
|
|
@@ -197,15 +202,15 @@ An enhanced accordion component that includes a default toggle feature, allowing
|
|
|
197
202
|
|
|
198
203
|
### Props
|
|
199
204
|
|
|
200
|
-
| Prop Name
|
|
201
|
-
|
|
202
|
-
| `heading`
|
|
203
|
-
| `toggleLabel`
|
|
204
|
-
| `expanded`
|
|
205
|
-
| `defaultEnabled`
|
|
206
|
-
| `onClickDefaultToggle
|
|
207
|
-
| `padding`
|
|
208
|
-
| `children`
|
|
205
|
+
| Prop Name | Description | Default Value |
|
|
206
|
+
| ---------------------- | --------------------------------------------------------------------------------------------- | --------------- |
|
|
207
|
+
| `heading` | The content to be displayed in the accordion header. | None (required) |
|
|
208
|
+
| `toggleLabel` | Label for the default toggle switch. | None (required) |
|
|
209
|
+
| `expanded` | Controls if the accordion is expanded or collapsed by default. | `false` |
|
|
210
|
+
| `defaultEnabled` | Determines if the default toggle is enabled. | `true` |
|
|
211
|
+
| `onClickDefaultToggle` | Function called when the default toggle is clicked. Receives the change event as an argument. | None (optional) |
|
|
212
|
+
| `padding` | If `true`, adds padding to the accordion content for better spacing. | `true` |
|
|
213
|
+
| `children` | The content to be displayed inside the accordion when it is expanded. | None (optional) |
|
|
209
214
|
|
|
210
215
|
### Usage Example
|
|
211
216
|
|
|
@@ -230,25 +235,25 @@ The `Actions` component is designed to display a set of actions or options. It s
|
|
|
230
235
|
|
|
231
236
|
### Properties
|
|
232
237
|
|
|
233
|
-
| Prop Name
|
|
234
|
-
|
|
235
|
-
| `actions`
|
|
236
|
-
| `closeLayer`
|
|
238
|
+
| Prop Name | Description | Type | Default Value (optional) |
|
|
239
|
+
| ------------ | --------------------------------------------- | --------------------------------------------------------- | ------------------------ |
|
|
240
|
+
| `actions` | Array of action items to display. | `IAction[]` | |
|
|
241
|
+
| `closeLayer` | Function to close the action layer. Optional. | `TEmpty` (Function with no arguments and no return value) | None |
|
|
237
242
|
|
|
238
243
|
### `IAction` Properties
|
|
239
244
|
|
|
240
|
-
| Prop Name
|
|
241
|
-
|
|
242
|
-
| `label`
|
|
243
|
-
| `childComponent`
|
|
244
|
-
| `subActions`
|
|
245
|
-
| `primary`
|
|
246
|
-
| `icon`
|
|
247
|
-
| `testId`
|
|
248
|
-
| `hidden`
|
|
249
|
-
| `disabled`
|
|
250
|
-
| `onClick`
|
|
251
|
-
| `tooltip`
|
|
245
|
+
| Prop Name | Description | Type | Default Value (optional) |
|
|
246
|
+
| ---------------- | -------------------------------------------- | ------------------------------------------------------- | ------------------------ |
|
|
247
|
+
| `label` | Text label for the action. | `TStringNumberNull` (String, number, or null) | None |
|
|
248
|
+
| `childComponent` | Component to render as a child. | `ReactNode` \| `(() => ReactNode)` | None |
|
|
249
|
+
| `subActions` | Array of subaction items. | `ISubAction[]` | None |
|
|
250
|
+
| `primary` | Marks the action as primary. | `boolean` | False |
|
|
251
|
+
| `icon` | Icon to display alongside the label. | `ReactNode` | None |
|
|
252
|
+
| `testId` | Identifier for testing purposes. | `string` | None |
|
|
253
|
+
| `hidden` | Whether the action is hidden. | `boolean` | False |
|
|
254
|
+
| `disabled` | Whether the action is disabled. | `boolean` | False |
|
|
255
|
+
| `onClick` | Function to call when the action is clicked. | `(evt: React.MouseEvent, id?: TStringOrNumber) => void` | None |
|
|
256
|
+
| `tooltip` | Tooltip to display on hover. | `ReactNode` \| `string` | None |
|
|
252
257
|
|
|
253
258
|
### Usage Example
|
|
254
259
|
|
|
@@ -282,55 +287,49 @@ The `Badge` component is used to display a small badge, often used to show a cou
|
|
|
282
287
|
|
|
283
288
|
### Properties
|
|
284
289
|
|
|
285
|
-
| Prop Name | Description
|
|
286
|
-
|
|
287
|
-
| children | The content inside the badge.
|
|
288
|
-
| color | The color of the badge.
|
|
289
|
-
| title | The title or text displayed inside the badge.
|
|
290
|
-
| dot | If true, displays a dot instead of the children.
|
|
291
|
-
| margin | Margin around the badge.
|
|
292
|
-
| small | If true, displays a smaller version of the badge.
|
|
290
|
+
| Prop Name | Description | Default Value |
|
|
291
|
+
| --------- | ------------------------------------------------- | ----------------- |
|
|
292
|
+
| children | The content inside the badge. | None (optional) |
|
|
293
|
+
| color | The color of the badge. | '' (empty string) |
|
|
294
|
+
| title | The title or text displayed inside the badge. | None (optional) |
|
|
295
|
+
| dot | If true, displays a dot instead of the children. | false |
|
|
296
|
+
| margin | Margin around the badge. | None (optional) |
|
|
297
|
+
| small | If true, displays a smaller version of the badge. | false |
|
|
293
298
|
|
|
294
299
|
### Usage Example
|
|
295
300
|
|
|
296
301
|
```jsx
|
|
297
|
-
<Badge
|
|
298
|
-
color="red"
|
|
299
|
-
title="New"
|
|
300
|
-
dot
|
|
301
|
-
margin="0 8px"
|
|
302
|
-
small
|
|
303
|
-
>
|
|
302
|
+
<Badge color="red" title="New" dot margin="0 8px" small>
|
|
304
303
|
{/* Children here, if any */}
|
|
305
304
|
</Badge>
|
|
306
305
|
```
|
|
307
306
|
|
|
308
307
|
<hr style="border: none; border-right: 2px solid black; width: 100%; height: 1px;">
|
|
309
308
|
|
|
310
|
-
## Breadcrumb Component
|
|
309
|
+
## Breadcrumb Component <a id="breadcrumb"></a>
|
|
311
310
|
|
|
312
311
|
The `Breadcrumb` component displays a navigation path, typically used to show the user's location within a hierarchical structure.
|
|
313
312
|
|
|
314
313
|
**Props:**
|
|
315
314
|
|
|
316
|
-
| Prop Name | Description
|
|
317
|
-
|
|
318
|
-
| links
|
|
319
|
-
| small
|
|
315
|
+
| Prop Name | Description | Default Value |
|
|
316
|
+
| --------- | ------------------------------------------------------------------------------------- | ------------- |
|
|
317
|
+
| links | An array of objects representing the breadcrumb links. (See `ILinkProps` for details) | Required |
|
|
318
|
+
| small | If `true`, displays a smaller version of the breadcrumb. | `false` |
|
|
320
319
|
|
|
321
320
|
**ILinkProps Interface:**
|
|
322
321
|
|
|
323
322
|
This interface defines the properties for each breadcrumb link.
|
|
324
323
|
|
|
325
|
-
| Prop Name | Description
|
|
326
|
-
|
|
327
|
-
| type
|
|
328
|
-
| label
|
|
329
|
-
| url
|
|
330
|
-
| onClick
|
|
331
|
-
| active
|
|
332
|
-
| disabled
|
|
333
|
-
| element
|
|
324
|
+
| Prop Name | Description |
|
|
325
|
+
| --------- | ------------------------------------------------------------ |
|
|
326
|
+
| type | The type of the link (implementation-specific). | Optional |
|
|
327
|
+
| label | The text displayed for the link. | Optional |
|
|
328
|
+
| url | The URL the link points to. | Optional |
|
|
329
|
+
| onClick | A function to be called when the link is clicked. | Optional |
|
|
330
|
+
| active | If `true`, indicates the link is the current location. | Optional |
|
|
331
|
+
| disabled | If `true`, the link is disabled and cannot be clicked. | Optional |
|
|
332
|
+
| element | A React node to render instead of the default link behavior. | Optional |
|
|
334
333
|
|
|
335
334
|
**Usage Example:**
|
|
336
335
|
|
|
@@ -352,32 +351,32 @@ The `Button` component is a versatile interface element that supports various st
|
|
|
352
351
|
|
|
353
352
|
### Props
|
|
354
353
|
|
|
355
|
-
| Prop
|
|
356
|
-
|
|
357
|
-
| `active`
|
|
358
|
-
| `basic`
|
|
359
|
-
| `colored`
|
|
360
|
-
| `disabled`
|
|
361
|
-
| `groupOrder`
|
|
362
|
-
| `icon`
|
|
363
|
-
| `ignoreDisabledContext`
|
|
364
|
-
| `label`
|
|
365
|
-
| `loading`
|
|
366
|
-
| `name`
|
|
367
|
-
| `onClick`
|
|
368
|
-
| `pill`
|
|
369
|
-
| `round`
|
|
370
|
-
| `small`
|
|
371
|
-
| `styles`
|
|
372
|
-
| `width`
|
|
373
|
-
| `title`
|
|
374
|
-
| `type`
|
|
375
|
-
| `error`
|
|
376
|
-
| `warning`
|
|
377
|
-
| `testId`
|
|
378
|
-
| `tooltip`
|
|
379
|
-
| `inverted`
|
|
380
|
-
| `tabIndex`
|
|
354
|
+
| Prop | Description | Default Value |
|
|
355
|
+
| ----------------------- | ---------------------------------------------------------------------------- | --------------- |
|
|
356
|
+
| `active` | Shows the button in an active state. | `false` |
|
|
357
|
+
| `basic` | Applies a link-style appearance to the button. | `false` |
|
|
358
|
+
| `colored` | Applies color styling. Can be boolean or string (color code or name). | `false` |
|
|
359
|
+
| `disabled` | If true, disables the button. | `false` |
|
|
360
|
+
| `groupOrder` | Specifies the button's position in a group (e.g., start, middle, end). | None (optional) |
|
|
361
|
+
| `icon` | An icon to be displayed on the button. Deprecated in favor of using `label`. | None (optional) |
|
|
362
|
+
| `ignoreDisabledContext` | Allows the button to be enabled even when inside `DisabledContext`. | `false` |
|
|
363
|
+
| `label` | The content of the button, which can be text or a ReactNode. | None (optional) |
|
|
364
|
+
| `loading` | Shows an activity indicator, suggesting that an action is in progress. | `false` |
|
|
365
|
+
| `name` | The name of the button, which can be used in forms. | None (optional) |
|
|
366
|
+
| `onClick` | Function to call when the button is clicked. | None (optional) |
|
|
367
|
+
| `pill` | Deprecated. Use `round` for rounded corners instead. | `false` |
|
|
368
|
+
| `round` | If true, applies rounded corners to the button. | `false` |
|
|
369
|
+
| `small` | If true, displays the button in a smaller size. | `false` |
|
|
370
|
+
| `styles` | Custom styles to be applied to the button. | None (optional) |
|
|
371
|
+
| `width` | The width of the button, can be a number or string. | None (optional) |
|
|
372
|
+
| `title` | Tooltip text for the button. | None (optional) |
|
|
373
|
+
| `type` | The button type (e.g., "button", "submit"). | `button` |
|
|
374
|
+
| `error` | Displays an error state or message. | None (optional) |
|
|
375
|
+
| `warning` | Displays a warning state or message. | None (optional) |
|
|
376
|
+
| `testId` | A test identifier for the button. | None (optional) |
|
|
377
|
+
| `tooltip` | Tooltip content. Can be text or a ReactNode. | None (optional) |
|
|
378
|
+
| `inverted` | Deprecated. | `false` |
|
|
379
|
+
| `tabIndex` | The tab index of the button. | None (optional) |
|
|
381
380
|
|
|
382
381
|
### Usage Example
|
|
383
382
|
|
|
@@ -398,32 +397,32 @@ The `ButtonGroup` component allows for the grouping of button-like elements, mak
|
|
|
398
397
|
|
|
399
398
|
### IButtonGroupProps
|
|
400
399
|
|
|
401
|
-
| Prop
|
|
402
|
-
|
|
403
|
-
| `disabled`
|
|
404
|
-
| `basic`
|
|
405
|
-
| `items`
|
|
406
|
-
| `header`
|
|
407
|
-
| `onSelected`
|
|
408
|
-
| `small`
|
|
409
|
-
| `value`
|
|
410
|
-
| `testId`
|
|
400
|
+
| Prop | Description | Default Value |
|
|
401
|
+
| ------------ | ----------------------------------------------------------------- | --------------- |
|
|
402
|
+
| `disabled` | If true, disables all buttons in the group. | None (optional) |
|
|
403
|
+
| `basic` | If true, applies a basic style to the button group. | `false` |
|
|
404
|
+
| `items` | An array of items (strings or `IBtnGroupItemProps`) in the group. | `[]` |
|
|
405
|
+
| `header` | An optional header for the group. | `''` |
|
|
406
|
+
| `onSelected` | Callback function triggered when an item is selected. | `() => {}` |
|
|
407
|
+
| `small` | If true, applies a smaller size to the buttons in the group. | `false` |
|
|
408
|
+
| `value` | The currently selected value. | None (optional) |
|
|
409
|
+
| `testId` | A unique identifier for testing purposes. | None (optional) |
|
|
411
410
|
|
|
412
411
|
### IBtnGroupItemProps
|
|
413
412
|
|
|
414
|
-
| Prop
|
|
415
|
-
|
|
416
|
-
| `label`
|
|
417
|
-
| `value`
|
|
418
|
-
| `key`
|
|
419
|
-
| `hidden`
|
|
420
|
-
| `icon`
|
|
421
|
-
| `error`
|
|
422
|
-
| `maxTooltipWidth`
|
|
423
|
-
| `testId`
|
|
424
|
-
| `tooltip`
|
|
425
|
-
| `warning`
|
|
426
|
-
| `disabled`
|
|
413
|
+
| Prop | Description | Default Value |
|
|
414
|
+
| ----------------- | ----------------------------------------- | --------------- |
|
|
415
|
+
| `label` | The label for the item. | None (optional) |
|
|
416
|
+
| `value` | The value associated with the item. | None (required) |
|
|
417
|
+
| `key` | A unique key for the item. | None (required) |
|
|
418
|
+
| `hidden` | If true, the item is hidden. | `false` |
|
|
419
|
+
| `icon` | An icon displayed next to the item label. | None (optional) |
|
|
420
|
+
| `error` | Displays an error state for the item. | None (optional) |
|
|
421
|
+
| `maxTooltipWidth` | The maximum width of the item's tooltip. | None (optional) |
|
|
422
|
+
| `testId` | A unique identifier for testing purposes. | None (optional) |
|
|
423
|
+
| `tooltip` | Tooltip text or component for the item. | None (optional) |
|
|
424
|
+
| `warning` | Displays a warning state for the item. | None (optional) |
|
|
425
|
+
| `disabled` | If true, the item is disabled. | `false` |
|
|
427
426
|
|
|
428
427
|
### Usage Example
|
|
429
428
|
|
|
@@ -432,7 +431,7 @@ The `ButtonGroup` component allows for the grouping of button-like elements, mak
|
|
|
432
431
|
items={[
|
|
433
432
|
{ label: 'Button 1', value: '1' },
|
|
434
433
|
{ label: 'Button 2', value: '2', disabled: true },
|
|
435
|
-
{ label: 'Button 3', value: '3' }
|
|
434
|
+
{ label: 'Button 3', value: '3' },
|
|
436
435
|
]}
|
|
437
436
|
onSelected={(selectedValue) => console.log(selectedValue)}
|
|
438
437
|
/>
|
|
@@ -444,14 +443,14 @@ The `ButtonGroup` component allows for the grouping of button-like elements, mak
|
|
|
444
443
|
|
|
445
444
|
### Props
|
|
446
445
|
|
|
447
|
-
| Prop | Description
|
|
448
|
-
|
|
449
|
-
| `bordered` | If true, displays a border around the card.
|
|
450
|
-
| `heading` | Optional heading content for the card.
|
|
451
|
-
| `margin` | The margin around the card, specified as a CSS value.
|
|
452
|
-
| `padding` | If true, applies padding inside the card.
|
|
453
|
-
| `raised` | If true, applies a box-shadow to give the card a "raised" effect. | `false`
|
|
454
|
-
| `children` | The content within the card.
|
|
446
|
+
| Prop | Description | Default Value |
|
|
447
|
+
| ---------- | ----------------------------------------------------------------- | --------------- |
|
|
448
|
+
| `bordered` | If true, displays a border around the card. | `true` |
|
|
449
|
+
| `heading` | Optional heading content for the card. | None (optional) |
|
|
450
|
+
| `margin` | The margin around the card, specified as a CSS value. | `'0'` |
|
|
451
|
+
| `padding` | If true, applies padding inside the card. | `true` |
|
|
452
|
+
| `raised` | If true, applies a box-shadow to give the card a "raised" effect. | `false` |
|
|
453
|
+
| `children` | The content within the card. | None (optional) |
|
|
455
454
|
|
|
456
455
|
### Usage Example
|
|
457
456
|
|
|
@@ -469,23 +468,23 @@ The `CheckBox` component is used to create a checkbox input field, often utilize
|
|
|
469
468
|
|
|
470
469
|
### Props
|
|
471
470
|
|
|
472
|
-
| Prop | Description
|
|
473
|
-
|
|
474
|
-
| `checked` | Determines whether the checkbox is checked.
|
|
475
|
-
| `isInTable` | If true, optimizes the checkbox for use within a table.
|
|
476
|
-
| `label` | The text label associated with the checkbox.
|
|
477
|
-
| `name` | The name of the checkbox input, useful for form submission.
|
|
478
|
-
| `noMargin` | If true, removes the margin around the checkbox for tighter UI integration. | `false`
|
|
479
|
-
| `onChange` | A callback function that is called when the checkbox state changes.
|
|
480
|
-
| `tabIndex` | The tab index of the checkbox.
|
|
481
|
-
| `disabled` | If true, disables the checkbox preventing user interaction.
|
|
482
|
-
| `small` | If true, renders a smaller version of the checkbox.
|
|
483
|
-
| `testId` | A unique identifier for testing purposes.
|
|
484
|
-
| `key` | A unique key for rendering the component in lists.
|
|
485
|
-
| `dataix` | Custom data index attribute for the component.
|
|
486
|
-
| `value` | The value of the checkbox.
|
|
487
|
-
| `helpText` | Optional help text displayed near the checkbox.
|
|
488
|
-
| `onClickHelp` | A callback function triggered when the help text is clicked.
|
|
471
|
+
| Prop | Description | Default Value |
|
|
472
|
+
| ------------- | --------------------------------------------------------------------------- | --------------- |
|
|
473
|
+
| `checked` | Determines whether the checkbox is checked. | `false` |
|
|
474
|
+
| `isInTable` | If true, optimizes the checkbox for use within a table. | `false` |
|
|
475
|
+
| `label` | The text label associated with the checkbox. | None (optional) |
|
|
476
|
+
| `name` | The name of the checkbox input, useful for form submission. | None (required) |
|
|
477
|
+
| `noMargin` | If true, removes the margin around the checkbox for tighter UI integration. | `false` |
|
|
478
|
+
| `onChange` | A callback function that is called when the checkbox state changes. | None (required) |
|
|
479
|
+
| `tabIndex` | The tab index of the checkbox. | `0` |
|
|
480
|
+
| `disabled` | If true, disables the checkbox preventing user interaction. | `false` |
|
|
481
|
+
| `small` | If true, renders a smaller version of the checkbox. | `false` |
|
|
482
|
+
| `testId` | A unique identifier for testing purposes. | None (optional) |
|
|
483
|
+
| `key` | A unique key for rendering the component in lists. | `''` |
|
|
484
|
+
| `dataix` | Custom data index attribute for the component. | `0` |
|
|
485
|
+
| `value` | The value of the checkbox. | None (optional) |
|
|
486
|
+
| `helpText` | Optional help text displayed near the checkbox. | None (optional) |
|
|
487
|
+
| `onClickHelp` | A callback function triggered when the help text is clicked. | None (optional) |
|
|
489
488
|
|
|
490
489
|
### Usage Example
|
|
491
490
|
|
|
@@ -494,7 +493,7 @@ The `CheckBox` component is used to create a checkbox input field, often utilize
|
|
|
494
493
|
label="Accept Terms"
|
|
495
494
|
name="termsAccepted"
|
|
496
495
|
checked={this.state.accepted}
|
|
497
|
-
onChange={e => this.setState({ accepted: e.target.checked })}
|
|
496
|
+
onChange={(e) => this.setState({ accepted: e.target.checked })}
|
|
498
497
|
/>
|
|
499
498
|
```
|
|
500
499
|
|
|
@@ -506,22 +505,22 @@ The `Column` component is a layout tool designed for creating structured, flexib
|
|
|
506
505
|
|
|
507
506
|
### Props
|
|
508
507
|
|
|
509
|
-
| Prop | Description
|
|
510
|
-
|
|
511
|
-
| `background` | The background color of the column.
|
|
512
|
-
| `borderLeft` | Controls the presence and style of the left border.
|
|
513
|
-
| `borderRight` | Controls the presence and style of the right border.
|
|
514
|
-
| `children` | The content to be displayed inside the column.
|
|
515
|
-
| `flex` | If `true`, enables flex layout for the column contents.
|
|
516
|
-
| `flexbox` | If `true`, the column will use flexbox layout.
|
|
517
|
-
| `padding` | Controls padding inside the column. Can be boolean or string.
|
|
518
|
-
| `scroll` | If `true`, enables scrolling within the column.
|
|
519
|
-
| `showScrollbar` | Controls the visibility of the scrollbar.
|
|
520
|
-
| `spacing` | Controls the spacing around items inside the column.
|
|
521
|
-
| `width` | The width of the column, responsive on all devices.
|
|
522
|
-
| `widthMobile` | The column's width specifically for mobile devices.
|
|
523
|
-
| `widthTablet` | The column's width specifically for tablet devices.
|
|
524
|
-
| `testId` | A unique identifier for testing purposes.
|
|
508
|
+
| Prop | Description | Default Value |
|
|
509
|
+
| --------------- | ------------------------------------------------------------- | ------------------ |
|
|
510
|
+
| `background` | The background color of the column. | `'transparent'` |
|
|
511
|
+
| `borderLeft` | Controls the presence and style of the left border. | None (optional) |
|
|
512
|
+
| `borderRight` | Controls the presence and style of the right border. | None (optional) |
|
|
513
|
+
| `children` | The content to be displayed inside the column. | None (optional) |
|
|
514
|
+
| `flex` | If `true`, enables flex layout for the column contents. | `true` |
|
|
515
|
+
| `flexbox` | If `true`, the column will use flexbox layout. | `false` |
|
|
516
|
+
| `padding` | Controls padding inside the column. Can be boolean or string. | `false` |
|
|
517
|
+
| `scroll` | If `true`, enables scrolling within the column. | `false` |
|
|
518
|
+
| `showScrollbar` | Controls the visibility of the scrollbar. | `true` |
|
|
519
|
+
| `spacing` | Controls the spacing around items inside the column. | `'var(--padding)'` |
|
|
520
|
+
| `width` | The width of the column, responsive on all devices. | None (optional) |
|
|
521
|
+
| `widthMobile` | The column's width specifically for mobile devices. | None (optional) |
|
|
522
|
+
| `widthTablet` | The column's width specifically for tablet devices. | None (optional) |
|
|
523
|
+
| `testId` | A unique identifier for testing purposes. | None (optional) |
|
|
525
524
|
|
|
526
525
|
### Usage Example
|
|
527
526
|
|
|
@@ -545,12 +544,12 @@ The `Divider` component visually separates content within your layout. It's cust
|
|
|
545
544
|
|
|
546
545
|
### Props
|
|
547
546
|
|
|
548
|
-
| Prop | Description
|
|
549
|
-
|
|
550
|
-
| `margin` | Margin around the divider, specified as a string or number.
|
|
551
|
-
| `color` | The color of the divider line.
|
|
552
|
-
| `align` | The alignment of the divider within its container. Options are `left`, `center`, or `right`.
|
|
553
|
-
| `children` | The content to display within the divider. This can be used to place text or icons in the divider line. | None (optional)
|
|
547
|
+
| Prop | Description | Default Value |
|
|
548
|
+
| ---------- | ------------------------------------------------------------------------------------------------------- | ----------------------- |
|
|
549
|
+
| `margin` | Margin around the divider, specified as a string or number. | `'var(--padding)'` |
|
|
550
|
+
| `color` | The color of the divider line. | `'var(--color-border)'` |
|
|
551
|
+
| `align` | The alignment of the divider within its container. Options are `left`, `center`, or `right`. | `Align.CENTER` |
|
|
552
|
+
| `children` | The content to display within the divider. This can be used to place text or icons in the divider line. | None (optional) |
|
|
554
553
|
|
|
555
554
|
### Usage Example
|
|
556
555
|
|
|
@@ -568,27 +567,29 @@ The `Dialog` component encapsulates a dialog box or modal's structure and behavi
|
|
|
568
567
|
|
|
569
568
|
### Props
|
|
570
569
|
|
|
571
|
-
| Prop
|
|
572
|
-
|
|
573
|
-
| `heading`
|
|
574
|
-
| `content`
|
|
575
|
-
| `contentPadding`
|
|
576
|
-
| `footer`
|
|
577
|
-
| `width`
|
|
578
|
-
| `height`
|
|
579
|
-
| `bordered`
|
|
580
|
-
| `onClose`
|
|
581
|
-
| `scroll`
|
|
582
|
-
| `testId`
|
|
570
|
+
| Prop | Description | Default Value |
|
|
571
|
+
| ---------------- | --------------------------------------------------------------------- | ------------------ |
|
|
572
|
+
| `heading` | The title or heading of the dialog. | None (optional) |
|
|
573
|
+
| `content` | The main content of the dialog, can be a node or an array of strings. | None (optional) |
|
|
574
|
+
| `contentPadding` | Padding inside the dialog, around the content. | `'var(--padding)'` |
|
|
575
|
+
| `footer` | Footer content, typically used for actions. | None (optional) |
|
|
576
|
+
| `width` | Width of the dialog. | None (optional) |
|
|
577
|
+
| `height` | Height of the dialog. | None (optional) |
|
|
578
|
+
| `bordered` | If true, the dialog will have a border. | None (optional) |
|
|
579
|
+
| `onClose` | Function to call when the dialog is requested to close. | None (optional) |
|
|
580
|
+
| `scroll` | Enables scrolling within the dialog. | None (optional) |
|
|
581
|
+
| `testId` | A test identifier for the component. | None (optional) |
|
|
583
582
|
|
|
584
583
|
### Usage Example
|
|
585
584
|
|
|
586
585
|
```jsx
|
|
587
586
|
<Dialog
|
|
588
587
|
dialog={{
|
|
589
|
-
heading:
|
|
590
|
-
content:
|
|
591
|
-
footer:
|
|
588
|
+
heading: 'Dialog Title',
|
|
589
|
+
content: 'This is the content of the dialog.',
|
|
590
|
+
footer: (
|
|
591
|
+
<button onClick={() => console.log('Closing dialog')}>Close</button>
|
|
592
|
+
),
|
|
592
593
|
width: 400,
|
|
593
594
|
scroll: true,
|
|
594
595
|
onClose: () => console.log('Dialog closed'),
|
|
@@ -604,31 +605,31 @@ The `Drawer` component is a flexible and customizable sidebar or navigation draw
|
|
|
604
605
|
|
|
605
606
|
### Props
|
|
606
607
|
|
|
607
|
-
| Prop
|
|
608
|
-
|
|
609
|
-
| `background`
|
|
610
|
-
| `children`
|
|
611
|
-
| `fixed`
|
|
612
|
-
| `open`
|
|
613
|
-
| `setOpen`
|
|
614
|
-
| `right`
|
|
615
|
-
| `shadow`
|
|
616
|
-
| `top`
|
|
617
|
-
| `width`
|
|
618
|
-
| `closedWidth`
|
|
619
|
-
| `button`
|
|
620
|
-
| `buttonAnimate`
|
|
621
|
-
| `buttonPosition`
|
|
622
|
-
| `border`
|
|
623
|
-
| `tabs`
|
|
624
|
-
| `defaultTabIndex`
|
|
625
|
-
| `activeTab`
|
|
626
|
-
| `setActiveTab`
|
|
627
|
-
| `testId`
|
|
628
|
-
| `onResize`
|
|
629
|
-
| `getActiveTab`
|
|
630
|
-
| `onClose`
|
|
631
|
-
| `onOpen`
|
|
608
|
+
| Prop | Description | Default Value |
|
|
609
|
+
| ----------------- | --------------------------------------------------------------------------------------------- | ---------------------------------- |
|
|
610
|
+
| `background` | The background color of the drawer. | `'var(--color-background-raised)'` |
|
|
611
|
+
| `children` | The content displayed inside the drawer. | None (optional) |
|
|
612
|
+
| `fixed` | If true, the drawer is fixed in position. | `false` |
|
|
613
|
+
| `open` | Controls the open state of the drawer. | `false` |
|
|
614
|
+
| `setOpen` | Function to set the open state of the drawer. | None (optional) |
|
|
615
|
+
| `right` | If true, the drawer slides in from the right. | `false` |
|
|
616
|
+
| `shadow` | If true, the drawer casts a shadow. | `false` |
|
|
617
|
+
| `top` | The distance of the drawer from the top of the viewport. | `0` |
|
|
618
|
+
| `width` | The width of the drawer when opened. Can be a single value or an array for responsive design. | `400` |
|
|
619
|
+
| `closedWidth` | The width of the drawer when closed. | `0` |
|
|
620
|
+
| `button` | Optional button to toggle the drawer. Can be boolean or a ReactNode for custom button. | None (optional) |
|
|
621
|
+
| `buttonAnimate` | If true, the toggle button animates on state change. | `true` |
|
|
622
|
+
| `buttonPosition` | Position of the toggle button. | `ButtonPosition.BOTTOM` |
|
|
623
|
+
| `border` | If true, adds a border to the drawer. Can be a boolean or a string for custom border styles. | `false` |
|
|
624
|
+
| `tabs` | Array of tabs for organizing content within the drawer. | None (optional) |
|
|
625
|
+
| `defaultTabIndex` | The index of the tab to be selected by default. | `0` |
|
|
626
|
+
| `activeTab` | Controls the active tab state. | None (optional) |
|
|
627
|
+
| `setActiveTab` | Function to set the active tab. | None (optional) |
|
|
628
|
+
| `testId` | A unique identifier for testing purposes. | None (optional) |
|
|
629
|
+
| `onResize` | Callback function that is called when the drawer is resized. | None (optional) |
|
|
630
|
+
| `getActiveTab` | Function that receives the active tab information. | None (optional) |
|
|
631
|
+
| `onClose` | Callback function that is called when the drawer is closed. | None (optional) |
|
|
632
|
+
| `onOpen` | Callback function that is called when the drawer is opened. | None (optional) |
|
|
632
633
|
|
|
633
634
|
### Usage Example
|
|
634
635
|
|
|
@@ -637,7 +638,7 @@ The `Drawer` component is a flexible and customizable sidebar or navigation draw
|
|
|
637
638
|
open={true}
|
|
638
639
|
right
|
|
639
640
|
width="250px"
|
|
640
|
-
onClose={() => console.log(
|
|
641
|
+
onClose={() => console.log('Drawer closed')}
|
|
641
642
|
>
|
|
642
643
|
{/* Content here */}
|
|
643
644
|
</Drawer>
|
|
@@ -651,22 +652,18 @@ The `Empty` component is a useful UI element for displaying a state where there
|
|
|
651
652
|
|
|
652
653
|
### Props
|
|
653
654
|
|
|
654
|
-
| Prop | Description
|
|
655
|
-
|
|
656
|
-
| `width` | The width of the empty state container.
|
|
657
|
-
| `height` | The height of the empty state container.
|
|
658
|
-
| `text` | The text or ReactNode displayed in the empty state.
|
|
655
|
+
| Prop | Description | Default Value |
|
|
656
|
+
| ---------- | ------------------------------------------------------------------ | --------------- |
|
|
657
|
+
| `width` | The width of the empty state container. | `'auto'` |
|
|
658
|
+
| `height` | The height of the empty state container. | `'auto'` |
|
|
659
|
+
| `text` | The text or ReactNode displayed in the empty state. | `'No data'` |
|
|
659
660
|
| `children` | Children elements to be rendered inside the empty state container. | None (optional) |
|
|
660
|
-
| `testId` | A unique identifier for testing purposes.
|
|
661
|
+
| `testId` | A unique identifier for testing purposes. | None (optional) |
|
|
661
662
|
|
|
662
663
|
### Usage Example
|
|
663
664
|
|
|
664
665
|
```jsx
|
|
665
|
-
<Empty
|
|
666
|
-
width={300}
|
|
667
|
-
height={200}
|
|
668
|
-
text="No items found."
|
|
669
|
-
>
|
|
666
|
+
<Empty width={300} height={200} text="No items found.">
|
|
670
667
|
<Button>Refresh</Button>
|
|
671
668
|
</Empty>
|
|
672
669
|
```
|
|
@@ -679,19 +676,19 @@ The `FileInput` component allows users to select files from their device storage
|
|
|
679
676
|
|
|
680
677
|
### Props
|
|
681
678
|
|
|
682
|
-
| Prop
|
|
683
|
-
|
|
684
|
-
| `label`
|
|
685
|
-
| `loading`
|
|
686
|
-
| `placeholder`
|
|
687
|
-
| `disabled`
|
|
688
|
-
| `file`
|
|
689
|
-
| `accept`
|
|
690
|
-
| `multi`
|
|
691
|
-
| `name`
|
|
692
|
-
| `width`
|
|
693
|
-
| `onChange`
|
|
694
|
-
| `testId`
|
|
679
|
+
| Prop | Description | Default Value |
|
|
680
|
+
| ------------- | -------------------------------------------------------- | -------------------- |
|
|
681
|
+
| `label` | The label displayed on the file input. | `'Select'` |
|
|
682
|
+
| `loading` | Displays a loading state if set to true. | `false` |
|
|
683
|
+
| `placeholder` | Text displayed when no file is selected. | `'No file selected'` |
|
|
684
|
+
| `disabled` | If true, disables the file input. | `false` |
|
|
685
|
+
| `file` | The currently selected file. | None (optional) |
|
|
686
|
+
| `accept` | Defines the file types the file input should accept. | None (optional) |
|
|
687
|
+
| `multi` | Allows multiple files to be selected if set to true. | None (optional) |
|
|
688
|
+
| `name` | The name attribute of the input element. | None (optional) |
|
|
689
|
+
| `width` | The width of the file input. | None (optional) |
|
|
690
|
+
| `onChange` | Callback function called when the selected file changes. | None (optional) |
|
|
691
|
+
| `testId` | A test identifier for the component. | None (optional) |
|
|
695
692
|
|
|
696
693
|
### Usage Example
|
|
697
694
|
|
|
@@ -712,19 +709,19 @@ The `Field` component serves as a container for form elements, providing a struc
|
|
|
712
709
|
|
|
713
710
|
### Props
|
|
714
711
|
|
|
715
|
-
| Prop
|
|
716
|
-
|
|
717
|
-
| `label`
|
|
718
|
-
| `labelLeft`
|
|
719
|
-
| `labelWidth`
|
|
720
|
-
| `children`
|
|
721
|
-
| `helpText`
|
|
722
|
-
| `helpTextMaxWidth` | The maximum width of the help text.
|
|
723
|
-
| `onClickHelp`
|
|
724
|
-
| `lock`
|
|
725
|
-
| `info`
|
|
726
|
-
| `libraryIcon`
|
|
727
|
-
| `testId`
|
|
712
|
+
| Prop | Description | Default Value |
|
|
713
|
+
| ------------------ | ------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
|
|
714
|
+
| `label` | The label for the field. | None |
|
|
715
|
+
| `labelLeft` | If true, aligns the label to the left. | `false` |
|
|
716
|
+
| `labelWidth` | The width of the label. | `'auto'` |
|
|
717
|
+
| `children` | The content of the field, typically an input component. | None (required) |
|
|
718
|
+
| `helpText` | Additional text to assist users with the field. | None |
|
|
719
|
+
| `helpTextMaxWidth` | The maximum width of the help text. | `'300px'` |
|
|
720
|
+
| `onClickHelp` | A callback function triggered when the help text is clicked. | `() => {}` |
|
|
721
|
+
| `lock` | Configuration for a lock icon. | `{ visible: false, active: false, onClick: () => {}, tooltip: '', testId: undefined }` |
|
|
722
|
+
| `info` | Additional information displayed alongside the field. | `''` |
|
|
723
|
+
| `libraryIcon` | Configuration for an icon from a library. | None |
|
|
724
|
+
| `testId` | A unique identifier for testing purposes. | - |
|
|
728
725
|
|
|
729
726
|
### Usage Example
|
|
730
727
|
|
|
@@ -746,20 +743,25 @@ The `Flex` component enables flexible layout arrangements by providing propertie
|
|
|
746
743
|
|
|
747
744
|
### Props
|
|
748
745
|
|
|
749
|
-
| Prop
|
|
750
|
-
|
|
751
|
-
| `alignItems` | The alignment of flex items along the cross axis.
|
|
752
|
-
| `justifyContent` | The alignment of flex items along the main axis.
|
|
753
|
-
| `direction` | The direction of the flex container's main axis.
|
|
754
|
-
| `height` | The height of the flex container.
|
|
755
|
-
| `children` | The child elements of the flex container.
|
|
756
|
-
| `wrap` | If true, allows flex items to wrap onto multiple lines.
|
|
757
|
-
| `gap` | The gap between flex items.
|
|
746
|
+
| Prop | Description | Default Value |
|
|
747
|
+
| ---------------- | ------------------------------------------------------- | ------------- |
|
|
748
|
+
| `alignItems` | The alignment of flex items along the cross axis. | `'initial'` |
|
|
749
|
+
| `justifyContent` | The alignment of flex items along the main axis. | `'initial'` |
|
|
750
|
+
| `direction` | The direction of the flex container's main axis. | `'initial'` |
|
|
751
|
+
| `height` | The height of the flex container. | `'initial'` |
|
|
752
|
+
| `children` | The child elements of the flex container. | `null` |
|
|
753
|
+
| `wrap` | If true, allows flex items to wrap onto multiple lines. | `true` |
|
|
754
|
+
| `gap` | The gap between flex items. | `false` |
|
|
758
755
|
|
|
759
756
|
### Usage Example
|
|
760
757
|
|
|
761
758
|
```jsx
|
|
762
|
-
<Flex
|
|
759
|
+
<Flex
|
|
760
|
+
alignItems="center"
|
|
761
|
+
justifyContent="space-between"
|
|
762
|
+
direction="row"
|
|
763
|
+
gap={10}
|
|
764
|
+
>
|
|
763
765
|
<div>Item 1</div>
|
|
764
766
|
<div>Item 2</div>
|
|
765
767
|
<div>Item 3</div>
|
|
@@ -774,9 +776,9 @@ The `FormRow` component is used to group form elements together in a row layout.
|
|
|
774
776
|
|
|
775
777
|
### Props
|
|
776
778
|
|
|
777
|
-
| Prop | Description
|
|
778
|
-
|
|
779
|
-
| `children` | The child elements of the form row.
|
|
779
|
+
| Prop | Description | Default Value |
|
|
780
|
+
| ---------- | ----------------------------------- | ------------- |
|
|
781
|
+
| `children` | The child elements of the form row. | `null` |
|
|
780
782
|
|
|
781
783
|
### Usage Example
|
|
782
784
|
|
|
@@ -795,15 +797,15 @@ The `Grid` component allows you to create a grid layout with specified rows and
|
|
|
795
797
|
|
|
796
798
|
### Props
|
|
797
799
|
|
|
798
|
-
| Prop | Description
|
|
799
|
-
|
|
800
|
-
| `rows` | The CSS value for defining the grid rows
|
|
801
|
-
| `columns` | The CSS value for defining the grid columns
|
|
802
|
-
| `columnsTablet` | The CSS value for defining grid columns on tablets
|
|
803
|
-
| `columnsMobile` | The CSS value for defining grid columns on mobiles
|
|
804
|
-
| `gap` | Whether to include gap between grid items
|
|
805
|
-
| `height` | The CSS value for defining the grid height
|
|
806
|
-
| `children` | The child elements of the grid
|
|
800
|
+
| Prop | Description | Default Value |
|
|
801
|
+
| --------------- | -------------------------------------------------- | ------------- |
|
|
802
|
+
| `rows` | The CSS value for defining the grid rows | `'initial'` |
|
|
803
|
+
| `columns` | The CSS value for defining the grid columns | `'initial'` |
|
|
804
|
+
| `columnsTablet` | The CSS value for defining grid columns on tablets | `null` |
|
|
805
|
+
| `columnsMobile` | The CSS value for defining grid columns on mobiles | `null` |
|
|
806
|
+
| `gap` | Whether to include gap between grid items | `false` |
|
|
807
|
+
| `height` | The CSS value for defining the grid height | `'initial'` |
|
|
808
|
+
| `children` | The child elements of the grid | `null` |
|
|
807
809
|
|
|
808
810
|
### Usage Example
|
|
809
811
|
|
|
@@ -823,14 +825,14 @@ The `Icon` component is a wrapper used to render various types of icons within y
|
|
|
823
825
|
|
|
824
826
|
### Props
|
|
825
827
|
|
|
826
|
-
| Prop | Description
|
|
827
|
-
|
|
828
|
+
| Prop | Description | Default Value |
|
|
829
|
+
| ----------- | ---------------------------------------------------------------------- | ------------- |
|
|
828
830
|
| `icon` | The icon to be rendered. This can be a ReactNode, string name, or SVG. | |
|
|
829
|
-
| `onClick` | The callback function triggered when the icon is clicked.
|
|
830
|
-
| `clickable` | Determines whether the icon is clickable or not.
|
|
831
|
-
| `color` | The color of the icon.
|
|
832
|
-
| `size` | The size of the icon.
|
|
833
|
-
| `testId` | A test id for identification in automated tests.
|
|
831
|
+
| `onClick` | The callback function triggered when the icon is clicked. | - |
|
|
832
|
+
| `clickable` | Determines whether the icon is clickable or not. | `false` |
|
|
833
|
+
| `color` | The color of the icon. | - |
|
|
834
|
+
| `size` | The size of the icon. | - |
|
|
835
|
+
| `testId` | A test id for identification in automated tests. | - |
|
|
834
836
|
|
|
835
837
|
### Usage Example
|
|
836
838
|
|
|
@@ -857,11 +859,11 @@ The `InputGroup` component is used to group together multiple input elements or
|
|
|
857
859
|
|
|
858
860
|
### Props
|
|
859
861
|
|
|
860
|
-
| Prop | Description
|
|
861
|
-
|
|
862
|
-
| `children` | The input elements or components to be grouped.
|
|
863
|
-
| `small` | Determines whether the input group is small or not.
|
|
864
|
-
| `width` | The width of the input group.
|
|
862
|
+
| Prop | Description | Default Value |
|
|
863
|
+
| ---------- | --------------------------------------------------- | ------------- |
|
|
864
|
+
| `children` | The input elements or components to be grouped. | |
|
|
865
|
+
| `small` | Determines whether the input group is small or not. | `false` |
|
|
866
|
+
| `width` | The width of the input group. | `'100%'` |
|
|
865
867
|
|
|
866
868
|
### Usage Example
|
|
867
869
|
|
|
@@ -880,11 +882,11 @@ The `InputGroupAddon` component is used to add additional content or components
|
|
|
880
882
|
|
|
881
883
|
### Props
|
|
882
884
|
|
|
883
|
-
| Prop
|
|
884
|
-
|
|
885
|
-
| `children`
|
|
886
|
-
| `groupOrder`
|
|
887
|
-
| `small`
|
|
885
|
+
| Prop | Description | Default Value |
|
|
886
|
+
| ------------ | --------------------------------------------------------- | ------------- |
|
|
887
|
+
| `children` | The content or components to be added to the input group. | |
|
|
888
|
+
| `groupOrder` | The order of the addon within the input group. | `null` |
|
|
889
|
+
| `small` | Determines whether the addon is small or not. | `false` |
|
|
888
890
|
|
|
889
891
|
### Usage Example
|
|
890
892
|
|
|
@@ -903,14 +905,14 @@ The `HelpIcon` component provides an icon with optional tooltip text to offer as
|
|
|
903
905
|
|
|
904
906
|
### Props
|
|
905
907
|
|
|
906
|
-
| Prop
|
|
907
|
-
|
|
908
|
-
| `text`
|
|
909
|
-
| `onClick`
|
|
910
|
-
| `icon`
|
|
911
|
-
| `active`
|
|
912
|
-
| `maxWidth`
|
|
913
|
-
| `testId`
|
|
908
|
+
| Prop | Description | Default Value |
|
|
909
|
+
| ---------- | --------------------------------------------------------------------------------------------------- | ------------- |
|
|
910
|
+
| `text` | The text or content to display in the tooltip. | |
|
|
911
|
+
| `onClick` | A function to be called when the icon is clicked. | |
|
|
912
|
+
| `icon` | The icon to display. It can be a ReactNode or a string representing an icon (e.g., "help", "info"). | `'help'` |
|
|
913
|
+
| `active` | Determines whether the icon is in an active state. | `false` |
|
|
914
|
+
| `maxWidth` | The maximum width of the tooltip. | `'300px'` |
|
|
915
|
+
| `testId` | The test ID for identifying the component in tests. | |
|
|
914
916
|
|
|
915
917
|
### Usage Example
|
|
916
918
|
|
|
@@ -926,18 +928,18 @@ The `Heading` component renders a heading element with optional features such as
|
|
|
926
928
|
|
|
927
929
|
### Props
|
|
928
930
|
|
|
929
|
-
| Prop | Description
|
|
930
|
-
|
|
931
|
-
| `children` | The content to be rendered within the heading element.
|
|
932
|
-
| `helpText` | Additional text or content to provide assistance or information about the heading.
|
|
933
|
-
| `onClick` | A function to be called when the heading is clicked.
|
|
934
|
-
| `onClickHelp` | A function to be called when the help text is clicked.
|
|
935
|
-
| `onIconClick` | A function to be called when the icon is clicked.
|
|
936
|
-
| `icon` | The icon element to be displayed alongside the heading.
|
|
937
|
-
| `libraryIcon` | Configuration for the library icon, containing an `onClick` function and an optional `tooltip` text.
|
|
938
|
-
| `marginBottom` | The margin at the bottom of the heading.
|
|
939
|
-
| `top` | Determines whether the heading is displayed at the top of the container.
|
|
940
|
-
| `testId` | The test ID for identifying the component in tests.
|
|
931
|
+
| Prop | Description | Default Value |
|
|
932
|
+
| -------------- | ---------------------------------------------------------------------------------------------------- | ------------- |
|
|
933
|
+
| `children` | The content to be rendered within the heading element. | |
|
|
934
|
+
| `helpText` | Additional text or content to provide assistance or information about the heading. | |
|
|
935
|
+
| `onClick` | A function to be called when the heading is clicked. | |
|
|
936
|
+
| `onClickHelp` | A function to be called when the help text is clicked. | |
|
|
937
|
+
| `onIconClick` | A function to be called when the icon is clicked. | |
|
|
938
|
+
| `icon` | The icon element to be displayed alongside the heading. | |
|
|
939
|
+
| `libraryIcon` | Configuration for the library icon, containing an `onClick` function and an optional `tooltip` text. | |
|
|
940
|
+
| `marginBottom` | The margin at the bottom of the heading. | |
|
|
941
|
+
| `top` | Determines whether the heading is displayed at the top of the container. | `false` |
|
|
942
|
+
| `testId` | The test ID for identifying the component in tests. | |
|
|
941
943
|
|
|
942
944
|
### Usage Example
|
|
943
945
|
|
|
@@ -952,7 +954,10 @@ The `Heading` component renders a heading element with optional features such as
|
|
|
952
954
|
helpText="This is the main title of the page"
|
|
953
955
|
onClickHelp={() => console.log('Help text clicked')}
|
|
954
956
|
icon={<QuestionCircleOutlined />}
|
|
955
|
-
libraryIcon={{
|
|
957
|
+
libraryIcon={{
|
|
958
|
+
onClick: () => console.log('Library icon clicked'),
|
|
959
|
+
tooltip: 'More info',
|
|
960
|
+
}}
|
|
956
961
|
marginBottom="10px"
|
|
957
962
|
>
|
|
958
963
|
Page Title
|
|
@@ -967,30 +972,30 @@ The `Input` component provides an input field for users to enter data. It suppor
|
|
|
967
972
|
|
|
968
973
|
### Props
|
|
969
974
|
|
|
970
|
-
| Prop
|
|
971
|
-
|
|
972
|
-
| `error`
|
|
973
|
-
| `warning`
|
|
974
|
-
| `tooltip`
|
|
975
|
-
| `name`
|
|
976
|
-
| `type`
|
|
977
|
-
| `onChange`
|
|
978
|
-
| `onKeyPress`
|
|
979
|
-
| `onFocus`
|
|
980
|
-
| `onBlur`
|
|
981
|
-
| `onPaste`
|
|
982
|
-
| `small`
|
|
983
|
-
| `placeholder`
|
|
984
|
-
| `tabIndex`
|
|
985
|
-
| `value`
|
|
986
|
-
| `disabled`
|
|
987
|
-
| `right`
|
|
988
|
-
| `groupOrder`
|
|
989
|
-
| `maxTooltipWidth` | The maximum width of the tooltip.
|
|
990
|
-
| `testId`
|
|
991
|
-
| `size`
|
|
992
|
-
| `isInTable`
|
|
993
|
-
| `width`
|
|
975
|
+
| Prop | Description | Default Value |
|
|
976
|
+
| ----------------- | ------------------------------------------------------------------------ | ------------- |
|
|
977
|
+
| `error` | Error message or content to indicate validation errors. | `null` |
|
|
978
|
+
| `warning` | Warning message or content to indicate potential issues. | `null` |
|
|
979
|
+
| `tooltip` | Additional information or context provided as a tooltip. | `null` |
|
|
980
|
+
| `name` | The name attribute of the input field. | - |
|
|
981
|
+
| `type` | The type of input field (e.g., text, number, email). | `'text'` |
|
|
982
|
+
| `onChange` | Event handler called when the input value changes. | `() => {}` |
|
|
983
|
+
| `onKeyPress` | Event handler called when a key is pressed while the input is focused. | `() => {}` |
|
|
984
|
+
| `onFocus` | Event handler called when the input is focused. | `() => {}` |
|
|
985
|
+
| `onBlur` | Event handler called when the input loses focus. | `() => {}` |
|
|
986
|
+
| `onPaste` | Event handler called when content is pasted into the input field. | `() => {}` |
|
|
987
|
+
| `small` | Determines whether to render a smaller-sized input field. | `false` |
|
|
988
|
+
| `placeholder` | Placeholder text displayed when the input is empty. | `''` |
|
|
989
|
+
| `tabIndex` | The tab index of the input field. | `0` |
|
|
990
|
+
| `value` | The value of the input field. | `''` |
|
|
991
|
+
| `disabled` | Determines whether the input field is disabled. | `false` |
|
|
992
|
+
| `right` | Determines whether to align content to the right of the input field. | `false` |
|
|
993
|
+
| `groupOrder` | Position of the input field within a group or sequence. | `null` |
|
|
994
|
+
| `maxTooltipWidth` | The maximum width of the tooltip. | - |
|
|
995
|
+
| `testId` | Test ID for identifying the component in tests. | - |
|
|
996
|
+
| `size` | _Deprecated._ Use `width` instead to define the size of the input field. | `null` |
|
|
997
|
+
| `isInTable` | Specifies whether the input is used within a table. | `false` |
|
|
998
|
+
| `width` | Width of the input field. | - |
|
|
994
999
|
|
|
995
1000
|
### Usage Example
|
|
996
1001
|
|
|
@@ -1024,27 +1029,27 @@ The `Label` component represents a label or caption associated with an input fie
|
|
|
1024
1029
|
|
|
1025
1030
|
### Props
|
|
1026
1031
|
|
|
1027
|
-
| Prop | Description
|
|
1028
|
-
|
|
1029
|
-
| `label` | The text or content of the label.
|
|
1030
|
-
| `width` | The width of the label.
|
|
1031
|
-
| `helpText` | Help text or additional information associated with the label.
|
|
1032
|
-
| `helpTextMaxWidth` | The maximum width of the help text.
|
|
1033
|
-
| `onClickHelp` | Event handler called when the help icon or text is clicked.
|
|
1034
|
-
| `lock` | Configuration for the lock icon displayed with the label.
|
|
1035
|
-
| `libraryIcon` | Configuration for the library icon displayed with the label.
|
|
1036
|
-
| `labelLeft` | Determines whether to align the label to the left side.
|
|
1037
|
-
| `info` | Additional information or tooltip associated with the label.
|
|
1032
|
+
| Prop | Description | Default Value |
|
|
1033
|
+
| ------------------ | -------------------------------------------------------------- | ------------- |
|
|
1034
|
+
| `label` | The text or content of the label. | `null` |
|
|
1035
|
+
| `width` | The width of the label. | `'auto'` |
|
|
1036
|
+
| `helpText` | Help text or additional information associated with the label. | `''` |
|
|
1037
|
+
| `helpTextMaxWidth` | The maximum width of the help text. | `'300px'` |
|
|
1038
|
+
| `onClickHelp` | Event handler called when the help icon or text is clicked. | - |
|
|
1039
|
+
| `lock` | Configuration for the lock icon displayed with the label. | See below |
|
|
1040
|
+
| `libraryIcon` | Configuration for the library icon displayed with the label. | - |
|
|
1041
|
+
| `labelLeft` | Determines whether to align the label to the left side. | `false` |
|
|
1042
|
+
| `info` | Additional information or tooltip associated with the label. | - |
|
|
1038
1043
|
|
|
1039
1044
|
**Lock Props:**
|
|
1040
1045
|
|
|
1041
|
-
| Prop
|
|
1042
|
-
|
|
1043
|
-
| `visible`
|
|
1044
|
-
| `active`
|
|
1045
|
-
| `onClick`
|
|
1046
|
-
| `tooltip`
|
|
1047
|
-
| `testId`
|
|
1046
|
+
| Prop | Description | Default Value |
|
|
1047
|
+
| --------- | --------------------------------------------------- | ------------- |
|
|
1048
|
+
| `visible` | Determines whether the lock icon is visible. | `false` |
|
|
1049
|
+
| `active` | Determines whether the lock icon is active. | `false` |
|
|
1050
|
+
| `onClick` | Event handler called when the lock icon is clicked. | `() => {}` |
|
|
1051
|
+
| `tooltip` | Tooltip text displayed when hovering over the icon. | `''` |
|
|
1052
|
+
| `testId` | Test ID for identifying the lock icon in tests. | - |
|
|
1048
1053
|
|
|
1049
1054
|
### Usage Example
|
|
1050
1055
|
|
|
@@ -1074,33 +1079,33 @@ The `List` component renders a list of data items with various customization opt
|
|
|
1074
1079
|
|
|
1075
1080
|
### Props
|
|
1076
1081
|
|
|
1077
|
-
| Prop | Description
|
|
1078
|
-
|
|
1079
|
-
| `drawer` | Specifies whether the list is rendered as a drawer.
|
|
1080
|
-
| `list` | The data to be displayed in the list.
|
|
1081
|
-
| `bordered` | Determines whether the list items have borders.
|
|
1082
|
-
| `expanding` | Specifies whether the list items can be expanded to show additional content.
|
|
1083
|
-
| `narrow` | Determines whether the list items have a narrower layout.
|
|
1084
|
-
| `toggleNarrow` | Specifies whether to enable toggling the narrow mode.
|
|
1085
|
-
| `onToggleNarrow` | Callback function called when toggling the narrow mode.
|
|
1086
|
-
| `invokeEditOnRowClick` | Determines whether clicking on a row invokes editing mode.
|
|
1087
|
-
| `noHeader` | Specifies whether to hide the header of the list.
|
|
1088
|
-
| `stickyHeader` | Determines whether the list header sticks to the top when scrolling.
|
|
1089
|
-
| `draggable` | Specifies whether the list items can be dragged to reorder.
|
|
1090
|
-
| `onListReorder` | Callback function called when reordering the list items.
|
|
1091
|
-
| `marginBottom` | The margin bottom applied to the list.
|
|
1092
|
-
| `height` | The height of the list.
|
|
1093
|
-
| `testId` | Test ID for identifying the list component.
|
|
1094
|
-
| `scrollDetails` | Configuration for scrolling behavior and infinite scroll functionality. See details below.
|
|
1082
|
+
| Prop | Description | Default Value |
|
|
1083
|
+
| ---------------------- | ------------------------------------------------------------------------------------------ | ----------------- |
|
|
1084
|
+
| `drawer` | Specifies whether the list is rendered as a drawer. | `false` |
|
|
1085
|
+
| `list` | The data to be displayed in the list. | **Required** |
|
|
1086
|
+
| `bordered` | Determines whether the list items have borders. | `false` |
|
|
1087
|
+
| `expanding` | Specifies whether the list items can be expanded to show additional content. | `false` |
|
|
1088
|
+
| `narrow` | Determines whether the list items have a narrower layout. | `false` |
|
|
1089
|
+
| `toggleNarrow` | Specifies whether to enable toggling the narrow mode. | `false` |
|
|
1090
|
+
| `onToggleNarrow` | Callback function called when toggling the narrow mode. | `() => {}` |
|
|
1091
|
+
| `invokeEditOnRowClick` | Determines whether clicking on a row invokes editing mode. | `true` |
|
|
1092
|
+
| `noHeader` | Specifies whether to hide the header of the list. | `false` |
|
|
1093
|
+
| `stickyHeader` | Determines whether the list header sticks to the top when scrolling. | - |
|
|
1094
|
+
| `draggable` | Specifies whether the list items can be dragged to reorder. | `false` |
|
|
1095
|
+
| `onListReorder` | Callback function called when reordering the list items. | `() => {}` |
|
|
1096
|
+
| `marginBottom` | The margin bottom applied to the list. | `0` |
|
|
1097
|
+
| `height` | The height of the list. | - |
|
|
1098
|
+
| `testId` | Test ID for identifying the list component. | - |
|
|
1099
|
+
| `scrollDetails` | Configuration for scrolling behavior and infinite scroll functionality. See details below. | See details below |
|
|
1095
1100
|
|
|
1096
1101
|
**Scroll Details:**
|
|
1097
1102
|
|
|
1098
|
-
| Prop | Description
|
|
1099
|
-
|
|
1100
|
-
| `scrollable` | Determines whether the list is scrollable.
|
|
1101
|
-
| `hideScrollbar` | Determines whether to hide the scrollbar when scrolling.
|
|
1102
|
-
| `triggerScrollToActiveItem` | Specifies whether scrolling should be triggered to display the active item.
|
|
1103
|
-
| `infiniteScroll` | Specifies whether to enable infinite scroll functionality.
|
|
1103
|
+
| Prop | Description | Default Value |
|
|
1104
|
+
| --------------------------- | --------------------------------------------------------------------------- | ------------- |
|
|
1105
|
+
| `scrollable` | Determines whether the list is scrollable. | `false` |
|
|
1106
|
+
| `hideScrollbar` | Determines whether to hide the scrollbar when scrolling. | `false` |
|
|
1107
|
+
| `triggerScrollToActiveItem` | Specifies whether scrolling should be triggered to display the active item. | `false` |
|
|
1108
|
+
| `infiniteScroll` | Specifies whether to enable infinite scroll functionality. | `false` |
|
|
1104
1109
|
|
|
1105
1110
|
### Usage Example
|
|
1106
1111
|
|
|
@@ -1129,20 +1134,23 @@ The `ListHeading` component represents the header of a list. It typically includ
|
|
|
1129
1134
|
|
|
1130
1135
|
### Props
|
|
1131
1136
|
|
|
1132
|
-
| Prop | Description
|
|
1133
|
-
|
|
1134
|
-
| `name` | The name or title of the list.
|
|
1135
|
-
| `actions` | An array of action items to be displayed in the header.
|
|
1136
|
-
| `toggleNarrow` | Specifies whether to enable toggling the narrow mode for the list.
|
|
1137
|
-
| `onToggleNarrow` | Callback function called when toggling the narrow mode.
|
|
1138
|
-
| `stickyHeader` | Determines whether the list header sticks to the top when scrolling.
|
|
1137
|
+
| Prop | Description | Default Value |
|
|
1138
|
+
| ---------------- | -------------------------------------------------------------------- | ------------- |
|
|
1139
|
+
| `name` | The name or title of the list. | **Required** |
|
|
1140
|
+
| `actions` | An array of action items to be displayed in the header. | `[]` |
|
|
1141
|
+
| `toggleNarrow` | Specifies whether to enable toggling the narrow mode for the list. | `false` |
|
|
1142
|
+
| `onToggleNarrow` | Callback function called when toggling the narrow mode. | `() => {}` |
|
|
1143
|
+
| `stickyHeader` | Determines whether the list header sticks to the top when scrolling. | - |
|
|
1139
1144
|
|
|
1140
1145
|
### Usage Example
|
|
1141
1146
|
|
|
1142
1147
|
```jsx
|
|
1143
1148
|
<ListHeading
|
|
1144
1149
|
name="My List"
|
|
1145
|
-
actions={[
|
|
1150
|
+
actions={[
|
|
1151
|
+
{ label: 'Add', onClick: handleAdd },
|
|
1152
|
+
{ label: 'Edit', onClick: handleEdit },
|
|
1153
|
+
]}
|
|
1146
1154
|
toggleNarrow
|
|
1147
1155
|
onToggleNarrow={handleToggleNarrow}
|
|
1148
1156
|
stickyHeader
|
|
@@ -1157,10 +1165,10 @@ The `ListSubheading` component represents a subheading within a list. It is typi
|
|
|
1157
1165
|
|
|
1158
1166
|
### Props
|
|
1159
1167
|
|
|
1160
|
-
| Prop | Description
|
|
1161
|
-
|
|
1162
|
-
| `item` | An object containing data for the subheading item.
|
|
1163
|
-
| `index` | The index of the subheading item within the list.
|
|
1168
|
+
| Prop | Description | Default Value |
|
|
1169
|
+
| ------- | -------------------------------------------------- | ------------- |
|
|
1170
|
+
| `item` | An object containing data for the subheading item. | **Required** |
|
|
1171
|
+
| `index` | The index of the subheading item within the list. | - |
|
|
1164
1172
|
|
|
1165
1173
|
### Usage Example
|
|
1166
1174
|
|
|
@@ -1176,17 +1184,17 @@ The `Loader` component renders a loading indicator, typically used to indicate t
|
|
|
1176
1184
|
|
|
1177
1185
|
### Props
|
|
1178
1186
|
|
|
1179
|
-
| Prop | Description
|
|
1180
|
-
|
|
1181
|
-
| `width` | The width of the loader.
|
|
1182
|
-
| `height` | The height of the loader.
|
|
1183
|
-
| `text` | The text to display alongside the loader.
|
|
1184
|
-
| `details` | Additional details or information to display below the loader.
|
|
1185
|
-
| `fullViewPortSize` | A boolean indicating whether the loader should cover the entire viewport.
|
|
1186
|
-
| `cover` | A boolean indicating whether the loader should cover its parent element.
|
|
1187
|
-
| `children` | Additional React elements to render alongside the loader.
|
|
1188
|
-
| `theme` | The theme of the loader. This can be either `Theme.DARK` or `Theme.LIGHT`.
|
|
1189
|
-
| `testId` | A string value representing the test ID for testing purposes.
|
|
1187
|
+
| Prop | Description | Default Value |
|
|
1188
|
+
| ------------------ | -------------------------------------------------------------------------- | ------------- |
|
|
1189
|
+
| `width` | The width of the loader. | |
|
|
1190
|
+
| `height` | The height of the loader. | |
|
|
1191
|
+
| `text` | The text to display alongside the loader. | `''` (empty) |
|
|
1192
|
+
| `details` | Additional details or information to display below the loader. | `''` (empty) |
|
|
1193
|
+
| `fullViewPortSize` | A boolean indicating whether the loader should cover the entire viewport. | `false` |
|
|
1194
|
+
| `cover` | A boolean indicating whether the loader should cover its parent element. | `false` |
|
|
1195
|
+
| `children` | Additional React elements to render alongside the loader. | `null` |
|
|
1196
|
+
| `theme` | The theme of the loader. This can be either `Theme.DARK` or `Theme.LIGHT`. | `Theme.DARK` |
|
|
1197
|
+
| `testId` | A string value representing the test ID for testing purposes. | `null` |
|
|
1190
1198
|
|
|
1191
1199
|
### Usage Example
|
|
1192
1200
|
|
|
@@ -1202,31 +1210,31 @@ The `Menu` component is used to render a menu with various options or sections.
|
|
|
1202
1210
|
|
|
1203
1211
|
### Props
|
|
1204
1212
|
|
|
1205
|
-
| Prop
|
|
1206
|
-
|
|
1207
|
-
| `menu`
|
|
1208
|
-
| `contextMenu`
|
|
1209
|
-
| `width`
|
|
1210
|
-
| `disabled`
|
|
1211
|
-
| `badgeTitle`
|
|
1212
|
-
| `badgeDot`
|
|
1213
|
-
| `loading`
|
|
1214
|
-
| `fullHeightTrigger`
|
|
1215
|
-
| `closeOnOptionClick`
|
|
1216
|
-
| `groupOrder`
|
|
1217
|
-
| `overflowContainer`
|
|
1218
|
-
| `maxHeight`
|
|
1219
|
-
| `testId`
|
|
1220
|
-
| `open`
|
|
1221
|
-
| `setOpen`
|
|
1222
|
-
| `closeParent`
|
|
1223
|
-
| `tree`
|
|
1224
|
-
| `path`
|
|
1225
|
-
| `isNested`
|
|
1226
|
-
| `tooltip`
|
|
1227
|
-
| `error`
|
|
1228
|
-
| `warning`
|
|
1229
|
-
| `title`
|
|
1213
|
+
| Prop | Description | Default Value |
|
|
1214
|
+
| -------------------- | ----------------------------------------------------------------------------- | ------------- |
|
|
1215
|
+
| `menu` | An object containing properties for configuring the menu. | `{}` |
|
|
1216
|
+
| `contextMenu` | A boolean indicating whether the menu is a context menu. | `false` |
|
|
1217
|
+
| `width` | The width of the menu. | - |
|
|
1218
|
+
| `disabled` | A boolean indicating whether the menu is disabled. | `false` |
|
|
1219
|
+
| `badgeTitle` | The title text for a badge, if applicable. | `''` (empty) |
|
|
1220
|
+
| `badgeDot` | A boolean indicating whether to display a dot badge. | `false` |
|
|
1221
|
+
| `loading` | A boolean indicating whether the menu is in a loading state. | `false` |
|
|
1222
|
+
| `fullHeightTrigger` | A boolean indicating whether the trigger should have full height. | `false` |
|
|
1223
|
+
| `closeOnOptionClick` | A boolean indicating whether the menu should close when an option is clicked. | `false` |
|
|
1224
|
+
| `groupOrder` | The order of the menu group. | `null` |
|
|
1225
|
+
| `overflowContainer` | A boolean indicating whether the menu should have an overflow container. | `false` |
|
|
1226
|
+
| `maxHeight` | The maximum height of the menu. | - |
|
|
1227
|
+
| `testId` | A string representing the test ID for testing purposes. | - |
|
|
1228
|
+
| `open` | A boolean indicating whether the menu is open. | `false` |
|
|
1229
|
+
| `setOpen` | A function to set the open state of the menu. | - |
|
|
1230
|
+
| `closeParent` | A function to close the parent menu. | - |
|
|
1231
|
+
| `tree` | The tree structure of the menu. | `null` |
|
|
1232
|
+
| `path` | The path of the menu. | `null` |
|
|
1233
|
+
| `isNested` | A boolean indicating whether the menu is nested. | `false` |
|
|
1234
|
+
| `tooltip` | The tooltip for the menu. | `null` |
|
|
1235
|
+
| `error` | The error message for the menu. | `null` |
|
|
1236
|
+
| `warning` | The warning message for the menu. | `null` |
|
|
1237
|
+
| `title` | The title text for the menu. | `''` (empty) |
|
|
1230
1238
|
|
|
1231
1239
|
### Menu Properties
|
|
1232
1240
|
|
|
@@ -1255,7 +1263,10 @@ The `menu` prop accepts an object with the following properties:
|
|
|
1255
1263
|
colored: true,
|
|
1256
1264
|
small: true,
|
|
1257
1265
|
label: 'Menu Label',
|
|
1258
|
-
sections: [
|
|
1266
|
+
sections: [
|
|
1267
|
+
<MenuItem key="1" label="Item 1" />,
|
|
1268
|
+
<MenuItem key="2" label="Item 2" />,
|
|
1269
|
+
],
|
|
1259
1270
|
placement: 'bottom-end',
|
|
1260
1271
|
testId: 'menu-test-id',
|
|
1261
1272
|
fullHeightTrigger: true,
|
|
@@ -1273,9 +1284,9 @@ The `Message` component is used to display informative messages to users.
|
|
|
1273
1284
|
|
|
1274
1285
|
### Props
|
|
1275
1286
|
|
|
1276
|
-
| Prop
|
|
1277
|
-
|
|
1278
|
-
| `message`
|
|
1287
|
+
| Prop | Description | Default Value |
|
|
1288
|
+
| --------- | ------------------------------------------------ | ------------- |
|
|
1289
|
+
| `message` | An object containing properties for the message. | `{}` |
|
|
1279
1290
|
|
|
1280
1291
|
### Message Properties
|
|
1281
1292
|
|
|
@@ -1323,14 +1334,14 @@ The `Modal` component is used to display content in a modal dialog box.
|
|
|
1323
1334
|
|
|
1324
1335
|
### Props
|
|
1325
1336
|
|
|
1326
|
-
| Prop
|
|
1327
|
-
|
|
1328
|
-
| `children`
|
|
1329
|
-
| `visible`
|
|
1330
|
-
| `centered`
|
|
1331
|
-
| `width`
|
|
1332
|
-
| `onEnter`
|
|
1333
|
-
| `onEscape`
|
|
1337
|
+
| Prop | Description | Default Value |
|
|
1338
|
+
| ---------- | ------------------------------------------------------------------------------- | ------------- |
|
|
1339
|
+
| `children` | The content to be displayed within the modal. | - |
|
|
1340
|
+
| `visible` | A boolean indicating whether the modal is visible. | `false` |
|
|
1341
|
+
| `centered` | A boolean indicating whether the modal is centered vertically and horizontally. | `false` |
|
|
1342
|
+
| `width` | The width of the modal. | `'100%'` |
|
|
1343
|
+
| `onEnter` | A function called when the modal is opened. | - |
|
|
1344
|
+
| `onEscape` | A function called when the escape key is pressed to close the modal. | - |
|
|
1334
1345
|
|
|
1335
1346
|
### Usage Example
|
|
1336
1347
|
|
|
@@ -1354,15 +1365,15 @@ The `OptionDropdown` component is used to display a dropdown menu with selectabl
|
|
|
1354
1365
|
|
|
1355
1366
|
### Props
|
|
1356
1367
|
|
|
1357
|
-
| Prop
|
|
1358
|
-
|
|
1359
|
-
| `name`
|
|
1360
|
-
| `label`
|
|
1361
|
-
| `options`
|
|
1362
|
-
| `onChange`
|
|
1363
|
-
| `showHeader`
|
|
1364
|
-
| `maxHeight`
|
|
1365
|
-
| `testId`
|
|
1368
|
+
| Prop | Description | Default Value |
|
|
1369
|
+
| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
|
|
1370
|
+
| `name` | The name attribute for the dropdown input element. | - |
|
|
1371
|
+
| `label` | The label for the dropdown. | - |
|
|
1372
|
+
| `options` | An array of options to be displayed in the dropdown. Each option should have a `label` and `value` property. | - |
|
|
1373
|
+
| `onChange` | A function to be called when the selected options change. | - |
|
|
1374
|
+
| `showHeader` | A boolean indicating whether to display a header above the dropdown options. | `true` |
|
|
1375
|
+
| `maxHeight` | The maximum height of the dropdown menu. | `'40vh'` |
|
|
1376
|
+
| `testId` | Test ID used for testing purposes. | - |
|
|
1366
1377
|
|
|
1367
1378
|
### Usage Example
|
|
1368
1379
|
|
|
@@ -1389,23 +1400,18 @@ The `Page` component is used to create a page layout with optional padding and s
|
|
|
1389
1400
|
|
|
1390
1401
|
### Props
|
|
1391
1402
|
|
|
1392
|
-
| Prop
|
|
1393
|
-
|
|
1394
|
-
| `children`
|
|
1395
|
-
| `left`
|
|
1396
|
-
| `padding`
|
|
1397
|
-
| `scroll`
|
|
1398
|
-
| `top`
|
|
1403
|
+
| Prop | Description | Default Value |
|
|
1404
|
+
| ---------- | ------------------------------------------------------------------------------------ | --------------------- |
|
|
1405
|
+
| `children` | The content to be rendered within the page layout. | - |
|
|
1406
|
+
| `left` | The width of the left margin of the page. | `var(--size-sidebar)` |
|
|
1407
|
+
| `padding` | Determines whether padding should be applied to the page content. | `true` |
|
|
1408
|
+
| `scroll` | A boolean indicating whether the page should be scrollable if its content overflows. | `true` |
|
|
1409
|
+
| `top` | The height of the top margin of the page. | `var(--size-topbar)` |
|
|
1399
1410
|
|
|
1400
1411
|
### Usage Example
|
|
1401
1412
|
|
|
1402
1413
|
```jsx
|
|
1403
|
-
<Page
|
|
1404
|
-
left="20%"
|
|
1405
|
-
padding={true}
|
|
1406
|
-
scroll={true}
|
|
1407
|
-
top="50px"
|
|
1408
|
-
>
|
|
1414
|
+
<Page left="20%" padding={true} scroll={true} top="50px">
|
|
1409
1415
|
{/* Page content goes here */}
|
|
1410
1416
|
</Page>
|
|
1411
1417
|
```
|
|
@@ -1418,16 +1424,16 @@ The `Pagination` component provides navigation controls for navigating through a
|
|
|
1418
1424
|
|
|
1419
1425
|
### Props
|
|
1420
1426
|
|
|
1421
|
-
| Prop | Description
|
|
1422
|
-
|
|
1423
|
-
| `pagination` | An object containing pagination configuration options.
|
|
1424
|
-
| `rowCount` | The total number of rows/items to be paginated.
|
|
1425
|
-
| `selectedPage` | The currently selected page number.
|
|
1426
|
-
| `onSelectPage` | A function to handle page selection. It takes the selected page number as an argument.
|
|
1427
|
-
| `rowsPerPage` | Configuration options for selecting the number of rows/items per page.
|
|
1428
|
-
| `small` | A boolean indicating whether to render a smaller version of the pagination controls.
|
|
1429
|
-
| `errorMessageTemplate
|
|
1430
|
-
| `testIds` | An object containing test IDs for specific elements within the pagination component.
|
|
1427
|
+
| Prop | Description | Default Value |
|
|
1428
|
+
| ---------------------- | -------------------------------------------------------------------------------------- | ------------- |
|
|
1429
|
+
| `pagination` | An object containing pagination configuration options. | - |
|
|
1430
|
+
| `rowCount` | The total number of rows/items to be paginated. | - |
|
|
1431
|
+
| `selectedPage` | The currently selected page number. | - |
|
|
1432
|
+
| `onSelectPage` | A function to handle page selection. It takes the selected page number as an argument. | - |
|
|
1433
|
+
| `rowsPerPage` | Configuration options for selecting the number of rows/items per page. | - |
|
|
1434
|
+
| `small` | A boolean indicating whether to render a smaller version of the pagination controls. | `false` |
|
|
1435
|
+
| `errorMessageTemplate` | A template string used to display an error message if pagination fails. | - |
|
|
1436
|
+
| `testIds` | An object containing test IDs for specific elements within the pagination component. | - |
|
|
1431
1437
|
|
|
1432
1438
|
### Usage Example
|
|
1433
1439
|
|
|
@@ -1443,9 +1449,9 @@ The `Pagination` component provides navigation controls for navigating through a
|
|
|
1443
1449
|
onChange: handleRowsPerPageChange,
|
|
1444
1450
|
},
|
|
1445
1451
|
small: false,
|
|
1446
|
-
errorMessageTemplate:
|
|
1452
|
+
errorMessageTemplate: 'Pagination failed: {error}',
|
|
1447
1453
|
testIds: {
|
|
1448
|
-
doubleRightBtn:
|
|
1454
|
+
doubleRightBtn: 'pagination-double-right-btn',
|
|
1449
1455
|
},
|
|
1450
1456
|
}}
|
|
1451
1457
|
/>
|
|
@@ -1459,18 +1465,18 @@ The `Popover` component displays additional content or options related to a spec
|
|
|
1459
1465
|
|
|
1460
1466
|
### Props
|
|
1461
1467
|
|
|
1462
|
-
| Prop | Description
|
|
1463
|
-
|
|
1464
|
-
| `children` | The element that triggers the display of the popover content.
|
|
1465
|
-
| `content` | The content to be displayed inside the popover.
|
|
1466
|
-
| `placement` | The placement of the popover relative to its trigger element.
|
|
1467
|
-
| `closeOnOutsideClick` | A boolean indicating whether the popover should close when clicking outside of it.
|
|
1468
|
-
| `fullWidth` | A boolean indicating whether the popover should take up the full width of its container.
|
|
1469
|
-
| `showCloseButton` | A boolean indicating whether to display a close button within the popover.
|
|
1470
|
-
| `testId` | A test ID for the popover component, used for testing purposes.
|
|
1471
|
-
| `disabled` | A boolean indicating whether the popover is disabled and should not be triggered.
|
|
1472
|
-
| `isOpen` | Controls the visibility of the popover. If defined, the popover is in controlled mode.
|
|
1473
|
-
| `onToggle` | Callback function that is called when the popover is opened or closed. Receives the new state as an argument
|
|
1468
|
+
| Prop | Description | Default Value |
|
|
1469
|
+
| --------------------- | ------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
1470
|
+
| `children` | The element that triggers the display of the popover content. | - |
|
|
1471
|
+
| `content` | The content to be displayed inside the popover. | - |
|
|
1472
|
+
| `placement` | The placement of the popover relative to its trigger element. | `'top-center'` |
|
|
1473
|
+
| `closeOnOutsideClick` | A boolean indicating whether the popover should close when clicking outside of it. | `true` |
|
|
1474
|
+
| `fullWidth` | A boolean indicating whether the popover should take up the full width of its container. | `false` |
|
|
1475
|
+
| `showCloseButton` | A boolean indicating whether to display a close button within the popover. | `false` |
|
|
1476
|
+
| `testId` | A test ID for the popover component, used for testing purposes. | - |
|
|
1477
|
+
| `disabled` | A boolean indicating whether the popover is disabled and should not be triggered. | `false` |
|
|
1478
|
+
| `isOpen` | Controls the visibility of the popover. If defined, the popover is in controlled mode. | - |
|
|
1479
|
+
| `onToggle` | Callback function that is called when the popover is opened or closed. Receives the new state as an argument. | - |
|
|
1474
1480
|
|
|
1475
1481
|
### Usage Example
|
|
1476
1482
|
|
|
@@ -1495,16 +1501,18 @@ The `Portal` component facilitates rendering React elements at a different locat
|
|
|
1495
1501
|
|
|
1496
1502
|
### Props
|
|
1497
1503
|
|
|
1498
|
-
| Prop | Description
|
|
1499
|
-
|
|
1504
|
+
| Prop | Description | Default Value |
|
|
1505
|
+
| ---------- | -------------------------------------------------------------- | ------------- |
|
|
1500
1506
|
| `id` | The id of the target DOM node where children will be rendered. | - |
|
|
1501
|
-
| `children` | The React elements to be rendered inside the portal.
|
|
1507
|
+
| `children` | The React elements to be rendered inside the portal. | - |
|
|
1502
1508
|
|
|
1503
1509
|
### Usage Example
|
|
1504
1510
|
|
|
1505
1511
|
```jsx
|
|
1506
1512
|
<Portal id="portal-container">
|
|
1507
|
-
<div>
|
|
1513
|
+
<div>
|
|
1514
|
+
This content will be rendered in a different location in the DOM tree.
|
|
1515
|
+
</div>
|
|
1508
1516
|
</Portal>
|
|
1509
1517
|
```
|
|
1510
1518
|
|
|
@@ -1516,20 +1524,16 @@ The `PrintHeader` component is used to display a header with a logo when printin
|
|
|
1516
1524
|
|
|
1517
1525
|
### Props
|
|
1518
1526
|
|
|
1519
|
-
| Prop | Description
|
|
1520
|
-
|
|
1521
|
-
| `logo` | The URL or path to the logo image.
|
|
1522
|
-
| `alt` | The alternative text for the logo image.
|
|
1523
|
-
| `logoWidth` | The width of the logo.
|
|
1527
|
+
| Prop | Description | Default Value |
|
|
1528
|
+
| ----------- | ---------------------------------------- | ------------- |
|
|
1529
|
+
| `logo` | The URL or path to the logo image. | - |
|
|
1530
|
+
| `alt` | The alternative text for the logo image. | - |
|
|
1531
|
+
| `logoWidth` | The width of the logo. | `'100px'` |
|
|
1524
1532
|
|
|
1525
1533
|
### Usage Example
|
|
1526
1534
|
|
|
1527
1535
|
```jsx
|
|
1528
|
-
<PrintHeader
|
|
1529
|
-
logo="/path/to/logo.png"
|
|
1530
|
-
alt="Company Logo"
|
|
1531
|
-
logoWidth="150px"
|
|
1532
|
-
/>
|
|
1536
|
+
<PrintHeader logo="/path/to/logo.png" alt="Company Logo" logoWidth="150px" />
|
|
1533
1537
|
```
|
|
1534
1538
|
|
|
1535
1539
|
<hr style="border: none; border-right: 2px solid black; width: 100%; height: 1px;">
|
|
@@ -1540,14 +1544,14 @@ The `ProgressBar` component is used to display a visual progress bar indicating
|
|
|
1540
1544
|
|
|
1541
1545
|
### Props
|
|
1542
1546
|
|
|
1543
|
-
| Prop | Description
|
|
1544
|
-
|
|
1545
|
-
| `width` | The width of the progress bar.
|
|
1546
|
-
| `inverted` | Determines whether the progress bar is inverted (i.e., progress from right to left).
|
|
1547
|
-
| `colored` | Determines whether the progress bar is colored.
|
|
1548
|
-
| `showProgressColors` | Determines whether the progress bar shows different colors based on progress (if `colored` is `true`).
|
|
1549
|
-
| `percentage` | The completion percentage of the task (a value between 0 and 100).
|
|
1550
|
-
| `noLabel` | Determines whether to hide the label displaying the percentage value.
|
|
1547
|
+
| Prop | Description | Default Value |
|
|
1548
|
+
| -------------------- | ------------------------------------------------------------------------------------------------------ | ------------- |
|
|
1549
|
+
| `width` | The width of the progress bar. | `'auto'` |
|
|
1550
|
+
| `inverted` | Determines whether the progress bar is inverted (i.e., progress from right to left). | `false` |
|
|
1551
|
+
| `colored` | Determines whether the progress bar is colored. | `true` |
|
|
1552
|
+
| `showProgressColors` | Determines whether the progress bar shows different colors based on progress (if `colored` is `true`). | `false` |
|
|
1553
|
+
| `percentage` | The completion percentage of the task (a value between 0 and 100). | `0` |
|
|
1554
|
+
| `noLabel` | Determines whether to hide the label displaying the percentage value. | `false` |
|
|
1551
1555
|
|
|
1552
1556
|
### Usage Example
|
|
1553
1557
|
|
|
@@ -1570,22 +1574,22 @@ The `RadioButton` component provides a set of radio buttons for selecting option
|
|
|
1570
1574
|
|
|
1571
1575
|
### Props
|
|
1572
1576
|
|
|
1573
|
-
| Prop | Description
|
|
1574
|
-
|
|
1575
|
-
| `name` | The name attribute of the radio button group.
|
|
1576
|
-
| `label` | The label for the radio button group.
|
|
1577
|
-
| `options` | An array of objects representing each radio button option.
|
|
1578
|
-
| `value` | The currently selected value or option object.
|
|
1579
|
-
| `inline` | (Deprecated) Determines whether the radio buttons should be displayed inline.
|
|
1580
|
-
| `disabled` | Determines whether the radio buttons are disabled.
|
|
1581
|
-
| `small` | Determines whether to use a smaller size for the radio buttons.
|
|
1582
|
-
| `onChange` | A function called when the selected value changes.
|
|
1583
|
-
| `noMargin` | Determines whether to remove margins around the radio buttons.
|
|
1584
|
-
| `onClick` | (Deprecated) A function called when a radio button is clicked.
|
|
1585
|
-
| `mainLabel` | (Deprecated) The main label for the radio button group.
|
|
1586
|
-
| `radioButtonsData` | (Deprecated) An array of objects representing each radio button option.
|
|
1587
|
-
| `classForContainer` | (Deprecated) A class name for the container element.
|
|
1588
|
-
| `testId` | A string used to define a test ID for testing purposes.
|
|
1577
|
+
| Prop | Description | Default Value |
|
|
1578
|
+
| ------------------- | ----------------------------------------------------------------------------- | ------------------ |
|
|
1579
|
+
| `name` | The name attribute of the radio button group. | - |
|
|
1580
|
+
| `label` | The label for the radio button group. | `null` |
|
|
1581
|
+
| `options` | An array of objects representing each radio button option. | - |
|
|
1582
|
+
| `value` | The currently selected value or option object. | - |
|
|
1583
|
+
| `inline` | (Deprecated) Determines whether the radio buttons should be displayed inline. | `false` |
|
|
1584
|
+
| `disabled` | Determines whether the radio buttons are disabled. | `false` |
|
|
1585
|
+
| `small` | Determines whether to use a smaller size for the radio buttons. | `false` |
|
|
1586
|
+
| `onChange` | A function called when the selected value changes. | - |
|
|
1587
|
+
| `noMargin` | Determines whether to remove margins around the radio buttons. | `false` |
|
|
1588
|
+
| `onClick` | (Deprecated) A function called when a radio button is clicked. | `() => {}` |
|
|
1589
|
+
| `mainLabel` | (Deprecated) The main label for the radio button group. | `''` |
|
|
1590
|
+
| `radioButtonsData` | (Deprecated) An array of objects representing each radio button option. | - |
|
|
1591
|
+
| `classForContainer` | (Deprecated) A class name for the container element. | `'grouped fields'` |
|
|
1592
|
+
| `testId` | A string used to define a test ID for testing purposes. | - |
|
|
1589
1593
|
|
|
1590
1594
|
### Usage Example
|
|
1591
1595
|
|
|
@@ -1614,13 +1618,13 @@ The `RichTextInput` component provides a text input field with rich text editing
|
|
|
1614
1618
|
|
|
1615
1619
|
### Props
|
|
1616
1620
|
|
|
1617
|
-
| Prop
|
|
1618
|
-
|
|
1619
|
-
| `disabled`
|
|
1620
|
-
| `onChange`
|
|
1621
|
-
| `placeholder`
|
|
1622
|
-
| `value`
|
|
1623
|
-
| `toolbarComponent
|
|
1621
|
+
| Prop | Description | Default Value |
|
|
1622
|
+
| ------------------ | ------------------------------------------------------------- | ------------- |
|
|
1623
|
+
| `disabled` | Determines whether the text input is disabled. | `false` |
|
|
1624
|
+
| `onChange` | A function called when the content of the text input changes. | - |
|
|
1625
|
+
| `placeholder` | The placeholder text displayed when the text input is empty. | - |
|
|
1626
|
+
| `value` | The current value of the text input. | - |
|
|
1627
|
+
| `toolbarComponent` | A custom toolbar component for additional editing options. | - |
|
|
1624
1628
|
|
|
1625
1629
|
### Usage Example
|
|
1626
1630
|
|
|
@@ -1641,29 +1645,29 @@ The `NativeSelect` component renders a native HTML select element with various c
|
|
|
1641
1645
|
|
|
1642
1646
|
### Props
|
|
1643
1647
|
|
|
1644
|
-
| Prop
|
|
1645
|
-
|
|
1646
|
-
| `borderRadius`
|
|
1647
|
-
| `disabled`
|
|
1648
|
-
| `error`
|
|
1649
|
-
| `warning`
|
|
1650
|
-
| `tooltip`
|
|
1651
|
-
| `options`
|
|
1652
|
-
| `onChange`
|
|
1653
|
-
| `onFocus`
|
|
1654
|
-
| `onBlur`
|
|
1655
|
-
| `right`
|
|
1656
|
-
| `small`
|
|
1657
|
-
| `tabIndex`
|
|
1658
|
-
| `selectedOption`
|
|
1659
|
-
| `width`
|
|
1660
|
-
| `groupOrder`
|
|
1661
|
-
| `testId`
|
|
1662
|
-
| `isInTable`
|
|
1663
|
-
| `clearable`
|
|
1664
|
-
| `placeholder`
|
|
1665
|
-
| `hasNonExistentValue` | Determines whether the select element includes a non-existent value option.
|
|
1666
|
-
| `maxTooltipWidth`
|
|
1648
|
+
| Prop | Description | Default Value |
|
|
1649
|
+
| --------------------- | --------------------------------------------------------------------------- | ------------- |
|
|
1650
|
+
| `borderRadius` | The border radius of the select element. | - |
|
|
1651
|
+
| `disabled` | Determines whether the select element is disabled. | `false` |
|
|
1652
|
+
| `error` | Error message to display. | - |
|
|
1653
|
+
| `warning` | Warning message to display. | - |
|
|
1654
|
+
| `tooltip` | Tooltip message to display. | - |
|
|
1655
|
+
| `options` | An array of options to populate the select element. | - |
|
|
1656
|
+
| `onChange` | A function called when the selected option changes. | - |
|
|
1657
|
+
| `onFocus` | A function called when the select element receives focus. | - |
|
|
1658
|
+
| `onBlur` | A function called when the select element loses focus. | - |
|
|
1659
|
+
| `right` | Determines whether the select arrow is positioned on the right side. | `false` |
|
|
1660
|
+
| `small` | Determines whether to render a smaller version of the select element. | `false` |
|
|
1661
|
+
| `tabIndex` | Specifies the tab order of the select element. | `0` |
|
|
1662
|
+
| `selectedOption` | The currently selected option. | - |
|
|
1663
|
+
| `width` | The width of the select element. | `null` |
|
|
1664
|
+
| `groupOrder` | The order of the option groups. | `null` |
|
|
1665
|
+
| `testId` | A string used to identify the select element for testing purposes. | - |
|
|
1666
|
+
| `isInTable` | Determines whether the select element is rendered within a table. | `false` |
|
|
1667
|
+
| `clearable` | Determines whether the select element allows clearing the selected option. | `false` |
|
|
1668
|
+
| `placeholder` | Placeholder text displayed when no option is selected. | `null` |
|
|
1669
|
+
| `hasNonExistentValue` | Determines whether the select element includes a non-existent value option. | `false` |
|
|
1670
|
+
| `maxTooltipWidth` | The maximum width of the tooltip. | - |
|
|
1667
1671
|
|
|
1668
1672
|
### Usage Example
|
|
1669
1673
|
|
|
@@ -1702,18 +1706,18 @@ The `Row` component is used to create a horizontal layout with flexible alignmen
|
|
|
1702
1706
|
|
|
1703
1707
|
### Props
|
|
1704
1708
|
|
|
1705
|
-
| Prop | Description
|
|
1706
|
-
|
|
1707
|
-
| `alignItems` | Specifies the alignment of the children along the cross-axis (vertical alignment).
|
|
1708
|
-
| `justifyContent` | Defines the alignment of the children along the main axis (horizontal alignment).
|
|
1709
|
-
| `children` | The content to be rendered within the row.
|
|
1710
|
-
| `flex` | Determines whether the row should be flexible (able to grow and shrink based on available space).
|
|
1711
|
-
| `height` | The height of the row.
|
|
1712
|
-
| `marginBottom` | The margin bottom of the row.
|
|
1713
|
-
| `marginTop` | The margin top of the row.
|
|
1714
|
-
| `spacing` | The spacing between child elements in the row.
|
|
1715
|
-
| `wrap` | Determines whether the children should wrap onto multiple lines if they exceed the row's width.
|
|
1716
|
-
| `testId` | A string used to identify the row for testing purposes.
|
|
1709
|
+
| Prop | Description | Default Value |
|
|
1710
|
+
| ---------------- | ------------------------------------------------------------------------------------------------- | ------------------ |
|
|
1711
|
+
| `alignItems` | Specifies the alignment of the children along the cross-axis (vertical alignment). | `initial` |
|
|
1712
|
+
| `justifyContent` | Defines the alignment of the children along the main axis (horizontal alignment). | `initial` |
|
|
1713
|
+
| `children` | The content to be rendered within the row. | `null` |
|
|
1714
|
+
| `flex` | Determines whether the row should be flexible (able to grow and shrink based on available space). | `false` |
|
|
1715
|
+
| `height` | The height of the row. | `'auto'` |
|
|
1716
|
+
| `marginBottom` | The margin bottom of the row. | `'0'` |
|
|
1717
|
+
| `marginTop` | The margin top of the row. | `'0'` |
|
|
1718
|
+
| `spacing` | The spacing between child elements in the row. | `'var(--padding)'` |
|
|
1719
|
+
| `wrap` | Determines whether the children should wrap onto multiple lines if they exceed the row's width. | `false` |
|
|
1720
|
+
| `testId` | A string used to identify the row for testing purposes. | `null` |
|
|
1717
1721
|
|
|
1718
1722
|
### Usage Example
|
|
1719
1723
|
|
|
@@ -1743,36 +1747,36 @@ The `Select` component is used to render a dropdown menu for selecting options f
|
|
|
1743
1747
|
|
|
1744
1748
|
### Props
|
|
1745
1749
|
|
|
1746
|
-
| Prop
|
|
1747
|
-
|
|
1748
|
-
| `name`
|
|
1749
|
-
| `multi`
|
|
1750
|
-
| `options`
|
|
1751
|
-
| `value`
|
|
1752
|
-
| `native`
|
|
1753
|
-
| `onChange`
|
|
1754
|
-
| `onCreate`
|
|
1755
|
-
| `deprecatedEventHandler`
|
|
1756
|
-
| `autoScroll`
|
|
1757
|
-
| `warning`
|
|
1758
|
-
| `error`
|
|
1759
|
-
| `checkNonExistentValues`
|
|
1760
|
-
| `closeOnOptionActionClick`
|
|
1761
|
-
| `testId`
|
|
1762
|
-
| `disabled`
|
|
1750
|
+
| Prop | Description | Default Value |
|
|
1751
|
+
| -------------------------- | ----------------------------------------------------------------------- | ------------- |
|
|
1752
|
+
| `name` | The name attribute of the select element. | `''` |
|
|
1753
|
+
| `multi` | Determines whether multiple options can be selected. | `false` |
|
|
1754
|
+
| `options` | An array of options to be rendered in the dropdown menu. | `[]` |
|
|
1755
|
+
| `value` | The currently selected option(s). | - |
|
|
1756
|
+
| `native` | Determines whether to use the native HTML `<select>` element. | `false` |
|
|
1757
|
+
| `onChange` | A callback function invoked when the selection changes. | `() => {}` |
|
|
1758
|
+
| `onCreate` | A callback function invoked when a new option is created. | `() => {}` |
|
|
1759
|
+
| `deprecatedEventHandler` | Determines whether to use deprecated event handlers. | `false` |
|
|
1760
|
+
| `autoScroll` | Determines whether the dropdown menu should auto-scroll. | `true` |
|
|
1761
|
+
| `warning` | Warning message to be displayed. | - |
|
|
1762
|
+
| `error` | Error message to be displayed. | - |
|
|
1763
|
+
| `checkNonExistentValues` | Determines whether to check for non-existent values. | `true` |
|
|
1764
|
+
| `closeOnOptionActionClick` | Determines whether to close the select dropdown on option action click. | `true` |
|
|
1765
|
+
| `testId` | A string used to identify the select component for testing purposes. | - |
|
|
1766
|
+
| `disabled` | Determines whether the select component is disabled. | `false` |
|
|
1763
1767
|
|
|
1764
1768
|
The `ISelectSelectedOption` interface represents the structure of an option in the dropdown menu.
|
|
1765
1769
|
|
|
1766
|
-
| Property | Description
|
|
1767
|
-
|
|
1768
|
-
| `value` | The value of the option.
|
|
1769
|
-
| `label` | The display label of the option.
|
|
1770
|
-
| `details` | Additional details or description of the option.
|
|
1771
|
-
| `actions` | Actions associated with the option.
|
|
1772
|
-
| `icon` | Icon to be displayed next to the option.
|
|
1773
|
-
| `type` | Type of the option.
|
|
1774
|
-
| `disabled` | Determines whether the option is disabled.
|
|
1775
|
-
| `testId` | A string used to identify the option for testing purposes.
|
|
1770
|
+
| Property | Description |
|
|
1771
|
+
| ---------- | ---------------------------------------------------------- |
|
|
1772
|
+
| `value` | The value of the option. |
|
|
1773
|
+
| `label` | The display label of the option. |
|
|
1774
|
+
| `details` | Additional details or description of the option. |
|
|
1775
|
+
| `actions` | Actions associated with the option. |
|
|
1776
|
+
| `icon` | Icon to be displayed next to the option. |
|
|
1777
|
+
| `type` | Type of the option. |
|
|
1778
|
+
| `disabled` | Determines whether the option is disabled. |
|
|
1779
|
+
| `testId` | A string used to identify the option for testing purposes. |
|
|
1776
1780
|
|
|
1777
1781
|
### Usage Example
|
|
1778
1782
|
|
|
@@ -1782,7 +1786,7 @@ The `ISelectSelectedOption` interface represents the structure of an option in t
|
|
|
1782
1786
|
options={[
|
|
1783
1787
|
{ value: 'option1', label: 'Option 1' },
|
|
1784
1788
|
{ value: 'option2', label: 'Option 2' },
|
|
1785
|
-
{ value: 'option3', label: 'Option 3' }
|
|
1789
|
+
{ value: 'option3', label: 'Option 3' },
|
|
1786
1790
|
]}
|
|
1787
1791
|
value="option2"
|
|
1788
1792
|
onChange={(value) => console.log('Selected value:', value)}
|
|
@@ -1799,32 +1803,32 @@ The `SideBar` component represents a sidebar navigation menu with collapsible se
|
|
|
1799
1803
|
|
|
1800
1804
|
### Props
|
|
1801
1805
|
|
|
1802
|
-
| Prop
|
|
1803
|
-
|
|
1804
|
-
| `options`
|
|
1805
|
-
| `startOpen`
|
|
1806
|
-
| `onShiftClickToggleOpen`
|
|
1807
|
-
| `top`
|
|
1806
|
+
| Prop | Description | Default Value |
|
|
1807
|
+
| ------------------------ | -------------------------------------------------------------------------------------------- | ------------- |
|
|
1808
|
+
| `options` | An object containing the title of the sidebar and its sections. | `{}` |
|
|
1809
|
+
| `startOpen` | Determines whether the sidebar sections should start open or collapsed. | `false` |
|
|
1810
|
+
| `onShiftClickToggleOpen` | A callback function invoked when the user shift-clicks to toggle the sidebar open or closed. | `() => {}` |
|
|
1811
|
+
| `top` | The top position of the sidebar. | - |
|
|
1808
1812
|
|
|
1809
1813
|
The `IOptionItem` interface represents an individual item within a sidebar section.
|
|
1810
1814
|
|
|
1811
|
-
| Property | Description
|
|
1812
|
-
|
|
1813
|
-
| `label` | The label or display text of the item.
|
|
1814
|
-
| `value` | The value associated with the item.
|
|
1815
|
-
| `icon` | The icon displayed alongside the item label.
|
|
1816
|
-
| `onClick` | A callback function invoked when the item is clicked.
|
|
1817
|
-
| `isActive` | Determines whether the item is currently active.
|
|
1818
|
-
| `isExperimental` | Indicates whether the item is experimental or not.
|
|
1819
|
-
| `invalid` | Indicates whether the item is invalid.
|
|
1820
|
-
| `testId` | A string used to identify the item for testing purposes.
|
|
1815
|
+
| Property | Description |
|
|
1816
|
+
| ---------------- | -------------------------------------------------------- |
|
|
1817
|
+
| `label` | The label or display text of the item. |
|
|
1818
|
+
| `value` | The value associated with the item. |
|
|
1819
|
+
| `icon` | The icon displayed alongside the item label. |
|
|
1820
|
+
| `onClick` | A callback function invoked when the item is clicked. |
|
|
1821
|
+
| `isActive` | Determines whether the item is currently active. |
|
|
1822
|
+
| `isExperimental` | Indicates whether the item is experimental or not. |
|
|
1823
|
+
| `invalid` | Indicates whether the item is invalid. |
|
|
1824
|
+
| `testId` | A string used to identify the item for testing purposes. |
|
|
1821
1825
|
|
|
1822
1826
|
The `IOptionSection` interface represents a section within the sidebar, containing a heading and a list of items.
|
|
1823
1827
|
|
|
1824
|
-
| Property
|
|
1825
|
-
|
|
1826
|
-
| `heading`
|
|
1827
|
-
| `items`
|
|
1828
|
+
| Property | Description |
|
|
1829
|
+
| --------- | ------------------------------------- |
|
|
1830
|
+
| `heading` | The heading or title of the section. |
|
|
1831
|
+
| `items` | An array of items within the section. |
|
|
1828
1832
|
|
|
1829
1833
|
### Usage Example
|
|
1830
1834
|
|
|
@@ -1836,18 +1840,38 @@ The `IOptionSection` interface represents a section within the sidebar, containi
|
|
|
1836
1840
|
{
|
|
1837
1841
|
heading: 'Section 1',
|
|
1838
1842
|
items: [
|
|
1839
|
-
{
|
|
1840
|
-
|
|
1841
|
-
|
|
1843
|
+
{
|
|
1844
|
+
label: 'Item 1',
|
|
1845
|
+
value: 'item1',
|
|
1846
|
+
icon: <Icon />,
|
|
1847
|
+
onClick: handleItemClick,
|
|
1848
|
+
},
|
|
1849
|
+
{
|
|
1850
|
+
label: 'Item 2',
|
|
1851
|
+
value: 'item2',
|
|
1852
|
+
icon: <Icon />,
|
|
1853
|
+
onClick: handleItemClick,
|
|
1854
|
+
},
|
|
1855
|
+
],
|
|
1842
1856
|
},
|
|
1843
1857
|
{
|
|
1844
1858
|
heading: 'Section 2',
|
|
1845
1859
|
items: [
|
|
1846
|
-
{
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1860
|
+
{
|
|
1861
|
+
label: 'Item 3',
|
|
1862
|
+
value: 'item3',
|
|
1863
|
+
icon: <Icon />,
|
|
1864
|
+
onClick: handleItemClick,
|
|
1865
|
+
},
|
|
1866
|
+
{
|
|
1867
|
+
label: 'Item 4',
|
|
1868
|
+
value: 'item4',
|
|
1869
|
+
icon: <Icon />,
|
|
1870
|
+
onClick: handleItemClick,
|
|
1871
|
+
},
|
|
1872
|
+
],
|
|
1873
|
+
},
|
|
1874
|
+
],
|
|
1851
1875
|
}}
|
|
1852
1876
|
startOpen={true}
|
|
1853
1877
|
onShiftClickToggleOpen={handleShiftClickToggle}
|
|
@@ -1863,41 +1887,41 @@ The `Slider` component allows users to select a value or a range of values by dr
|
|
|
1863
1887
|
|
|
1864
1888
|
### Props
|
|
1865
1889
|
|
|
1866
|
-
| Prop
|
|
1867
|
-
|
|
1868
|
-
| `name`
|
|
1869
|
-
| `label`
|
|
1870
|
-
| `width`
|
|
1871
|
-
| `labelWidth`
|
|
1872
|
-
| `value`
|
|
1873
|
-
| `min`
|
|
1874
|
-
| `max`
|
|
1875
|
-
| `step`
|
|
1876
|
-
| `marks`
|
|
1877
|
-
| `showArrows`
|
|
1878
|
-
| `showTooltip`
|
|
1879
|
-
| `tooltipFormatter
|
|
1880
|
-
| `disabled`
|
|
1881
|
-
| `range`
|
|
1882
|
-
| `small`
|
|
1883
|
-
| `vertical`
|
|
1884
|
-
| `onChange`
|
|
1890
|
+
| Prop | Description | Default Value |
|
|
1891
|
+
| ------------------ | -------------------------------------------------------------------------------------- | ----------------------------------------------------- |
|
|
1892
|
+
| `name` | The name attribute of the slider input. | |
|
|
1893
|
+
| `label` | The label displayed above the slider. | |
|
|
1894
|
+
| `width` | The width of the slider. | `'100%'` |
|
|
1895
|
+
| `labelWidth` | The width of the label. | `'auto'` |
|
|
1896
|
+
| `value` | The current value or range of values selected by the slider. | |
|
|
1897
|
+
| `min` | The minimum value of the slider. | |
|
|
1898
|
+
| `max` | The maximum value of the slider. | |
|
|
1899
|
+
| `step` | The step value for the slider. | `1` |
|
|
1900
|
+
| `marks` | An array of marks to display on the slider track. | `[]` |
|
|
1901
|
+
| `showArrows` | Determines whether arrow buttons for incremental adjustments should be displayed. | `false` |
|
|
1902
|
+
| `showTooltip` | Determines whether tooltips should be displayed when hovering over the slider handles. | `false` |
|
|
1903
|
+
| `tooltipFormatter` | A function to format the tooltip content. | `v => v` |
|
|
1904
|
+
| `disabled` | Determines whether the slider is disabled. | `false` |
|
|
1905
|
+
| `range` | Determines whether the slider allows selecting a range of values. | `false` |
|
|
1906
|
+
| `small` | Determines whether to use a small-sized slider. | `false` |
|
|
1907
|
+
| `vertical` | An object containing configuration options for a vertical slider variant. | `{ enabled: false, width: '100px', height: '400px' }` |
|
|
1908
|
+
| `onChange` | A callback function invoked when the slider value changes. | |
|
|
1885
1909
|
|
|
1886
1910
|
The `TSliderMark` type represents a mark on the slider track.
|
|
1887
1911
|
|
|
1888
|
-
| Property
|
|
1889
|
-
|
|
1890
|
-
| `value`
|
|
1891
|
-
| `label`
|
|
1892
|
-
| `tooltip`
|
|
1912
|
+
| Property | Description |
|
|
1913
|
+
| --------- | ------------------------------------------- |
|
|
1914
|
+
| `value` | The value of the mark. |
|
|
1915
|
+
| `label` | The label displayed for the mark. |
|
|
1916
|
+
| `tooltip` | The tooltip content displayed for the mark. |
|
|
1893
1917
|
|
|
1894
1918
|
The `THandleProps` type represents the props for the slider handle component.
|
|
1895
1919
|
|
|
1896
|
-
| Property
|
|
1897
|
-
|
|
1898
|
-
| `index`
|
|
1899
|
-
| `value`
|
|
1900
|
-
| `dragging`
|
|
1920
|
+
| Property | Description |
|
|
1921
|
+
| ---------- | ---------------------------------------------- |
|
|
1922
|
+
| `index` | The index of the handle. |
|
|
1923
|
+
| `value` | The value of the handle. |
|
|
1924
|
+
| `dragging` | Indicates whether the handle is being dragged. |
|
|
1901
1925
|
|
|
1902
1926
|
### Usage Example
|
|
1903
1927
|
|
|
@@ -1911,7 +1935,7 @@ The `THandleProps` type represents the props for the slider handle component.
|
|
|
1911
1935
|
marks={[
|
|
1912
1936
|
{ value: 0, label: '0' },
|
|
1913
1937
|
{ value: 50, label: '50' },
|
|
1914
|
-
{ value: 100, label: '100' }
|
|
1938
|
+
{ value: 100, label: '100' },
|
|
1915
1939
|
]}
|
|
1916
1940
|
onChange={({ target: { value } }) => console.log(value)}
|
|
1917
1941
|
/>
|
|
@@ -1925,11 +1949,11 @@ The `Spacer` component is used to add space between elements within a layout.
|
|
|
1925
1949
|
|
|
1926
1950
|
### Props
|
|
1927
1951
|
|
|
1928
|
-
| Prop
|
|
1929
|
-
|
|
1930
|
-
| `height`
|
|
1931
|
-
| `width`
|
|
1932
|
-
| `flex`
|
|
1952
|
+
| Prop | Description | Default Value |
|
|
1953
|
+
| -------- | ------------------------------------------------- | ------------------ |
|
|
1954
|
+
| `height` | The height of the spacer. | `'var(--padding)'` |
|
|
1955
|
+
| `width` | The width of the spacer. | `null` |
|
|
1956
|
+
| `flex` | Determines whether the spacer should use flexbox. | `false` |
|
|
1933
1957
|
|
|
1934
1958
|
### Usage Example
|
|
1935
1959
|
|
|
@@ -1957,12 +1981,12 @@ The `Spinner` component displays a spinning animation, indicating that content i
|
|
|
1957
1981
|
|
|
1958
1982
|
### Props
|
|
1959
1983
|
|
|
1960
|
-
| Prop | Description
|
|
1961
|
-
|
|
1962
|
-
| `small` | Determines if the spinner should be small.
|
|
1963
|
-
| `colored` | Determines if the spinner should be colored.
|
|
1964
|
-
| `dark` | Determines if the spinner should have a dark background.
|
|
1965
|
-
| `tiny` | Determines if the spinner should be tiny.
|
|
1984
|
+
| Prop | Description | Default Value |
|
|
1985
|
+
| --------- | -------------------------------------------------------- | ------------- |
|
|
1986
|
+
| `small` | Determines if the spinner should be small. | `false` |
|
|
1987
|
+
| `colored` | Determines if the spinner should be colored. | `false` |
|
|
1988
|
+
| `dark` | Determines if the spinner should have a dark background. | `false` |
|
|
1989
|
+
| `tiny` | Determines if the spinner should be tiny. | `false` |
|
|
1966
1990
|
|
|
1967
1991
|
### Usage Example
|
|
1968
1992
|
|
|
@@ -1990,51 +2014,51 @@ The `Table` component renders tabular data with various customization options.
|
|
|
1990
2014
|
|
|
1991
2015
|
### Props
|
|
1992
2016
|
|
|
1993
|
-
| Prop
|
|
1994
|
-
|
|
1995
|
-
| `onListReorder`
|
|
1996
|
-
| `canListReorder`
|
|
1997
|
-
| `table`
|
|
1998
|
-
| `table.name`
|
|
1999
|
-
| `table.actionsRight`
|
|
2000
|
-
| `table.fixedWidth`
|
|
2001
|
-
| `table.maxHeight`
|
|
2002
|
-
| `table.columnWidths`
|
|
2003
|
-
| `table.className`
|
|
2004
|
-
| `table.columnHeaderAlignments` | Alignment of column headers.
|
|
2005
|
-
| `table.columnAlignment`
|
|
2006
|
-
| `table.infiniteScroll
|
|
2007
|
-
| `table.headers`
|
|
2008
|
-
| `table.rows`
|
|
2009
|
-
| `table.footer`
|
|
2010
|
-
| `table.draggable`
|
|
2011
|
-
| `table.bordered`
|
|
2012
|
-
| `table.striped`
|
|
2013
|
-
| `table.testId`
|
|
2014
|
-
| `table.onAddRow`
|
|
2015
|
-
| `table.defaultEmptyRow`
|
|
2016
|
-
| `table.stickyHeaders`
|
|
2017
|
-
| `table.actions`
|
|
2017
|
+
| Prop | Description | Default Value |
|
|
2018
|
+
| ------------------------------ | -------------------------------------------------------------------------- | ------------- |
|
|
2019
|
+
| `onListReorder` | Function called when rows are reordered. | `() => {}` |
|
|
2020
|
+
| `canListReorder` | Function to compare `from` and `to` to determine if reordering is allowed. | `() => true` |
|
|
2021
|
+
| `table` | An object containing table configuration. | |
|
|
2022
|
+
| `table.name` | Name or title of the table. | |
|
|
2023
|
+
| `table.actionsRight` | Determines if actions should be displayed on the right side of the table. | `false` |
|
|
2024
|
+
| `table.fixedWidth` | Fixed width of the table. | |
|
|
2025
|
+
| `table.maxHeight` | Maximum height of the table. | |
|
|
2026
|
+
| `table.columnWidths` | Widths of individual columns. | |
|
|
2027
|
+
| `table.className` | Custom class name for the table. | |
|
|
2028
|
+
| `table.columnHeaderAlignments` | Alignment of column headers. | |
|
|
2029
|
+
| `table.columnAlignment` | Alignment of table columns. | |
|
|
2030
|
+
| `table.infiniteScroll` | Determines if infinite scrolling is enabled. | `false` |
|
|
2031
|
+
| `table.headers` | Array containing table header data. | |
|
|
2032
|
+
| `table.rows` | Data for table rows. | |
|
|
2033
|
+
| `table.footer` | Footer configuration for the table. | |
|
|
2034
|
+
| `table.draggable` | Determines if rows are draggable. | |
|
|
2035
|
+
| `table.bordered` | Determines if the table should have borders. | `true` |
|
|
2036
|
+
| `table.striped` | Determines if the table rows should be striped. | `true` |
|
|
2037
|
+
| `table.testId` | Test ID for the table. | |
|
|
2038
|
+
| `table.onAddRow` | Function called when adding a new row to the table. | `null` |
|
|
2039
|
+
| `table.defaultEmptyRow` | Default empty row data for the table. | `null` |
|
|
2040
|
+
| `table.stickyHeaders` | Determines if table headers should be sticky. | `false` |
|
|
2041
|
+
| `table.actions` | Additional actions for the table. | |
|
|
2018
2042
|
|
|
2019
2043
|
### Row Type
|
|
2020
2044
|
|
|
2021
|
-
| Property
|
|
2022
|
-
|
|
2023
|
-
| `cells`
|
|
2024
|
-
| `actions`
|
|
2025
|
-
| `testId`
|
|
2026
|
-
| `noDrag`
|
|
2027
|
-
| `onRowMouseEnter`
|
|
2028
|
-
| `onRowMouseLeave`
|
|
2045
|
+
| Property | Description |
|
|
2046
|
+
| ----------------- | ---------------------------------------------- |
|
|
2047
|
+
| `cells` | Array of cell data for the row. |
|
|
2048
|
+
| `actions` | Additional actions for the row. |
|
|
2049
|
+
| `testId` | Test ID for the row. |
|
|
2050
|
+
| `noDrag` | Determines if row dragging is disabled. |
|
|
2051
|
+
| `onRowMouseEnter` | Function called when the mouse enters the row. |
|
|
2052
|
+
| `onRowMouseLeave` | Function called when the mouse leaves the row. |
|
|
2029
2053
|
|
|
2030
2054
|
### Footer Props
|
|
2031
2055
|
|
|
2032
|
-
| Property
|
|
2033
|
-
|
|
2034
|
-
| `colSpan`
|
|
2035
|
-
| `pagination`
|
|
2036
|
-
| `actions`
|
|
2037
|
-
| `content`
|
|
2056
|
+
| Property | Description |
|
|
2057
|
+
| ------------ | ---------------------------------------- |
|
|
2058
|
+
| `colSpan` | Number of columns spanned by the footer. |
|
|
2059
|
+
| `pagination` | Pagination configuration for the footer. |
|
|
2060
|
+
| `actions` | Additional actions for the footer. |
|
|
2061
|
+
| `content` | Custom content for the footer. |
|
|
2038
2062
|
|
|
2039
2063
|
### Usage Example
|
|
2040
2064
|
|
|
@@ -2056,7 +2080,13 @@ The `Table` component renders tabular data with various customization options.
|
|
|
2056
2080
|
onSelectPage: (value) => console.log('Selected page: ', value),
|
|
2057
2081
|
},
|
|
2058
2082
|
},
|
|
2059
|
-
actions: [
|
|
2083
|
+
actions: [
|
|
2084
|
+
<Button
|
|
2085
|
+
key="addBtn"
|
|
2086
|
+
label="Add Row"
|
|
2087
|
+
onClick={() => console.log('Row added')}
|
|
2088
|
+
/>,
|
|
2089
|
+
],
|
|
2060
2090
|
}}
|
|
2061
2091
|
/>
|
|
2062
2092
|
```
|
|
@@ -2069,15 +2099,15 @@ The `UnitTable` component is a wrapper around `Table`, with local state and addi
|
|
|
2069
2099
|
|
|
2070
2100
|
### Props
|
|
2071
2101
|
|
|
2072
|
-
| Prop
|
|
2073
|
-
|
|
2074
|
-
| `table`
|
|
2075
|
-
| `unitConfig`
|
|
2076
|
-
| `convertBackToStorageUnit` | Whether values should be converted back to the storage unit when edited.
|
|
2077
|
-
| `enableCosmeticRounding`
|
|
2078
|
-
| `enableDisplayRounding`
|
|
2079
|
-
| `onListReorder`
|
|
2080
|
-
| `canListReorder`
|
|
2102
|
+
| Prop | Description | Default Value |
|
|
2103
|
+
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
|
|
2104
|
+
| `table` | An object containing table configuration, similar to `ITableTableProps`. | |
|
|
2105
|
+
| `unitConfig` | Array of unit configuration objects, each with `unitKey`, `storageUnit`, optional `preferredUnit`, and `onChange` callback. See [unitConfig item structure](#unitconfig-item-structure). | |
|
|
2106
|
+
| `convertBackToStorageUnit` | Whether values should be converted back to the storage unit when edited. | `true` |
|
|
2107
|
+
| `enableCosmeticRounding` | Enables cosmetic rounding of displayed values (Excel-style) to reduce visual precision noise. | `true` |
|
|
2108
|
+
| `enableDisplayRounding` | Enables rounding of displayed values in number inputs until the cell is focused. | `true` |
|
|
2109
|
+
| `onListReorder` | Function called when rows are reordered via drag-and-drop. Receives `{ from: number; to: number }` as an argument. | `() => {}` |
|
|
2110
|
+
| `canListReorder` | Function to determine whether a row can be reordered. Receives `{ from: number; to: number }` as an argument and returns `boolean`. | `() => true` |
|
|
2081
2111
|
|
|
2082
2112
|
---
|
|
2083
2113
|
|
|
@@ -2085,12 +2115,12 @@ The `UnitTable` component is a wrapper around `Table`, with local state and addi
|
|
|
2085
2115
|
|
|
2086
2116
|
Each object in the `unitConfig` array should have the following shape:
|
|
2087
2117
|
|
|
2088
|
-
| Key
|
|
2089
|
-
|
|
2090
|
-
| `unitKey`
|
|
2091
|
-
| `storageUnit`
|
|
2092
|
-
| `preferredUnit`
|
|
2093
|
-
| `onChange`
|
|
2118
|
+
| Key | Type | Description |
|
|
2119
|
+
| --------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
|
|
2120
|
+
| `unitKey` | `string` | Key representing the type of unit (e.g., `length`, `temperature`, `density`). |
|
|
2121
|
+
| `storageUnit` | `string` | The unit in which data is stored internally (e.g., `m`, `ft`, `C`, `sg`). |
|
|
2122
|
+
| `preferredUnit` | `string` _(optional)_ | The user's preferred display unit (e.g., `ft`, `F`, `ppg`). |
|
|
2123
|
+
| `onChange` | `(params: { oldUnit: string; newUnit: string; unitKey: string }) => void` _(optional)_ | Callback when the display unit is changed by the user. |
|
|
2094
2124
|
|
|
2095
2125
|
---
|
|
2096
2126
|
|
|
@@ -2123,31 +2153,31 @@ The `Tabs` component creates a tabbed interface for organizing content.
|
|
|
2123
2153
|
|
|
2124
2154
|
### Props
|
|
2125
2155
|
|
|
2126
|
-
| Prop
|
|
2127
|
-
|
|
2128
|
-
| `name`
|
|
2129
|
-
| `options`
|
|
2130
|
-
| `value`
|
|
2131
|
-
| `onChange`
|
|
2132
|
-
| `padding`
|
|
2133
|
-
| `margin`
|
|
2134
|
-
| `testId`
|
|
2135
|
-
| `linkComponent`
|
|
2156
|
+
| Prop | Description | Default Value |
|
|
2157
|
+
| --------------- | -------------------------------------------------------------- | ------------- |
|
|
2158
|
+
| `name` | Name of the tabs (optional). | - |
|
|
2159
|
+
| `options` | Array of tab options. | `null` |
|
|
2160
|
+
| `value` | Currently selected tab option. | - |
|
|
2161
|
+
| `onChange` | Function called when a tab is selected. | `() => {}` |
|
|
2162
|
+
| `padding` | Determines if padding should be applied to the tabs container. | `false` |
|
|
2163
|
+
| `margin` | Determines if margin should be applied to the tabs container. | `true` |
|
|
2164
|
+
| `testId` | Test ID for the tabs component. | - |
|
|
2165
|
+
| `linkComponent` | Default router link component for tab options with `to`. | - |
|
|
2136
2166
|
|
|
2137
2167
|
### Tab Option
|
|
2138
2168
|
|
|
2139
|
-
| Property
|
|
2140
|
-
|
|
2141
|
-
| `key`
|
|
2142
|
-
| `label`
|
|
2143
|
-
| `value`
|
|
2144
|
-
| `url`
|
|
2145
|
-
| `hidden`
|
|
2146
|
-
| `disabled`
|
|
2147
|
-
| `invalid`
|
|
2148
|
-
| `badge`
|
|
2149
|
-
| `right`
|
|
2150
|
-
| `testId`
|
|
2169
|
+
| Property | Description |
|
|
2170
|
+
| ---------- | ----------------------------------------------- |
|
|
2171
|
+
| `key` | Unique identifier for the tab. |
|
|
2172
|
+
| `label` | Label or title of the tab. |
|
|
2173
|
+
| `value` | Value associated with the tab. |
|
|
2174
|
+
| `url` | URL associated with the tab. |
|
|
2175
|
+
| `hidden` | Determines if the tab is hidden. |
|
|
2176
|
+
| `disabled` | Determines if the tab is disabled. |
|
|
2177
|
+
| `invalid` | Determines if the tab is invalid. |
|
|
2178
|
+
| `badge` | Badge content displayed on the tab. |
|
|
2179
|
+
| `right` | Determines if the badge should be on the right. |
|
|
2180
|
+
| `testId` | Test ID for the tab. |
|
|
2151
2181
|
|
|
2152
2182
|
### Usage Example
|
|
2153
2183
|
|
|
@@ -2175,19 +2205,19 @@ The `Text` component renders text with customizable styles.
|
|
|
2175
2205
|
|
|
2176
2206
|
### Props
|
|
2177
2207
|
|
|
2178
|
-
| Prop
|
|
2179
|
-
|
|
2180
|
-
| `bold`
|
|
2181
|
-
| `center`
|
|
2182
|
-
| `error`
|
|
2183
|
-
| `faint`
|
|
2184
|
-
| `link`
|
|
2185
|
-
| `muted`
|
|
2186
|
-
| `onClick`
|
|
2187
|
-
| `small`
|
|
2188
|
-
| `success`
|
|
2189
|
-
| `warning`
|
|
2190
|
-
| `children`
|
|
2208
|
+
| Prop | Description | Default Value |
|
|
2209
|
+
| ---------- | ----------------------------------------------------------- | ------------- |
|
|
2210
|
+
| `bold` | Determines if the text should be displayed in bold. | `false` |
|
|
2211
|
+
| `center` | Determines if the text should be centered. | `false` |
|
|
2212
|
+
| `error` | Determines if the text should represent an error state. | `false` |
|
|
2213
|
+
| `faint` | Determines if the text should have a faint appearance. | `false` |
|
|
2214
|
+
| `link` | Determines if the text should appear as a link. | `false` |
|
|
2215
|
+
| `muted` | Determines if the text should have a muted appearance. | `false` |
|
|
2216
|
+
| `onClick` | Function called when the text is clicked. | - |
|
|
2217
|
+
| `small` | Determines if the text should be displayed in a small size. | `false` |
|
|
2218
|
+
| `success` | Determines if the text should represent a success state. | `false` |
|
|
2219
|
+
| `warning` | Determines if the text should represent a warning state. | `false` |
|
|
2220
|
+
| `children` | The content to be rendered as text. | - |
|
|
2191
2221
|
|
|
2192
2222
|
### Usage Example
|
|
2193
2223
|
|
|
@@ -2205,18 +2235,22 @@ The `TextLink` component renders text as a clickable link.
|
|
|
2205
2235
|
|
|
2206
2236
|
### Props
|
|
2207
2237
|
|
|
2208
|
-
| Prop | Description
|
|
2209
|
-
|
|
2210
|
-
| `href` | The URL that the link should navigate to.
|
|
2211
|
-
| `target` | Specifies where to open the linked document.
|
|
2212
|
-
| `testId` | A unique identifier used for testing purposes.
|
|
2213
|
-
| `onClick` | Function called when the link is clicked.
|
|
2214
|
-
| `children` | The content to be rendered as a clickable link.
|
|
2238
|
+
| Prop | Description | Default Value |
|
|
2239
|
+
| ---------- | ----------------------------------------------- | ------------- |
|
|
2240
|
+
| `href` | The URL that the link should navigate to. | - |
|
|
2241
|
+
| `target` | Specifies where to open the linked document. | - |
|
|
2242
|
+
| `testId` | A unique identifier used for testing purposes. | - |
|
|
2243
|
+
| `onClick` | Function called when the link is clicked. | - |
|
|
2244
|
+
| `children` | The content to be rendered as a clickable link. | - |
|
|
2215
2245
|
|
|
2216
2246
|
### Usage Example
|
|
2217
2247
|
|
|
2218
2248
|
```jsx
|
|
2219
|
-
<TextLink
|
|
2249
|
+
<TextLink
|
|
2250
|
+
href="https://example.com"
|
|
2251
|
+
target="_blank"
|
|
2252
|
+
onClick={() => console.log('Link clicked')}
|
|
2253
|
+
>
|
|
2220
2254
|
Visit Example
|
|
2221
2255
|
</TextLink>
|
|
2222
2256
|
```
|
|
@@ -2229,26 +2263,26 @@ The `TextArea` component renders a multi-line text input field.
|
|
|
2229
2263
|
|
|
2230
2264
|
### Props
|
|
2231
2265
|
|
|
2232
|
-
| Prop
|
|
2233
|
-
|
|
2234
|
-
| `name`
|
|
2235
|
-
| `value`
|
|
2236
|
-
| `placeholder`
|
|
2237
|
-
| `cols`
|
|
2238
|
-
| `rows`
|
|
2239
|
-
| `disabled`
|
|
2240
|
-
| `onChange`
|
|
2241
|
-
| `onKeyPress`
|
|
2242
|
-
| `onFocus`
|
|
2243
|
-
| `onBlur`
|
|
2244
|
-
| `tabIndex`
|
|
2245
|
-
| `error`
|
|
2246
|
-
| `warning`
|
|
2247
|
-
| `tooltip`
|
|
2248
|
-
| `maxTooltipWidth` | The maximum width of the tooltip.
|
|
2249
|
-
| `resize`
|
|
2250
|
-
| `monospace`
|
|
2251
|
-
| `testId`
|
|
2266
|
+
| Prop | Description | Default Value |
|
|
2267
|
+
| ----------------- | --------------------------------------------------------------------- | ------------- |
|
|
2268
|
+
| `name` | The name of the text area field. | - |
|
|
2269
|
+
| `value` | The current value of the text area. | `''` |
|
|
2270
|
+
| `placeholder` | The placeholder text displayed when the text area is empty. | `''` |
|
|
2271
|
+
| `cols` | The visible width of the text area (in average character widths). | - |
|
|
2272
|
+
| `rows` | The number of visible text lines in the text area. | - |
|
|
2273
|
+
| `disabled` | If `true`, the text area is disabled and cannot be edited. | `false` |
|
|
2274
|
+
| `onChange` | Function called when the text area value changes. | `() => {}` |
|
|
2275
|
+
| `onKeyPress` | Function called when a key is pressed while the text area is focused. | `() => {}` |
|
|
2276
|
+
| `onFocus` | Function called when the text area receives focus. | `() => {}` |
|
|
2277
|
+
| `onBlur` | Function called when the text area loses focus. | `() => {}` |
|
|
2278
|
+
| `tabIndex` | Specifies the tab order of the text area. | `0` |
|
|
2279
|
+
| `error` | Error message to display below the text area if there is an error. | `null` |
|
|
2280
|
+
| `warning` | Warning message to display below the text area if there is a warning. | `null` |
|
|
2281
|
+
| `tooltip` | Tooltip message to display when hovering over the text area. | `null` |
|
|
2282
|
+
| `maxTooltipWidth` | The maximum width of the tooltip. | - |
|
|
2283
|
+
| `resize` | Specifies whether the text area is resizable or not. | - |
|
|
2284
|
+
| `monospace` | If `true`, the text area uses a monospaced font. | `false` |
|
|
2285
|
+
| `testId` | A unique identifier used for testing purposes. | - |
|
|
2252
2286
|
|
|
2253
2287
|
### Usage Example
|
|
2254
2288
|
|
|
@@ -2278,19 +2312,19 @@ The `Toggle` component represents a toggle switch that allows users to change be
|
|
|
2278
2312
|
|
|
2279
2313
|
### Props
|
|
2280
2314
|
|
|
2281
|
-
| Prop | Description
|
|
2282
|
-
|
|
2283
|
-
| `name` | The name of the toggle input field.
|
|
2284
|
-
| `label` | The label displayed next to the toggle switch.
|
|
2285
|
-
| `checked` | If `true`, the toggle switch is turned on; if `false`, it's turned off.
|
|
2286
|
-
| `disabled` | If `true`, the toggle switch is disabled and cannot be interacted with.
|
|
2287
|
-
| `display` | The display style of the toggle switch.
|
|
2288
|
-
| `small` | If `true`, a smaller version of the toggle switch is rendered.
|
|
2289
|
-
| `onChange` | Function called when the state of the toggle switch changes.
|
|
2290
|
-
| `noMargin` | If `true`, no margin is applied to the toggle switch.
|
|
2291
|
-
| `testId` | A unique identifier used for testing purposes.
|
|
2292
|
-
| `helpText` | Help text associated with the toggle switch.
|
|
2293
|
-
| `onClickHelp` | Function called when the help icon associated with the toggle switch is clicked.
|
|
2315
|
+
| Prop | Description | Default Value |
|
|
2316
|
+
| ------------- | -------------------------------------------------------------------------------- | ------------- |
|
|
2317
|
+
| `name` | The name of the toggle input field. | - |
|
|
2318
|
+
| `label` | The label displayed next to the toggle switch. | `null` |
|
|
2319
|
+
| `checked` | If `true`, the toggle switch is turned on; if `false`, it's turned off. | `false` |
|
|
2320
|
+
| `disabled` | If `true`, the toggle switch is disabled and cannot be interacted with. | `false` |
|
|
2321
|
+
| `display` | The display style of the toggle switch. | - |
|
|
2322
|
+
| `small` | If `true`, a smaller version of the toggle switch is rendered. | `false` |
|
|
2323
|
+
| `onChange` | Function called when the state of the toggle switch changes. | `() => {}` |
|
|
2324
|
+
| `noMargin` | If `true`, no margin is applied to the toggle switch. | `false` |
|
|
2325
|
+
| `testId` | A unique identifier used for testing purposes. | - |
|
|
2326
|
+
| `helpText` | Help text associated with the toggle switch. | - |
|
|
2327
|
+
| `onClickHelp` | Function called when the help icon associated with the toggle switch is clicked. | - |
|
|
2294
2328
|
|
|
2295
2329
|
### Usage Example
|
|
2296
2330
|
|
|
@@ -2317,49 +2351,69 @@ The `toast` function generates a toast notification with the provided message co
|
|
|
2317
2351
|
|
|
2318
2352
|
### Props
|
|
2319
2353
|
|
|
2320
|
-
| Prop | Description
|
|
2321
|
-
|
|
2322
|
-
| `id` | The unique identifier for the toast notification.
|
|
2323
|
-
| `message` | The content and configuration of the toast message.
|
|
2324
|
-
| `autoClose` | The duration in milliseconds after which the toast should automatically close. Set to `false` to disable auto-closing. | `6000` (6 seconds)
|
|
2325
|
-
| `onClose` | Function called when the toast is closed.
|
|
2354
|
+
| Prop | Description | Default Value |
|
|
2355
|
+
| ----------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
|
|
2356
|
+
| `id` | The unique identifier for the toast notification. | - |
|
|
2357
|
+
| `message` | The content and configuration of the toast message. | `{ type: MessageType.INFO, content: '' }` |
|
|
2358
|
+
| `autoClose` | The duration in milliseconds after which the toast should automatically close. Set to `false` to disable auto-closing. | `6000` (6 seconds) |
|
|
2359
|
+
| `onClose` | Function called when the toast is closed. | `() => {}` |
|
|
2326
2360
|
|
|
2327
2361
|
### Message Type
|
|
2328
2362
|
|
|
2329
2363
|
The `IMessageType` type defines the structure of the message content for the toast notification.
|
|
2330
2364
|
|
|
2331
|
-
| Property
|
|
2332
|
-
|
|
2333
|
-
| `type`
|
|
2334
|
-
| `icon`
|
|
2335
|
-
| `heading`
|
|
2336
|
-
| `content`
|
|
2337
|
-
| `details`
|
|
2365
|
+
| Property | Description | Default Value |
|
|
2366
|
+
| --------- | ------------------------------------------------------------------------------- | ------------------ |
|
|
2367
|
+
| `type` | The type of the message, such as `info`, `success`, `warning`, or `error`. | `MessageType.INFO` |
|
|
2368
|
+
| `icon` | If `true`, an icon corresponding to the message type will be displayed. | `false` |
|
|
2369
|
+
| `heading` | The heading or title of the message. | - |
|
|
2370
|
+
| `content` | The main content of the message. | `''` |
|
|
2371
|
+
| `details` | Additional details or supplementary information related to the message content. | `null` |
|
|
2338
2372
|
|
|
2339
2373
|
### Usage Example
|
|
2340
2374
|
|
|
2341
2375
|
```jsx
|
|
2342
2376
|
<>
|
|
2343
|
-
<Button
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2377
|
+
<Button
|
|
2378
|
+
label="Info"
|
|
2379
|
+
onClick={() =>
|
|
2380
|
+
toast({
|
|
2381
|
+
message: messageInfo,
|
|
2382
|
+
onClose: () => console.log('toast closed'),
|
|
2383
|
+
})
|
|
2384
|
+
}
|
|
2385
|
+
/>
|
|
2347
2386
|
<Spacer />
|
|
2348
|
-
<Button
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2387
|
+
<Button
|
|
2388
|
+
label="Error"
|
|
2389
|
+
onClick={() =>
|
|
2390
|
+
toast({
|
|
2391
|
+
message: messageError,
|
|
2392
|
+
onClose: () => console.log('toast closed'),
|
|
2393
|
+
})
|
|
2394
|
+
}
|
|
2395
|
+
/>
|
|
2352
2396
|
<Spacer />
|
|
2353
|
-
<Button
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2397
|
+
<Button
|
|
2398
|
+
label="Warning"
|
|
2399
|
+
onClick={() =>
|
|
2400
|
+
toast({
|
|
2401
|
+
message: messageWarning,
|
|
2402
|
+
onClose: () => console.log('toast closed'),
|
|
2403
|
+
})
|
|
2404
|
+
}
|
|
2405
|
+
/>
|
|
2357
2406
|
<Spacer />
|
|
2358
|
-
<Button
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2407
|
+
<Button
|
|
2408
|
+
label="Success"
|
|
2409
|
+
onClick={() =>
|
|
2410
|
+
toast({
|
|
2411
|
+
message: messageSuccess,
|
|
2412
|
+
onClose: () => console.log('toast closed'),
|
|
2413
|
+
})
|
|
2414
|
+
}
|
|
2415
|
+
/>
|
|
2416
|
+
</>
|
|
2363
2417
|
```
|
|
2364
2418
|
|
|
2365
2419
|
<hr style="border: none; border-right: 2px solid black; width: 100%; height: 1px;">
|
|
@@ -2370,22 +2424,22 @@ The `Tooltip` component creates a tooltip that appears when hovering over its ch
|
|
|
2370
2424
|
|
|
2371
2425
|
### Props
|
|
2372
2426
|
|
|
2373
|
-
| Prop
|
|
2374
|
-
|
|
2375
|
-
| `children`
|
|
2376
|
-
| `text`
|
|
2377
|
-
| `error`
|
|
2378
|
-
| `warning`
|
|
2379
|
-
| `placement`
|
|
2380
|
-
| `possiblePlacements` | An array of possible placements for the tooltip.
|
|
2381
|
-
| `enabled`
|
|
2382
|
-
| `maxWidth`
|
|
2383
|
-
| `triggerOffset`
|
|
2384
|
-
| `fontSize`
|
|
2385
|
-
| `padding`
|
|
2386
|
-
| `display`
|
|
2387
|
-
| `flex`
|
|
2388
|
-
| `forceOpen`
|
|
2427
|
+
| Prop | Description | Default Value |
|
|
2428
|
+
| -------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
|
|
2429
|
+
| `children` | The content over which the tooltip will be triggered. | - |
|
|
2430
|
+
| `text` | The text or content to display within the tooltip. | `''` |
|
|
2431
|
+
| `error` | If `true`, the tooltip will be styled as an error tooltip. | `false` |
|
|
2432
|
+
| `warning` | If `true`, the tooltip will be styled as a warning tooltip. | `false` |
|
|
2433
|
+
| `placement` | The initial placement of the tooltip relative to its children. | `'top-center'` |
|
|
2434
|
+
| `possiblePlacements` | An array of possible placements for the tooltip. | `['top-center', 'left-center', 'bottom-center', 'right-center']` |
|
|
2435
|
+
| `enabled` | If `true`, the tooltip will be enabled and shown on hover. | `true` |
|
|
2436
|
+
| `maxWidth` | The maximum width of the tooltip. | `'none'` |
|
|
2437
|
+
| `triggerOffset` | The offset in pixels between the tooltip and its trigger element. | `12` |
|
|
2438
|
+
| `fontSize` | The font size of the tooltip text. | `'inherit'` |
|
|
2439
|
+
| `padding` | The padding of the tooltip content. | `'var(--padding-xxs) var(--padding-xs)'` |
|
|
2440
|
+
| `display` | The display property of the tooltip container. | `'inline'` |
|
|
2441
|
+
| `flex` | The flex property of the tooltip container. | `'none'` |
|
|
2442
|
+
| `forceOpen` | If `true`, the tooltip will always be open and displayed, regardless of hover or focus events. | `false` |
|
|
2389
2443
|
|
|
2390
2444
|
### Usage Example
|
|
2391
2445
|
|
|
@@ -2414,15 +2468,15 @@ The `TopBar` component represents the top bar of the application, typically used
|
|
|
2414
2468
|
|
|
2415
2469
|
### Props
|
|
2416
2470
|
|
|
2417
|
-
| Prop
|
|
2418
|
-
|
|
2419
|
-
| `title`
|
|
2420
|
-
| `appSwitcher`
|
|
2421
|
-
| `content`
|
|
2422
|
-
| `contentRight`
|
|
2423
|
-
| `warning`
|
|
2424
|
-
| `height`
|
|
2425
|
-
| `fixedPosition`
|
|
2471
|
+
| Prop | Description | Default Value |
|
|
2472
|
+
| --------------- | -------------------------------------------------------------------------------------- | ---------------------- |
|
|
2473
|
+
| `title` | The configuration for the title displayed in the top bar. | `{}` |
|
|
2474
|
+
| `appSwitcher` | The configuration for the app switcher displayed in the top bar. | `{}` |
|
|
2475
|
+
| `content` | An array of content items to be displayed in the top bar, typically on the left side. | `[]` |
|
|
2476
|
+
| `contentRight` | An array of content items to be displayed in the top bar, typically on the right side. | `[]` |
|
|
2477
|
+
| `warning` | A warning message to be displayed in the top bar. | `''` |
|
|
2478
|
+
| `height` | The height of the top bar. | `'var(--size-topbar)'` |
|
|
2479
|
+
| `fixedPosition` | If `true`, the top bar will have a fixed position at the top of the viewport. | `true` |
|
|
2426
2480
|
|
|
2427
2481
|
### Usage Example
|
|
2428
2482
|
|
|
@@ -2462,20 +2516,20 @@ The `PopConfirm` component creates a popover with confirmation buttons, typicall
|
|
|
2462
2516
|
|
|
2463
2517
|
### Props
|
|
2464
2518
|
|
|
2465
|
-
| Prop
|
|
2466
|
-
|
|
2467
|
-
| `children`
|
|
2468
|
-
| `placement`
|
|
2469
|
-
| `closeOnOutsideClick
|
|
2470
|
-
| `fullWidth`
|
|
2471
|
-
| `title`
|
|
2472
|
-
| `cancelText`
|
|
2473
|
-
| `onClickCancel`
|
|
2474
|
-
| `okText`
|
|
2475
|
-
| `onClickOk`
|
|
2476
|
-
| `disableConfirmButton
|
|
2477
|
-
| `overflowContainer`
|
|
2478
|
-
| `testId`
|
|
2519
|
+
| Prop | Description | Default Value |
|
|
2520
|
+
| ---------------------- | ----------------------------------------------------------------- | ------------------ |
|
|
2521
|
+
| `children` | The content that triggers the popover when clicked. | - |
|
|
2522
|
+
| `placement` | The placement of the popover relative to the trigger element. | `'top-center'` |
|
|
2523
|
+
| `closeOnOutsideClick` | If `true`, the popover closes when clicked outside of it. | `true` |
|
|
2524
|
+
| `fullWidth` | If `true`, the popover will take the full width of its container. | `false` |
|
|
2525
|
+
| `title` | The title displayed in the popover. | `''` |
|
|
2526
|
+
| `cancelText` | The text for the cancel button. | `'Cancel'` |
|
|
2527
|
+
| `onClickCancel` | The function called when the cancel button is clicked. | Closes the popover |
|
|
2528
|
+
| `okText` | The text for the OK button. | `'Ok'` |
|
|
2529
|
+
| `onClickOk` | The function called when the OK button is clicked. | `() => {}` |
|
|
2530
|
+
| `disableConfirmButton` | If `true`, disable confirm button. | `false` |
|
|
2531
|
+
| `overflowContainer` | If `true`, the popover will overflow its container if necessary. | `false` |
|
|
2532
|
+
| `testId` | Optional test id for testing purposes. | - |
|
|
2479
2533
|
|
|
2480
2534
|
### Usage Example
|
|
2481
2535
|
|
|
@@ -2509,74 +2563,74 @@ The `Tree` component represents a hierarchical structure of items in a tree form
|
|
|
2509
2563
|
|
|
2510
2564
|
#### ITreeProps
|
|
2511
2565
|
|
|
2512
|
-
| Prop
|
|
2513
|
-
|
|
2514
|
-
| `list`
|
|
2515
|
-
| `draggable`
|
|
2516
|
-
| `onListReorder`
|
|
2517
|
-
| `onChangeOpen`
|
|
2518
|
-
| `testId`
|
|
2519
|
-
| `isInitialOpen`
|
|
2520
|
-
| `autoOpenActiveItems`
|
|
2521
|
-
| `treeRef`
|
|
2522
|
-
| `itemHasChild`
|
|
2523
|
-
| `onItemToggle`
|
|
2524
|
-
| `icons`
|
|
2525
|
-
| `stickyHeader`
|
|
2526
|
-
| `height`
|
|
2566
|
+
| Prop | Description | Default Value |
|
|
2567
|
+
| --------------------- | ------------------------------------------------------------------------------------------ | ------------- |
|
|
2568
|
+
| `list` | The list of items to be displayed in the tree. | - |
|
|
2569
|
+
| `draggable` | If `true`, allows dragging and dropping of tree nodes to reorder them. | `false` |
|
|
2570
|
+
| `onListReorder` | Callback function invoked when the order of items in the tree is changed through dragging. | - |
|
|
2571
|
+
| `onChangeOpen` | Callback function invoked when the open/close state of tree nodes changes. | - |
|
|
2572
|
+
| `testId` | Optional test id for testing purposes. | - |
|
|
2573
|
+
| `isInitialOpen` | Determines which nodes should be initially open. | `false` |
|
|
2574
|
+
| `autoOpenActiveItems` | Automatically open tree to active items. | `false` |
|
|
2575
|
+
| `treeRef` | Reference to the tree component. | - |
|
|
2576
|
+
| `itemHasChild` | Function to determine if a tree node has child nodes. | - |
|
|
2577
|
+
| `onItemToggle` | Callback function invoked when a tree node is toggled (opened/closed). | - |
|
|
2578
|
+
| `icons` | Custom icons for expand and collapse actions. | - |
|
|
2579
|
+
| `stickyHeader` | Determines whether the list header sticks to the top when scrolling. | - |
|
|
2580
|
+
| `height` | Height of the tree component. | - |
|
|
2527
2581
|
|
|
2528
2582
|
#### ITreeListProps
|
|
2529
2583
|
|
|
2530
|
-
| Prop
|
|
2531
|
-
|
|
2532
|
-
| `name`
|
|
2533
|
-
| `noHeader`
|
|
2534
|
-
| `items`
|
|
2535
|
-
| `onClick`
|
|
2536
|
-
| `actions`
|
|
2584
|
+
| Prop | Description | Default Value |
|
|
2585
|
+
| ---------- | ------------------------------------------------------ | ------------- |
|
|
2586
|
+
| `name` | The name of the tree list. | - |
|
|
2587
|
+
| `noHeader` | If `true`, hides the header of the tree list. | `false` |
|
|
2588
|
+
| `items` | The array of tree items to be displayed. | - |
|
|
2589
|
+
| `onClick` | Callback function invoked when a tree node is clicked. | - |
|
|
2590
|
+
| `actions` | Additional actions associated with the tree list. | - |
|
|
2537
2591
|
|
|
2538
2592
|
### Usage Example
|
|
2539
2593
|
|
|
2540
2594
|
```jsx
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
},
|
|
2595
|
+
const treeItems = [
|
|
2596
|
+
{
|
|
2597
|
+
id: '1',
|
|
2598
|
+
name: 'Item 1',
|
|
2599
|
+
parent: '',
|
|
2600
|
+
droppable: true,
|
|
2601
|
+
details: 'Details of Item 1',
|
|
2602
|
+
active: true,
|
|
2603
|
+
testId: 'item-1',
|
|
2604
|
+
icon: {
|
|
2605
|
+
icon: <IconComponent />,
|
|
2606
|
+
color: 'blue',
|
|
2607
|
+
tooltip: {
|
|
2608
|
+
text: 'Tooltip for Item 1',
|
|
2609
|
+
error: false,
|
|
2610
|
+
warning: true,
|
|
2611
|
+
placement: 'right',
|
|
2612
|
+
enabled: true,
|
|
2613
|
+
maxWidth: '200px',
|
|
2614
|
+
triggerOffset: '20px',
|
|
2615
|
+
possiblePlacements: ['top', 'bottom', 'left', 'right'],
|
|
2616
|
+
fontSize: '14px',
|
|
2617
|
+
padding: '8px',
|
|
2565
2618
|
},
|
|
2566
2619
|
},
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2620
|
+
},
|
|
2621
|
+
];
|
|
2622
|
+
|
|
2623
|
+
<Tree
|
|
2624
|
+
list={{ items: treeItems }}
|
|
2625
|
+
draggable={true}
|
|
2626
|
+
onListReorder={handleListReorder}
|
|
2627
|
+
onChangeOpen={(ids) => console.log(ids)}
|
|
2628
|
+
testId="my-tree"
|
|
2629
|
+
isInitialOpen={['1']}
|
|
2630
|
+
treeRef={treeRef}
|
|
2631
|
+
itemHasChild={(node) => node.children.length > 0}
|
|
2632
|
+
onItemToggle={handleNodeToggle}
|
|
2633
|
+
/>;
|
|
2580
2634
|
```
|
|
2581
2635
|
|
|
2582
2636
|
<hr style="border: none; border-right: 2px solid black; width: 100%; height: 1px;">
|
|
@@ -2589,44 +2643,44 @@ The `NumberInput` component provides an input field for entering numeric values.
|
|
|
2589
2643
|
|
|
2590
2644
|
#### INumberInputProps
|
|
2591
2645
|
|
|
2592
|
-
| Prop
|
|
2593
|
-
|
|
2594
|
-
| `name`
|
|
2595
|
-
| `placeholder`
|
|
2596
|
-
| `disabled`
|
|
2597
|
-
| `error`
|
|
2598
|
-
| `left`
|
|
2599
|
-
| `small`
|
|
2600
|
-
| `width`
|
|
2601
|
-
| `value`
|
|
2602
|
-
| `onChange`
|
|
2603
|
-
| `onFocus`
|
|
2604
|
-
| `tabIndex`
|
|
2605
|
-
| `testId`
|
|
2606
|
-
| `tooltip`
|
|
2607
|
-
| `warning`
|
|
2608
|
-
| `validationCallback` | Callback function invoked for validation.
|
|
2609
|
-
| `allowEmpty`
|
|
2610
|
-
| `isInTable`
|
|
2611
|
-
| `groupOrder`
|
|
2646
|
+
| Prop | Description | Default Value |
|
|
2647
|
+
| -------------------- | -------------------------------------------------------------- | ------------- |
|
|
2648
|
+
| `name` | The name of the input field. | - |
|
|
2649
|
+
| `placeholder` | The placeholder text displayed when the input is empty. | `''` |
|
|
2650
|
+
| `disabled` | If `true`, disables the input field. | `false` |
|
|
2651
|
+
| `error` | Error message to display, or `true` if there is an error. | `false` |
|
|
2652
|
+
| `left` | If `true`, aligns the content to the left. | `false` |
|
|
2653
|
+
| `small` | If `true`, reduces the size of the input field. | `false` |
|
|
2654
|
+
| `width` | The width of the input field. | `'100%'` |
|
|
2655
|
+
| `value` | The value of the input field. | `''` |
|
|
2656
|
+
| `onChange` | Callback function invoked when the value of the input changes. | `() => {}` |
|
|
2657
|
+
| `onFocus` | Callback function invoked when the input field is focused. | `() => {}` |
|
|
2658
|
+
| `tabIndex` | Specifies the tab order of the input field. | `0` |
|
|
2659
|
+
| `testId` | Optional test id for testing purposes. | - |
|
|
2660
|
+
| `tooltip` | Tooltip text or component to display. | `null` |
|
|
2661
|
+
| `warning` | Warning message to display, or `true` if there is a warning. | `false` |
|
|
2662
|
+
| `validationCallback` | Callback function invoked for validation. | `() => {}` |
|
|
2663
|
+
| `allowEmpty` | If `true`, allows the input field to be empty. | `false` |
|
|
2664
|
+
| `isInTable` | If `true`, indicates that the input field is within a table. | `false` |
|
|
2665
|
+
| `groupOrder` | Specifies the order of input fields within a group. | - |
|
|
2612
2666
|
|
|
2613
2667
|
### Usage Example
|
|
2614
2668
|
|
|
2615
2669
|
```jsx
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2670
|
+
<NumberInput
|
|
2671
|
+
name="quantity"
|
|
2672
|
+
placeholder="Enter quantity"
|
|
2673
|
+
value={10}
|
|
2674
|
+
onChange={handleInputChange}
|
|
2675
|
+
onFocus={handleInputFocus}
|
|
2676
|
+
tabIndex={1}
|
|
2677
|
+
testId="quantity-input"
|
|
2678
|
+
error="Invalid quantity"
|
|
2679
|
+
warning="Low quantity"
|
|
2680
|
+
validationCallback={handleValidation}
|
|
2681
|
+
isInTable={false}
|
|
2682
|
+
groupOrder={null}
|
|
2683
|
+
/>
|
|
2630
2684
|
```
|
|
2631
2685
|
|
|
2632
2686
|
<hr style="border: none; border-right: 2px solid black; width: 100%; height: 1px;">
|
|
@@ -2639,63 +2693,63 @@ The `UnitInput` component allows users to input values with associated units. It
|
|
|
2639
2693
|
|
|
2640
2694
|
#### IUnitInputProps
|
|
2641
2695
|
|
|
2642
|
-
| Prop
|
|
2643
|
-
|
|
2644
|
-
| `name`
|
|
2645
|
-
| `placeholder`
|
|
2646
|
-
| `disabled`
|
|
2647
|
-
| `disabledUnit`
|
|
2648
|
-
| `error`
|
|
2649
|
-
| `left`
|
|
2650
|
-
| `small`
|
|
2651
|
-
| `width`
|
|
2652
|
-
| `value`
|
|
2653
|
-
| `unitkey`
|
|
2654
|
-
| `initUnit`
|
|
2655
|
-
| `noConversion`
|
|
2656
|
-
| `onChange`
|
|
2657
|
-
| `onClick`
|
|
2658
|
-
| `onFocus`
|
|
2659
|
-
| `onSwitchUnit`
|
|
2660
|
-
| `unitTemplate`
|
|
2661
|
-
| `doNotConvertValue`
|
|
2662
|
-
| `testId`
|
|
2663
|
-
| `warning`
|
|
2664
|
-
| `predefinedOptions`
|
|
2665
|
-
| `initialPredefinedOption`
|
|
2666
|
-
| `shouldLinkAutomaticly`
|
|
2667
|
-
| `selectedPredefinedOptionKey` | The key of the selected predefined option.
|
|
2668
|
-
| `validationCallback`
|
|
2669
|
-
| `disabledValidation`
|
|
2670
|
-
| `allowEmpty`
|
|
2671
|
-
| `autoValue`
|
|
2696
|
+
| Prop | Description | Default Value |
|
|
2697
|
+
| ----------------------------- | ------------------------------------------------------------------- | ------------- |
|
|
2698
|
+
| `name` | The name of the input field. | `''` |
|
|
2699
|
+
| `placeholder` | The placeholder text displayed when the input is empty. | `''` |
|
|
2700
|
+
| `disabled` | If `true`, disables the input field. | `false` |
|
|
2701
|
+
| `disabledUnit` | If `true`, disables the unit selection. | `false` |
|
|
2702
|
+
| `error` | Error message to display, or `true` if there is an error. | `null` |
|
|
2703
|
+
| `left` | If `true`, aligns the content to the left. | `false` |
|
|
2704
|
+
| `small` | If `true`, reduces the size of the input field. | `false` |
|
|
2705
|
+
| `width` | The width of the input field. | `'100%'` |
|
|
2706
|
+
| `value` | The value of the input field. | `''` |
|
|
2707
|
+
| `unitkey` | The key associated with the unit value. | `''` |
|
|
2708
|
+
| `initUnit` | The initial unit value. | `''` |
|
|
2709
|
+
| `noConversion` | If `true`, disables automatic unit conversion. | `false` |
|
|
2710
|
+
| `onChange` | Callback function invoked when the value of the input changes. | `() => {}` |
|
|
2711
|
+
| `onClick` | Callback function invoked when the input field is clicked. | `() => {}` |
|
|
2712
|
+
| `onFocus` | Callback function invoked when the input field is focused. | `() => {}` |
|
|
2713
|
+
| `onSwitchUnit` | Callback function invoked when the unit is switched. | `() => {}` |
|
|
2714
|
+
| `unitTemplate` | Template for rendering units. | `{}` |
|
|
2715
|
+
| `doNotConvertValue` | If `true`, disables value conversion. | `false` |
|
|
2716
|
+
| `testId` | Test id for testing purposes. | - |
|
|
2717
|
+
| `warning` | Warning message to display, or `true` if there is a warning. | `null` |
|
|
2718
|
+
| `predefinedOptions` | An array of predefined options. | - |
|
|
2719
|
+
| `initialPredefinedOption` | If `true`, selects the initial predefined option. | `false` |
|
|
2720
|
+
| `shouldLinkAutomaticly` | If `true`, automatically links the predefined option and the value. | `true` |
|
|
2721
|
+
| `selectedPredefinedOptionKey` | The key of the selected predefined option. | - |
|
|
2722
|
+
| `validationCallback` | Callback function for validation. | `() => {}` |
|
|
2723
|
+
| `disabledValidation` | If `true`, disables validation. | `false` |
|
|
2724
|
+
| `allowEmpty` | If `true`, allows the input field to be empty. | `false` |
|
|
2725
|
+
| `autoValue` | Automatic value to set. | - |
|
|
2672
2726
|
|
|
2673
2727
|
### Usage Example
|
|
2674
2728
|
|
|
2675
2729
|
```jsx
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2730
|
+
<UnitInput
|
|
2731
|
+
name="weight"
|
|
2732
|
+
placeholder="Enter weight"
|
|
2733
|
+
value="10"
|
|
2734
|
+
unitkey="kg"
|
|
2735
|
+
initUnit="kg"
|
|
2736
|
+
onChange={handleInputChange}
|
|
2737
|
+
onFocus={handleInputFocus}
|
|
2738
|
+
onSwitchUnit={handleSwitchUnit}
|
|
2739
|
+
testId="weight-input"
|
|
2740
|
+
error="Invalid weight"
|
|
2741
|
+
warning="Low weight"
|
|
2742
|
+
predefinedOptions={[
|
|
2743
|
+
{ value: 'kg', label: 'Kilogram' },
|
|
2744
|
+
{ value: 'g', label: 'Gram' },
|
|
2745
|
+
{ value: 'lb', label: 'Pound' },
|
|
2746
|
+
]}
|
|
2747
|
+
initialPredefinedOption={true}
|
|
2748
|
+
shouldLinkAutomaticly={true}
|
|
2749
|
+
selectedPredefinedOptionKey="kg"
|
|
2750
|
+
validationCallback={handleValidation}
|
|
2751
|
+
disabledValidation={false}
|
|
2752
|
+
allowEmpty={false}
|
|
2753
|
+
autoValue="20"
|
|
2754
|
+
/>
|
|
2701
2755
|
```
|