@czi-sds/mcp 0.16.0 → 0.17.0

package/data/component-props/PreComposedTable.json

@@ -2,57 +2,129 @@
   "PreComposedTable": {
     "props": {
       "border": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Draws the border around the scrolling table area",
+        "isRequired": false,
+        "type": "boolean"
       },
       "columns": {
-        "type": "any",
-        "isRequired": false
+        "description": "Column definitions that specify how data should be rendered and behave",
+        "isRequired": false,
+        "type": "ColumnDef<TData>[]"
       },
       "enableColumnFiltering": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Adds a filter row under the header. Each column gets a search input unless its meta supplies a filterComponent",
+        "isRequired": false,
+        "type": "boolean"
       },
       "enableGlobalFiltering": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Displays a search input that filters across all columns",
+        "isRequired": false,
+        "type": "boolean"
       },
       "enablePagination": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Enables pagination controls at the bottom of the table",
+        "isRequired": false,
+        "type": "boolean"
       },
       "enableRowSelection": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Adds a checkbox column with select-all. To control that column yourself, include one with the id \"SdsTableSelectColumn\" and it will be used instead of the generated one",
+        "isRequired": false,
+        "type": "boolean"
       },
       "enableSorting": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Makes column headers sortable, wiring each one's chevron and click handler for you",
+        "isRequired": false,
+        "type": "boolean"
       },
       "onRowSelect": {
-        "type": "any",
-        "isRequired": false
+        "description": "Callback triggered when row selection changes; receives array of selected row data",
+        "isRequired": false,
+        "type": "(selectedRows: TData[]) => void"
       },
       "paginationConfig": {
-        "type": "any",
-        "isRequired": false
+        "description": "Passed through to Pagination, plus a placement for the controls, which sit on the right by default. pageSize also sets the initial page size, which is 10 otherwise. Changing this object resets the table to the first page",
+        "isRequired": false,
+        "type": "Partial<PaginationProps> & { placement?: \"left\" | \"center\" | \"right\" }"
       },
       "shouldPinSelectRowToLeft": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Pins the row selection column to the left/right side of the table",
+        "isRequired": false,
+        "type": "boolean"
       },
       "sdsStyle": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "lined",
