@czi-sds/mcp 0.16.0 → 0.17.0

package/data/component-props/Alert.json

@@ -2,9 +2,9 @@
   "Alert": {
     "props": {
       "text": {
-        "type": "any",
-        "isRequired": false
+        "isRequired": true,
+        "type": "any"
       }
     }
   }
-}
+}

package/data/component-props/Autocomplete.json

@@ -2,33 +2,168 @@
   "Autocomplete": {
     "props": {
       "groupBy": {
-        "type": "any",
-        "isRequired": false
+        "description": "If provided, the options will be grouped under the returned string.\nThe groupBy value is also used as the text for group headings when `renderGroup` is not provided.\n@param option The Autocomplete option.\n@returns",
+        "isRequired": false,
+        "type": "(option: T) => string"
       },
       "intent": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Validation styling on the search field. Single column only; the multi-column field does not take it.",
+        "isRequired": false,
+        "type": "InputSearchProps"
       },
       "keepSearchOnSelect": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "For a multi-select, leaves the typed text in place after a selection instead of clearing it.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "label": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "Label Search (columns)",
+        "description": "The search field's label and placeholder.",
+        "isRequired": false,
+        "type": "string"
       },
       "multiple": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If `true`, `value` must be an array and the menu will support multiple selections.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "onChange": {
-        "type": "FormEventHandler<HTMLDivElement>",
-        "isRequired": false
+        "description": "Fired on every selection change with the whole value. details.option is the one that just changed. Signature: function(event: SyntheticEvent, value: T | T[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<T>) => void",
+        "isRequired": false,
+        "type": "AutocompleteSingleColumnOnChange<T, Multiple, DisableClearable, FreeSolo> | AutocompleteMultiColumnOnChange<T, Multiple, DisableClearable, FreeSolo>"
       },
       "options": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "- (required)",
+        "description": "The options, or an array of named columns each with their own options.",
+        "isRequired": true,
+        "type": "T[] | AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[]"
+      },
+      "value": {
+        "description": "The selection. An array when multiple, and a record keyed by column name when there is more than one column.",
+        "isRequired": false,
+        "type": "string | Exclusive<AutocompleteOptionBasic, AutocompleteOptionComponent> | Exclusive<AutocompleteOptionComponent, AutocompleteOptionBasic> | Record<string | number | symbol, AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>> | (T | AutocompleteFreeSoloValueMapping<FreeSolo>)[] | AutocompleteOptionBasic & { component?: undefined; } | AutocompleteOptionComponent & { details?: undefined; icon?: undefined; count?: undefined; sdsIconProps?: undefined; }"
+      },
+      "onInputChange": {
+        "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\"`",
+        "isRequired": false,
+        "type": "((event: SyntheticEvent"
+      },
+      "search": {
+        "defaultValue": false,
+        "description": "Shows the search field. Without it the input is hidden and disabled, and the list must be opened through open.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "open": {
+        "description": "If `true`, the component is shown.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "onClick": {
+        "description": "Fired when the component would like to open.",
+        "isRequired": false,
+        "type": "function"
+      },
+      "onClickAway": {
+        "description": "Fired when the component would like to close, including on Escape and on a click outside.",
+        "isRequired": false,
+        "type": "function"
+      },
+      "InputBaseProps": {
+        "description": "Props for the search field. This is the way in: SDS supplies renderInput itself.",
+        "isRequired": false,
+        "type": "InputSearchProps"
+      },
+      "renderInput": {
+        "defaultValue": "an SDS InputSearch",
+        "description": "(params: AutocompleteRenderInputParams) => ReactNode. Replaces the whole input, losing the search and clear buttons SDS puts there, so prefer InputBaseProps. On a multi-column Autocomplete it reaches the hidden per-column inputs rather than the trigger.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "PopperBaseProps": {
+        "description": "Props for the popper holding the columns. Multi-column only; a single column uses MUI's own popper.",
+        "isRequired": false,
+        "type": "Partial<PopperProps>"
+      },
+      "PopperComponent": {
+        "defaultValue": "SDS styled Popper",
+        "description": "Replaces that popper outright. Multi-column only.",
+        "isRequired": false,
+        "type": "component"
+      },
+      "PopperPlacement": {
+        "defaultValue": "bottom-start",
+        "description": "Where the columns are placed. Multi-column only.",
+        "isRequired": false,
+        "type": "\"bottom-start\" | \"bottom-end\" | \"top-start\" | \"top-end\""
+      },
+      "ClickAwayListenerProps": {
+        "description": "Props for the MUI ClickAwayListener that closes the columns. Multi-column only.",
+        "isRequired": false,
+        "type": "Partial<ClickAwayListenerProps>"
+      },
+      "disableCloseOnSelect": {
+        "defaultValue": false,
+        "description": "If `true`, the popup won't close when a value is selected.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "blurOnSelect": {
+        "defaultValue": false,
+        "description": "Control if the input should be blurred when an option is selected:\n\n- `false` the input is not blurred.\n- `true` the input is always blurred.\n- `touch` the input is blurred after a touch event.\n- `mouse` the input is blurred after a mouse event.",
+        "isRequired": false,
+        "type": "false | true | \"mouse\" | \"touch\""
+      },
+      "clearOnBlur": {
+        "defaultValue": "!props.freeSolo",
+        "description": "If `true`, the input's text is cleared on blur if no value is selected.\n\nSet it to `true` if you want to help the user enter a new value.\nSet it to `false` if you want to help the user resume their search.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "getOptionLabel": {
+        "defaultValue": "(option) => option.label ?? option",
+        "description": "Used to determine the string value for a given option.\nIt's used to fill the input (and the list box options if `renderOption` is not provided).\n\nIf used in free solo mode, it must accept both the type of the options and a string.\n@param option\n@returns",
+        "isRequired": false,
+        "type": "(option: AutocompleteValueOrFreeSoloValueMapping<T, FreeSolo>) => string"
+      },
+      "isOptionEqualToValue": {
+        "defaultValue": "compares names",
+        "description": "Used to determine if the option represents the given value.\nUses strict equality by default.\n⚠️ Both arguments need to be handled, an option can only match with one value.\n@param option The option to test.\n@param value The value to test against.\n@returns",
+        "isRequired": false,
+        "type": "(option: T, value: AutocompleteValueOrFreeSoloValueMapping<T, FreeSolo>) => boolean"
+      },
+      "getOptionDisabled": {
+        "description": "Used to determine the disabled state for a given option.\n@param option The option to test.\n@template Value The option shape. Will be the same shape as an item of the options.\n@returns",
+        "isRequired": false,
+        "type": "(option: T) => boolean"
+      },
+      "renderOption": {
+        "defaultValue": "SDS MenuItem",
+        "description": "Render the option, use `getOptionLabel` by default.\n@param props The props to apply on the li element.\n@param option The option to render.\n@param state The state of each option.\n@param ownerState The state of the Autocomplete component.\n@returns",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "noOptionsText": {
+        "defaultValue": "No options",
+        "description": "Text to display when there are no options.\n\nFor localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "loading": {
+        "defaultValue": false,
+        "description": "If `true`, the component is in a loading state.\nThis shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "disabled": {
+        "defaultValue": false,
+        "description": "If `true`, the component is disabled.",
+        "isRequired": false,
+        "type": "boolean"
       }
     }
   }
