@czi-sds/mcp 0.16.0 → 0.18.0

package/data/component-props/InputDropdown.json

@@ -2,57 +2,105 @@
   "InputDropdown": {
     "props": {
       "counter": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "If multiple set to true, this number shows the number of selected menu items.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "classes": {
-        "type": "complex",
-        "isRequired": false
+        "description": "A class name for each part of the input, for styling one of them without reaching through the DOM: root, label, labelDetailsWrapper, contentWrapper, details, counter, iconWrapper, chevronIcon and minimalDetails.",
+        "isRequired": false,
+        "type": "{ root?: string | undefined; label?: string | undefined; labelDetailsWrapper?: string | undefined; contentWrapper?: string | undefined; details?: string | undefined; counter?: string | undefined; iconWrapper?: string | undefined; chevronIcon?: string | undefined; minimalDetails?: string | undefined; }"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If true, the component is disabled.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "The color of the component.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
-        "isRequired": true
+        "description": "The label of the Input Button.",
+        "isRequired": true,
+        "type": "ReactNode"
       },
       "multiple": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Allows users to select multiple menu items.multiple=true cannot be used with the minimum variant.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "sdsStyle": {
-        "type": "\"minimal\" | \"square\" | \"rounded\"",
-        "isRequired": false
+        "defaultValue": "square",
+        "description": "The visual appearance of the component.",
+        "isRequired": false,
+        "type": "\"square\" | \"rounded\" | \"minimal\""
       },
       "sdsType": {
-        "type": "\"value\" | \"label\"",
-        "isRequired": false
+        "defaultValue": "label",
+        "description": "The label variant includes the label within the input field and showcases the selected menu item as additional details or sets the counter when in multi-select mode. The value variant replaces the label with the selected value directly within the input field. The detailed information is then displayed in a separate section dedicated to displaying additional details. However, it's important to note that the value variant cannot be used in conjunction with multi-select mode.",
+        "isRequired": false,
+        "type": "\"label\" | \"value\""
       },
       "shouldPutAColonAfterLabel": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "If true, a colon (:) will be added after the label or value.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "shouldTruncateMinimalDetails": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If true, the details section of the minimal variant displays a truncated one-liner with an ellipsis (...), if false the details section expands to multiple lines for a comprehensive display.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "startIcon": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "An element placed before the label, passed straight through to the underlying MUI Button.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "style": {
-        "type": "CSSProperties",
-        "isRequired": false
+        "description": "Inline styles for the input's root element.",
+        "isRequired": false,
+        "type": "CSSProperties"
       },
       "width": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "auto",
+        "description": "How wide the input is. A bare number is read as pixels, so \"240\" means 240px, and any other value is used as the CSS width, such as \"100%\" or \"20rem\". Values below 90px are ignored, since the input keeps that as its minimum. Left unset, the input is as wide as its content, or as wide as its container if MUI's fullWidth is set.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "className": {
+        "description": "Added to the input's root element, alongside anything classes.root puts there.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "details": {
+        "description": "A text showing details for the selected menu item.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "onClick": {
+        "defaultValue": "(event: React.MouseEvent<HTMLElement>) => void",
+        "description": "Sets what happens when a user clicks on the component.",
+        "isRequired": true,
+        "type": "function"
+      },
+      "state": {
+        "defaultValue": "default",
+        "description": "Draws the input in its open state. The input has no idea whether its menu is showing, so set this from whatever holds that state.",
+        "isRequired": false,
+        "type": "\"open\" | \"default\""
+      },
+      "value": {
+        "description": "The value that will be displayed in the component for the value variant.",
+        "isRequired": false,
+        "type": "ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/InputRadio.json

@@ -2,31 +2,49 @@
   "InputRadio": {
     "props": {
       "caption": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The caption of the InputRadio appears beneath the label in a lighter text color.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
+        "defaultValue": false,
+        "description": "If `true`, the component is disabled.",
         "isRequired": false,
-        "description": "If `true`, the component is disabled."
+        "type": "boolean"
       },
       "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Colors the border of the empty circle. The selected radio always uses the accent color.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The label of the InputRadio.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "stage": {
-        "type": "\"checked\" | \"unchecked\"",
-        "isRequired": false
+        "description": "Sets the radio as \"checked\" or \"unchecked\", overriding checked. Omit it inside a RadioGroup, which drives the selection itself.",
+        "isRequired": false,
+        "type": "\"checked\" | \"unchecked\""
       },
       "classes": {
-        "type": "complex",
+        "defaultValue": {},
+        "description": "Class names for the internal elements: root, labelCaptionContainer, label,\ncaption, radioButton, radioCheckedIcon, radioCheckedIconDot, and\nradioDefaultIcon.",
+        "isRequired": false,
+        "type": "{ root?: string | undefined; labelCaptionContainer?: string | undefined; label?: string | undefined; caption?: string | undefined; radioButton?: string | undefined; radioCheckedIcon?: string | undefined; radioCheckedIconDot?: string | undefined; radioDefaultIcon?: string | undefined; }"
+      },
+      "value": {
+        "description": "The value a RadioGroup compares against to decide whether this radio is\nselected. It also backs the label and caption element ids, so give every\nradio a unique one.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "radioProps": {
+        "defaultValue": {},
+        "description": "Directly pass these props to the underlying MUI radio.",
         "isRequired": false,
-        "description": "Override or extend the styles applied to the component."
+        "type": "Partial<RadioProps>"
       }
     }
   }
