@czi-sds/mcp 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/data/component-docs/Accordion.md +291 -0
- package/data/component-docs/Autocomplete.md +525 -0
- package/data/component-docs/Banner.md +231 -0
- package/data/component-docs/Button.md +224 -0
- package/data/component-docs/ButtonDropdown.md +256 -0
- package/data/component-docs/ButtonGroup.md +320 -0
- package/data/component-docs/ButtonToggle.md +397 -0
- package/data/component-docs/Callout.md +268 -0
- package/data/component-docs/CellBasic.md +122 -0
- package/data/component-docs/CellComponent.md +63 -0
- package/data/component-docs/CellHeader.md +128 -0
- package/data/component-docs/ComplexFilter.md +294 -0
- package/data/component-docs/ContentCard.md +406 -0
- package/data/component-docs/Dialog.md +651 -0
- package/data/component-docs/Dropdown.md +155 -0
- package/data/component-docs/DropdownMenu.md +949 -0
- package/data/component-docs/HeatmapChart.md +782 -0
- package/data/component-docs/Hero.md +363 -0
- package/data/component-docs/Icon.md +283 -0
- package/data/component-docs/InputCheckbox.md +205 -0
- package/data/component-docs/InputDropdown.md +482 -0
- package/data/component-docs/InputRadio.md +173 -0
- package/data/component-docs/InputSearch.md +81 -0
- package/data/component-docs/InputSlider.md +189 -0
- package/data/component-docs/InputText.md +110 -0
- package/data/component-docs/InputToggle.md +141 -0
- package/data/component-docs/IntentMessage.md +293 -0
- package/data/component-docs/Legend.md +442 -0
- package/data/component-docs/Link.md +23 -0
- package/data/component-docs/List.md +300 -0
- package/data/component-docs/LoadingIndicator.md +198 -0
- package/data/component-docs/Menu.md +298 -0
- package/data/component-docs/MenuItem.md +100 -0
- package/data/component-docs/NavigationFooter.md +165 -0
- package/data/component-docs/NavigationHeader.md +500 -0
- package/data/component-docs/NavigationJumpTo.md +414 -0
- package/data/component-docs/Notification.md +288 -0
- package/data/component-docs/Pagination.md +67 -0
- package/data/component-docs/Panel.md +636 -0
- package/data/component-docs/Popover.md +448 -0
- package/data/component-docs/PreComposedTable.md +2947 -0
- package/data/component-docs/SegmentedControl.md +396 -0
- package/data/component-docs/StackedBarChart.md +475 -0
- package/data/component-docs/Table.md +2000 -0
- package/data/component-docs/TableHeader.md +53 -0
- package/data/component-docs/TableRow.md +74 -0
- package/data/component-docs/Tabs.md +455 -0
- package/data/component-docs/Tag.md +647 -0
- package/data/component-docs/TagFilter.md +131 -0
- package/data/component-docs/Tooltip.md +561 -0
- package/data/component-docs/TooltipCondensed.md +203 -0
- package/data/component-docs/TooltipTable.md +145 -0
- package/data/component-docs/index.json +262 -0
- package/data/component-list.json +2 -5
- package/data/component-props/Accordion.json +31 -11
- package/data/component-props/Alert.json +3 -3
- package/data/component-props/Autocomplete.json +150 -15
- package/data/component-props/Banner.json +31 -17
- package/data/component-props/Button.json +45 -20
- package/data/component-props/ButtonDropdown.json +36 -17
- package/data/component-props/ButtonDropdownLegacy.json +11 -11
- package/data/component-props/ButtonGroup.json +32 -11
- package/data/component-props/ButtonIcon.json +10 -10
- package/data/component-props/ButtonLegacy.json +19 -19
- package/data/component-props/ButtonToggle.json +32 -19
- package/data/component-props/ButtonToggleLegacy.json +11 -11
- package/data/component-props/Callout.json +58 -17
- package/data/component-props/CellBasic.json +94 -41
- package/data/component-props/CellComponent.json +23 -7
- package/data/component-props/CellHeader.json +62 -19
- package/data/component-props/ComplexFilter.json +52 -21
- package/data/component-props/ContentCard.json +70 -47
- package/data/component-props/Dialog.json +47 -14
- package/data/component-props/Dropdown.json +68 -31
- package/data/component-props/DropdownMenu.json +128 -23
- package/data/component-props/HeatmapChart.json +88 -12
- package/data/component-props/Hero.json +80 -39
- package/data/component-props/Icon.json +20 -9
- package/data/component-props/InputCheckbox.json +36 -14
- package/data/component-props/InputDropdown.json +75 -27
- package/data/component-props/InputRadio.json +31 -13
- package/data/component-props/InputSearch.json +41 -18
- package/data/component-props/InputSlider.json +46 -19
- package/data/component-props/InputText.json +26 -19
- package/data/component-props/InputToggle.json +26 -9
- package/data/component-props/IntentMessage.json +38 -9
- package/data/component-props/Link.json +13 -7
- package/data/component-props/LoadingIndicator.json +11 -3
- package/data/component-props/MenuItem.json +38 -19
- package/data/component-props/MenuSelect.json +8 -8
- package/data/component-props/NavigationFooter.json +49 -19
- package/data/component-props/NavigationHeader.json +150 -37
- package/data/component-props/NavigationJumpTo.json +33 -7
- package/data/component-props/Notification.json +39 -21
- package/data/component-props/Pagination.json +39 -11
- package/data/component-props/Panel.json +62 -9
- package/data/component-props/Popover.json +80 -7
- package/data/component-props/PreComposedTable.json +99 -27
- package/data/component-props/SegmentedControl.json +42 -3
- package/data/component-props/StackedBarChart.json +116 -42
- package/data/component-props/TableRow.json +38 -19
- package/data/component-props/Tabs.json +66 -9
- package/data/component-props/Tag.json +34 -17
- package/data/component-props/TagFilter.json +10 -3
- package/data/component-props/Tooltip.json +49 -18
- package/data/component-props/TooltipCondensed.json +18 -9
- package/data/component-props/TooltipTable.json +17 -7
- package/data/resources/{zeroheight-rules.md → documentation-rules.md} +43 -30
- package/data/resources/figma-rules.md +2 -2
- package/dist/stdio.js +112 -208
- package/package.json +9 -5
- package/data/component-props/ButtonDropdownV2.json +0 -34
- package/data/component-props/ButtonNew.json +0 -47
- package/data/component-props/ButtonToggleV2.json +0 -44
- package/data/component-props/ButtonV2.json +0 -43
- package/data/zeroheight-cache.json +0 -10259
- package/data/zeroheight-exports/Accordion.md +0 -774
- package/data/zeroheight-exports/Banner.md +0 -691
- package/data/zeroheight-exports/Borders.md +0 -117
- package/data/zeroheight-exports/Buttons.md +0 -1854
- package/data/zeroheight-exports/Callout.md +0 -931
- package/data/zeroheight-exports/Colors.md +0 -1755
- package/data/zeroheight-exports/Content-Card.md +0 -309
- package/data/zeroheight-exports/Contributing-to-SDS.md +0 -98
- package/data/zeroheight-exports/Control-Inputs.md +0 -2818
- package/data/zeroheight-exports/Corners.md +0 -104
- package/data/zeroheight-exports/Cover-page.md +0 -3
- package/data/zeroheight-exports/Dialog.md +0 -1367
- package/data/zeroheight-exports/Downloads.md +0 -236
- package/data/zeroheight-exports/Drop-Shadows.md +0 -79
- package/data/zeroheight-exports/Dropdown-Input.md +0 -1776
- package/data/zeroheight-exports/Dropdown-Menus.md +0 -913
- package/data/zeroheight-exports/Element-Status-Tracker.md +0 -267
- package/data/zeroheight-exports/Field-Inputs.md +0 -1405
- package/data/zeroheight-exports/Filters.md +0 -1111
- package/data/zeroheight-exports/Getting-Started.md +0 -1157
- package/data/zeroheight-exports/Hero.md +0 -414
- package/data/zeroheight-exports/Icons.md +0 -2067
- package/data/zeroheight-exports/Intent.md +0 -86
- package/data/zeroheight-exports/Introduction-to-Bases.md +0 -35
- package/data/zeroheight-exports/Introduction-to-Cells.md +0 -35
- package/data/zeroheight-exports/Introduction-to-DNA.md +0 -35
- package/data/zeroheight-exports/Introduction-to-Genes.md +0 -35
- package/data/zeroheight-exports/Introduction.md +0 -115
- package/data/zeroheight-exports/Link.md +0 -432
- package/data/zeroheight-exports/Lists.md +0 -986
- package/data/zeroheight-exports/Loading-Indicator.md +0 -41
- package/data/zeroheight-exports/Navigation.md +0 -1190
- package/data/zeroheight-exports/Notification.md +0 -1038
- package/data/zeroheight-exports/Panel.md +0 -1030
- package/data/zeroheight-exports/README.md +0 -122
- package/data/zeroheight-exports/Responsive-Design.md +0 -330
- package/data/zeroheight-exports/Search-Input.md +0 -91
- package/data/zeroheight-exports/Search.md +0 -822
- package/data/zeroheight-exports/Segmented-Control.md +0 -609
- package/data/zeroheight-exports/Spacing.md +0 -297
- package/data/zeroheight-exports/Table.md +0 -5345
- package/data/zeroheight-exports/Tabs.md +0 -1324
- package/data/zeroheight-exports/Tags.md +0 -1545
- package/data/zeroheight-exports/Text-Link.md +0 -268
- package/data/zeroheight-exports/Theming.md +0 -362
- package/data/zeroheight-exports/Tooltips.md +0 -2015
- package/data/zeroheight-exports/Typography.md +0 -800
|
@@ -2,46 +2,77 @@
|
|
|
2
2
|
"ComplexFilter": {
|
|
3
3
|
"props": {
|
|
4
4
|
"DropdownMenuProps": {
|
|
5
|
-
"
|
|
6
|
-
"isRequired": false
|
|
5
|
+
"description": "Passed straight to the menu, and with it to MUI's Autocomplete underneath.",
|
|
6
|
+
"isRequired": false,
|
|
7
|
+
"type": "Partial<DropdownMenuProps>"
|
|
7
8
|
},
|
|
8
9
|
"InputDropdownProps": {
|
|
9
|
-
"
|
|
10
|
+
"defaultValue": "{ sdsStyle: minimal }",
|
|
11
|
+
"description": "Passed straight to the InputDropdown that opens the filter. Note that supplying it replaces the default, so a filter that should stay minimal needs sdsStyle passed again alongside whatever else it sets.",
|
|
10
12
|
"isRequired": false,
|
|
11
|
-
"
|
|
13
|
+
"type": "InputDropdownPropsType"
|
|
12
14
|
},
|
|
13
15
|
"isTriggerChangeOnOptionClick": {
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
+
"defaultValue": false,
|
|
17
|
+
"description": "Determines whether changes are triggered in real-time upon clicking an option",
|
|
18
|
+
"isRequired": false,
|
|
19
|
+
"type": "boolean"
|
|
16
20
|
},
|
|
17
21
|
"label": {
|
|
18
|
-
"
|
|
19
|
-
"isRequired": false
|
|
22
|
+
"description": "Sets the label of filter, shown both when closed and open",
|
|
23
|
+
"isRequired": false,
|
|
24
|
+
"type": "ReactNode"
|
|
20
25
|
},
|
|
21
26
|
"multiple": {
|
|
22
|
-
"
|
|
23
|
-
"
|
|
27
|
+
"defaultValue": false,
|
|
28
|
+
"description": "Defines whether multiple selections or can be made from the filter simultaneously or only one",
|
|
29
|
+
"isRequired": false,
|
|
30
|
+
"type": "boolean"
|
|
24
31
|
},
|
|
25
32
|
"onChange": {
|
|
26
|
-
"
|
|
27
|
-
"isRequired": false
|
|
33
|
+
"description": "Function to set what happens when a new value is set via the filter",
|
|
34
|
+
"isRequired": false,
|
|
35
|
+
"type": "(options: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>) => void"
|
|
28
36
|
},
|
|
29
37
|
"options": {
|
|
30
|
-
"
|
|
31
|
-
"isRequired": false
|
|
38
|
+
"description": "The items to filter by. Passing the multi-column shape lays the menu out in named columns instead of one list.",
|
|
39
|
+
"isRequired": false,
|
|
40
|
+
"type": "AutocompleteSingleColumnOption<T>[] | AutocompleteMultiColumnOption<T>[]"
|
|
32
41
|
},
|
|
33
42
|
"search": {
|
|
34
|
-
"
|
|
35
|
-
"
|
|
43
|
+
"defaultValue": false,
|
|
44
|
+
"description": "Provides a search bar at the top of the filter from which users can narrow the list of menu items",
|
|
45
|
+
"isRequired": false,
|
|
46
|
+
"type": "boolean"
|
|
36
47
|
},
|
|
37
48
|
"buttonPosition": {
|
|
38
|
-
"
|
|
39
|
-
"
|
|
49
|
+
"defaultValue": "right",
|
|
50
|
+
"description": "Which side of the menu footer the Apply and Cancel buttons sit on. It only applies alongside buttons.",
|
|
51
|
+
"isRequired": false,
|
|
52
|
+
"type": "\"left\" | \"right\""
|
|
40
53
|
},
|
|
41
54
|
"buttons": {
|
|
42
|
-
"
|
|
43
|
-
"
|
|
55
|
+
"defaultValue": false,
|
|
56
|
+
"description": "Puts Apply and Cancel buttons at the foot of the menu, so selections take effect only once Apply is pressed.",
|
|
57
|
+
"isRequired": false,
|
|
58
|
+
"type": "boolean"
|
|
59
|
+
},
|
|
60
|
+
"closeOnBlur": {
|
|
61
|
+
"defaultValue": false,
|
|
62
|
+
"description": "Closes the filter when a click lands outside it, which it otherwise does not do. It is ignored while the Apply and Cancel buttons are showing, which is a multi select that has not been given isTriggerChangeOnOptionClick. The default follows buttons, so a filter given buttons={false} closes on blur without being asked.",
|
|
63
|
+
"isRequired": false,
|
|
64
|
+
"type": "boolean"
|
|
65
|
+
},
|
|
66
|
+
"keepSearchOnSelect": {
|
|
67
|
+
"description": "Maintains a search input when a user selects an option (only if multiple selections are allowed via the multiple prop; otherwise the dropdown closes upon selection)",
|
|
68
|
+
"isRequired": false,
|
|
69
|
+
"type": "boolean"
|
|
70
|
+
},
|
|
71
|
+
"value": {
|
|
72
|
+
"description": "The selected option or options. Leaving it out lets the filter keep track of the selection itself, and passing it makes the filter controlled: the tags and menu then only change when a new value comes back in.",
|
|
73
|
+
"isRequired": false,
|
|
74
|
+
"type": "T | T[] | null"
|
|
44
75
|
}
|
|
45
76
|
}
|
|
46
77
|
}
|
|
47
|
-
}
|
|
78
|
+
}
|
|
@@ -2,81 +2,104 @@
|
|
|
2
2
|
"ContentCard": {
|
|
3
3
|
"props": {
|
|
4
4
|
"boundingBox": {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
"type": "any",
|
|
10
|
-
"isRequired": false
|
|
5
|
+
"defaultValue": true,
|
|
6
|
+
"description": "If true, wraps content and visuals inside a bounded layout with background and padding. It is forced on when clickableCard is true.",
|
|
7
|
+
"isRequired": false,
|
|
8
|
+
"type": "boolean"
|
|
11
9
|
},
|
|
12
10
|
"buttonsPosition": {
|
|
13
|
-
"
|
|
14
|
-
"
|
|
11
|
+
"defaultValue": "left",
|
|
12
|
+
"description": "Determines the alignment of buttons in the ContentCardActions component.",
|
|
13
|
+
"isRequired": false,
|
|
14
|
+
"type": "\"left\" | \"right\""
|
|
15
15
|
},
|
|
16
16
|
"classes": {
|
|
17
|
-
"
|
|
18
|
-
"isRequired": false
|
|
17
|
+
"description": "Override or extend the styles applied to the component.",
|
|
18
|
+
"isRequired": false,
|
|
19
|
+
"type": "complex"
|
|
19
20
|
},
|
|
20
21
|
"clickableCard": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
22
|
+
"defaultValue": false,
|
|
23
|
+
"description": "If true, wraps the card with an action area and makes it clickable. Because the card then is a button, ContentCardActions keeps only its first button and renders it as a div.",
|
|
24
|
+
"isRequired": false,
|
|
25
|
+
"type": "boolean"
|
|
23
26
|
},
|
|
24
27
|
"clickableCardProps": {
|
|
25
|
-
"
|
|
26
|
-
"isRequired": false
|
|
28
|
+
"description": "Props forwarded to the clickable card wrapper when clickableCard is true, including href and target to make the whole card a link.",
|
|
29
|
+
"isRequired": false,
|
|
30
|
+
"type": "Partial<ButtonProps & { target?: HTMLAttributeAnchorTarget; }>"
|
|
27
31
|
},
|
|
28
32
|
"decorativeBorder": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
33
|
+
"defaultValue": false,
|
|
34
|
+
"description": "If true, draws an accent bar along the leading edge of the card: down the left side of a wide card, across the top of a narrow one. It requires boundingBox, and on an image card it only appears when the image is on the right, or on the left with imagePadding.",
|
|
35
|
+
"isRequired": false,
|
|
36
|
+
"type": "boolean"
|
|
31
37
|
},
|
|
32
38
|
"icon": {
|
|
33
|
-
"
|
|
34
|
-
"isRequired": false
|
|
39
|
+
"description": "The icon displayed in the card when visualElementType is \"icon\".",
|
|
40
|
+
"isRequired": false,
|
|
41
|
+
"type": "ReactNode"
|
|
35
42
|
},
|
|
36
43
|
"image": {
|
|
37
|
-
"
|
|
38
|
-
"isRequired": false
|
|
44
|
+
"description": "The image displayed in the card when visualElementType is \"image\".",
|
|
45
|
+
"isRequired": false,
|
|
46
|
+
"type": "ReactNode"
|
|
39
47
|
},
|
|
40
48
|
"imagePadding": {
|
|
41
|
-
"
|
|
42
|
-
"
|
|
49
|
+
"defaultValue": false,
|
|
50
|
+
"description": "If true, applies padding around the image inside the card.",
|
|
51
|
+
"isRequired": false,
|
|
52
|
+
"type": "boolean"
|
|
43
53
|
},
|
|
44
54
|
"imagePosition": {
|
|
45
|
-
"
|
|
46
|
-
"
|
|
55
|
+
"defaultValue": "left",
|
|
56
|
+
"description": "Position of the image in the card layout (\"left\" or \"right\").",
|
|
57
|
+
"isRequired": false,
|
|
58
|
+
"type": "\"left\" | \"right\""
|
|
47
59
|
},
|
|
48
60
|
"imageSize": {
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"type": "any",
|
|
54
|
-
"isRequired": false
|
|
61
|
+
"defaultValue": 300,
|
|
62
|
+
"description": "Width of the image area in pixels when visualElementType is \"image\".",
|
|
63
|
+
"isRequired": false,
|
|
64
|
+
"type": "number"
|
|
55
65
|
},
|
|
56
|
-
"visualElementType": {
|
|
57
|
-
"type": "any",
|
|
58
|
-
"isRequired": false
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
"ContentCardTitle": {
|
|
63
|
-
"props": {
|
|
64
66
|
"metadataText": {
|
|
65
|
-
"
|
|
66
|
-
"isRequired":
|
|
67
|
+
"description": "Optional metadata text, usually used for extra context like date or author.",
|
|
68
|
+
"isRequired": false,
|
|
69
|
+
"type": "ReactNode"
|
|
67
70
|
},
|
|
68
71
|
"overlineText": {
|
|
69
|
-
"
|
|
70
|
-
"isRequired":
|
|
72
|
+
"description": "A small overline text displayed above the title.",
|
|
73
|
+
"isRequired": false,
|
|
74
|
+
"type": "ReactNode"
|
|
75
|
+
},
|
|
76
|
+
"sdsType": {
|
|
77
|
+
"defaultValue": "wide",
|
|
78
|
+
"description": "Determines the card layout style. \"wide\" shows the image and content side by side, \"narrow\" stacks them vertically. The card watches its own width and switches to narrow on its own once it drops below roughly 595px, so this prop sets the layout it uses when there is room.",
|
|
79
|
+
"isRequired": false,
|
|
80
|
+
"type": "\"wide\" | \"narrow\""
|
|
71
81
|
},
|
|
72
82
|
"subtitleText": {
|
|
73
|
-
"
|
|
74
|
-
"isRequired":
|
|
83
|
+
"description": "Optional subtitle text displayed below the title.",
|
|
84
|
+
"isRequired": false,
|
|
85
|
+
"type": "ReactNode"
|
|
75
86
|
},
|
|
76
87
|
"titleText": {
|
|
77
|
-
"
|
|
78
|
-
"isRequired":
|
|
88
|
+
"description": "The main title text of the card.",
|
|
89
|
+
"isRequired": false,
|
|
90
|
+
"type": "ReactNode"
|
|
91
|
+
},
|
|
92
|
+
"visualElementType": {
|
|
93
|
+
"defaultValue": "none",
|
|
94
|
+
"description": "Required. Specifies what type of visual element to render on the card: an image, an icon, or none. It also narrows which visual props are accepted, so image props are only available on an image card and icon on an icon card.",
|
|
95
|
+
"isRequired": true,
|
|
96
|
+
"type": "\"image\" | \"none\" | \"icon\""
|
|
97
|
+
},
|
|
98
|
+
"children": {
|
|
99
|
+
"description": "The content to be displayed inside the card body, including custom\ncomponents and ContentCardActions.",
|
|
100
|
+
"isRequired": false,
|
|
101
|
+
"type": "ReactNode"
|
|
79
102
|
}
|
|
80
103
|
}
|
|
81
104
|
}
|
|
82
|
-
}
|
|
105
|
+
}
|
|
@@ -2,25 +2,58 @@
|
|
|
2
2
|
"Dialog": {
|
|
3
3
|
"props": {
|
|
4
4
|
"buttonPosition": {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
5
|
+
"defaultValue": "right",
|
|
6
|
+
"description": "Aligns the action buttons in the footer. Order the buttons so the primary action sits on the outside: last for \"right\", first for \"left\".",
|
|
7
|
+
"isRequired": false,
|
|
8
|
+
"type": "\"left\" | \"right\""
|
|
7
9
|
},
|
|
8
10
|
"canClickOutsideClose": {
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"type": "any",
|
|
14
|
-
"isRequired": false
|
|
11
|
+
"defaultValue": true,
|
|
12
|
+
"description": "When false, onClose is not called for a backdrop click or the Esc key, which makes the Dialog persistent. Give those Dialogs an action button that closes them.",
|
|
13
|
+
"isRequired": false,
|
|
14
|
+
"type": "boolean"
|
|
15
15
|
},
|
|
16
16
|
"sdsSize": {
|
|
17
|
-
"
|
|
18
|
-
"
|
|
17
|
+
"isRequired": false,
|
|
18
|
+
"type": "\"s\" | \"m\" | \"xs\" | \"l\""
|
|
19
|
+
},
|
|
20
|
+
"open": {
|
|
21
|
+
"description": "If `true`, the component is shown.",
|
|
22
|
+
"isRequired": true,
|
|
23
|
+
"type": "boolean"
|
|
24
|
+
},
|
|
25
|
+
"PaperComponent": {
|
|
26
|
+
"defaultValue": "Paper",
|
|
27
|
+
"description": "The component used to render the body of the dialog.",
|
|
28
|
+
"isRequired": false,
|
|
29
|
+
"type": "ReactNode"
|
|
30
|
+
},
|
|
31
|
+
"DialogComponent": {
|
|
32
|
+
"defaultValue": "Dialog",
|
|
33
|
+
"description": "Replaces MUI's Dialog itself, rather than the surface inside it. Declared on the props type and not read by the component, so passing it has no effect today.",
|
|
34
|
+
"isRequired": false,
|
|
35
|
+
"type": "ComponentClass<DialogProps, any> | FunctionComponent<DialogProps>"
|
|
36
|
+
},
|
|
37
|
+
"title": {
|
|
38
|
+
"description": "The title text of the Dialog.",
|
|
39
|
+
"isRequired": false,
|
|
40
|
+
"type": "string"
|
|
41
|
+
},
|
|
42
|
+
"subtitle": {
|
|
43
|
+
"description": "Secondary text rendered below the title.",
|
|
44
|
+
"isRequired": false,
|
|
45
|
+
"type": "string"
|
|
46
|
+
},
|
|
47
|
+
"overline": {
|
|
48
|
+
"description": "Small text rendered above the title. Use it for the step count in a multi-step workflow.",
|
|
49
|
+
"isRequired": false,
|
|
50
|
+
"type": "string"
|
|
19
51
|
},
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"isRequired": false
|
|
52
|
+
"children": {
|
|
53
|
+
"description": "Dialog children, usually the included sub-components.",
|
|
54
|
+
"isRequired": false,
|
|
55
|
+
"type": "ReactNode"
|
|
23
56
|
}
|
|
24
57
|
}
|
|
25
58
|
}
|
|
26
|
-
}
|
|
59
|
+
}
|
|
@@ -2,67 +2,104 @@
|
|
|
2
2
|
"Dropdown": {
|
|
3
3
|
"props": {
|
|
4
4
|
"DropdownMenuProps": {
|
|
5
|
-
"
|
|
6
|
-
"isRequired": false
|
|
5
|
+
"description": "These props are directly passed to the underlying DropdownMenu component, customizing its behavior. It is also the way to reach the menu's PopperComponent, PaperComponent and placement.",
|
|
6
|
+
"isRequired": false,
|
|
7
|
+
"type": "SdsDropdownMenuProps<T, Multiple, DisableClearable, FreeSolo>"
|
|
7
8
|
},
|
|
8
9
|
"InputDropdownProps": {
|
|
9
|
-
"
|
|
10
|
-
"isRequired": false
|
|
10
|
+
"description": "These props are directly passed to the underlying InputDropdown component, customizing its behavior.",
|
|
11
|
+
"isRequired": false,
|
|
12
|
+
"type": "InputDropdownPropsType"
|
|
11
13
|
},
|
|
12
14
|
"buttonPosition": {
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
+
"defaultValue": "left",
|
|
16
|
+
"description": "Specifies the position of the Apply/Cancel buttons at the Dropdown footer.",
|
|
17
|
+
"isRequired": false,
|
|
18
|
+
"type": "\"left\" | \"right\""
|
|
15
19
|
},
|
|
16
20
|
"buttons": {
|
|
17
|
-
"
|
|
18
|
-
"
|
|
21
|
+
"defaultValue": false,
|
|
22
|
+
"description": "When set to true, a set of Apply/Cancel buttons will be displayed at the Dropdown footer.",
|
|
23
|
+
"isRequired": false,
|
|
24
|
+
"type": "boolean"
|
|
19
25
|
},
|
|
20
26
|
"closeOnBlur": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
27
|
+
"defaultValue": true,
|
|
28
|
+
"description": "When set to true, the Dropdown will automatically close when a click occurs outside of it.",
|
|
29
|
+
"isRequired": false,
|
|
30
|
+
"type": "boolean"
|
|
23
31
|
},
|
|
24
32
|
"disabled": {
|
|
25
|
-
"
|
|
26
|
-
"isRequired": false,
|
|
33
|
+
"defaultValue": false,
|
|
27
34
|
"description": "If `true`, the component is disabled.",
|
|
28
|
-
"
|
|
35
|
+
"isRequired": false,
|
|
36
|
+
"type": "boolean"
|
|
29
37
|
},
|
|
30
38
|
"isSearchAutoFocus": {
|
|
31
|
-
"
|
|
32
|
-
"
|
|
39
|
+
"defaultValue": true,
|
|
40
|
+
"description": "Puts the cursor in the search input as the menu opens. It only applies alongside search.",
|
|
41
|
+
"isRequired": false,
|
|
42
|
+
"type": "boolean"
|
|
33
43
|
},
|
|
34
44
|
"label": {
|
|
35
|
-
"
|
|
36
|
-
"isRequired": true
|
|
45
|
+
"description": "The label of the Dropdown.",
|
|
46
|
+
"isRequired": true,
|
|
47
|
+
"type": "ReactNode"
|
|
37
48
|
},
|
|
38
49
|
"multiple": {
|
|
39
|
-
"
|
|
40
|
-
"isRequired": false,
|
|
50
|
+
"defaultValue": false,
|
|
41
51
|
"description": "If `true`, `value` must be an array and the menu will support multiple selections.",
|
|
42
|
-
"
|
|
52
|
+
"isRequired": false,
|
|
53
|
+
"type": "boolean"
|
|
43
54
|
},
|
|
44
55
|
"onChange": {
|
|
45
|
-
"
|
|
56
|
+
"description": "Callback fired when the value changes.\n@param event The event source of the callback.\n@param value The new value of the component.\n@param reason One of \"createOption\", \"selectOption\", \"removeOption\", \"blur\" or \"clear\".\n@param details",
|
|
46
57
|
"isRequired": false,
|
|
47
|
-
"
|
|
58
|
+
"type": "(event: SyntheticEvent"
|
|
48
59
|
},
|
|
49
60
|
"onClose": {
|
|
50
|
-
"
|
|
61
|
+
"description": "Callback fired when the popup requests to be closed.\nUse in controlled mode (see open).\n@param event The event source of the callback.\n@param reason Can be: `\"toggleInput\"`, `\"escape\"`, `\"selectOption\"`, `\"removeOption\"`, `\"blur\"`.",
|
|
51
62
|
"isRequired": false,
|
|
52
|
-
"
|
|
63
|
+
"type": "(event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void"
|
|
53
64
|
},
|
|
54
65
|
"options": {
|
|
55
|
-
"
|
|
56
|
-
"isRequired": true
|
|
66
|
+
"description": "An array of options to be displayed as MenuItems within the Dropdown.",
|
|
67
|
+
"isRequired": true,
|
|
68
|
+
"type": "AutocompleteSingleColumnOption<T>[] | AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[]"
|
|
57
69
|
},
|
|
58
70
|
"search": {
|
|
59
|
-
"
|
|
60
|
-
"
|
|
71
|
+
"defaultValue": true,
|
|
72
|
+
"description": "When set to true, a search input is displayed at the top of the Dropdown for filtering options.",
|
|
73
|
+
"isRequired": false,
|
|
74
|
+
"type": "boolean"
|
|
61
75
|
},
|
|
62
76
|
"title": {
|
|
63
|
-
"
|
|
64
|
-
"isRequired": false
|
|
77
|
+
"description": "A heading shown at the top of the menu.",
|
|
78
|
+
"isRequired": false,
|
|
79
|
+
"type": "string"
|
|
80
|
+
},
|
|
81
|
+
"isTriggerChangeOnOptionClick": {
|
|
82
|
+
"defaultValue": false,
|
|
83
|
+
"description": "When set to true, changes in Dropdown selections are applied in real-time to the react state.",
|
|
84
|
+
"isRequired": false,
|
|
85
|
+
"type": "boolean"
|
|
86
|
+
},
|
|
87
|
+
"value": {
|
|
88
|
+
"description": "The value of the autocomplete.\n\nThe value must have reference equality with the option in order to be selected.\nYou can customize the equality behavior with the `isOptionEqualToValue` prop.",
|
|
89
|
+
"isRequired": false,
|
|
90
|
+
"type": "string | Array<string>"
|
|
91
|
+
},
|
|
92
|
+
"onInputChange": {
|
|
93
|
+
"description": "Callback fired when the input value changes.\n@param event The event source of the callback.\n@param value The new value of the text input.\n@param reason Can be: `\"input\"` (user input), `\"reset\"` (programmatic change), `\"clear\"`, `\"blur\"`, `\"selectOption\"`, `\"removeOption\"`",
|
|
94
|
+
"isRequired": false,
|
|
95
|
+
"type": "((event: SyntheticEvent"
|
|
96
|
+
},
|
|
97
|
+
"InputDropdownComponent": {
|
|
98
|
+
"defaultValue": "InputDropdown",
|
|
99
|
+
"description": "The component used to render the Dropdown trigger button.",
|
|
100
|
+
"isRequired": false,
|
|
101
|
+
"type": "element"
|
|
65
102
|
}
|
|
66
103
|
}
|
|
67
104
|
}
|
|
68
|
-
}
|
|
105
|
+
}
|
|
@@ -2,49 +2,154 @@
|
|
|
2
2
|
"DropdownMenu": {
|
|
3
3
|
"props": {
|
|
4
4
|
"ClickAwayListenerProps": {
|
|
5
|
-
"
|
|
6
|
-
"isRequired": false
|
|
5
|
+
"description": "Passes props to the MUI ClickAwayListener .",
|
|
6
|
+
"isRequired": false,
|
|
7
|
+
"type": "Partial<ClickAwayListenerProps>"
|
|
7
8
|
},
|
|
8
9
|
"groupBy": {
|
|
9
|
-
"
|
|
10
|
-
"isRequired": false
|
|
10
|
+
"description": "Groups menu items according to their assigned section.",
|
|
11
|
+
"isRequired": false,
|
|
12
|
+
"type": "function"
|
|
11
13
|
},
|
|
12
14
|
"keepSearchOnSelect": {
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
+
"defaultValue": true,
|
|
16
|
+
"description": "Maintains a search input when a user selects a menu item (only if multiple selections are allowed via the multiple prop; otherwise the dropdown closes upon selection).",
|
|
17
|
+
"isRequired": false,
|
|
18
|
+
"type": "boolean"
|
|
15
19
|
},
|
|
16
20
|
"label": {
|
|
17
|
-
"
|
|
18
|
-
"
|
|
21
|
+
"defaultValue": "Search",
|
|
22
|
+
"description": "The placeholder text of the search input.",
|
|
23
|
+
"isRequired": false,
|
|
24
|
+
"type": "string"
|
|
19
25
|
},
|
|
20
26
|
"multiple": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
27
|
+
"defaultValue": false,
|
|
28
|
+
"description": "Allows user to select multiple menu items; see more in the MUI Autocomplete API .",
|
|
29
|
+
"isRequired": false,
|
|
30
|
+
"type": "boolean"
|
|
23
31
|
},
|
|
24
32
|
"open": {
|
|
25
|
-
"
|
|
26
|
-
"
|
|
33
|
+
"defaultValue": false,
|
|
34
|
+
"description": "Whether the menu is showing. The menu holds no open state of its own, so this and anchorEl are what the opening control sets.",
|
|
35
|
+
"isRequired": false,
|
|
36
|
+
"type": "boolean"
|
|
27
37
|
},
|
|
28
38
|
"options": {
|
|
29
|
-
"
|
|
30
|
-
"isRequired": false
|
|
39
|
+
"description": "Required. One object per menu item, each needing at least a name. An option that itself has an options array turns the menu into columns, which changes how it is sized.",
|
|
40
|
+
"isRequired": false,
|
|
41
|
+
"type": "T[]"
|
|
31
42
|
},
|
|
32
43
|
"search": {
|
|
33
|
-
"
|
|
34
|
-
"
|
|
44
|
+
"defaultValue": false,
|
|
45
|
+
"description": "Provides a search bar at the top of the menu from which users can narrow the list of menu items.",
|
|
46
|
+
"isRequired": false,
|
|
47
|
+
"type": "boolean"
|
|
35
48
|
},
|
|
36
49
|
"title": {
|
|
37
|
-
"
|
|
38
|
-
"isRequired": false
|
|
50
|
+
"description": "Sets a heading for the menu.",
|
|
51
|
+
"isRequired": false,
|
|
52
|
+
"type": "ReactNode"
|
|
39
53
|
},
|
|
40
54
|
"subTitle": {
|
|
41
|
-
"
|
|
42
|
-
"isRequired": false
|
|
55
|
+
"description": "A second line below the header's title. It is only rendered when title is set as well.",
|
|
56
|
+
"isRequired": false,
|
|
57
|
+
"type": "ReactNode"
|
|
43
58
|
},
|
|
44
59
|
"width": {
|
|
45
|
-
"
|
|
46
|
-
"
|
|
60
|
+
"defaultValue": 160,
|
|
61
|
+
"description": "The width of the menu, as a number of pixels or any CSS width. The 160px minimum still applies underneath it, and a menu whose options are laid out in columns ignores this and sizes itself to its content.",
|
|
62
|
+
"isRequired": false,
|
|
63
|
+
"type": "string | number | string & {}"
|
|
64
|
+
},
|
|
65
|
+
"anchorEl": {
|
|
66
|
+
"description": "Required. The element the menu is positioned against, usually the control that opens it. Until it is set the menu renders an empty container: the list is only mounted once there is something to anchor it to. See the MUI Popper API .",
|
|
67
|
+
"isRequired": true,
|
|
68
|
+
"type": "HTMLElement"
|
|
69
|
+
},
|
|
70
|
+
"children": {
|
|
71
|
+
"description": "Rendered inside the menu below the list, for footers such as an apply button.",
|
|
72
|
+
"isRequired": false,
|
|
73
|
+
"type": "JSX.Element | null"
|
|
74
|
+
},
|
|
75
|
+
"headerComponentSlot": {
|
|
76
|
+
"description": "Rendered in the menu's header, below title. Either one is enough to give the menu a header.",
|
|
77
|
+
"isRequired": false,
|
|
78
|
+
"type": "Element"
|
|
79
|
+
},
|
|
80
|
+
"InputBaseProps": {
|
|
81
|
+
"description": "Passed to the InputSearch the search prop renders. The menu sets autoFocus from isSearchAutoFocus and onClick to a no-op after these, so those two are the menu's to decide.",
|
|
82
|
+
"isRequired": false,
|
|
83
|
+
"type": "InputSearchProps"
|
|
84
|
+
},
|
|
85
|
+
"isOptionEqualToValue": {
|
|
86
|
+
"defaultValue": "(option, val) => option.name === val.name",
|
|
87
|
+
"description": "Changes how a selected value is compared against the available options; see more in the MUI Autocomplete API or in the Recipes section.",
|
|
88
|
+
"isRequired": false,
|
|
89
|
+
"type": "function"
|
|
90
|
+
},
|
|
91
|
+
"isSearchAutoFocus": {
|
|
92
|
+
"defaultValue": true,
|
|
93
|
+
"description": "Puts the cursor in the search input as the menu opens. It overrides any autoFocus given through InputBaseProps.",
|
|
94
|
+
"isRequired": false,
|
|
95
|
+
"type": "boolean"
|
|
96
|
+
},
|
|
97
|
+
"noOptionsText": {
|
|
98
|
+
"defaultValue": "No options",
|
|
99
|
+
"description": "Sets the text that displays if there are no matching search results; see more in the MUI Autocomplete API .",
|
|
100
|
+
"isRequired": false,
|
|
101
|
+
"type": "string"
|
|
102
|
+
},
|
|
103
|
+
"onClickAway": {
|
|
104
|
+
"defaultValue": "noop",
|
|
105
|
+
"description": "Sets what happens when a user clicks outside of the DropdownMenu. This is where a menu is normally closed. Signature: function(event: MouseEvent | TouchEvent) => void",
|
|
106
|
+
"isRequired": false,
|
|
107
|
+
"type": "function"
|
|
108
|
+
},
|
|
109
|
+
"onClose": {
|
|
110
|
+
"description": "Called when the list asks to close, such as on selecting an option in a single-select menu. Closing is still yours to carry out through open. Signature: function(event: SyntheticEvent, reason: AutocompleteCloseReason) => void",
|
|
111
|
+
"isRequired": false,
|
|
112
|
+
"type": "(event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void"
|
|
113
|
+
},
|
|
114
|
+
"onInputChange": {
|
|
115
|
+
"description": "Called as the search text changes; see more in the MUI Autocomplete API or in the Recipes section. Signature: function(event: SyntheticEvent, value: string, reason: AutocompleteInputChangeReason) => void",
|
|
116
|
+
"isRequired": false,
|
|
117
|
+
"type": "(event: SyntheticEvent"
|
|
118
|
+
},
|
|
119
|
+
"onOpen": {
|
|
120
|
+
"description": "Called when the list asks to open. Signature: function(event: SyntheticEvent) => void",
|
|
121
|
+
"isRequired": false,
|
|
122
|
+
"type": "(event: SyntheticEvent<Element, Event>) => void"
|
|
123
|
+
},
|
|
124
|
+
"PaperComponent": {
|
|
125
|
+
"defaultValue": "SDSs StyledPaper",
|
|
126
|
+
"description": "The surface the menu is drawn on. Replace it to restyle the menu's background, border and shadow.",
|
|
127
|
+
"isRequired": false,
|
|
128
|
+
"type": "ReactNode"
|
|
129
|
+
},
|
|
130
|
+
"PopperBaseProps": {
|
|
131
|
+
"defaultValue": {},
|
|
132
|
+
"description": "Passes custom props to the MUI Popper the menu is placed with. Learn more in the Popper documentation , and see all the props available to pass to it on the Popper API page . See an example of PopperBaseProps in use in the Recipes section. Its sx is merged over the menu's own sizing, so this is also how the 160px minimum width is lifted.",
|
|
133
|
+
"isRequired": false,
|
|
134
|
+
"type": "Partial<PopperProps>"
|
|
135
|
+
},
|
|
136
|
+
"PopperComponent": {
|
|
137
|
+
"defaultValue": "SDSs StyledPopper",
|
|
138
|
+
"description": "The MUI Popper component is included as part of the SDS DropdownMenu component, and its styles can be changed or added to.",
|
|
139
|
+
"isRequired": false,
|
|
140
|
+
"type": "ReactNode"
|
|
141
|
+
},
|
|
142
|
+
"PopperPlacement": {
|
|
143
|
+
"defaultValue": "bottom-start",
|
|
144
|
+
"description": "Where the menu sits relative to its anchor, as MUI's Popper understands it: one of \"auto\", \"top\", \"bottom\", \"left\", \"right\", each also available with a -start or -end suffix.",
|
|
145
|
+
"isRequired": false,
|
|
146
|
+
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | \"auto\" | \"auto-start\" | \"auto-end\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
|
|
147
|
+
},
|
|
148
|
+
"renderInput": {
|
|
149
|
+
"description": "Replaces the search input entirely. Most menus want InputBaseProps instead, which keeps the SDS input. Signature: function(params: AutocompleteRenderInputParams) => ReactNode",
|
|
150
|
+
"isRequired": false,
|
|
151
|
+
"type": "ReactNode"
|
|
47
152
|
}
|
|
48
153
|
}
|
|
49
154
|
}
|
|
50
|
-
}
|
|
155
|
+
}
|