-}
+}

package/data/component-props/Banner.json

@@ -1,34 +1,48 @@
 {
   "Banner": {
     "props": {
+      "children": {
+        "description": "Required. The content of the Banner, laid out beside the icon and centered in the space left by the close button.",
+        "isRequired": true,
+        "type": "ReactNode"
+      },
       "dismissed": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "description": "If true, the banner has been dismissed and renders nothing. Leave this unset to let the Banner keep track of its own dismissed state. Passing any value, false included, takes that over: the close button then only fires onClose, and the Banner closes when you set dismissed to true.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "dismissible": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "If true, the banner can be dismissed by the user. This is what controls whether the close button is rendered.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "icon": {
-        "type": "ReactElement",
-        "isRequired": false
+        "description": "The name of an SDS icon, or a custom SVG element, shown in place of the icon the intent would pick. Without it, \"positive\" shows \"CheckCircle\", \"negative\" and \"notice\" show \"ExclamationMarkCircle\", and every other intent shows \"InfoCircle\".",
+        "isRequired": false,
+        "type": "ReactElement"
       },
       "intent": {
-        "type": "\"accent\" | \"info\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "info",
+        "description": "The intent color of the Banner component, which also selects the default icon.",
+        "isRequired": false,
+        "type": "\"info\" | \"accent\" | \"negative\" | \"notice\" | \"positive\""
+      },
+      "onClose": {
+        "description": "Callback fired when the user clicks the close button. Signature: function(event: React.MouseEvent) => void event The event source of the callback.",
+        "isRequired": false,
+        "type": "function"
       },
       "sdsIconProps": {
-        "type": "IconProps<string | number | symbol>",
-        "isRequired": false
+        "description": "Additional props to be passed to the icon component.",
+        "isRequired": false,
+        "type": "IconProps<string | number | symbol>"
       },
       "sdsType": {
-        "type": "\"primary\" | \"secondary\"",
-        "isRequired": true
-      },
-      "textChild": {
-        "type": "any",
-        "isRequired": false
+        "description": "Required. The primary variant fills the Banner with the intent's primary surface color and uses the on-fill text color. The secondary variant uses the intent's secondary surface color with the standard primary text color.",
+        "isRequired": true,
+        "type": "\"primary\" | \"secondary\""
       }
     }
   }
-}
+}

