@czi-sds/mcp 0.16.0 → 0.17.0

package/data/component-props/ButtonToggle.json

@@ -2,43 +2,56 @@
   "ButtonToggle": {
     "props": {
       "backgroundAppearance": {
-        "type": "\"matchBackground\" | \"dark\"",
-        "isRequired": false
+        "defaultValue": "matchBackground",
+        "description": "Button's prop, telling the toggle which surface it sits on so it can pick colors with enough contrast.",
+        "isRequired": false,
+        "type": "\"matchBackground\" | \"dark\""
       },
       "children": {
-        "type": "ReactNode",
+        "description": "The content of the component.",
         "isRequired": false,
-        "description": "The content of the component."
+        "type": "ReactNode"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "startIcon": {
-        "type": "ReactElement",
+        "description": "Required. The icon displayed within the component. Pass the SDS Icon\ncomponent, for example `<Icon sdsIcon=\"Search\" sdsSize=\"s\" />`.",
         "isRequired": true,
-        "description": "Element placed before the children."
+        "type": "ReactElement"
       },
       "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\""
       },
       "sdsType": {
-        "type": "\"primary\" | \"secondary\" | \"destructive\"",
-        "isRequired": false
+        "defaultValue": "primary",
+        "description": "Color scheme of the button. Primary uses the accent color in the on stage, secondary stays neutral. Set it explicitly: the on stage resolves its colors before Button applies this default, so an omitted value draws the neutral treatment over a button that is otherwise primary. Button's \"destructive\" is inherited by the type but has no on-stage treatment, so it should not be used here.",
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\" | \"destructive\""
       },
       "sdsStyle": {
-        "type": "\"outline\" | \"solid\" | \"minimal\"",
-        "isRequired": false
+        "defaultValue": "solid",
+        "description": "Style of the button. ButtonToggle inherits Button's default of \"solid\", but toggles are designed around \"outline\" and \"minimal\", so set one of those explicitly.",
+        "isRequired": false,
+        "type": "\"outline\" | \"solid\" | \"minimal\""
       },
       "sdsStage": {
-        "type": "\"off\" | \"on\"",
-        "isRequired": false
+        "defaultValue": "off",
+        "description": "Controls the toggle stage. The component is fully controlled, so keep this value in state and update it from onClick.",
+        "isRequired": false,
+        "type": "\"off\" | \"on\""
+      },
+      "onClick": {
+        "description": "Callback fired when the button is clicked.",
+        "isRequired": false,
+        "type": "function"
       }
     }
   }
-}
+}

package/data/component-props/ButtonToggleLegacy.json

@@ -2,26 +2,26 @@
   "ButtonToggleLegacy": {
     "props": {
       "disabled": {
-        "type": "\"false\" | \"true\"",
+        "description": "If `true`, the component is disabled.",
         "isRequired": false,
-        "description": "If `true`, the component is disabled."
+        "type": "boolean"
       },
       "icon": {
-        "type": "ReactElement",
-        "isRequired": true
+        "isRequired": true,
+        "type": "ReactElement"
       },
       "sdsSize": {
-        "type": "\"small\" | \"medium\" | \"large\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"small\" | \"large\" | \"medium\""
       },
       "sdsStage": {
-        "type": "\"off\" | \"on\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"off\" | \"on\""
       },
       "sdsType": {
-        "type": "\"primary\" | \"secondary\"",
-        "isRequired": false
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\""
       }
     }
   }
-}
+}

package/data/component-props/Callout.json

