@czi-sds/mcp 0.16.0 → 0.17.0

package/data/component-props/NavigationHeader.json

@@ -2,77 +2,190 @@
   "NavigationHeader": {
     "props": {
       "buttons": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "Actions at the right end of the bar. Prop objects render as SDS Buttons; elements are cloned with the header's appearance applied. An icon-only button gets an aria-label from its child, and in the narrow layout every button goes full width and closes the drawer when clicked.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "menuProps": {
-        "type": "Partial<MenuProps>",
-        "isRequired": false
+        "defaultValue": "{ disableScrollLock: true, disablePortal: true }",
+        "description": "Props for the dropdown menus. Passing this replaces the default object rather than merging with it.",
+        "isRequired": false,
+        "type": "Partial<MenuProps>"
       },
       "backgroundAppearance": {
-        "type": "\"matchBackground\" | \"dark\"",
-        "isRequired": false
+        "defaultValue": "matchBackground",
+        "description": "\"dark\" puts the header on a dark surface and inverts its contents. It only changes anything in light mode.",
+        "isRequired": false,
+        "type": "\"matchBackground\" | \"dark\""
       },
       "logo": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The logo displayed in the header. Can be an image, icon, svg or any ReactNode.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "logoLinkComponent": {
-        "type": "\"symbol\" | \"object\" | \"style\" | \"div\" | \"clipPath\" | \"filter\" | \"marker\" | \"mask\" | \"p\" | \"header\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"article\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"button\" | \"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\" | \"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\" | \"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\" | \"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\" | \"foreignObject\" | \"g\" | \"image\" | \"line\" | \"linearGradient\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"switch\" | \"text\" | \"textPath\" | \"tspan\" | \"use\" | \"view\" | \"ComponentClass",
-        "isRequired": false
+        "defaultValue": "a",
+        "description": "Specifies the component to use for the logo link.",
+        "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>"
       },
       "logoUrl": {
-        "type": "string",
-        "isRequired": false
+        "description": "URL for the logo link. If provided, clicking the logo navigates to this URL.",
+        "isRequired": false,
+        "type": "string"
       },
       "isSticky": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Whether the header sticks to the top on scroll. Ignored when sdsStyle is \"drawer\", which is always sticky, and best left alone alongside topComponentSlot.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "topComponentSlot": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "Content rendered above the header, such as a Banner. The header measures it and offsets its own sticky top to match.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "primaryNavItems": {
-        "type": "NavigationHeaderPrimaryNavItem<string>[]",
-        "isRequired": false
+        "description": "List of items for the primary navigation section.",
+        "isRequired": false,
+        "type": "NavigationHeaderPrimaryNavItem<string>[]"
       },
       "primaryNavPosition": {
-        "type": "\"left\" | \"right\"",
-        "isRequired": false
+        "defaultValue": "left",
+        "description": "Position of the primaryNavItems list. If set to \"left\", the items appear to the left of the search bar. If set to \"right\", they are positioned next to the secondaryNavItems on the right.",
+        "isRequired": false,
+        "type": "\"left\" | \"right\""
       },
       "sdsStyle": {
-        "type": "\"dropdown\" | \"drawer\"",
-        "isRequired": false
+        "defaultValue": "dropdown",
+        "description": "How dropdown nav items open, and which parts of their data are used. See the comparison above.",
+        "isRequired": false,
+        "type": "\"dropdown\" | \"drawer\""
       },
       "scrollElevation": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Controls whether a shadow is shown under the Nav when scrolling.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "searchProps": {
-        "type": "\"Partial<FilledTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps>\" | \"Partial<OutlinedTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps>\" | \"Partial<StandardTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps>\"",
-        "isRequired": false
+        "description": "Props passed to the search input component.",
+        "isRequired": false,
+        "type": "Partial<OutlinedTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps> | Partial<StandardTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps> | Partial<FilledTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps>"
       },
       "secondaryNavItems": {
-        "type": "NavigationHeaderSecondaryNavItem<string>[]",
-        "isRequired": false
+        "description": "List of items for the secondary navigation section.",
+        "isRequired": false,
+        "type": "NavigationHeaderSecondaryNavItem<string>[]"
       },
       "showSearch": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Whether to display the search input in the header.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "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
+        "defaultValue": "neutral",
+        "description": "The color of the tag label.",
+        "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 header.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "activePrimaryNavKey": {
+        "description": "The key of the active primary item. Optional, since the header tracks this itself; when given, it overrides the internal value.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "setActivePrimaryNavKey": {
+        "description": "Called when a primary item becomes active. The header updates its internal key as well, so this is a notification rather than the only way the value changes.",
+        "isRequired": false,
+        "type": "(key: string) => void"
+      },
+      "drawerOpen": {
+        "description": "Controls the narrow layout's drawer. Leave both this and setDrawerOpen out to let the hamburger manage it.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "setDrawerOpen": {
+        "description": "Replaces the drawer's internal state update, so it has to be paired with drawerOpen or the drawer stops opening.",
+        "isRequired": false,
+        "type": "(open: boolean) => void"
+      },
+      "onDrawerStyleNavItemHover": {
+        "description": "(item: NavigationHeaderPrimaryNavItem<T> | NavigationHeaderSecondaryNavItem) => void. Called with the hovered primary or secondary item while sdsStyle is \"drawer\". Useful for prefetching what the panel will show.",
+        "isRequired": false,
+        "type": "(item: NavigationHeaderPrimaryNavItem<string> | NavigationHeaderSecondaryNavItem<string>) => void"
+      },
+      "logoLinkProps": {
+        "description": "Props to pass to the logo link component.",
+        "isRequired": false,
+        "type": "LinkProps"
+      },
+      "label": {
+        "description": "The row's text.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "details": {
+        "description": "A caption under the label, drawn only when sdsStyle is \"drawer\". In dropdown style it lands on the element as an attribute and shows nothing.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "icon": {
+        "description": "An icon for the row, drawn only when sdsStyle is \"drawer\". A named icon renders at 24px when the row has details and 16px when it does not, so the name has to offer that size.",
+        "isRequired": false,
+        "type": "keyof IconNameToSizes | ReactElement"
+      },
+      "section": {
+        "description": "Groups rows under a heading. Rows are grouped by this value in the order the sections first appear.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "onClick": {
+        "description": "Runs on click, then the menu closes.",
+        "isRequired": false,
+        "type": "function"
+      },
+      "href": {
+        "description": "Turns the row into a link to this URL.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "component": {
+        "description": "What the link renders as, for routing through something other than an anchor.",
+        "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>"
+      },
+      "target": {
+        "description": "Where the link opens, for example \"_blank\".",
+        "isRequired": false,
+        "type": "string"
+      },
+      "rel": {
+        "description": "The link's relationship to the target, for example \"noreferrer\".",
+        "isRequired": false,
+        "type": "string"
+      },
+      "actions": {
+        "description": "Links rendered under the section, for example a \"Browse all\". Each takes label plus href, onClick, component, target, and rel.",
+        "isRequired": false,
+        "type": "ActionItem[]"
+      },
+      "colSpan": {
+        "defaultValue": 1,
+        "description": "How many columns of the panel this section occupies.",
+        "isRequired": false,
+        "type": "number"
       }
     }
   }
