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