+        "description": "Whether rows are separated by dividers or by alternating backgrounds",
+        "isRequired": false,
+        "type": "\"lined\" | \"striped\""
       },
       "tableOptions": {
-        "type": "any",
-        "isRequired": false
+        "description": "Escape hatch to the underlying TanStack table. Anything here is merged into its options, and a state you supply overrides the one the component keeps, which is how you drive sorting or pagination from outside. The row models and change handlers are always the component's own",
+        "isRequired": false,
+        "type": "Partial<Omit<TableOptions<TData>, \"data\" | \"columns\" | \"getCoreRowModel\">>"
       },
       "tableRowProps": {
-        "type": "any",
-        "isRequired": false
+        "description": "Additional props to pass to each table row component",
+        "isRequired": false,
+        "type": "Partial<TableRowProps>"
+      },
+      "data": {
+        "description": "Array of data objects to display in the table rows",
+        "isRequired": false,
+        "type": "TData[]"
+      },
+      "className": {
+        "description": "CSS class name to apply to the table container",
+        "isRequired": false,
+        "type": "string"
+      },
+      "style": {
+        "description": "Inline styles to apply to the table container",
+        "isRequired": false,
+        "type": "React.CSSProperties"
+      },
+      "tableWidth": {
+        "defaultValue": "100%",
+        "description": "Sets the width of the table container",
+        "isRequired": false,
+        "type": "string"
+      },
+      "pinning": {
+        "description": "Sticks the column to that edge while the table scrolls sideways, with a gradient at the edge once there is something hidden behind it",
+        "isRequired": false,
+        "type": "\"left\" | \"right\""
+      },
+      "verticalAlign": {
+        "description": "Vertical alignment of the column's cells",
+        "isRequired": false,
+        "type": "\"top\" | \"middle\" | \"bottom\""
+      },
+      "widthPercentage": {
+        "description": "The column's share of the table width, as a percentage rather than a fixed size",
+        "isRequired": false,
+        "type": "number"
+      },
+      "isGrow": {
+        "description": "Lets this column absorb whatever width the others leave over",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "headerCellProps": {
+        "description": "Props for the CellHeader generated from a string header, for tooltips, alignment or truncation",
+        "isRequired": false,
+        "type": "Partial<CellHeaderProps>"
+      },
+      "filterComponent": {
+        "description": "Replaces the default search input in this column's filter cell, for a select or a range instead",
+        "isRequired": false,
+        "type": "(props: { column: Column<TData>; table: Table<TData> }) => React.ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/SegmentedControl.json

@@ -2,9 +2,48 @@
   "SegmentedControl": {
     "props": {
       "buttonDefinition": {
-        "type": "SingleButtonDefinition[]",
-        "isRequired": true
+        "defaultValue": "- (required)",
+        "description": "One entry per segment, in the order they appear. The shape is described in the table below.",
+        "isRequired": true,
+        "type": "SingleButtonDefinition[]"
+      },
+      "onChange": {
+        "description": "Callback fired when the value changes.\n@param event The event source of the callback.\n@param value of the selected buttons. When `exclusive` is true\nthis is a single value; when false an array of selected values. If no value\nis selected and `exclusive` is true the value is null; when false an empty array.",
+        "isRequired": false,
+        "type": "function"
+      },
+      "aria-label": {
+        "defaultValue": "Segmented Control",
+        "description": "Defines a string value that labels the current element.\n@see aria-labelledby.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "icon": {
+        "description": "An SDS icon name, drawn at the small size, or an SVG element of your own for artwork SDS does not carry. Size an element you pass to 16px and fill it with currentColor so it follows the selection.",
+        "isRequired": false,
+        "type": "keyof IconNameToSizes | React.ReactElement"
+      },
+      "label": {
+        "description": "Text for the segment, used instead of an icon. It becomes the segment's accessible name and the tooltip's fallback text.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "shouldShowTooltip": {
+        "defaultValue": true,
+        "description": "Whether the segment has a tooltip. Worth turning off for a labelled segment, whose tooltip would only repeat the label.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "tooltipProps": {
+        "description": "Passed to the segment's Tooltip, so it takes a title, a subtitle, a placement, and the rest of the Tooltip API. Without a title, the tooltip falls back to the label or the value. Note that the title is not used as the segment's accessible name.",
+        "isRequired": false,
+        "type": "Partial<Omit<TooltipProps, \"children\">>"
+      },
+      "tooltipText": {
+        "description": "Deprecated in favour of tooltipProps, and logs a warning. It sets the tooltip's title, overriding tooltipProps.title when both are given, and it is the one tooltip prop that also sets the segment's accessible name.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/StackedBarChart.json

@@ -2,94 +2,168 @@
   "StackedBarChart": {
     "props": {
       "badge": {
-        "type": "string",
+        "defaultValue": "the selection count",
+        "description": "Overrides the badge text, which otherwise counts the data and the selection\n(\"7\", or \"3 of 7\").",
         "isRequired": false,
-        "description": "Badge text to display next to the title\nIf not provided, defaults to showing item count based on selection:\n- No selection: total count (e.g., \"5\")\n- Partial selection: selected count (e.g., \"3 of 5\")\n- All selected: \"All\""
+        "type": "string"
       },
       "hideBadge": {
-        "type": "\"false\" | \"true\"",
+        "defaultValue": false,
+        "description": "Removes the badge, leaving the title on its own.",
         "isRequired": false,
-        "description": "Hide the badge when true",
-        "defaultValue": false
+        "type": "boolean"
       },
       "barHeight": {
-        "type": "number",
+        "defaultValue": 16,
+        "description": "Height of the bar in pixels. Values below 1 are clamped to 1, so the bar\ncannot disappear.",
         "isRequired": false,
-        "description": "Height of the bar in pixels (minimum 1px)",
-        "defaultValue": 16
+        "type": "number"
       },
       "data": {
-        "type": "StackedBarChartDataItem[]",
+        "defaultValue": "- (required)",
+        "description": "The segments, in the order they are drawn.",
         "isRequired": true,
-        "description": "Array of data items to display in the stacked bar"
+        "type": "StackedBarChartDataItem[]"
       },
       "maxAmount": {
-        "type": "number",
+        "defaultValue": "sum of values",
+        "description": "Cumulative mode only. The value the full bar represents. Any difference\nbetween it and the sum of the data is drawn as the Remaining segment.",
         "isRequired": false,
-        "description": "Maximum amount for the bar (used only in \"cumulative\" mode)\nIf not provided, defaults to sum of all values (no remaining segment)\nIf provided and sum < maxAmount, shows gray \"remaining\" segment"
+        "type": "number"
       },
       "mode": {
-        "type": "\"proportional\" | \"cumulative\"",
+        "defaultValue": "proportional",
+        "description": "Whether the bar shows a breakdown of the data (segments always fill it) or\nprogress towards maxAmount.",
         "isRequired": false,
-        "description": "Chart mode - controls how segments are calculated\n- \"proportional\": Segments fill entire bar (100%), proportional to their values\n- \"cumulative\": Segments sized based on actual values relative to maxAmount",
-        "defaultValue": "proportional"
+        "type": "\"proportional\" | \"cumulative\""
       },
       "legendValueFormat": {
-        "type": "\"percentage\" | \"count\"",
+        "defaultValue": "percentage",
+        "description": "\"percentage\" shows the segment's share of the bar, rounded. \"count\" shows\nthe raw value followed by the item's unit, or the chart's unit if the item\nhas none.",
         "isRequired": false,
-        "description": "Format for legend values\n- \"percentage\": Shows percentage of the item in the bar chart (e.g., \"20%\")\n- \"count\": Shows the count from the data object with the unit defined by the unit prop",
-        "defaultValue": "percentage"
+        "type": "\"count\" | \"percentage\""
       },
       "selectionBehavior": {
-        "type": "\"dim\" | \"hide\"",
+        "defaultValue": "dim",
+        "description": "What a selection does to the unselected segments: fade them to 20% opacity,\nor drop them from the bar and let the rest take the space.",
         "isRequired": false,
-        "description": "Behavior to apply when items are selected\n- \"dim\": Non-selected segments become semi-transparent (20% opacity)\n- \"hide\": Non-selected segments are hidden from the bar chart",
-        "defaultValue": "dim"
+        "type": "\"dim\" | \"hide\""
       },
       "remainingLabel": {
-        "type": "string",
+        "defaultValue": "Remaining",
+        "description": "Name of the grey gap segment in cumulative mode.",
         "isRequired": false,
-        "description": "Label for the remaining/unknown segment in cumulative mode",
-        "defaultValue": "Remaining"
+        "type": "string"
       },
       "remainingUnit": {
-        "type": "string",
+        "defaultValue": "the charts unit",
+        "description": "A unit for the Remaining segment's value alone.",
         "isRequired": false,
-        "description": "Unit to display with the remaining segment value in cumulative mode\nIf not provided, uses the unit from the first data item (if available)"
+        "type": "string"
       },
       "showLegend": {
-        "type": "\"false\" | \"true\"",
+        "defaultValue": true,
+        "description": "Draws the legend below the bar. It is the only place segment names appear,\nand the only part of the chart a keyboard can reach.",
         "isRequired": false,
-        "description": "Whether to show the legend below the chart",
-        "defaultValue": true
+        "type": "boolean"
       },
       "showLegendValues": {
-        "type": "\"false\" | \"true\"",
+        "defaultValue": true,
+        "description": "Shows each item's value beside its name in the legend.",
         "isRequired": false,
-        "description": "Whether to show percentage values in the legend",
-        "defaultValue": true
+        "type": "boolean"
       },
       "title": {
-        "type": "string",
+        "description": "A heading above the bar. It is also what makes room for the badge; with no\ntitle, no badge is drawn.",
         "isRequired": false,
-        "description": "Title to display above the chart"
+        "type": "string"
       },
       "unit": {
-        "type": "string",
+        "description": "The unit appended to counted values, for items that do not carry one of\ntheir own.",
         "isRequired": false,
-        "description": "Global unit to display with values in cumulative mode (e.g., \"GB\", \"datasets\", \"K\")\nIndividual data items can override this with their own unit property\nOnly shown when mode is \"cumulative\""
+        "type": "string"
       },
       "width": {
-        "type": "\"string\" | \"number\"",
+        "defaultValue": "100%",
+        "description": "Any CSS width; a number is read as pixels. It sets the width of the whole\nchart, legend included.",
         "isRequired": false,
-        "description": "Width of the chart - accepts any CSS width value (e.g., \"100%\", \"20vw\", \"300px\", or number for pixels)",
-        "defaultValue": "100%"
+        "type": "string | number"
       },
       "colorGeneratorOptions": {
-        "type": "DiscreteColorGeneratorOptions",
+        "description": "Tunes the generated palette (start hue, rotations, lightness range, gamma).\nItems with their own color are untouched by it.",
         "isRequired": false,
-        "description": "Options for the color generator"
+        "type": "DiscreteColorGeneratorOptions"
+      },
+      "selectedIndices": {
+        "defaultValue": [],
+        "description": "Indices into data that are currently selected. The chart is controlled: it\ndraws this and never changes it.",
+        "isRequired": false,
+        "type": "number[]"
+      },
+      "onSelectionChange": {
+        "description": "Called with the next selection when a segment or legend item is clicked.\nWithout it, clicking selects nothing.",
+        "isRequired": false,
+        "type": "(selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void"
+      },
+      "onSegmentClick": {
+        "description": "Fires on a segment click, alongside any selection change rather than\ninstead of it.",
+        "isRequired": false,
+        "type": "(item: StackedBarChartDataItem, index: number) => void"
+      },
+      "onLegendItemClick": {
+        "description": "The same, for a click on a legend item.",
+        "isRequired": false,
+        "type": "(item: StackedBarChartDataItem, index: number) => void"
+      },
+      "onSegmentMouseEnter": {
+        "description": "Called when the pointer enters a segment. The chart already syncs its own\nhover highlight between bar and legend, so this is for driving something\noutside it.",
+        "isRequired": false,
+        "type": "(item: StackedBarChartDataItem, index: number) => void"
+      },
+      "onSegmentMouseLeave": {
+        "description": "Called when the pointer leaves a segment.",
+        "isRequired": false,
+        "type": "(item: StackedBarChartDataItem, index: number) => void"
+      },
+      "onLegendItemMouseEnter": {
+        "description": "Called when the pointer enters a legend item.",
+        "isRequired": false,
+        "type": "(item: StackedBarChartDataItem, index: number) => void"
+      },
+      "onLegendItemMouseLeave": {
+        "description": "Called when the pointer leaves a legend item.",
+        "isRequired": false,
+        "type": "(item: StackedBarChartDataItem, index: number) => void"
+      },
+      "name": {
+        "defaultValue": "- (required)",
+        "description": "The segment's label in the legend, and the key the animations track it by. Must be unique within the chart.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "value": {
+        "defaultValue": "- (required)",
+        "description": "The quantity the segment stands for.",
+        "isRequired": false,
+        "type": "number"
+      },
+      "color": {
+        "defaultValue": "generated",
+        "description": "Any CSS color. Without it the segment takes a generated palette color, which can shift as categories come and go.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "disabled": {
+        "defaultValue": false,
+        "description": "Takes the segment and its legend item out of every interaction: no hover, no tooltip, no selection.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "tooltip": {
+        "description": "Content for a TooltipTable shown above the segment on hover. Use it for the breakdown behind the number; a segment without it has no tooltip.",
+        "isRequired": false,
+        "type": "TooltipTableContentProps"
       }
     }
   }
-}
+}

package/data/component-props/TableRow.json

@@ -2,41 +2,60 @@
   "TableRow": {
     "props": {
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Grays the row out and stops pointer events inside its CellComponents, so controls in the row cannot be used. Tags and icons in the row are dimmed to match.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "hover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Gives the row a hover background, and is also required for its tooltip to appear. TableHeader sets it to false for the header row.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "rowHeight": {
-        "type": "number",
-        "isRequired": false
+        "description": "Caps the row's height, in pixels.",
+        "isRequired": false,
+        "type": "number"
       },
       "selected": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Gives the row's cells the accent surface used for selection. It is styling only; it sets no ARIA state.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "shouldShowTooltipOnHover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Wraps the row in a Tooltip, but only while hover is also true. On its own it shows nothing: a row tooltip needs tooltipText as well.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "tooltipProps": {
-        "type": "TooltipProps",
-        "isRequired": false
+        "description": "Passed to the Tooltip, and overrides the defaults the row sets (arrow, dark style).",
+        "isRequired": false,
+        "type": "TooltipProps"
       },
       "tooltipSubtitle": {
-        "type": "string",
-        "isRequired": false
+        "description": "A second line below the tooltip's title.",
+        "isRequired": false,
+        "type": "string"
       },
       "tooltipText": {
-        "type": "string",
-        "isRequired": false
+        "description": "The tooltip's title.",
+        "isRequired": false,
+        "type": "string"
       },
       "useDivider": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Draws the 1px divider along the bottom of the row.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "children": {
+        "description": "Required. The row's cells.",
+        "isRequired": false,
+        "type": "React.ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/Tabs.json

@@ -1,18 +1,75 @@
 {
   "Tabs": {
     "props": {
-      "items": {
-        "type": "any",
-        "isRequired": false
-      },
       "sdsSize": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": "large",
+        "description": "The size of the label text on every tab in the group, and the spacing around the group.",
+        "isRequired": false,
+        "type": "\"large\" | \"small\""
       },
       "underlined": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Draws a divider along the full width of the group, below the tabs; the selected tab's indicator sits on top of it.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "selectionFollowsFocus": {
+        "defaultValue": false,
+        "description": "MUI's prop for selecting a tab as soon as the arrow keys reach it, instead of waiting for Space or Enter.",
+        "isRequired": false,
+        "type": "boolean"
+      }
+    }
+  },
+  "Tab": {
+    "props": {
+      "children": {
+        "defaultValue": "- (required)",
+        "description": "This prop isn't supported.\nUse the `component` prop if you need to change the children structure.",
+        "isRequired": false,
+        "type": "null"
+      },
+      "onChange": {
+        "description": "Runs when a tab is selected, with that tab's value. Write it back to value, or the group will keep showing the same tab.",
+        "isRequired": false,
+        "type": "FormEventHandler<HTMLDivElement>"
+      },
+      "aria-label": {
+        "description": "Defines a string value that labels the current element.\n@see aria-labelledby.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "label": {
+        "description": "The label element.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "count": {
+        "description": "A value drawn after the label: a number, a string, or a component. 0 is drawn rather than dropped, and whatever renders joins the tab's accessible name.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "disabled": {
+        "defaultValue": false,
+        "description": "If `true`, the component is disabled.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "id": {
+        "description": "The tab's id, for a panel's aria-labelledby to point at. Not generated for you.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "aria-controls": {
+        "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "selected": {
+        "description": "Set by the group from its value, and used to draw the label in semibold. Not something to pass yourself.",
+        "isRequired": false,
+        "type": "boolean"
       }
     }
   }
-}
+}