-}
+}

package/data/component-props/InputSearch.json

@@ -2,39 +2,62 @@
   "InputSearch": {
     "props": {
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "id": {
-        "type": "string",
-        "isRequired": false,
-        "description": "The id of the `input` element.\nUse this prop to make `label` and `helperText` accessible for screen readers."
+        "description": "The id of the `input` element.\nUse this prop to make `label` and `helperText` accessible for screen readers.",
+        "isRequired": true,
+        "type": "string"
       },
       "intent": {
-        "type": "\"negative\" | \"notice\" | \"positive\" | \"default\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Alters the border color and visual intent of the search input.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "The label content."
+        "description": "The label content.",
+        "isRequired": true,
+        "type": "ReactNode"
       },
       "placeholder": {
-        "type": "string",
+        "defaultValue": "Search",
+        "description": "The short hint displayed in the `input` before the user enters a value.",
         "isRequired": false,
-        "description": "The short hint displayed in the `input` before the user enters a value."
+        "type": "string"
       },
       "sdsStyle": {
-        "type": "\"rounded\" | \"square\"",
-        "isRequired": false
+        "defaultValue": "square",
+        "description": "Determines the visual style of the component, with options for rounded or square design.",
+        "isRequired": false,
+        "type": "\"square\" | \"rounded\""
       },
       "classes": {
-        "type": "Partial",
+        "defaultValue": {},
+        "description": "Override or extend the styles applied to the component.",
+        "isRequired": false,
+        "type": "Partial<TextFieldClasses> & { root?: string | undefined; label?: string | undefined; input?: string | undefined; endAdornment?: string | undefined; startAdornment?: string | undefined; clearButton?: string | undefined; searchButton?: string | undefined; }"
+      },
+      "handleSubmit": {
+        "defaultValue": "function(value: string) => void",
+        "description": "This function is called when the Search icon is clicked, allowing user to handle the search operation.",
+        "isRequired": false,
+        "type": "(value: string) => void"
+      },
+      "onChange": {
+        "defaultValue": "function(event: React.ChangeEvent) => void",
+        "description": "Callback fired when the value is changed.\n@param event The event source of the callback.\nYou can pull out the new value by accessing `event.target.value` (string).\n@param event The event source of the callback.\nYou can pull out the new value by accessing `event.target.value` (string).\n@param event The event source of the callback.\nYou can pull out the new value by accessing `event.target.value` (string).",
+        "isRequired": false,
+        "type": "function"
+      },
+      "value": {
+        "description": "The value of the `input` element, required for a controlled component.",
         "isRequired": false,
-        "description": "Override or extend the styles applied to the component."
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/InputSlider.json

@@ -2,41 +2,68 @@
   "InputSlider": {
     "props": {
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "marks": {
-        "type": "\"false\" | \"true\" | \"readonly Mark[]\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "Marks indicate predetermined values to which the user can move the slider.\nIf `true` the marks are spaced according the value of the `step` prop.\nIf an array, it should contain objects with `value` and an optional `label` keys.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "false | true | readonly Mark[]"
       },
       "max": {
-        "type": "number",
-        "isRequired": false,
+        "defaultValue": 100,
         "description": "The maximum allowed value of the slider.\nShould not be equal to min.",
-        "defaultValue": 100
+        "isRequired": false,
+        "type": "number"
       },
       "min": {
-        "type": "number",
-        "isRequired": false,
+        "defaultValue": 0,
         "description": "The minimum allowed value of the slider.\nShould not be equal to max.",
-        "defaultValue": 0
+        "isRequired": false,
+        "type": "number"
       },
       "step": {
-        "type": "number",
-        "isRequired": false,
+        "defaultValue": 1,
         "description": "The granularity with which the slider can step through values. (A \"discrete\" slider.)\nThe `min` prop serves as the origin for the valid values.\nWe recommend (max - min) to be evenly divisible by the step.\n\nWhen step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.",
-        "defaultValue": 1
+        "isRequired": false,
+        "type": "number | null"
       },
       "valueLabelDisplay": {
-        "type": "\"on\" | \"auto\" | \"off\"",
-        "isRequired": false,
+        "defaultValue": "off",
         "description": "Controls when the value label is displayed:\n\n- `auto` the value label will display when the thumb is hovered or focused.\n- `on` will display persistently.\n- `off` will never display.",
-        "defaultValue": "off"
+        "isRequired": false,
+        "type": "\"off\" | \"on\" | \"auto\""
+      },
+      "defaultValue": {
+        "description": "The default value. Use when the component is not controlled.",
+        "isRequired": false,
+        "type": "number | number[]"
+      },
+      "value": {
+        "description": "The value of the slider.\nFor ranged sliders, provide an array with two values.",
+        "isRequired": false,
+        "type": "number | number[]"
+      },
+      "onChange": {
+        "description": "Callback function that is fired when the slider's value changed.\n@param event The event source of the callback.\nYou can pull out the new value by accessing `event.target.value` (any).\n**Warning**: This is a generic event not a change event.\n@param value The new value.\n@param activeThumb Index of the currently moved thumb.",
+        "isRequired": false,
+        "type": "(event: Event, value: number | number[], activeThumb: number) => void"
+      },
+      "orientation": {
+        "defaultValue": "horizontal",
+        "description": "The component orientation.",
+        "isRequired": false,
+        "type": "\"horizontal\" | \"vertical\""
+      },
+      "aria-label": {
+        "defaultValue": "Slider value",
+        "description": "The label of the slider.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/InputText.json

@@ -2,43 +2,50 @@
   "InputText": {
     "props": {
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "hideLabel": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If true, the label is hidden.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "id": {
-        "type": "string",
-        "isRequired": false,
-        "description": "The id of the `input` element.\nUse this prop to make `label` and `helperText` accessible for screen readers."
+        "description": "The id of the `input` element.\nUse this prop to make `label` and `helperText` accessible for screen readers.",
+        "isRequired": true,
+        "type": "string"
       },
       "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Alters the border color and visual intent of the search input.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
+        "description": "The label content.",
         "isRequired": false,
-        "description": "The label content."
+        "type": "ReactNode"
       },
       "placeholder": {
-        "type": "string",
+        "description": "The short hint displayed in the `input` before the user enters a value.",
         "isRequired": false,
-        "description": "The short hint displayed in the `input` before the user enters a value."
+        "type": "string"
       },
       "sdsType": {
-        "type": "\"textField\" | \"textArea\"",
-        "isRequired": false
+        "defaultValue": "textField",
+        "description": "Defines the type of component to render, with options for a text input or text area.",
+        "isRequired": false,
+        "type": "\"textField\" | \"textArea\""
       },
       "classes": {
-        "type": "Partial<TextFieldClasses> & { root?: string; label?: string; input?: string; }",
+        "defaultValue": {},
+        "description": "Override or extend the styles applied to the component.",
         "isRequired": false,
-        "description": "Override or extend the styles applied to the component."
+        "type": "Partial<TextFieldClasses> & { root?: string | undefined; label?: string | undefined; input?: string | undefined; endAdornment?: string | undefined; startAdornment?: string | undefined; clearButton?: string | undefined; searchButton?: string | undefined; }"
       }
     }
   }
-}
+}

package/data/component-props/InputToggle.json

@@ -2,22 +2,39 @@
   "InputToggle": {
     "props": {
       "disabled": {
-        "type": "\"false\" | \"true\"",
+        "defaultValue": false,
+        "description": "If `true`, the component is disabled.",
         "isRequired": false,
-        "description": "If `true`, the component is disabled."
+        "type": "boolean"
       },
       "offLabel": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "Off",
+        "description": "The text displayed within the InputToggle when it's off.",
+        "isRequired": false,
+        "type": "string"
       },
       "onLabel": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "On",
+        "description": "The text displayed within the InputToggle when it's on.",
+        "isRequired": false,
+        "type": "string"
       },
       "width": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 62,
+        "description": "Controls the width of the InputToggle element, in pixels. Increase it when custom labels do not fit.",
+        "isRequired": false,
+        "type": "number"
+      },
+      "checked": {
+        "description": "If `true`, the component is checked.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "onChange": {
+        "description": "Called whenever the user toggles the component, in either direction. It is\ngiven the event alone: unlike MUI's, it is not passed the new checked\nstate, which is read from the event's target instead.",
+        "isRequired": false,
+        "type": "function"
       }
     }
   }
