@czi-sds/mcp 0.16.0 → 0.17.0

package/data/component-docs/CellBasic.md

@@ -0,0 +1,122 @@
+# CellBasic
+
+## Source Code
+
+The component's source code in the SDS codebase can be found [here](https://github.com/chanzuckerberg/sci-components/blob/main/packages/components/src/core/CellBasic/index.tsx).
+
+## Import
+
+**React TypeScript**
+
+```tsx
+import { CellBasic } from "@czi-sds/components";
+```
+
+## Code examples
+
+### Default CellBasic
+
+This example demonstrates the minimum required props for rendering a CellBasic component.
+
+**Example: DefaultCellBasic**
+
+```tsx
+import { CellBasic } from "@czi-sds/components";
+
+function App() {
+  return (
+    <div className="app">
+      <table>
+        <tbody>
+          <tr>
+            <CellBasic
+              primaryText="Primary Text"
+              secondaryText="Secondary Text"
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default App;
+```
+
+```css
+table {
+  border: dashed 1px #eee;
+}
+```
+
+### CellBasic with Icon and Text Wrap
+
+This example highlights a CellBasic component featuring an SDS icon and lengthy texts for Primary, Secondary, and Tertiary content, all thoughtfully wrapped for optimal presentation.
+
+**Example: CellBasicWithIconAndTextWrap**
+
+```tsx
+import { CellBasic, Icon } from "@czi-sds/components";
+
+function App() {
+  const TableCellStyle = {
+    maxWidth: 160,
+    width: 160,
+  };
+
+  return (
+    <div className="app">
+      <table>
+        <tbody>
+          <tr>
+            <CellBasic
+              primaryText="Primary Text that is longer than expected."
+              secondaryText="Secondary Text that is londer than expected."
+              tertiaryText="Tertiary Text that is lonegrt than expected."
+              icon={<Icon sdsIcon="Bacteria" sdsSize="l" color="yellow" />}
+              style={TableCellStyle}
+              tooltipProps={{
+                placement: "right",
+              }}
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
+
+| Name                             | Type                                            | Default  | Description                                                                                                                                                                                                                  |
+| -------------------------------- | ----------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`                             | `React.ElementType`                             | `"td"`   | The element the cell renders as. Use `"th"` for a row header cell inside `tbody`.                                                                                                                                            |
+| `extraRightPadding`              | `number`                                        | `0`      | Extra pixels of right padding, added only when `horizontalAlign` is `"right"`. Useful for leaving room for a scrollbar or a pinned column edge.                                                                              |
+| `horizontalAlign`                | `"left"` \| `"right"`                           | `"left"` | Horizontal alignment of cell content. There is no `"center"`. Use CellComponent if a cell needs centered content.                                                                                                            |
+| `icon`                           | `React.ReactElement<CustomSVGProps>`            | -        | Places an icon to the left of the cell text. Expects an SDS Icon or another SVG element.                                                                                                                                     |
+| `link`                           | `string`                                        | -        | Wraps the cell content in an anchor pointing here. The text keeps the cell's own color rather than link styling.                                                                                                             |
+| `linkComponent`                  | `React.ElementType`                             | -        | The component the link renders as, for routers that supply their own link (React Router's Link, for example).                                                                                                                |
+| `linkProps`                      | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | -        | Props passed to the anchor rendered by `link`.                                                                                                                                                                               |
+| `iconVerticalAlign`              | `"top"` \| `"center"` \| `"bottom"`             | `"top"`  | Vertical alignment of the icon component.                                                                                                                                                                                    |
+| `primaryText`                    | `string`                                        | -        | Primary text value.                                                                                                                                                                                                          |
+| `primaryTextWrapLineCount`       | `number`                                        | `3`      | Number of text wrap lines for primary text.                                                                                                                                                                                  |
+| `primaryTextComponentSlotBottom` | `ReactNode`                                     | `null`   | 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.                                            |
+| `primaryTextComponentSlotRight`  | `ReactNode`                                     | `null`   | Component slot to the right of primary text                                                                                                                                                                                  |
+| `secondaryText`                  | `string`                                        | -        | Secondary Text.                                                                                                                                                                                                              |
+| `secondaryTextWrapLineCount`     | `number`                                        | `1`      | Number of text wrap lines for secondary text.                                                                                                                                                                                |
+| `tertiaryText`                   | `string`                                        | -        | Tertiary Text.                                                                                                                                                                                                               |
+| `tertiaryTextWrapLineCount`      | `number`                                        | `1`      | Number of text wrap lines for tertiary text.                                                                                                                                                                                 |
+| `shouldShowTooltipOnHover`       | `boolean`                                       | `true`   | 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. |
+| `shouldShowUnderlineOnHover`     | `boolean`                                       | `false`  | Underlines `primaryText` on hover. Inside a PreComposedTable the underline also appears when any cell in the row is hovered.                                                                                                 |
+| `shouldTextWrap`                 | `boolean`                                       | `true`   | When `true`, each text clamps to its wrap line count. When `false`, text stays on one line and truncates with an ellipsis instead.                                                                                           |
+| `tabularNums`                    | `boolean`                                       | `false`  | Renders digits at a fixed width so numbers line up column to column. Worth turning on for any numeric column.                                                                                                                |
+| `tooltipProps`                   | `Partial<TooltipProps>`                         | -        | Passed to the Tooltip, and overrides the defaults the cell sets (title, subtitle, arrow, dark style, no leave delay).                                                                                                        |
+| `verticalAlign`                  | `"top"` \| `"center"` \| `"bottom"`             | `"top"`  | Vertical alignment of the cell content.                                                                                                                                                                                      |
+| `width`                          | `string` \| `number`                            | -        | 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.                                 |
+
+Anything else you pass, such as `colSpan`, `style` or a data attribute, lands on the rendered `td`.

package/data/component-docs/CellComponent.md

@@ -0,0 +1,63 @@
+# CellComponent
+
+## Source Code
+
+The component's source code in the SDS codebase can be found [here](https://github.com/chanzuckerberg/sci-components/blob/main/packages/components/src/core/CellComponent/index.tsx).
+
+## Import
+
+**React TypeScript**
+
+```tsx
+import { CellComponent } from "@czi-sds/components";
+```
+
+## Code examples
+
+### **Default CellComponent**
+
+This example demonstrates the minimum required props for rendering a CellComponent component.
+
+**Example: DefaultCellComponent**
+
+```tsx
+import { CellComponent, InputToggle } from "@czi-sds/components";
+
+function App() {
+  return (
+    <div className="app">
+      <table>
+        <tbody>
+          <tr>
+            <CellComponent>
+              <InputToggle />
+            </CellComponent>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default App;
+```
+
+```css
+table {
+  border: dashed 1px #eee;
+}
+```
+
+## Props
+
+Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
+
+| Name              | Type                                | Default  | Description                                                                                                                                                                                  |
+| ----------------- | ----------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`              | `React.ElementType`                 | `"td"`   | The element the cell renders as.                                                                                                                                                             |
+| `children`        | `React.ReactNode`                   | -        | The cell's content. Unlike CellBasic, which takes text through `primaryText`, this cell renders whatever you put inside it.                                                                  |
+| `horizontalAlign` | `"left"` \| `"center"` \| `"right"` | `"left"` | Specifies the horizontal alignment of the cell content.                                                                                                                                      |
+| `verticalAlign`   | `"top"` \| `"center"` \| `"bottom"` | `"top"`  | Specifies the vertical alignment of the cell content.                                                                                                                                        |
+| `width`           | `string` \| `number`                | -        | 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. |
+
+Anything else you pass, such as `colSpan`, `width`, `onClick` or a data attribute, lands on the rendered `td`. The cell also carries the class name `cell-component`, which TableRow uses to switch off pointer events inside a disabled row.

package/data/component-docs/CellHeader.md

@@ -0,0 +1,128 @@
+# CellHeader
+
+## Source Code
+
+The component's source code in the SDS codebase can be found [here](https://github.com/chanzuckerberg/sci-components/blob/main/packages/components/src/core/CellHeader/index.tsx).
+
+## Import
+
+**React TypeScript**
+
+```tsx
+import { CellHeader } from "@czi-sds/components";
+```
+
+## Code examples
+
+### **Default CellHeader**
+
+This example demonstrates the minimum required props for rendering a CellHeader component.
+
+**Example: DefaultCellHeader**
+
+```tsx
+import { CellHeader } from "@czi-sds/components";
+
+function App() {
+  return (
+    <div className="app">
+      <table>
+        <thead>
+          <tr>
+            <CellHeader>Header</CellHeader>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  );
+}
+
+export default App;
+```
+
+```css
+table {
+  border: dashed 1px #eee;
+}
+```
+
+### **Sortable CellHeader**
+
+A header only looks sortable once `hover` is set: without it the cell draws no chevron and shows no tooltip, whatever the other sorting props say. Sorting itself is yours to wire up through `onClick`, with `active` marking the column being sorted and `direction` choosing which way the chevron points.
+
+**Example: SortableCellHeader**
+
+```tsx
+// `hover` is what makes a header sortable-looking: without it the cell draws no
+// chevron and shows no tooltip, however the other sorting props are set. The
+// three headers below differ only in that, and in which one is `active`.
+
+import { CellHeader } from "@czi-sds/components";
+import { useState } from "react";
+
+type Direction = "asc" | "desc";
+
+function App() {
+  const [sortedBy, setSortedBy] = useState("Gene");
+  const [direction, setDirection] = useState<Direction>("desc");
+
+  function sortBy(column: string) {
+    if (column === sortedBy) {
+      setDirection(direction === "asc" ? "desc" : "asc");
+    } else {
+      setSortedBy(column);
+      setDirection("desc");
+    }
+  }
+
+  return (
+    <div className="app">
+      <table>
+        <thead>
+          <tr>
+            {["Gene", "Organism"].map((column) => (
+              <CellHeader
+                active={column === sortedBy}
+                direction={direction}
+                hover
+                key={column}
+                onClick={() => sortBy(column)}
+                shouldShowTooltipOnHover
+                tooltipText={`Sort by ${column.toLowerCase()}`}
+              >
+                {column}
+              </CellHeader>
+            ))}
+            <CellHeader hideSortIcon>Notes</CellHeader>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
+
+| Name                       | Type                                | Default  | Description                                                                                                                                                                                                                                                                  |
+| -------------------------- | ----------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `active`                   | `boolean`                           | `false`  | Marks this column as the one currently sorted: the label and chevron take the accent color. It does not sort anything on its own.                                                                                                                                            |
+| `as`                       | `React.ElementType`                 | `"th"`   | The element the header cell renders as.                                                                                                                                                                                                                                      |
+| `children`                 | `React.ReactNode`                   | -        | Required. A string or number is wrapped in the header's own text styling; anything else is rendered as given.                                                                                                                                                                |
+| `direction`                | `"asc"` \| `"desc"`                 | `"desc"` | Which chevron to draw: up for `"asc"`, down for `"desc"`. It also sets the icon's `aria-label`. Exported as `CellHeaderDirection`.                                                                                                                                           |
+| `hideSortIcon`             | `boolean`                           | `false`  | Leaves the chevron out for columns that cannot be sorted. An active header keeps its chevron even with this set.                                                                                                                                                             |
+| `horizontalAlign`          | `"left"` \| `"center"` \| `"right"` | `"left"` | Horizontally aligns the label and its chevron.                                                                                                                                                                                                                               |
+| `hover`                    | `boolean`                           | `false`  | 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. |
+| `onClick`                  | `React.MouseEventHandler`           | -        | Where sorting is actually wired up: with TanStack Table, pass `column.getToggleSortingHandler()`.                                                                                                                                                                            |
+| `shouldShowTooltipOnHover` | `boolean`                           | `false`  | Wraps the header in a Tooltip. It only takes effect while `hover` is also `true`.                                                                                                                                                                                            |
+| `shouldTruncate`           | `boolean`                           | `false`  | Keeps a long label on one line and truncates it with an ellipsis instead of wrapping.                                                                                                                                                                                        |
+| `tooltipText`              | `string`                            | `""`     | The tooltip's title.                                                                                                                                                                                                                                                         |
+| `tooltipSubtitle`          | `string`                            | -        | A second line below the tooltip's title.                                                                                                                                                                                                                                     |
+| `width`                    | `string` \| `number`                | -        | 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.                                                                                 |
+| `tooltipProps`             | `Partial<TooltipProps>`             | -        | Passed to the Tooltip, and overrides the defaults the header sets (arrow, top-start placement, dark style).                                                                                                                                                                  |
+
+Anything else you pass, such as `colSpan`, `scope` or a data attribute, lands on the rendered `th`.

package/data/component-docs/ComplexFilter.md

@@ -0,0 +1,294 @@
+# ComplexFilter
+
+> **ComplexFilter is a Dropdown that shows what it filtered.** It is the Dropdown arrangement with one addition: each selection is listed beneath the trigger as a tag that can be removed on its own, so an applied filter stays visible next to the results it narrowed. Use plain Dropdown when the selection does not need to be shown that way, and see the Dropdowns overview for the rest of the family.
+
+## Source Code
+
+The component's source code in the SDS codebase can be found [here](https://github.com/chanzuckerberg/sci-components/blob/main/packages/components/src/core/ComplexFilter/index.tsx).
+
+## Import
+
+**React TypeScript**
+
+```tsx
+import { ComplexFilter } from "@czi-sds/components";
+```
+
+## Code Examples
+
+### Default ComplexFilter
+
+This examples demonstrates the minimum props needed to render a ComplexFilter.
+
+**Example: DefaultComplexFilter**
+
+```tsx
+import { ComplexFilter, DefaultAutocompleteOption } from "@czi-sds/components";
+
+const MENU_ITEMS: DefaultAutocompleteOption[] = [
+  {
+    name: "Fruit: Apple",
+    section: "Fruit",
+    count: 10,
+  },
+  {
+    name: "Fruit: Cherry",
+    section: "Fruit",
+    count: 150,
+  },
+  {
+    name: "Fruit: Orange",
+    section: "Fruit",
+    count: 15,
+  },
+  {
+    name: "Vegetable: Carrot",
+    section: "Vegetable",
+    count: 34,
+  },
+  {
+    name: "Vegetable: Kale",
+    section: "Vegetable",
+  },
+  {
+    name: "Vegetable: Lettuce",
+    section: "Vegetable",
+  },
+];
+
+function App() {
+  return (
+    <div className="app">
+      <ComplexFilter
+        label="Filter Label"
+        onChange={() => {}}
+        options={MENU_ITEMS}
+        InputDropdownProps={{
+          sdsStyle: "square",
+        }}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Multi select ComplexFilter with Search
+
+This example showcases a ComplexFilter component featuring InputSearch for filtering menu items. Users have the flexibility to select multiple options to refine their selections.
+
+**Example: MultiSelectComplexFilterWithSearch**
+
+```tsx
+import { ComplexFilter, DefaultAutocompleteOption } from "@czi-sds/components";
+
+const MENU_ITEMS: DefaultAutocompleteOption[] = [
+  {
+    name: "Fruit: Apple",
+    section: "Fruit",
+    count: 10,
+  },
+  {
+    name: "Fruit: Cherry",
+    section: "Fruit",
+    count: 150,
+  },
+  {
+    name: "Fruit: Orange",
+    section: "Fruit",
+    count: 15,
+  },
+  {
+    name: "Vegetable: Carrot",
+    section: "Vegetable",
+    count: 34,
+  },
+  {
+    name: "Vegetable: Kale",
+    section: "Vegetable",
+  },
+  {
+    name: "Vegetable: Lettuce",
+    section: "Vegetable",
+  },
+];
+
+function App() {
+  return (
+    <div className="app">
+      <ComplexFilter
+        label="Filter Label"
+        onChange={() => {}}
+        options={MENU_ITEMS}
+        DropdownMenuProps={{
+          groupBy: (option: DefaultAutocompleteOption) =>
+            option.section as string,
+        }}
+        InputDropdownProps={{
+          sdsStyle: "square",
+        }}
+        multiple
+        search
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### ComplexFilter with realtime selection changes
+
+This example showcases the functionality that enables the dropdown selections to be instantly reflected in the tags in real-time. This is achieved by utilizing the `isTriggerChangeOnOptionClick` prop.
+
+**Example: ComplexFilterWithRealtimeSelectionChanges**
+
+```tsx
+import { ComplexFilter, DefaultAutocompleteOption } from "@czi-sds/components";
+
+const MENU_ITEMS: DefaultAutocompleteOption[] = [
+  {
+    name: "Fruit: Apple",
+    section: "Fruit",
+    count: 10,
+  },
+  {
+    name: "Fruit: Cherry",
+    section: "Fruit",
+    count: 150,
+  },
+  {
+    name: "Fruit: Orange",
+    section: "Fruit",
+    count: 15,
+  },
+  {
+    name: "Vegetable: Carrot",
+    section: "Vegetable",
+    count: 34,
+  },
+  {
+    name: "Vegetable: Kale",
+    section: "Vegetable",
+  },
+  {
+    name: "Vegetable: Lettuce",
+    section: "Vegetable",
+  },
+];
+
+function App() {
+  return (
+    <div className="app">
+      <ComplexFilter
+        label="Filter Label"
+        onChange={() => {}}
+        options={MENU_ITEMS}
+        DropdownMenuProps={{
+          groupBy: (option: DefaultAutocompleteOption) =>
+            option.section as string,
+        }}
+        InputDropdownProps={{
+          sdsStyle: "square",
+          width: "280px",
+        }}
+        multiple
+        search
+        isTriggerChangeOnOptionClick
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### ComplexFilter that closes on blur
+
+A single select puts its menu away as soon as something is chosen, but a multi select has no such moment and holds the menu open even when a click lands outside it. `closeOnBlur` gives it one: a click anywhere else closes the menu, keeping whatever had been selected by then. The prop is ignored while the Apply and Cancel buttons are showing, those being that menu's own way out, so the filter here uses `isTriggerChangeOnOptionClick` instead and applies each selection as it is made.
+
+**Example: ComplexFilterThatClosesOnBlur**
+
+```tsx
+import { ComplexFilter, DefaultAutocompleteOption } from "@czi-sds/components";
+
+const MENU_ITEMS: DefaultAutocompleteOption[] = [
+  {
+    name: "Fruit: Apple",
+    section: "Fruit",
+    count: 10,
+  },
+  {
+    name: "Fruit: Cherry",
+    section: "Fruit",
+    count: 150,
+  },
+  {
+    name: "Fruit: Orange",
+    section: "Fruit",
+    count: 15,
+  },
+  {
+    name: "Vegetable: Carrot",
+    section: "Vegetable",
+    count: 34,
+  },
+  {
+    name: "Vegetable: Kale",
+    section: "Vegetable",
+  },
+  {
+    name: "Vegetable: Lettuce",
+    section: "Vegetable",
+  },
+];
+
+function App() {
+  return (
+    <div className="app">
+      <ComplexFilter
+        label="Filter Label"
+        onChange={() => {}}
+        options={MENU_ITEMS}
+        InputDropdownProps={{
+          sdsStyle: "square",
+        }}
+        multiple
+        isTriggerChangeOnOptionClick
+        closeOnBlur
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## SDS vs MUI
+
+The ComplexFilter is not directly based on any MUI component, but it does use the SDS Dropdown component, which in turn is ultimately based on [MUI's Autocomplete component](https://mui.com/material-ui/react-autocomplete/). As such, props that are available to either SDS's Dropdown and / or MUI's Autocomplete can be passed to ComplexFilter as such:
+
+- `DropdownMenuProps`: use this prop to pass MUIAutocomplete-specific props to ComplexFilter
+
+- `InputDropdownProps`: use this prop to pass SDS InputDropdown-specific props to ComplexFilter
+
+## Props
+
+Any custom SDS props and MUI props required for implementation are found in the table below. See the MUI documentation for additional optional props.
+
+| Name                           | Type                                                                          | Default                   | Description                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------ | ----------------------------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `buttonPosition`               | `"left" \| "right"`                                                           | `"right"`                 | Which side of the menu footer the Apply and Cancel buttons sit on. It only applies alongside `buttons`.                                                                                                                                                                                                                               |
+| `buttons`                      | `boolean`                                                                     | `false`                   | Puts Apply and Cancel buttons at the foot of the menu, so selections take effect only once Apply is pressed.                                                                                                                                                                                                                          |
+| `closeOnBlur`                  | `boolean`                                                                     | `false`                   | Closes the filter when a click lands outside it, which it otherwise does not do. It is ignored while the Apply and Cancel buttons are showing, which is a multi select that has not been given `isTriggerChangeOnOptionClick`. The default follows `buttons`, so a filter given `buttons={false}` closes on blur without being asked. |
+| `isTriggerChangeOnOptionClick` | `boolean`                                                                     | `false`                   | Determines whether changes are triggered in real-time upon clicking an option                                                                                                                                                                                                                                                         |
+| `keepSearchOnSelect`           | `boolean`                                                                     |                           | Maintains a search input when a user selects an option (only if multiple selections are allowed via the `multiple` prop; otherwise the dropdown closes upon selection)                                                                                                                                                                |
+| `label`                        | `ReactNode`                                                                   | `""`                      | Sets the label of filter, shown both when closed and open                                                                                                                                                                                                                                                                             |
+| `multiple`                     | `boolean`                                                                     | `false`                   | Defines whether multiple selections or can be made from the filter simultaneously or only one                                                                                                                                                                                                                                         |
+| `onChange`                     | `function`                                                                    | -                         | Function to set what happens when a new value is set via the filter                                                                                                                                                                                                                                                                   |
+| `options`                      | `AutocompleteSingleColumnOption<T>[]` \| `AutocompleteMultiColumnOption<T>[]` | -                         | The items to filter by. Passing the multi-column shape lays the menu out in named columns instead of one list.                                                                                                                                                                                                                        |
+| `search`                       | `boolean`                                                                     | `false`                   | Provides a search bar at the top of the filter from which users can narrow the list of menu items                                                                                                                                                                                                                                     |
+| `value`                        | `T \| T[] \| null`                                                            | -                         | The selected option or options. Leaving it out lets the filter keep track of the selection itself, and passing it makes the filter controlled: the tags and menu then only change when a new value comes back in.                                                                                                                     |
+| `DropdownMenuProps`            | `Partial<DropdownMenuProps>`                                                  | -                         | Passed straight to the menu, and with it to MUI's Autocomplete underneath.                                                                                                                                                                                                                                                            |
+| `InputDropdownProps`           | `Partial<InputDropdownProps>`                                                 | `{ sdsStyle: "minimal" }` | Passed straight to the InputDropdown that opens the filter. Note that supplying it replaces the default, so a filter that should stay minimal needs `sdsStyle` passed again alongside whatever else it sets.                                                                                                                          |