@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.
Files changed (164) hide show
  1. package/README.md +2 -1
  2. package/data/component-docs/Accordion.md +291 -0
  3. package/data/component-docs/Autocomplete.md +525 -0
  4. package/data/component-docs/Banner.md +231 -0
  5. package/data/component-docs/Button.md +224 -0
  6. package/data/component-docs/ButtonDropdown.md +256 -0
  7. package/data/component-docs/ButtonGroup.md +320 -0
  8. package/data/component-docs/ButtonToggle.md +397 -0
  9. package/data/component-docs/Callout.md +268 -0
  10. package/data/component-docs/CellBasic.md +122 -0
  11. package/data/component-docs/CellComponent.md +63 -0
  12. package/data/component-docs/CellHeader.md +128 -0
  13. package/data/component-docs/ComplexFilter.md +294 -0
  14. package/data/component-docs/ContentCard.md +406 -0
  15. package/data/component-docs/Dialog.md +651 -0
  16. package/data/component-docs/Dropdown.md +155 -0
  17. package/data/component-docs/DropdownMenu.md +949 -0
  18. package/data/component-docs/HeatmapChart.md +782 -0
  19. package/data/component-docs/Hero.md +363 -0
  20. package/data/component-docs/Icon.md +283 -0
  21. package/data/component-docs/InputCheckbox.md +205 -0
  22. package/data/component-docs/InputDropdown.md +482 -0
  23. package/data/component-docs/InputRadio.md +173 -0
  24. package/data/component-docs/InputSearch.md +81 -0
  25. package/data/component-docs/InputSlider.md +189 -0
  26. package/data/component-docs/InputText.md +110 -0
  27. package/data/component-docs/InputToggle.md +141 -0
  28. package/data/component-docs/IntentMessage.md +293 -0
  29. package/data/component-docs/Legend.md +442 -0
  30. package/data/component-docs/Link.md +23 -0
  31. package/data/component-docs/List.md +300 -0
  32. package/data/component-docs/LoadingIndicator.md +198 -0
  33. package/data/component-docs/Menu.md +298 -0
  34. package/data/component-docs/MenuItem.md +100 -0
  35. package/data/component-docs/NavigationFooter.md +165 -0
  36. package/data/component-docs/NavigationHeader.md +500 -0
  37. package/data/component-docs/NavigationJumpTo.md +414 -0
  38. package/data/component-docs/Notification.md +288 -0
  39. package/data/component-docs/Pagination.md +67 -0
  40. package/data/component-docs/Panel.md +636 -0
  41. package/data/component-docs/Popover.md +448 -0
  42. package/data/component-docs/PreComposedTable.md +2947 -0
  43. package/data/component-docs/SegmentedControl.md +396 -0
  44. package/data/component-docs/StackedBarChart.md +475 -0
  45. package/data/component-docs/Table.md +2000 -0
  46. package/data/component-docs/TableHeader.md +53 -0
  47. package/data/component-docs/TableRow.md +74 -0
  48. package/data/component-docs/Tabs.md +455 -0
  49. package/data/component-docs/Tag.md +647 -0
  50. package/data/component-docs/TagFilter.md +131 -0
  51. package/data/component-docs/Tooltip.md +561 -0
  52. package/data/component-docs/TooltipCondensed.md +203 -0
  53. package/data/component-docs/TooltipTable.md +145 -0
  54. package/data/component-docs/index.json +262 -0
  55. package/data/component-list.json +2 -5
  56. package/data/component-props/Accordion.json +31 -11
  57. package/data/component-props/Alert.json +3 -3
  58. package/data/component-props/Autocomplete.json +150 -15
  59. package/data/component-props/Banner.json +31 -17
  60. package/data/component-props/Button.json +45 -20
  61. package/data/component-props/ButtonDropdown.json +36 -17
  62. package/data/component-props/ButtonDropdownLegacy.json +11 -11
  63. package/data/component-props/ButtonGroup.json +32 -11
  64. package/data/component-props/ButtonIcon.json +10 -10
  65. package/data/component-props/ButtonLegacy.json +19 -19
  66. package/data/component-props/ButtonToggle.json +32 -19
  67. package/data/component-props/ButtonToggleLegacy.json +11 -11
  68. package/data/component-props/Callout.json +58 -17
  69. package/data/component-props/CellBasic.json +94 -41
  70. package/data/component-props/CellComponent.json +23 -7
  71. package/data/component-props/CellHeader.json +62 -19
  72. package/data/component-props/ComplexFilter.json +52 -21
  73. package/data/component-props/ContentCard.json +70 -47
  74. package/data/component-props/Dialog.json +47 -14
  75. package/data/component-props/Dropdown.json +68 -31
  76. package/data/component-props/DropdownMenu.json +128 -23
  77. package/data/component-props/HeatmapChart.json +88 -12
  78. package/data/component-props/Hero.json +80 -39
  79. package/data/component-props/Icon.json +20 -9
  80. package/data/component-props/InputCheckbox.json +36 -14
  81. package/data/component-props/InputDropdown.json +75 -27
  82. package/data/component-props/InputRadio.json +31 -13
  83. package/data/component-props/InputSearch.json +41 -18
  84. package/data/component-props/InputSlider.json +46 -19
  85. package/data/component-props/InputText.json +26 -19
  86. package/data/component-props/InputToggle.json +26 -9
  87. package/data/component-props/IntentMessage.json +38 -9
  88. package/data/component-props/Link.json +13 -7
  89. package/data/component-props/LoadingIndicator.json +11 -3
  90. package/data/component-props/MenuItem.json +38 -19
  91. package/data/component-props/MenuSelect.json +8 -8
  92. package/data/component-props/NavigationFooter.json +49 -19
  93. package/data/component-props/NavigationHeader.json +150 -37
  94. package/data/component-props/NavigationJumpTo.json +33 -7
  95. package/data/component-props/Notification.json +39 -21
  96. package/data/component-props/Pagination.json +39 -11
  97. package/data/component-props/Panel.json +62 -9
  98. package/data/component-props/Popover.json +80 -7
  99. package/data/component-props/PreComposedTable.json +99 -27
  100. package/data/component-props/SegmentedControl.json +42 -3
  101. package/data/component-props/StackedBarChart.json +116 -42
  102. package/data/component-props/TableRow.json +38 -19
  103. package/data/component-props/Tabs.json +66 -9
  104. package/data/component-props/Tag.json +34 -17
  105. package/data/component-props/TagFilter.json +10 -3
  106. package/data/component-props/Tooltip.json +49 -18
  107. package/data/component-props/TooltipCondensed.json +18 -9
  108. package/data/component-props/TooltipTable.json +17 -7
  109. package/data/resources/{zeroheight-rules.md → documentation-rules.md} +43 -30
  110. package/data/resources/figma-rules.md +2 -2
  111. package/dist/stdio.js +112 -208
  112. package/package.json +9 -5
  113. package/data/component-props/ButtonDropdownV2.json +0 -34
  114. package/data/component-props/ButtonNew.json +0 -47
  115. package/data/component-props/ButtonToggleV2.json +0 -44
  116. package/data/component-props/ButtonV2.json +0 -43
  117. package/data/zeroheight-cache.json +0 -10259
  118. package/data/zeroheight-exports/Accordion.md +0 -774
  119. package/data/zeroheight-exports/Banner.md +0 -691
  120. package/data/zeroheight-exports/Borders.md +0 -117
  121. package/data/zeroheight-exports/Buttons.md +0 -1854
  122. package/data/zeroheight-exports/Callout.md +0 -931
  123. package/data/zeroheight-exports/Colors.md +0 -1755
  124. package/data/zeroheight-exports/Content-Card.md +0 -309
  125. package/data/zeroheight-exports/Contributing-to-SDS.md +0 -98
  126. package/data/zeroheight-exports/Control-Inputs.md +0 -2818
  127. package/data/zeroheight-exports/Corners.md +0 -104
  128. package/data/zeroheight-exports/Cover-page.md +0 -3
  129. package/data/zeroheight-exports/Dialog.md +0 -1367
  130. package/data/zeroheight-exports/Downloads.md +0 -236
  131. package/data/zeroheight-exports/Drop-Shadows.md +0 -79
  132. package/data/zeroheight-exports/Dropdown-Input.md +0 -1776
  133. package/data/zeroheight-exports/Dropdown-Menus.md +0 -913
  134. package/data/zeroheight-exports/Element-Status-Tracker.md +0 -267
  135. package/data/zeroheight-exports/Field-Inputs.md +0 -1405
  136. package/data/zeroheight-exports/Filters.md +0 -1111
  137. package/data/zeroheight-exports/Getting-Started.md +0 -1157
  138. package/data/zeroheight-exports/Hero.md +0 -414
  139. package/data/zeroheight-exports/Icons.md +0 -2067
  140. package/data/zeroheight-exports/Intent.md +0 -86
  141. package/data/zeroheight-exports/Introduction-to-Bases.md +0 -35
  142. package/data/zeroheight-exports/Introduction-to-Cells.md +0 -35
  143. package/data/zeroheight-exports/Introduction-to-DNA.md +0 -35
  144. package/data/zeroheight-exports/Introduction-to-Genes.md +0 -35
  145. package/data/zeroheight-exports/Introduction.md +0 -115
  146. package/data/zeroheight-exports/Link.md +0 -432
  147. package/data/zeroheight-exports/Lists.md +0 -986
  148. package/data/zeroheight-exports/Loading-Indicator.md +0 -41
  149. package/data/zeroheight-exports/Navigation.md +0 -1190
  150. package/data/zeroheight-exports/Notification.md +0 -1038
  151. package/data/zeroheight-exports/Panel.md +0 -1030
  152. package/data/zeroheight-exports/README.md +0 -122
  153. package/data/zeroheight-exports/Responsive-Design.md +0 -330
  154. package/data/zeroheight-exports/Search-Input.md +0 -91
  155. package/data/zeroheight-exports/Search.md +0 -822
  156. package/data/zeroheight-exports/Segmented-Control.md +0 -609
  157. package/data/zeroheight-exports/Spacing.md +0 -297
  158. package/data/zeroheight-exports/Table.md +0 -5345
  159. package/data/zeroheight-exports/Tabs.md +0 -1324
  160. package/data/zeroheight-exports/Tags.md +0 -1545
  161. package/data/zeroheight-exports/Text-Link.md +0 -268
  162. package/data/zeroheight-exports/Theming.md +0 -362
  163. package/data/zeroheight-exports/Tooltips.md +0 -2015
  164. package/data/zeroheight-exports/Typography.md +0 -800