-}
+}

package/data/component-props/IntentMessage.json

@@ -2,21 +2,50 @@
   "IntentMessage": {
     "props": {
       "autoOrder": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Sorts the messages by intent rather than using the order of the array. Set it to false to preserve your order.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "border": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Draws a 2px vertical bar to the left of the wrapper, colored by the most severe intent in messages. This is the Intent Indicator from the guidelines.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "messages": {
-        "type": "IntentMessageItem[]",
-        "isRequired": false
+        "defaultValue": [],
+        "description": "The messages to display, each with its own intent. See the table below for the shape of an item.",
+        "isRequired": false,
+        "type": "IntentMessageItem[]"
       },
       "orderBy": {
-        "type": "IntentMessageIntent[]",
-        "isRequired": false
+        "defaultValue": ["negative", "notice", "positive"],
+        "description": "Replaces the default severity ranking. It affects the sort order and, because it defines what counts as most severe, the border color as well, which means it still applies when autoOrder is false.",
+        "isRequired": false,
+        "type": "IntentMessageIntent[]"
+      },
+      "children": {
+        "description": "Rendered above the messages, inside the same wrapper. This is where the Input, or a group of Inputs, goes.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "intent": {
+        "description": "Required. Sets the text color, the icon color, and this message's place in the ranking.",
+        "isRequired": false,
+        "type": "\"negative\" | \"notice\" | \"positive\""
+      },
+      "text": {
+        "description": "Required. The message copy. Long text wraps.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "icon": {
+        "defaultValue": "CheckCircle for positive, ExclamationMarkCircle otherwise",
+        "description": "Replaces the default icon. A name renders at xs; an element is rendered as given, though its fill is still overridden by the intent color.",
+        "isRequired": false,
+        "type": "keyof IconNameToSizes | ReactElement"
       }
     }
   }
