@czi-sds/mcp 0.16.0 → 0.18.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/ProteinStructureViewer.md +1044 -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 +267 -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/ProteinStructureViewer.json +117 -0
- 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/data/tailwind.json +20 -14
- 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,41 +2,84 @@
|
|
|
2
2
|
"CellHeader": {
|
|
3
3
|
"props": {
|
|
4
4
|
"active": {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
5
|
+
"defaultValue": false,
|
|
6
|
+
"description": "Marks this column as the one currently sorted: the label and chevron take the accent color. It does not sort anything on its own.",
|
|
7
|
+
"isRequired": false,
|
|
8
|
+
"type": "boolean"
|
|
9
|
+
},
|
|
10
|
+
"as": {
|
|
11
|
+
"defaultValue": "th",
|
|
12
|
+
"description": "The element the header cell renders as.",
|
|
13
|
+
"isRequired": false,
|
|
14
|
+
"type": "\"symbol\" | \"object\" | \"style\" | \"button\" | \"div\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"article\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dialog\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"figure\" | \"footer\" | \"form\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"img\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"li\" | \"link\" | \"main\" | \"map\" | \"mark\" | \"menu\" | \"menuitem\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"option\" | \"output\" | \"p\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"search\" | \"slot\" | \"script\" | \"section\" | \"select\" | \"small\" | \"source\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"table\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"time\" | \"title\" | \"tr\" | \"track\" | \"u\" | \"ul\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"filter\" | \"foreignObject\" | \"g\" | \"image\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"switch\" | \"text\" | \"textPath\" | \"tspan\" | \"use\" | \"view\" | ComponentClass<any, any> | FunctionComponent<any>"
|
|
7
15
|
},
|
|
8
16
|
"direction": {
|
|
9
|
-
"
|
|
10
|
-
"
|
|
17
|
+
"defaultValue": "desc",
|
|
18
|
+
"description": "Which chevron to draw: up for \"asc\", down for \"desc\". It also sets the icon's aria-label. Exported as CellHeaderDirection.",
|
|
19
|
+
"isRequired": false,
|
|
20
|
+
"type": "\"desc\" | \"asc\""
|
|
11
21
|
},
|
|
12
22
|
"hideSortIcon": {
|
|
13
|
-
"
|
|
14
|
-
"
|
|
23
|
+
"defaultValue": false,
|
|
24
|
+
"description": "Leaves the chevron out for columns that cannot be sorted. An active header keeps its chevron even with this set.",
|
|
25
|
+
"isRequired": false,
|
|
26
|
+
"type": "boolean"
|
|
15
27
|
},
|
|
16
28
|
"horizontalAlign": {
|
|
17
|
-
"
|
|
18
|
-
"
|
|
29
|
+
"defaultValue": "left",
|
|
30
|
+
"description": "Horizontally aligns the label and its chevron.",
|
|
31
|
+
"isRequired": false,
|
|
32
|
+
"type": "\"center\" | \"left\" | \"right\""
|
|
19
33
|
},
|
|
20
34
|
"hover": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
35
|
+
"defaultValue": false,
|
|
36
|
+
"description": "Makes the header interactive: it takes a pointer cursor, reacts to hover, renders the sort chevron and allows the tooltip. A header left at the default draws no chevron and shows no tooltip even if the other sorting props are set, so set this on every sortable column.",
|
|
37
|
+
"isRequired": false,
|
|
38
|
+
"type": "boolean"
|
|
23
39
|
},
|
|
24
40
|
"shouldShowTooltipOnHover": {
|
|
25
|
-
"
|
|
26
|
-
"
|
|
41
|
+
"defaultValue": false,
|
|
42
|
+
"description": "Wraps the header in a Tooltip. It only takes effect while hover is also true.",
|
|
43
|
+
"isRequired": false,
|
|
44
|
+
"type": "boolean"
|
|
45
|
+
},
|
|
46
|
+
"shouldTruncate": {
|
|
47
|
+
"defaultValue": false,
|
|
48
|
+
"description": "Keeps a long label on one line and truncates it with an ellipsis instead of wrapping.",
|
|
49
|
+
"isRequired": false,
|
|
50
|
+
"type": "boolean"
|
|
27
51
|
},
|
|
28
52
|
"tooltipProps": {
|
|
29
|
-
"
|
|
30
|
-
"isRequired": false
|
|
53
|
+
"description": "Passed to the Tooltip, and overrides the defaults the header sets (arrow, top-start placement, dark style).",
|
|
54
|
+
"isRequired": false,
|
|
55
|
+
"type": "Partial<TooltipProps>"
|
|
56
|
+
},
|
|
57
|
+
"tooltipSubtitle": {
|
|
58
|
+
"description": "A second line below the tooltip's title.",
|
|
59
|
+
"isRequired": false,
|
|
60
|
+
"type": "string"
|
|
31
61
|
},
|
|
32
62
|
"tooltipText": {
|
|
33
|
-
"
|
|
34
|
-
"
|
|
63
|
+
"defaultValue": "",
|
|
64
|
+
"description": "The tooltip's title.",
|
|
65
|
+
"isRequired": false,
|
|
66
|
+
"type": "string"
|
|
35
67
|
},
|
|
36
68
|
"width": {
|
|
37
|
-
"
|
|
38
|
-
"isRequired": false
|
|
69
|
+
"description": "Lands on the rendered cell as the HTML width attribute, so a number is read as pixels. Browsers treat it as the width of the whole column, and take it as a minimum rather than a promise.",
|
|
70
|
+
"isRequired": false,
|
|
71
|
+
"type": "string | number"
|
|
72
|
+
},
|
|
73
|
+
"children": {
|
|
74
|
+
"description": "Required. A string or number is wrapped in the header's own text styling; anything else is rendered as given.",
|
|
75
|
+
"isRequired": false,
|
|
76
|
+
"type": "React.ReactNode"
|
|
77
|
+
},
|
|
78
|
+
"onClick": {
|
|
79
|
+
"description": "Where sorting is actually wired up: with TanStack Table, pass column.getToggleSortingHandler().",
|
|
80
|
+
"isRequired": false,
|
|
81
|
+
"type": "function"
|
|
39
82
|
}
|
|
40
83
|
}
|
|
41
84
|
}
|
|
42
|
-
}
|
|
85
|
+
}
|
|
@@ -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": "Partial<InputDropdownProps>"
|
|
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": "{ cardPaper?: string | undefined; cardContent?: string | undefined; cardHeader?: string | undefined; cardMedia?: string | undefined; cardOverline?: string | undefined; cardTitle?: string | undefined; cardSubtitle?: string | undefined; cardMetadata?: string | undefined; cardActions?: string | undefined; clickableCard..."
|
|
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 | undefined; }>"
|
|
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": "Partial<DropdownMenuProps>"
|
|
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": "Partial<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<Element, Event>, value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<...> | undefined) => void"
|
|
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<Element, Event>, value: string, reason: AutocompleteInputChangeReason) => void) & ((event: SyntheticEvent<...>, value: string, reason: AutocompleteInputChangeReason) => void)"
|
|
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
|
+
}
|