-}
+}

package/data/component-props/NavigationJumpTo.json

@@ -2,17 +2,43 @@
   "NavigationJumpTo": {
     "props": {
       "items": {
-        "type": "Item[]",
-        "isRequired": true
+        "defaultValue": "- (required)",
+        "description": "The sections to list. See the shape below.",
+        "isRequired": true,
+        "type": "Item[]"
       },
       "offsetTop": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 0,
+        "description": "How many pixels above a section the highlight should switch to it, which is what you want when a sticky header covers the top of the page. Any non-zero value also switches clicks to window scrolling by element id.",
+        "isRequired": false,
+        "type": "number"
       },
       "width": {
-        "type": "\"string\" | \"number\" | \"string & {}\"",
-        "isRequired": false
+        "defaultValue": "100%",
+        "description": "The width of the strip and of every item in it. Long titles wrap rather than truncate.",
+        "isRequired": false,
+        "type": "string | number | string & {}"
+      },
+      "onChange": {
+        "description": "(value: number, event?: React.SyntheticEvent, type?: \"click\" | \"scroll\") => void. Called when the highlighted item changes, with its index and what caused the change. For a scroll the event is synthesized, not a real DOM event.",
+        "isRequired": false,
+        "type": "\"scroll\" | \"click\""
+      },
+      "title": {
+        "description": "The item's label. It is also kebab-cased into the tab's id, so keep titles distinct.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "elementRef": {
+        "description": "A ref on the section this item points at. The component observes and scrolls whatever the ref holds.",
+        "isRequired": false,
+        "type": "MutableRefObject<HTMLElement | null>"
+      },
+      "subItems": {
+        "description": "Indented children, one level only. Sub-items cannot nest sub-items of their own.",
+        "isRequired": false,
+        "type": "{ title, elementRef }[]"
       }
     }
   }