package/data/component-props/Button.json

@@ -2,46 +2,71 @@
   "Button": {
     "props": {
       "backgroundOnHover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Only applies when sdsStyle is \"minimal\". When false, the button drops its padding and renders no background on hover or press, so it sits flush with surrounding text.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "backgroundAppearance": {
-        "type": "\"matchBackground\" | \"dark\"",
-        "isRequired": false
+        "defaultValue": "matchBackground",
+        "description": "Tells the button which surface it sits on so it can pick colors with enough contrast. Set it to \"dark\" when the button is placed on a dark background in light mode.",
+        "isRequired": false,
+        "type": "\"matchBackground\" | \"dark\""
       },
       "children": {
-        "type": "ReactNode",
+        "description": "The content of the component.",
         "isRequired": false,
-        "description": "The content of the component."
+        "type": "ReactNode"
       },
       "endIcon": {
-        "type": "ReactNode",
+        "description": "Element placed after the children.",
         "isRequired": false,
-        "description": "Element placed after the children."
+        "type": "ReactNode"
       },
       "onClick": {
-        "type": "function",
-        "isRequired": false
+        "description": "Callback fired when the button is clicked.",
+        "isRequired": false,
+        "type": "function"
       },
       "size": {
-        "type": "\"small\" | \"medium\" | \"large\"",
-        "isRequired": false,
+        "defaultValue": "medium",
         "description": "The size of the component.\n`small` is equivalent to the dense button styling.",
-        "defaultValue": "medium"
+        "isRequired": false,
+        "type": "\"small\" | \"large\" | \"medium\""
       },
       "sdsStyle": {
-        "type": "\"outline\" | \"solid\" | \"minimal\"",
-        "isRequired": false
+        "defaultValue": "solid",
+        "description": "Style of the button, in descending order of emphasis. Solid is filled, outline draws a 1px border over a transparent background, and minimal is text only.",
+        "isRequired": false,
+        "type": "\"outline\" | \"solid\" | \"minimal\""
       },
       "sdsType": {
-        "type": "\"primary\" | \"secondary\" | \"destructive\"",
-        "isRequired": false
+        "defaultValue": "primary",
+        "description": "Color scheme of the button within the chosen style. Primary uses the accent color, secondary is neutral, and destructive signals an irreversible action.",
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\" | \"destructive\""
       },
       "startIcon": {
-        "type": "ReactNode",
+        "description": "Element placed before the children.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "disabled": {
+        "defaultValue": false,
+        "description": "If `true`, the component is disabled.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "href": {
+        "description": "The URL to link to when the button is clicked.\nIf defined, an `a` element will be used as the root node.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "target": {
+        "description": "Where the link opens, for example \"_blank\". Only has an effect alongside href.",
         "isRequired": false,
-        "description": "Element placed before the children."
+        "type": "string & {} | \"_self\" | \"_blank\" | \"_parent\" | \"_top\""
       }
     }
   }
-}
+}

package/data/component-props/ButtonDropdown.json

@@ -2,37 +2,56 @@
   "ButtonDropdown": {
     "props": {
       "backgroundAppearance": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "matchBackground",
+        "description": "Tells the button which surface it sits on so it can pick colors with enough contrast. Set it to \"dark\" when the button is placed on a dark background in light mode.",
+        "isRequired": false,
+        "type": "\"matchBackground\" | \"dark\""
       },
       "backgroundOnHover": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Only applies when sdsStyle is \"minimal\". When false, the button drops its padding and renders no background on hover or press, so it sits flush with surrounding text.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "children": {
-        "type": "any",
-        "isRequired": false
+        "description": "The button label. The trailing chevron is only rendered when a label is present.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "disabled": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Disables the button when set to true.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "startIcon": {
-        "type": "any",
-        "isRequired": false
+        "description": "An optional icon placed before the label. Pass the SDS Icon component, for example <Icon sdsIcon=\"Download\" sdsSize=\"s\" />.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "size": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "large",
+        "description": "Size of the button. Also sets the size of the trailing chevron.",
+        "isRequired": false,
+        "type": "\"small\" | \"medium\" | \"large\""
       },
       "sdsStyle": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "solid",