@@ -2,38 +2,79 @@
   "Callout": {
     "props": {
       "autoDismiss": {
-        "type": "\"number\" | \"false\" | \"true\"",
-        "isRequired": false
+        "description": "Dismisses the Callout on a timer. A number sets the delay in milliseconds, and true uses 8000. Leave it unset to keep the Callout visible until it is dismissed another way.",
+        "isRequired": false,
+        "type": "number | false | true"
       },
       "body": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The Callout body, shown beneath the title.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "hideBody": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If set to true, hides the Callout body and centers the icon against the remaining content.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "hideTitle": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If set to true, hides the Callout title.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "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": "\"info\" | \"accent\" | \"negative\" | \"notice\" | \"positive\"",
-        "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\""
       },
       "sdsStyle": {
-        "type": "\"persistent\" | \"expandable\" | \"dismissible\"",
-        "isRequired": false
+        "defaultValue": "persistent",
+        "description": "Defines the style of the Callout: - \"persistent\": Cannot be closed. - \"expandable\": Includes a chevron icon that toggles the children in and out of view. - \"dismissible\": Includes an “x” icon for manual dismissal.",
+        "isRequired": false,
+        "type": "\"dismissible\" | \"persistent\" | \"expandable\""
       },
       "title": {
-        "type": "string",
-        "isRequired": false
+        "description": "The Callout title.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "children": {
+        "description": "The content of the component.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "extraContent": {
+        "description": "The same slot as `children`, for callers that would rather pass it as a\nprop. Both render when both are given, `children` first.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "sdsIconProps": {
+        "description": "Props forwarded to the Icon component when icon is given as a name.",
+        "isRequired": false,
+        "type": "IconProps<string | number | symbol>"
+      },
+      "sdsStage": {
+        "defaultValue": "open",
+        "description": "The stage an expandable Callout starts in. It is only the initial value; the chevron takes over from there.",
+        "isRequired": false,
+        "type": "\"open\" | \"closed\""
+      },
+      "dismissed": {
+        "description": "Hides the Callout when set to true. Changing it back to false brings the Callout back, which is how a dismissed Callout is restored.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "onClose": {
+        "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,
+        "type": "(event: SyntheticEvent<Element, Event>) => void"
       }
     }
   }
-}
+}

package/data/component-props/CellBasic.json