@@ -2,46 +2,77 @@
2
2
  "ComplexFilter": {
3
3
  "props": {
4
4
  "DropdownMenuProps": {
5
- "type": "any",
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
- "type": "InputDropdownPropsType",
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
- "defaultValue": "{ sdsStyle: minimal }"
13
+ "type": "InputDropdownPropsType"
12
14
  },
13
15
  "isTriggerChangeOnOptionClick": {
14
- "type": "any",
15
- "isRequired": false
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
- "type": "ReactNode",
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
- "type": "any",
23
- "isRequired": false
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
- "type": "(options: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>) => void",
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
- "type": "any",
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
- "type": "any",
35
- "isRequired": false
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
- "type": "any",
39
- "isRequired": false
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
- "type": "any",
43
- "isRequired": false
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
- "type": "any",
6
- "isRequired": false
7
- },
8
- "buttons": {
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
- "type": "\"left\" | \"right\"",
14
- "isRequired": false
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
- "type": "{ cardActions?: string; }",
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
- "type": "\"false\" | \"true\"",
22
- "isRequired": false
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
- "type": "any",
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
- "type": "any",
30
- "isRequired": false
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
- "type": "any",
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
- "type": "any",
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
- "type": "any",
42
- "isRequired": false
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
- "type": "any",
46
- "isRequired": false
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
- "type": "any",
50
- "isRequired": false
51
- },
52
- "sdsType": {
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
- "type": "BaseContentCardProps",
66
- "isRequired": true
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
- "type": "BaseContentCardProps",
70
- "isRequired": true
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
- "type": "BaseContentCardProps",
74
- "isRequired": true
83
+ "description": "Optional subtitle text displayed below the title.",
84
+ "isRequired": false,
85
+ "type": "ReactNode"
75
86
  },
76
87
  "titleText": {
77
- "type": "BaseContentCardProps",
78
- "isRequired": true
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
- "type": "any",
6
- "isRequired": false
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
- "type": "\"false\" | \"true\"",
10
- "isRequired": false
11
- },
12
- "longContent": {
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
- "type": "\"s\" | \"m\" | \"xs\" | \"l\"",
18
- "isRequired": false
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
- "titleOnClose": {
21
- "type": "any",
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
- "type": "SdsDropdownMenuProps<T, Multiple, DisableClearable, FreeSolo>",
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
- "type": "InputDropdownPropsType",
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
- "type": "\"left\" | \"right\"",
14
- "isRequired": false
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
- "type": "\"false\" | \"true\"",
18
- "isRequired": false
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
- "type": "\"false\" | \"true\"",
22
- "isRequired": false
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
- "type": "\"false\" | \"true\"",
26
- "isRequired": false,
33
+ "defaultValue": false,
27
34
  "description": "If `true`, the component is disabled.",
28
- "defaultValue": false
35
+ "isRequired": false,
36
+ "type": "boolean"
29
37
  },
30
38
  "isSearchAutoFocus": {
31
- "type": "\"false\" | \"true\"",
32
- "isRequired": false
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
- "type": "ReactNode",
36
- "isRequired": true
45
+ "description": "The label of the Dropdown.",
46
+ "isRequired": true,
47
+ "type": "ReactNode"
37
48
  },
38
49
  "multiple": {
39
- "type": "\"false\" | \"true\"",
40
- "isRequired": false,
50
+ "defaultValue": false,
41
51
  "description": "If `true`, `value` must be an array and the menu will support multiple selections.",
42
- "defaultValue": false
52
+ "isRequired": false,
53
+ "type": "boolean"
43
54
  },
44
55
  "onChange": {
45
- "type": "(event: SyntheticEvent",
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
- "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"
58
+ "type": "(event: SyntheticEvent"
48
59
  },
49
60
  "onClose": {
50
- "type": "\"(event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void\" | \"(event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void\"",
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
- "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\"`."
63
+ "type": "(event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void"
53
64
  },
54
65
  "options": {
55
- "type": "\"AutocompleteSingleColumnOption<T>[]\" | \"AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[]\"",
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
- "type": "\"false\" | \"true\"",
60
- "isRequired": false
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
- "type": "ReactNode",
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
- "type": "Partial<ClickAwayListenerProps>",
6
- "isRequired": false
5
+ "description": "Passes props to the MUI ClickAwayListener .",
6
+ "isRequired": false,
7
+ "type": "Partial<ClickAwayListenerProps>"
7
8
  },
8
9
  "groupBy": {
9
- "type": "any",
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
- "type": "\"false\" | \"true\"",
14
- "isRequired": false
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
- "type": "string",
18
- "isRequired": false
21
+ "defaultValue": "Search",
22
+ "description": "The placeholder text of the search input.",
23
+ "isRequired": false,
24
+ "type": "string"
19
25
  },
20
26
  "multiple": {
21
- "type": "any",
22
- "isRequired": false
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
- "type": "any",
26
- "isRequired": false
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
- "type": "any",
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
- "type": "\"false\" | \"true\"",
34
- "isRequired": false
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
- "type": "ReactNode",
38
- "isRequired": false
50
+ "description": "Sets a heading for the menu.",
51
+ "isRequired": false,
52
+ "type": "ReactNode"
39
53
  },
40
54
  "subTitle": {
41
- "type": "ReactNode",
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
- "type": "\"string\" | \"number\" | \"string & {}\"",
46
- "isRequired": false
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
+ }