@czi-sds/mcp 0.16.0 → 0.17.0

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"
+      },
+      "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"
       },
       "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"
       }
     }
   }
-}
+}

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"
       }
     }
   }
-}
+}

package/data/component-props/MenuItem.json

@@ -2,41 +2,60 @@
   "MenuItem": {
     "props": {
       "column": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The column prop determines the content displayed in the right column of the menu item. This content can be customized to provide additional information or context for the menu item.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "icon": {
-        "type": "any",
-        "isRequired": false
+        "description": "The icon shown at the start of the item, either the name of an SDS icon or an element of your own. Only icons that come in a small size can be named here.",
+        "isRequired": false,
+        "type": "IconName | ReactElement"
       },
       "isMultiSelect": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "When true, designates that the menu item supports multi-select functionality.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "sdsIconProps": {
-        "type": "IconProps<IconName>",
-        "isRequired": false
+        "description": "Enables you to pass additional props to customize the SDS icon within the menu item.",
+        "isRequired": false,
+        "type": "IconProps<IconName>"
       },
       "sdsStyle": {
-        "type": "\"determinate\" | \"indeterminate\"",
-        "isRequired": false
+        "defaultValue": "determinate",
+        "description": "Determines the style of the menu item, whether it is determinate or indeterminate.",
+        "isRequired": false,
+        "type": "\"indeterminate\" | \"determinate\""
       },
       "sdsType": {
-        "type": "\"action\" | \"default\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "An \"action\" item leaves out the selection mark at its start, for a menu whose items run a command rather than choose a value.",
+        "isRequired": false,
+        "type": "\"action\" | \"default\""
       },
       "selected": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is selected.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "children": {
+        "description": "The content of the component.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "sdsIcon": {
+        "description": "@deprecated Use `icon` instead.\n(masoudmanson): This prop is deprecated and will be removed in the next major version.\nPlease replace instances of `sdsIcon` with `icon`.",
+        "isRequired": false,
+        "type": "IconName | ReactElement"
       }
     }
   }
-}
+}

package/data/component-props/MenuSelect.json

@@ -2,19 +2,19 @@
   "MenuSelect": {
     "props": {
       "keepSearchOnSelect": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "multiple": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, `value` must be an array and the menu will support multiple selections.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "search": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "boolean"
       }
     }
   }
-}
+}

package/data/component-props/NavigationFooter.json

@@ -2,42 +2,72 @@
   "NavigationFooter": {
     "props": {
       "backgroundAppearance": {
-        "type": "\"matchBackground\" | \"dark\"",
+        "defaultValue": "matchBackground",
+        "description": "\"dark\" puts the footer on a dark surface and inverts its text and dividers, in light mode only.",
         "isRequired": false,
-        "defaultValue": "matchBackground"
+        "type": "\"matchBackground\" | \"dark\""
       },
       "images": {
-        "type": "FooterImage[]",
-        "isRequired": false
+        "description": "An array of images displayed in the footer. Each item includes an image, optional link URL, and component.",
+        "isRequired": false,
+        "type": "FooterImage[]"
       },
       "logo": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The logo displayed in the footer. Can be any valid React node such as an image, icon, or SVG.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "logoUrl": {
-        "type": "string",
-        "isRequired": false
+        "description": "If provided, clicking the logo will navigate to this URL.",
+        "isRequired": false,
+        "type": "string"
       },
       "navItems": {
-        "type": "NavigationFooterNavItem[]",
-        "isRequired": false
+        "description": "The prominent links on the top row, next to the logo. They are headings, not body text, and get no dividers.",
+        "isRequired": false,
+        "type": "NavigationFooterNavItem[]"
       },
       "navLinks": {
-        "type": "NavigationFooterNavItem[]",
-        "isRequired": false
+        "description": "The smaller links on the bottom row, drawn in one line with dividers between them.",
+        "isRequired": false,
+        "type": "NavigationFooterNavItem[]"
       },
       "tag": {
-        "type": "string",
-        "isRequired": false
+        "description": "A small label displayed next to the title.",
+        "isRequired": false,
+        "type": "string"
       },
       "tagColor": {
-        "type": "\"info\" | \"positive\" | \"notice\" | \"negative\" | \"neutral\" | \"beta\" | \"[string, string]\" | \"[string, string, string]\"",
-        "isRequired": false
+        "description": "The Tag's color. A tuple sets the label, background, and icon colors by hand.",
+        "isRequired": false,
+        "type": "\"info\" | \"negative\" | \"notice\" | \"positive\" | \"neutral\" | \"beta\" | [string, string] | [string, string, string]"
       },
       "title": {
-        "type": "string",
-        "isRequired": false
+        "description": "The main title displayed in the footer.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "logoComponent": {
+        "defaultValue": "a",
+        "description": "Specifies the component to use for the logo link. Defaults to an anchor tag.",
+        "isRequired": false,
+        "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>"
+      },
+      "logoLinkProps": {
+        "description": "Additional props passed to the logo link component.",
+        "isRequired": false,
+        "type": "Record<string, unknown>"
+      },
+      "image": {
+        "description": "The image element to be displayed. Can be an icon, image, SVG, or any ReactNode.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "label": {
+        "description": "The text label displayed for the navigation item.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}