-}
+}

package/data/component-props/Notification.json

@@ -2,44 +2,62 @@
   "Notification": {
     "props": {
       "autoDismiss": {
-        "type": "\"number\" | \"false\" | \"true\"",
-        "isRequired": false
+        "description": "Dismisses the Notification on a timer. A number sets the delay in milliseconds, and true uses 8000. Leave it unset to keep the Notification visible until it is dismissed another way.",
+        "isRequired": false,
+        "type": "number | false | true"
       },
       "buttonOnClick": {
-        "type": "(event: SyntheticEvent<Element, Event>) => void",
-        "isRequired": false
+        "description": "Callback fired when the action button is clicked. Passing it is what renders the button, and the Notification does nothing else in response, so dismissing it is up to this handler.",
+        "isRequired": false,
+        "type": "(event: SyntheticEvent<Element, Event>) => void"
       },
       "buttonPosition": {
-        "type": "\"left\" | \"right\"",
-        "isRequired": false
-      },
-      "extraContent": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": "right",
+        "description": "Which side of the Notification the action button sits on.",
+        "isRequired": false,
+        "type": "\"left\" | \"right\""
       },
       "icon": {
-        "type": "ReactNode",
+        "description": "Override the icon displayed before the children.\nUnless provided, the icon is mapped to the value of the `severity` prop.\nSet to `false` to remove the `icon`.",
         "isRequired": false,
-        "description": "Override the icon displayed before the children.\nUnless provided, the icon is mapped to the value of the `severity` prop.\nSet to `false` to remove the `icon`."
+        "type": "ReactNode"
       },
       "intent": {
-        "type": "\"accent\" | \"info\" | \"negative\" | \"positive\" | \"notice\"",
-        "isRequired": true
+        "description": "Required. Sets both the color of the component and the icon it defaults to.",
+        "isRequired": true,
+        "type": "\"info\" | \"accent\" | \"negative\" | \"notice\" | \"positive\""
       },
       "onClose": {
-        "type": "(event: SyntheticEvent<Element, Event>) => void",
+        "description": "Callback fired when the component requests to be closed.\nWhen provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.\n@param event The event source of the callback.",
         "isRequired": false,
-        "description": "Callback fired when the component requests to be closed.\nWhen provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.\n@param event The event source of the callback."
+        "type": "(event: SyntheticEvent<Element, Event>) => void"
       },
       "sdsIconProps": {
-        "type": "IconProps<string | number | symbol>",
-        "isRequired": false
+        "description": "Props forwarded to the Icon component when icon is given as a name.",
+        "isRequired": false,
+        "type": "IconProps<string | number | symbol>"
       },
       "slideDirection": {
-        "type": "\"left\" | \"right\"",
+        "defaultValue": "left",
+        "description": "Required. The side the Notification slides in from and back out towards. The component falls back to \"left\", but the prop is not optional, so pass it explicitly.",
+        "isRequired": false,
+        "type": "\"left\" | \"right\""
+      },
+      "children": {
+        "description": "The content of the component.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "dismissed": {
+        "description": "Hides the Notification when set to true. Changing it back to false brings the Notification back, which is how a dismissed Notification is restored.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "buttonText": {
+        "description": "The label of the action button shown beneath the content. It only renders alongside buttonOnClick.",
         "isRequired": false,
-        "defaultValue": "left"
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/Pagination.json

@@ -2,25 +2,53 @@
   "Pagination": {
     "props": {
       "pageSize": {
-        "type": "number",
-        "isRequired": true
+        "description": "Required. How many items fit on a page, which together with totalCount gives the number of pages. Must be at least 1; a smaller value throws.",
+        "isRequired": true,
+        "type": "number"
       },
       "sdsStyle": {
-        "type": "\"round\" | \"square\"",
-        "isRequired": false
+        "defaultValue": "round",
+        "description": "Whether the page and chevron targets are circles or rounded squares.",
+        "isRequired": false,
+        "type": "\"square\" | \"round\""
       },
       "siblingCount": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 1,
+        "description": "How many page numbers to keep on each side of the current page before the rest collapse into an ellipsis.",
+        "isRequired": false,
+        "type": "number"
       },
       "totalCount": {
-        "type": "number",
-        "isRequired": true
+        "description": "Required. Total number of items being paged through: the whole set, not the current page.",
+        "isRequired": true,
+        "type": "number"
       },
       "truncateDropdown": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "When true the ellipsis is a menu of the pages it stands for. When false it is a disabled placeholder, and those pages can only be reached by stepping through with the chevrons.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "onPageChange": {
+        "description": "A callback function triggered when the page number is changed.",
+        "isRequired": true,
+        "type": "(page: number) => void"
+      },
+      "onNextPage": {
+        "description": "A callback function triggered when the \"Next\" page button is clicked.",
+        "isRequired": true,
+        "type": "() => void"
+      },
+      "onPreviousPage": {
+        "description": "A callback function triggered when the \"Previous\" page button is clicked.",
+        "isRequired": true,
+        "type": "() => void"
+      },
+      "currentPage": {
+        "description": "Required. The page to mark as current, counted from 1. Pagination keeps no page state of its own.",
+        "isRequired": true,
+        "type": "number"
       }
     }
   }