@@ -1,82 +1,135 @@
 {
   "CellBasic": {
     "props": {
-      "component": {
-        "type": "\"symbol\" | \"object\" | \"cite\" | \"data\" | \"form\" | \"label\" | \"pattern\" | \"span\" | \"summary\" | \"slot\" | \"style\" | \"title\" | \"center\" | \"link\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"article\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"button\" | \"canvas\" | \"caption\" | \"code\" | \"col\" | \"colgroup\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dialog\" | \"div\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"figure\" | \"footer\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"img\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"legend\" | \"li\" | \"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\" | \"script\" | \"section\" | \"select\" | \"small\" | \"source\" | \"strong\" | \"sub\" | \"sup\" | \"table\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"time\" | \"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\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"switch\" | \"text\" | \"textPath\" | \"tspan\" | \"use\" | \"view\" | \"ComponentClass",
-        "isRequired": false
-      },
       "horizontalAlign": {
-        "type": "\"left\" | \"right\"",
-        "isRequired": false
+        "defaultValue": "left",
+        "description": "Horizontal alignment of cell content. There is no \"center\". Use CellComponent if a cell needs centered content.",
+        "isRequired": false,
+        "type": "\"left\" | \"right\""
       },
       "icon": {
-        "type": "ReactElement",
-        "isRequired": false
+        "description": "Places an icon to the left of the cell text. Expects an SDS Icon or another SVG element.",
+        "isRequired": false,
+        "type": "ReactElement"
       },
       "iconVerticalAlign": {
-        "type": "\"top\" | \"center\" | \"bottom\"",
-        "isRequired": false
+        "defaultValue": "top",
+        "description": "Vertical alignment of the icon component.",
+        "isRequired": false,
+        "type": "\"center\" | \"bottom\" | \"top\""
       },
       "primaryText": {
-        "type": "string",
-        "isRequired": true
+        "description": "Primary text value.",
+        "isRequired": true,
+        "type": "string"
       },
       "primaryTextComponentSlotBottom": {
-        "type": "ReactNode",
-        "isRequired": false
+        "defaultValue": null,
+        "description": "Component slot below primary text. This will only show if there is no secondary or tertiary text. Remove the default values of secondary and tertiary text to see this in action.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "primaryTextComponentSlotRight": {
-        "type": "ReactNode",
-        "isRequired": false
+        "defaultValue": null,
+        "description": "Component slot to the right of primary text",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "primaryTextWrapLineCount": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 3,
+        "description": "Number of text wrap lines for primary text.",
+        "isRequired": false,
+        "type": "number"
       },
       "secondaryText": {
-        "type": "string",
-        "isRequired": false
+        "description": "Secondary Text.",
+        "isRequired": false,
+        "type": "string"
       },
       "secondaryTextWrapLineCount": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 1,
+        "description": "Number of text wrap lines for secondary text.",
+        "isRequired": false,
+        "type": "number"
       },
       "shouldShowTooltipOnHover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "When true the cell is wrapped in a Tooltip whose title is primaryText and whose subtitle is secondaryText. Turn it off for cells whose text is already fully visible, otherwise every cell in the table has a tooltip.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "shouldShowUnderlineOnHover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Underlines primaryText on hover. Inside a PreComposedTable the underline also appears when any cell in the row is hovered.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "shouldTextWrap": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "When true, each text clamps to its wrap line count. When false, text stays on one line and truncates with an ellipsis instead.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "tabularNums": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Renders digits at a fixed width so numbers line up column to column. Worth turning on for any numeric column.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "tertiaryText": {
-        "type": "string",
-        "isRequired": false
+        "description": "Tertiary Text.",
+        "isRequired": false,
+        "type": "string"
       },
       "tertiaryTextWrapLineCount": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 1,
+        "description": "Number of text wrap lines for tertiary text.",
+        "isRequired": false,
+        "type": "number"
       },
       "tooltipProps": {
-        "type": "TooltipProps",
-        "isRequired": false
+        "description": "Passed to the Tooltip, and overrides the defaults the cell sets (title, subtitle, arrow, dark style, no leave delay).",
+        "isRequired": false,
+        "type": "TooltipProps"
       },
       "verticalAlign": {
-        "type": "\"top\" | \"center\" | \"bottom\"",
-        "isRequired": false
+        "defaultValue": "top",
+        "description": "Vertical alignment of the cell content.",
+        "isRequired": false,
+        "type": "\"center\" | \"bottom\" | \"top\""
       },
       "width": {
-        "type": "\"string\" | \"number\"",
-        "isRequired": false
+        "description": "Lands on the rendered cell as the HTML width attribute, so a number is read as pixels. Browsers treat it as the width of the whole column, and take it as a minimum rather than a promise.",
+        "isRequired": false,
+        "type": "string | number"
+      },
+      "as": {
+        "defaultValue": "td",
+        "description": "The element the cell renders as. Use \"th\" for a row header cell inside tbody.",
+        "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>"
+      },
+      "extraRightPadding": {
+        "defaultValue": 0,
+        "description": "Extra pixels of right padding, added only when horizontalAlign is \"right\". Useful for leaving room for a scrollbar or a pinned column edge.",
+        "isRequired": false,
+        "type": "number"
+      },
+      "link": {
+        "description": "Wraps the cell content in an anchor pointing here. The text keeps the cell's own color rather than link styling.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "linkComponent": {
+        "description": "The component the link renders as, for routers that supply their own link (React Router's Link, for example).",
+        "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>"
+      },
+      "linkProps": {
+        "description": "Props passed to the anchor rendered by link.",
+        "isRequired": false,
+        "type": "AnchorHTMLAttributes<HTMLAnchorElement>"
       }
     }
   }
-}
+}

package/data/component-props/CellComponent.json