+        "description": "Style of the button. Same values as Button.",
+        "isRequired": true,
+        "type": "\"solid\" | \"outline\" | \"minimal\""
       },
       "sdsType": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "primary",
+        "description": "Color scheme of the button. Unlike Button, \"destructive\" is not supported.",
+        "isRequired": true,
+        "type": "\"primary\" | \"secondary\""
+      },
+      "onClick": {
+        "description": "Callback fired when the button is clicked. Typically used to open the associated menu.",
+        "isRequired": false,
+        "type": "(event: React.MouseEvent) => void"
       }
     }
   }
-}
+}

package/data/component-props/ButtonDropdownLegacy.json

@@ -2,25 +2,25 @@
   "ButtonDropdownLegacy": {
     "props": {
       "disabled": {
-        "type": "any",
-        "isRequired": false
+        "isRequired": false,
+        "type": "any"
       },
       "icon": {
-        "type": "any",
-        "isRequired": false
+        "isRequired": false,
+        "type": "any"
       },
       "sdsSize": {
-        "type": "any",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"small\" | \"medium\" | \"large\""
       },
       "sdsStyle": {
-        "type": "any",
-        "isRequired": false
+        "isRequired": true,
+        "type": "\"rounded\" | \"square\" | \"icon\""
       },
       "sdsType": {
-        "type": "any",
-        "isRequired": false
+        "isRequired": true,
+        "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"destructive\""
       }
     }
   }
-}
+}

package/data/component-props/ButtonGroup.json

@@ -2,25 +2,46 @@
   "ButtonGroup": {
     "props": {
       "backgroundAppearance": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "matchBackground",
+        "description": "Tells the group which surface it sits on so it can pick colors with enough\ncontrast.",
+        "isRequired": false,
+        "type": "\"matchBackground\" | \"dark\""
       },
       "disabled": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If `true`, the component is disabled.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "orientation": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "horizontal",
+        "description": "The component orientation (layout flow direction).",
+        "isRequired": false,
+        "type": "\"horizontal\" | \"vertical\""
       },
       "size": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "large",
+        "description": "Size of the group. It is injected into each Button and ButtonToggle child,\nso setting size on an individual button has no effect.",
+        "isRequired": false,
+        "type": "\"small\" | \"large\" | \"medium\""
       },
       "sdsType": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "primary",
+        "description": "Color scheme applied to every button in the group.",
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\""
+      },
+      "sdsStyle": {
+        "defaultValue": "outline",
+        "description": "Style of the button group. Outline is the only value.",
+        "isRequired": false,
+        "type": "\"outline\""
+      },
+      "children": {
+        "description": "The content of the component.",
+        "isRequired": false,
+        "type": "ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/ButtonIcon.json

@@ -2,23 +2,23 @@
   "ButtonIcon": {
     "props": {
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "icon": {
-        "type": "ReactElement",
-        "isRequired": true
+        "isRequired": true,
+        "type": "ReactElement"
       },
       "sdsSize": {
-        "type": "\"small\" | \"medium\" | \"large\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"small\" | \"large\" | \"medium\""
       },
       "sdsType": {
-        "type": "\"primary\" | \"secondary\" | \"tertiary\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\" | \"tertiary\""
       }
     }
   }
-}
+}

package/data/component-props/ButtonLegacy.json

@@ -2,43 +2,43 @@
   "ButtonLegacy": {
     "props": {
       "endIcon": {
-        "type": "ReactNode",
+        "description": "Element placed after the children.",
         "isRequired": false,
-        "description": "Element placed after the children."
+        "type": "ReactNode"
       },
       "icon": {
-        "type": "ReactElement",
-        "isRequired": true
+        "isRequired": true,
+        "type": "ReactElement"
       },
       "isAllCaps": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "onClick": {
-        "type": "function",
-        "isRequired": false
+        "isRequired": false,
+        "type": "function"
       },
       "sdsSize": {
-        "type": "\"small\" | \"medium\" | \"large\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"small\" | \"large\" | \"medium\""
       },
       "sdsStyle": {
-        "type": "\"icon\" | \"minimal\" | \"rounded\" | \"square\"",
-        "isRequired": true
+        "isRequired": true,
+        "type": "\"square\" | \"rounded\" | \"icon\" | \"minimal\""
       },
       "sdsType": {
-        "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"destructive\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\" | \"destructive\" | \"tertiary\""
       },
       "startIcon": {
-        "type": "ReactNode",
+        "description": "Element placed before the children.",
         "isRequired": false,
-        "description": "Element placed before the children."
+        "type": "ReactNode"
       },
       "text": {
-        "type": "any",
-        "isRequired": false
+        "isRequired": false,
+        "type": "any"
       }
     }
   }
-}
+}