-}
+}

package/data/component-props/Panel.json

@@ -2,21 +2,74 @@
   "Panel": {
     "props": {
       "isBackdropClickEnabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Overlay only in practice. Adds an invisible backdrop so a click outside the panel reaches onClose. Left off, clicks pass through to the page.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "position": {
-        "type": "\"bottom\" | \"left\" | \"right\"",
-        "isRequired": false
+        "defaultValue": "left",
+        "description": "Which edge the panel is attached to. A basic panel takes \"left\" or \"right\"; an overlay adds \"bottom\".",
+        "isRequired": false,
+        "type": "\"bottom\" | \"left\" | \"right\""
       },
       "sdsType": {
-        "type": "\"overlay\" | \"basic\"",
-        "isRequired": true
+        "defaultValue": "- (required)",
+        "description": "\"basic\" sits in the page and stays until you close it; \"overlay\" floats over the page with a header and close button. It also decides which of the props below apply, so TypeScript needs it spelled out even though the component falls back to \"basic\".",
+        "isRequired": true,
+        "type": "\"overlay\" | \"basic\""
+      },
+      "transitionDuration": {
+        "defaultValue": "{\nenter: theme.transitions.duration.enteringScreen,\nexit: theme.transitions.duration.leavingScreen,\n}",
+        "description": "The duration for the transition, in milliseconds.\nYou may specify a single timeout for all transitions, or individually with an object.",
+        "isRequired": false,
+        "type": "number | { appear?: number; enter?: number; exit?: number; }"
       },
       "width": {
-        "type": "\"string\" | \"number\"",
-        "isRequired": false
+        "defaultValue": "240 (basic) 320 (overlay)",
+        "description": "How wide the panel is, or how tall it is when positioned along the bottom. Numbers are read as pixels. Values below the default are ignored, since the panel keeps that as its minimum in both directions.",
+        "isRequired": false,
+        "type": "string | number"
+      },
+      "open": {
+        "defaultValue": false,
+        "description": "If `true`, the component is shown.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "HeaderComponent": {
+        "description": "Overlay only. Fills the header bar beside the close button. Leave it out and the bar holds the close button alone.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "closeButtonOnClick": {
+        "description": "Overlay only. Runs when the header's close control is clicked. Without it, the control does nothing.",
+        "isRequired": false,
+        "type": "function"
+      },
+      "CloseButtonComponent": {
+        "defaultValue": "<Button sdsStyle=minimal sdsType=secondary size=large backgroundOnHover={false} aria-label=Panel Toggle> <Icon sdsIcon=XMark sdsSize=l /> </Button>",
+        "description": "Overlay only. Replaces the close button. Clicks are handled by the wrapper around it, so it needs no handler of its own.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "onClose": {
+        "description": "Callback fired when the component requests to be closed.\nThe `reason` parameter can optionally be used to control the response to `onClose`.\n@param event The event source of the callback.\n@param reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.",
+        "isRequired": false,
+        "type": "\"backdropClick\" | \"escapeKeyDown\""
+      },
+      "ModalProps": {
+        "defaultValue": {},
+        "description": "Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.",
+        "isRequired": false,
+        "type": "Partial<ModalProps>"
+      },
+      "slotProps": {
+        "defaultValue": {},
+        "description": "The props used for each slot inside.",
+        "isRequired": false,
+        "type": "{ root?: SlotProps"
       }
     }
   }