@@ -2,17 +2,33 @@
   "CellComponent": {
     "props": {
       "horizontalAlign": {
-        "type": "\"center\" | \"left\" | \"right\"",
-        "isRequired": false
+        "defaultValue": "left",
+        "description": "Specifies the horizontal alignment of the cell content.",
+        "isRequired": false,
+        "type": "\"center\" | \"left\" | \"right\""
       },
       "verticalAlign": {
-        "type": "\"center\" | \"top\" | \"bottom\"",
-        "isRequired": false
+        "defaultValue": "top",
+        "description": "Specifies the vertical alignment of the cell content.",
+        "isRequired": false,
+        "type": "\"center\" | \"bottom\" | \"top\""
       },
       "width": {
-        "type": "\"string\" | \"number\"",
-        "isRequired": false
+        "description": "Lands on the rendered cell as the HTML width attribute, so a number is read as pixels. Browsers treat it as the width of the whole column, and take it as a minimum rather than a promise.",
+        "isRequired": false,
+        "type": "string | number"
+      },
+      "as": {
+        "defaultValue": "td",
+        "description": "The element the cell renders as.",
+        "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>"
+      },
+      "children": {
+        "description": "The cell's content. Unlike CellBasic, which takes text through primaryText, this cell renders whatever you put inside it.",
+        "isRequired": false,
+        "type": "React.ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/CellHeader.json

@@ -2,41 +2,84 @@
   "CellHeader": {
     "props": {
       "active": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Marks this column as the one currently sorted: the label and chevron take the accent color. It does not sort anything on its own.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "as": {
+        "defaultValue": "th",
+        "description": "The element the header cell renders as.",
+        "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>"
       },
       "direction": {
-        "type": "\"desc\" | \"asc\"",
-        "isRequired": false
+        "defaultValue": "desc",
+        "description": "Which chevron to draw: up for \"asc\", down for \"desc\". It also sets the icon's aria-label. Exported as CellHeaderDirection.",
+        "isRequired": false,
+        "type": "\"desc\" | \"asc\""
       },
       "hideSortIcon": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Leaves the chevron out for columns that cannot be sorted. An active header keeps its chevron even with this set.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "horizontalAlign": {
-        "type": "\"left\" | \"center\" | \"right\"",
-        "isRequired": false
+        "defaultValue": "left",
+        "description": "Horizontally aligns the label and its chevron.",
+        "isRequired": false,
+        "type": "\"center\" | \"left\" | \"right\""
       },
       "hover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Makes the header interactive: it takes a pointer cursor, reacts to hover, renders the sort chevron and allows the tooltip. A header left at the default draws no chevron and shows no tooltip even if the other sorting props are set, so set this on every sortable column.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "shouldShowTooltipOnHover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Wraps the header in a Tooltip. It only takes effect while hover is also true.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "shouldTruncate": {
+        "defaultValue": false,
+        "description": "Keeps a long label on one line and truncates it with an ellipsis instead of wrapping.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "tooltipProps": {
-        "type": "TooltipProps",
-        "isRequired": false
+        "description": "Passed to the Tooltip, and overrides the defaults the header sets (arrow, top-start placement, dark style).",
+        "isRequired": false,
+        "type": "TooltipProps"
+      },
+      "tooltipSubtitle": {
+        "description": "A second line below the tooltip's title.",
+        "isRequired": false,
+        "type": "string"
       },
       "tooltipText": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "",
+        "description": "The tooltip's title.",
+        "isRequired": false,
+        "type": "string"
       },
       "width": {
-        "type": "\"string\" | \"number\"",
-        "isRequired": false
+        "description": "Lands on the rendered cell as the HTML width attribute, so a number is read as pixels. Browsers treat it as the width of the whole column, and take it as a minimum rather than a promise.",
+        "isRequired": false,
+        "type": "string | number"
+      },
+      "children": {
+        "description": "Required. A string or number is wrapped in the header's own text styling; anything else is rendered as given.",
+        "isRequired": false,
+        "type": "React.ReactNode"
+      },
+      "onClick": {
+        "description": "Where sorting is actually wired up: with TanStack Table, pass column.getToggleSortingHandler().",
+        "isRequired": false,
+        "type": "function"
       }
     }
   }
-}
+}