-}
+}

package/data/component-props/Link.json

@@ -2,17 +2,23 @@
   "Link": {
     "props": {
       "fontWeight": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "normal",
+        "description": "Maps to font-weight 400 and 600.",
+        "isRequired": false,
+        "type": "\"normal\" | \"bold\""
       },
       "sdsSize": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "s",
+        "description": "The font size, taken from the body scale rather than the link one.",
+        "isRequired": false,
+        "type": "\"s\" | \"xs\""
       },
       "sdsStyle": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "\"default\" underlines on hover, focus, and press only; \"dashed\" is underlined dashed at rest and solid on interaction.",
+        "isRequired": false,
+        "type": "\"default\" | \"dashed\""
       }
     }
   }
-}
+}

package/data/component-props/LoadingIndicator.json

@@ -2,9 +2,17 @@
   "LoadingIndicator": {
     "props": {
       "sdsStyle": {
-        "type": "\"minimal\" | \"tag\"",
-        "isRequired": true
+        "defaultValue": "- (required)",
+        "description": "Chooses between the two variants above. It has no default: leaving it out is a type error, and an indicator built without it renders unstyled.",
+        "isRequired": true,
+        "type": "\"minimal\" | \"tag\""
+      },
+      "aria-label": {
+        "defaultValue": "undefined",
+        "description": "Replaces what a screen reader announces for the status region, for example \"Loading cell types\". The visible text still reads \"Loading\". Without it, assistive technology announces the visible word.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}