-}
+}

package/data/component-props/Popover.json

@@ -2,17 +2,90 @@
   "Popover": {
     "props": {
       "anchorOrigin": {
-        "type": "PopoverOrigin",
-        "isRequired": false,
+        "defaultValue": "{\nvertical: top,\nhorizontal: left,\n}",
         "description": "This is the point on the anchor where the popover's\n`anchorEl` will attach to. This is not used when the\nanchorReference is 'anchorPosition'.\n\nOptions:\nvertical: [top, center, bottom];\nhorizontal: [left, center, right].",
-        "defaultValue": "{\nvertical: top,\nhorizontal: left,\n}"
+        "isRequired": false,
+        "type": "PopoverOrigin"
       },
       "transformOrigin": {
-        "type": "PopoverOrigin",
-        "isRequired": false,
+        "defaultValue": "{\nvertical: top,\nhorizontal: left,\n}",
         "description": "This is the point on the popover which\nwill attach to the anchor's origin.\n\nOptions:\nvertical: [top, center, bottom, x(px)];\nhorizontal: [left, center, right, x(px)].",
-        "defaultValue": "{\nvertical: top,\nhorizontal: left,\n}"
+        "isRequired": false,
+        "type": "PopoverOrigin"
+      },
+      "open": {
+        "description": "If `true`, the component is shown.",
+        "isRequired": true,
+        "type": "boolean"
+      },
+      "anchorEl": {
+        "description": "An HTML element, [PopoverVirtualElement](https://mui.com/material-ui/react-popover/#virtual-element),\nor a function that returns either.\nIt's used to set the position of the popover.",
+        "isRequired": false,
+        "type": "Element | PopoverVirtualElement | () => Element | PopoverVirtualElement"
+      },
+      "onClose": {
+        "description": "Callback fired when the component requests to be closed.\nThe `reason` parameter can optionally be used to control the response to `onClose`.",
+        "isRequired": false,
+        "type": "\"backdropClick\" | \"escapeKeyDown\""
+      },
+      "children": {
+        "description": "The content of the component.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "anchorReference": {
+        "defaultValue": "anchorEl",
+        "description": "This determines which anchor prop to refer to when setting\nthe position of the popover.",
+        "isRequired": false,
+        "type": "\"none\" | \"anchorEl\" | \"anchorPosition\""
+      },
+      "anchorPosition": {
+        "description": "This is the position that may be used to set the position of the popover.\nThe coordinates are relative to the application's client area.",
+        "isRequired": false,
+        "type": "PopoverPosition"
+      },
+      "slotProps": {
+        "defaultValue": {},
+        "description": "The props used for each slot inside.",
+        "isRequired": false,
+        "type": "{ root?: SlotProps"
+      },
+      "marginThreshold": {
+        "defaultValue": 16,
+        "description": "Specifies how close to the edge of the window the popover can appear.\nIf null, the popover will not be constrained by the window.",
+        "isRequired": false,
+        "type": "number"
+      },
+      "keepMounted": {
+        "defaultValue": false,
+        "description": "Always keep the children in the DOM.\nThis prop can be useful in SEO situation or\nwhen you want to maximize the responsiveness of the Modal.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "disableScrollLock": {
+        "defaultValue": false,
+        "description": "Disable the scroll lock behavior.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "disablePortal": {
+        "defaultValue": false,
+        "description": "The `children` will be under the DOM hierarchy of the parent component.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "elevation": {
+        "defaultValue": 8,
+        "description": "The elevation of the popover.",
+        "isRequired": false,
+        "type": "number"
+      },
+      "transitionDuration": {
+        "defaultValue": "auto",
+        "description": "Set to 'auto' to automatically calculate transition time based on height.",
+        "isRequired": false,
+        "type": "number | { appear?: number; enter?: number; exit?: number; } | \"auto\""
       }
     }
   }
-}
+}