Audit: MUI component & prop validation for StrataKit

[FlyersPh9]

We need to review and validate all MUI components and their props against the StrataKit design language before our 1.0.0 release.

🎯 Objectives

• Determine which MUI props and values StrataKit will officially support.
• Verify that StrataKit's custom styles and overrides are working as expected.

Note

If we remove a prop now, it can always be reintroduced in a future minor update.

💬 Discussion Guidelines

To keep this audit organized, please follow these rules:

• One component per thread: Create a single top-level comment for each MUI component (and link it to the reference list below).
• Nest your feedback: Keep all discussions, edge cases, and prop reviews nested as replies under that component's specific thread.
• Skip common props: Do not list or review global props like id, sx, slot, slotProps, className, classes, or children.
• For each component, include links to MUI API reference and StrataKit docs.

Material UI components reference list

Source: MUI All Components

Inputs (13 components)

• Autocomplete
• Button
  • IconButton
• Button Group
• Checkbox
• Floating Action Button
• Radio Group
• Rating
• Select
  • NativeSelect
• Slider
• Switch
• Text Field
• Transfer List - Not an actual component but examples combing other components
• Toggle Button

Data display (10 components)

• Avatar
• AvatarGroup
• Badge
• Chip
• Divider
• Icons includes Icon and SvgIcon and @mui/icons-material
• List
• Table
• Tooltip
• Typography

Feedback (6 components)

• Alert
• Backdrop
• CircularProgress
• Dialog
• LinearProgress
• Skeleton
• Snackbar

Surface (4 components)

• Accordion
• App Bar
• Card
• Paper

Navigation (9 components)

• Bottom Navigation
• Breadcrumbs
• Drawer
• Link
• Menu
• Pagination
• Speed Dial
• Stepper
• MobileStepper
• Tabs

Layout (5 components)

• Box - only has common props
• Container
• Grid
• Stack
• Image List

Lab / MUI-X

• Masonry
• Timeline
• DataGrid
• Date and Time Pickers
• Charts
• TreeView

Utils (10 utilities)

• Click-Away Listener
• CSS Baseline
• Modal
• No SSR
• Popover
• Popper
• Portal
• Textarea Autosize
• Transitions
• useMediaQuery

[FlyersPh9]

Tabs

• MUI Tabs API
• StrataKit Tabs documentation

Prop name	Comment
allowScrollButtonsMobile	Removed, handled automatically via CSS in #1530.
centered	Validated.
indicatorColor	Removed, handled by textColor in #1503.
orientation	Validated.
scrollButtons	Removed, handled automatically via CSS in #1530.
selectionFollowsFocus	Validated.
textColor	Removed inherit value in #1503.
variant	Validated.
visibleScrollbar	Validated but requires work #1577 (reply in thread)

[mayank99]

If centered works, I would keep it.

visibleScrollbar is useful (and preferred over the scroll buttons that normally come with variant="scrollable") exactly for the vertical tabs use case. I thought we already support vertical tabs.

[GerardasB]

Agreed about centered, might be useful for narrow screens (similar use-case to full-width CTA buttons).

Seems like visibleScrollbar is not working currently w/o variant="scrollable", I've tried by editing Tabs.default.tsx
I vote for keeping both and adding a TODO for visibleScrollbar

		<Box className={styles.container} style={{ display: "flex", height: 200 }}>
			<Tabs
				value={value}
				onChange={(_, value) => setValue(value)}
				orientation="vertical"
				variant="scrollable"
				visibleScrollbar
			>

[FlyersPh9]

I thought we already support vertical tabs.

I thought you were proposing something else? List perhaps?

orientation="vertical" does require a little additional work on the consumer side to get layout to work correctly. Screenshot shows the tabs going full width and the content displaying underneath.

[mayank99]

NavigationList is the proposed candidate for replacing vertical Tabs, but we could still leave vertical Tabs as a supported option. They do behave differently, even if they look visually similar.

The additional layout work on consumer end is totally expected, since the tabpanel content is not part of the component.

[FlyersPh9]

Ok, updated the table for orientation to Validated.

[FlyersPh9]

Slider

• MUI Slider API
• StrataKit Slider documentation

Prop name	Comment
color	Removed in #1176.
defaultValue	Validated.
disableSwap	Validated.
marks	Validated.
max	Validated.
min	Validated.
orientation	Validated.
scale	Validated.
shiftStep	Validated.
size	Validated.
step	Validated.
track	Validated.

[FlyersPh9]

Switch

• MUI Switch API
• StrataKit Switch documentation

Prop name	Comment
checked	Validated.
checkedIcon	Removed in #1612
color	Removed in #1183.
defaultChecked	Validated.
disableRipple	Removed in #1612.
edge	Validated.
icon	Removed in #1612.
required	Validated.
size	Validated.

[angrycat9000]

disableRipple should also be deprecated since we turn that off globally. Don't think it makes sense to turn it on for an individual instance.

[FlyersPh9]

@angrycat9000, prior to you joining the team we had discussed some sort of symbol (like the checkmark) to give an additional affordance as to on / off state to comply with WCAG's Use Of Color & the position of the thumb (is left position on or off?).

Personally I am a fan of Apple's on / off symbols:

The questions I have are:

1. Should the symbol be optionally displayed by the consumer?
2. Should the symbol be customizable by the consumer?

[mayank99]

I'd prefer we unconditionally display a symbol and remove/deprecate the props.

I like the checkmark displayed inside the thumb in M3 Switch.

[angrycat9000]

The questions I have are:

1. Should the symbol be optionally displayed by the consumer?
2. Should the symbol be customizable by the consumer?

I would say no unless we have a use case to support it. If the symbols are shown to enhance the accessiblity why would we let consumers make the control less accessible (and also now have two or more variations of the same control in their app)

[FlyersPh9]

After our team meeting I've created #1612 to remove the remaining props. Updated the table.

[angrycat9000]

AutoComplete

MUI AutoComplete API
StrataKit Documentation

Prop Name	Comment
options	Valid - core use
renderInput	Valid - used in examples
autoComplete	Valid - interaction change no visual impact
autoHighlight	Valid - interaction change no visual impact
autoSelect	Valid - interaction change no visual impact
blurOnSelect	Valid - interaction change no visual impact
clearIcon	Deprecate - Figma shows X not icon slot. Intent is not to allow customization
clearOnBlur	Valid - interaction change
clearOnEscape	Valid - interaction change
clearText	Valid - translation
closeText	Valid - translation
defaultValue	Valid - core use
disableClearable	Valid - controls if user can remove exising value
disableCloseOnSelect	Valid - interaction change no visual impact
disabled	Valid - core use
disabledItemsFocusable	Valid - interaction change no visual impact
disableListWrap	Valid - interaction change no visual impact
disablePortal	Valid - DOM element placement
filterOptions	Valid - no visual impact, just limiting options shown
filterSelectedOptions	Valid - no visual impact, just limiting options shown
forcePopupIcon	Valid - always show the popup icon even in free solo mode
freeSolo	Valid - interaction change. Though it does remove the drop down arrow
fullWidth	Valid
getLimitTagsText	Valid - translation
getOptionDisabled	Valid - option formatting
getOptionKey	Valid - no visual impact
getOptionLabel	Valid - option formatting
groupBy	Valid - allows grouping elements with non selectable headers. Not
handleHomeEndKeys	Valid - interaction change with no visual impact
includeInputInList	Valid - interaction change with no visual impact
inputValue	Valid - core use
isOptionEqualToValue	Valid
limitTags	Valid - limited visual change that just puts a +N instead of trying to render all selected items
loading	Valid - needed for async loading
loadingText	Valid translation
multiple	Valid - core use and in examples
noOptionsText	Valid - translation
onChange	Valid - core use
onClose	Valid - state
onHighlightChange	Valid - state
onInputChange	Valid - core use
onOpen	Valid - state
open	Valid - controlling state
openOnFocus	Valid - interaction change not affecting visual
openText	Valid - translation
popupIcon	Deprecate - changing this may make it look not like a drop down.
readOnly	Valid - core use
renderGroup	Valid - needed if you want to customize the appearance of the group headers to be something other than text.
renderOption	Valid - needed if you want to customize the appearance of the item in the drop down to be something other than plain text. eg. add an avatar or other icon. While possible to break the visual styling seems more useful than not
renderValue	Valid - needed if you want to customize the appearance of the selected items shown when the drop down is closed. While possible to break the visual styling it seems like there may be legitimate uses like adding avatars or icons
resetHighlightOnMouseLeave	Valid - interaction change with no visual impact
selectOnFocus	Valid - interaction change no visual impact
size	Valid - in examples
value	Valid - core use

[mayank99]

Is forcePopupIcon valid or not?

[angrycat9000]

Probably valid. I was up undecided. I'll update to mark it valid.

[GerardasB]

Seems like forcePopupIcon is only meaningful due to https://mui.com/material-ui/react-autocomplete/#free-solo
I'd say if any value is allowed in the input, popup icon should not be displayed (which is the current behavior) - hence we can deprecate forcePopupIcon.

[FlyersPh9]

Avatar

• MUI Avatar API
• StrataKit Avatar documentation

Prop name	Comment
alt	Valid - alternative text content
sizes	Valid - image sizes for srcset
src	Valid - provide content
srcSet	Valid - provide content
variant	Removed in #1422.

[angrycat9000]

Updated this with some props that were missing.

[FlyersPh9]

AvatarGroup

• MUI AvatarGroup API
• StrataKit AvatarGroup documentation

Prop name	Comment
max	Validated.
renderSurplus	Validated.
spacing	Validated.
total	Validated.
variant	Removed in #1422.

[angrycat9000]

Divider

MUI Divider API
StrataKit Divider Docs

Prop Name	Comment
absolute	Valid - convinence prop for positioning. Can also be done with sx
children	Valid - updated in #1642 to adjust default role to presentation if children are present so they are read
flexItem	Valid - helps with sizing in flex containers
orientation	Valid - in examples already
textAlign	Valid - used with children
variant	Valid - fullWidth is default, middle is used for toolbars. inset is used when there is a leading icon

[angrycat9000]

Can you explain why you think the content would not be read out?

The MUI documentation mentions having to adjust the role to avoid it being bypassed.

I tested with NVDA and confirmed that Before <Divider>and</Divider> After reads as "before seperator after" omitting the "and"

[angrycat9000]

Discussed in accessibility call. Decision was to keep children, but remove role=seperator in that case. Also add documentation explaining this role change

[angrycat9000]

Removed component from table since it is considered a common prop

[mayank99]

children prop fixed in #1642.

[angrycat9000]

@FlyersPh9 @mayank99 can you give a thumbs up so we can check this off as done if there the API looks good. Thanks

[GerardasB]

Toggle Button

MUI ToggleButton API
StrataKit ToggleButton Docs

Inherited props: ButtonBase props

Prop Name	Comment
LinkComponent	Removed in #1332. render prop should be used instead. Inherited from ButtonBase.
value	Valid - used to identify the button
color	Adjust - omit color values to align with Button
disableFocusRipple	Deprecate - ripple is undesirable
disableRipple	Deprecate - ripple is undesirable
fullWidth	Deprecate - only CTA full-width buttons make sense in narrow layouts.
selected	Valid - used for active state
size	Valid - used in examples

---

Toggle Button Group

MUI ToggleButtonGroup API

Prop Name	Comment
color	Adjust - omit color values to align with ToggleButton
disabled	Valid
exclusive	Valid
fullWidth	Valid - used for layout purposes
onChange	Valid
orientation	Valid
size	Valid

[angrycat9000]

Alert

MUI Alert API
StrataKit Documentation

Inherits from Paper. Same as Paper where only elevation is allowed.

Prop Name	Comment
action	Valid - may need update since StrataKit appears to place them at the bottom where MUI places at the right
closeText	Valid - translation
color	Deprecate - rely on severity to choose coloring
icon	Valid
iconMapping	Valid
onClose	Valid - state managemet
role	Updated - we default to group but can be changed to alert. Note that this needs to be because setting role='alert' does not work. #1615 fixes this. Changed default in #1388
serverity	Valid - main way to control the styling
variant	Updated - removed "standard" . The default variant is now "outlined".

[angrycat9000]

Talked with Adam and Figma allows swapping icon in alert so the icon and iconMapping values to support this in MUI should be allowed

[mayank99]

icon can be used to swap the icons, so I wonder if iconMapping is truly necessary. But we can keep it if it already works.

[mayank99]

This is missing Paper props.

[angrycat9000]

Update with link to paper and notes

[angrycat9000]

Grouping all the Table related components togethor for clarity. TableContainer, TableFooter, TableBody and TableHead have only common props.

Omitted TablePagination and TablePaginationActions... might fit better under Pagination.

Table

StrataKit Table Documentation
MUI Table API

Prop	Comment
padding	Deprecate - currently doesn't have much of an effect. "none" and "default" are top/bottom:8, left:16, right:12. "checkbox" is top/bottom:8 left/right: 16 and it centers the content. Figma has top/bottom: 8 left/right:16 . Figma appears to use consist padding for table cells regardless of checkbox
size	Valid - we use size=small in examples
stickyHeader	Valid

TableRow

Prop	Comment
hover	Valid - changed to default to true
selected	Valid - used in examples

TableCell

Prop	Comment
align	Valid - conviences for content alignment
padding	Deprecate - same as Table.padding
scope	Valid - needed for row headers
size	Deprecate - currently no change in visuals based on setting this. Doesn't really make sense to have a table with most items set to medium but one cell set to small
sortDirection	Valid - needed for sorted tables and in example
variant	Valid - sets if it is header body or footer. Needed for row headers

TableSortLabel

MUI TableSortLabel API

Prop	Comment
active	Valid - basically controll the visiblity of the sort
direction	Valid - needed for sortable tables
hideSortIcon	Deprecate - Controls if the sort icon appears when hovering over an unsorted column in MUI. Currently in #1562 it has no effect. Not sure if setting this to false has any value, so deprecate instead of fixing the bug
IconComponent	Deprecate - only one set of sorting icons , and currently broken in #1562 as that overrides the slot component which takes priority

[GerardasB]

Looks good, other than size of TableCell - would it be useful to "increase focus/attention" for an entire row or column?

[FlyersPh9]

Badge

• MUI Badge API
• StrataKit Badge documentation

Prop name	Comment
anchorOrigin	Validated.
badgeContent	Validated.
color	Validated. - types need to be updated and docs added for "primary" - #1650
invisible	Validated.
max	Validated.
overlap	Validated.
showZero	Validated.
variant	Validated.

[angrycat9000]

Added note on color. Color section in docs omits "primary" types are not modified to reflect that "default" has been removed.

[mayank99]

Another note: the intent was to not support the "primary" color for Badge, because it can be confused with a call-to-action Button or a selected Chip.

Types and docs should be updated to remove "primary". Edit: Maybe just the docs, since "primary" might be valid for non-inline Badge. #1576 (comment)

[angrycat9000]

Opened #1650

[FlyersPh9]

CircularProgress

• MUI CircularProgress API
• StrataKit Progress documentation

Prop name	Comment
color	Removed "info" & "inherit" in #1663.
disableShrink	Deprecated in #1663.
enableTrackSlot	Validated. Defaults to true in #1594.
max	Validated.
min	Validated.
size	Validated but want to change so sizes are pre-defined.
thickness	Deprecated in #1663.
value	Validated.
variant	Validated.

[angrycat9000]

Same comment as LinearProgress about removing "inherit" from color but keeping "primary" and "secondary"

[FlyersPh9]

My vote:

color value	Status
inherit	remove
primary	keep
secondary	keep
error	keep
info	remove
success	keep
warning	leaning towards remove?

[mayank99]

If color="success" and "color="error" are valid, I would think color="warning" could also be valid (e.g. "Completed with some issues"). iTwinUI ProgressLinear also supports it, fwiw.

Agreed with removing color="inherit" and color="info".

[GerardasB]

Agreed with above:

• remove inherit and info from color.
• deprecate disableShrink, thickness, enableTrackSlot

[FlyersPh9]

#1663 opened to handle all remaining props + prop values except size. Updated table.

[FlyersPh9]

LinearProgress

• MUI LinearProgress API
• StrataKit Progress documentation

Prop name	Comment
color	Removed "info" & "inherit" in #1673.
max	Validated.
min	Validated.
value	Validated.
valueBuffer	Validated.
variant	Validated.

[angrycat9000]

Does - mean deprecated?

[angrycat9000]

Talked with Jon and "-" meant unsure.

Would remove color="inherit" as an option as this allows making the spinner whatever the font color is. "primary" and "secondary" seem reasonable options

[mayank99]

color should probably support similar values for both LinearProgress and CircularProgress.

[FlyersPh9]

Submitted #1673 in draft, updated table in this thread, updating the root discussion table as completed.

[angrycat9000]

Skeleton

MUI Skeleton API
StrataKit Documentation

Prop	Comment
animation	Valid - No animation specified by design and both "wave" and "pulse" work visually. Also false can be used to disable animation
height	Valid - used for setting size if not using sample content
variant	Valid - already in our docs
width	Valid - used for setting size if not using sample content

[angrycat9000]

Icon

MUI Icon API
StrataKit Icon documentation

Prop	Comment
baseClassName	Valid - needed if you are using custom css class for the icon font. No visual effect
color	? - May want to remove 'action' 'disabled' 'primary' 'secondary' variants or deprecate this entirely.
fontSize	Update - MUI supports: small, medium, large, and inhert. Strata has regular and large. Change to "medium", "large" to match Strata more closely

SvgIcon

This component should be deprecated. The StrataKit documentation for Icon explicitly says not to use this.

PR to deprecate SvgIcon

Material Icons aka @mui/icons-material

These are the standard material icons exported as React components using SvgIcon. Bit of a conundrum since we say not to use SvgIcon....

[mayank99]

If MUI SvgIcon is being deprecated, I would also deprecate MUI Icon. Nobody should be using font icons in 2026.

[GerardasB]

None of MUI icons should be used, so we can deprecate Icon as well - although it still makes sense to add internal examples and maybe some overrides to ensure some consistency IF any are used.

[angrycat9000]

I was hesitant to deprecate Icon since it was used for icon fonts and we don't have an alternative in StrataKit. While we would prefer StrataKit icons I didn't want to block app teams from using other icon sources if that is what worked for them.

[mayank99]

Deprecating MUI Icon seems like a no-brainer since StrataKit has its own Icon. Preventing confusion/questions around which one to import.

But also, as I said above: nobody should be using font icons in 2026. It was already considered bad practice 10 years ago. You'll find plenty of articles written on the topic, and it's even heavily discouraged in MUI's own docs.

I doubt that any StrataKit consumers are using @mui/icons-material or the Material Icons font. Before StrataKit, there were only one or two teams (that we know of) within the company that were using MUI at all. Even if they are relying on these font icons, this deprecation note doesn't break anything for them.

[angrycat9000]

Stepper

MUI Stepper API
StrataKtit Stepper Documentation

Prop	Comment
activeStep	Valid
alternativeLabel
connector	Deprecate
nonLinear	allows the user to jump to steps out of order. Otherwise futures steps are disabled. Though it also does not show previous items as completed...
orientation

Step

MUI Step API

Prop	Comment
active	Valid
completed	Valid
disabled	Valid
expanded	Valid - control sif StepContent is visible
index
last

StepButton

MUI StepButton API

Also inherits from ButtonBase

Prop	Comment
icon	Deprecate
optional	Valid - used in example

StepConnector

MUI StepConnector API

Only common props

StepContent

MUI StepConnector API

Prop	Comment
transitionDuration	Valid - can set to 0 for testing

StepIcon

MUI StepIcon API

Deprecate - reworked in #1363 so don't use the default
Not sure if we expect consumers to use this. Default implementation for icon in Stepper

Prop	Comment
active
complete
error
icon

StepLabel

MUI StepLabel API

Prop	Comment
error	Valid - correctly shows error icon
icon	Deprecate doesn't respect the active/current/future states and renders the same for all.
optional	Valid - shown in example

[mayank99]

Could deprecate StepIcon and related APIs, since Stepper icon implementation was changed in #1363.

[angrycat9000]

deprecated StepIcon

[angrycat9000]

MobileStepper

MUI MobileStepper API
StrataKit MobileStepper Documentation (under Stepper)

Prop	Comment
steps	Valid
activeStep	Valid
backButton	Valid
nextButton	Valid
position	Broken not working in examples because it uses position: fixed.
variant	Valid - Figma shows all 3

[angrycat9000]

Grid

MUI Grid API
Not listed in StrataKit documentation

This is basically a flexbox based implementation for a grid layout. It doesn't add any visual pixels, just provides a way to put things in a grid structure.

Prop	Comment
columns	Valid
columnSpacing	Valid
container	Valid
direction	Valid
offset	Valid
rowSpacing	Valid
spacing	Update - when providing a number this uses MUI units instead of StrataKit . Probably need to customize the whole theme https://mui.com/material-ui/customization/spacing/
size	Valid - this is a [1-12] number to determine the the amount of space an item takes up on a row. Similar to Boostrap
wrap	Valid

[angrycat9000]

ImageList

MUI ImageList API
Not listed in StrataKit documentation
Not in Figma

Prop	Comment
cols	Valid
gap	Valid
rowHeight	Valid - in px
variant	Valid - controls how images are laid out

ImageListItem

MUI ImageListItem API

Prop	Comment
cols	Valid - control size of image
rows	Valid - control size of image

ImageListItemBar

MUI ImageListItemBar API

Prop	Comment
actionIcon	broken - needs work with contrast.
actionPosition	Valid
position	Valid
title	Valid
subtitle	Vaild

[angrycat9000]

Stack

MUI Stack API
Stack is not included in the StrataKit documentation

This is Material's flexbox. It doesn't add any visual pixels, just used for spacing and alignment.

Prop	Comment
direction	Valid
divider	Valid - user must supply element to use as divider
spacing	Update - Using MUIs units instead of StrataKit - probably need to do https://mui.com/material-ui/customization/spacing/
useFlexGap	Update - make this true by default and deprecate . flexbox gap support is good now

[mayank99]

Should we make useFlexGap default to true? By default it uses margins, which is a bit odd.

[angrycat9000]

That makes sense. Based on the documentation it seems like it was left in for targeting older browsers. We are using CSS that was added later, so I would expect support for it in everything we are targeting.

[mayank99]

I wouldn't deprecate it though. Margins still work and there could be cases where it's preferred over flexbox (e.g. space between several paragraphs of text).

[angrycat9000]

Marked it to just update

[GerardasB]

Native Select

MUI NativeSelect API
StrataKit NativeSelect Docs

Inherited: Input props

Prop Name	Comment
IconComponent	Valid
input	Valid
inputProps	Valid
onChange	Valid
value	Valid
variant	Deprecate - align with Select; only "outlined" is supported

Input

MUI Input API

Inherited: InputBase props

Prop Name	Comment
autoComplete	Valid - browser feature
autoFocus	Valid - focus behavior
color	Deprecate - omit all colors except "primary"
defaultValue	Valid - for non-controlled state
disabled	Valid
disableUnderline	Adjust - change default to true and deprecate
endAdornment	Valid
error	Valid
fullWidth	Valid
inputComponent	Valid
inputProps	Valid
inputRef	Valid
margin	Valid - similar to Divider and TextField. Margins might need adjustment
maxRows	Broken - need to adjust calc
minRows	Broken - need to adjust calc
multiline	Valid
name	Valid
onChange	Valid
placeholder	Valid
readOnly	Valid
required	Valid
rows	Broken - need to adjust calc
startAdornment	Valid
type	Valid
value	Valid - for controlled state

Input Base

MUI InputBase API

Prop Name	Comment
autoComplete	Valid - browser feature
autoFocus	Valid - focus behavior
color	Deprecate - omit all colors except "primary"
defaultValue	Valid - for non-controlled state
disabled	Valid
disableInjectingGlobalStyles	Deprecate? - if needed, can this be done up the element tree e.g. Theme?
endAdornment	Valid
error	Valid
fullWidth	Valid
inputComponent	Valid
inputProps	Valid
inputRef	Valid
margin	Valid - similar to Divider and TextField. Margins might need adjustment
maxRows	Broken? - need to adjust calc
minRows	Broken? - need to adjust calc
multiline	Valid
name	Valid
onBlur	Valid
onChange	Valid
onInvalid	Valid
placeholder	Valid
readOnly	Valid
required	Valid
rows	Broken? - need to adjust calc
size	Valid - same as TextField
startAdornment	Valid
type	Valid
value	Valid

[angrycat9000]

Speed Dial

MUI SpeedDial API
StrataKit Speed Dial documentation

Prop	Comment
ariaLabel	Vaid - required by component
direction	Valid
FabProps
hidden
icon	Valid - used in example
onClose	Valid - state
onOpen	Valid -state
open	Valid - state
openIcon	Valid
transitionDuration	Valid - set to 0 for testing

SpeedDialAction

MUI Speed Dial Action API

Also inherits from ToolTip

Prop	Comment
delay	Deprecate Broken and may just be for SpeedDial use only. I wasn't able to get to have any effect
icon	Valid
id	Valid
open	DeprecateBroken / doesn't have any effect. Appears to be for SpeedDialUse only.

SpeedDialIcon

MUI SpeedDialIcon API

Prop	Comment
icon	Valid
openIcon	Valid

ToolTip

See existing ToolTip API comments. Only changes listed below

Prop	Comment
followCursor	Deprecate doesn't make sense for this use case

[angrycat9000]

Masonary

MUI Masonary API
Not documented in StrataKit

This is also from MUI-X

Prop	Comment
columns	Valid - controls display
defaultColumns	Valid - this is used for SSR to provide placeholder sizing
default Height	Valid - this is used for SSR to provide placeholder sizing
defaultSpacing	Valid - this is used for SSR to provide placeholder sizing and only accepts a single value where spacing can be responsive
sequential	Valid - controls ordering of how children are added to columns

[mayank99]

This component comes from @mui/lab, so I don't think it's relevant for @stratakit/mui at this point.

[angrycat9000]

Timeline

MUI Timeline API
Not documented in StrataKit

Prop	Comment
position	Valid

TimelineConnector ,

MUI TimlineConnector API

Only common props

TimelineContent

MUI TimlineContent API

Only common props

TimelineDot

MUI TimelineDot API

Prop	Comment
color	Deprecate - Figma shows no coloring and color is a prop that is typically deprecated/restricted
variant	Valid - Figma shows both oulined and filled

TimelineItem

MUI TimelineItem API

Prop	Comment
position	Valid - allow to manually configure which side the item is placed on

TimeLineSeperator

MUI TimeLineSeperator API

Only common properties.

Grouping item to control visual styling of timeline with connector and dot.

[mayank99]

This component comes from @mui/lab, so I don't think it's relevant for @stratakit/mui at this point.

[angrycat9000]

Modal

MUI Modal API
Not listed as its own component in StrataKit

All the disable props are normally not being needed but address very niche edge cases.

Prop	Comment
open	Valid - state
closeAfterTransition	Valid -
container	support portaling to a custom location
disableAutoFocus	needs assessment - use case of showing supplementarly information in a dialog but not wanting to move focus
disableEnforceFocus	Valid - use of companion dialog to main content
disablePortal	Valid
disableRestoreFocus	Valid - to allow navigating to a different page on close
disableScrollLock	Valid - if dialog is not modal
hideBackdrop	Valid - for non-modal dialog
keepMounted	Valid- keep content in the dom but not show
onClose	Valid
onTransitionEnter	Valid
onTransitionExited	Valid

[angrycat9000]

CSS Baseline

Deprecate entire component - Stratakit docs say not to use because Root handles it

[angrycat9000]

Popover

Material Popover API
StrataKit Popover documentation

Also inherits from Modal

Prop	Comment
open	Valid - required + state
action	Valid - used in edge case where the popover loads content or changes size after opening and the positioning needs to be re-checked
anchorEl	Valid - controls positioning
anchorOrigin	Valid - controls positioning
anchorPosition	Valid - controls positioning
anchorReference	Valid - controls positioning
container	Valid - Used to control where dialog component renders.
disableAutoFocus	Valid - if popover is informational and has no interactivity
disableScrollLock	StrataKit changes the default to true.
elevation	Deprecate Changes the visual of the control
marginThreshold	-controls how close to the edge of the screen the popover can appear, null allows popover to go offscreen
onClose	Valid - state
transformOrigin	Valid
transformDuration	Valid - allow setting to 0 for testing

[angrycat9000]

Popper

Material Popper API
Not included in StrataKit documentation

Popper is a utilitty component consumed by other compoents and not something I would typcially expect app developers to use directly unless they were building their own components. This doesn't add any visual styling and is really about positioning the element.

Prop	Comment
open	Valid - required
anchorEl	Valid
container	Valid
disablePortal
keepMounted
modifiers
placement
popperOptions
popperRef
transition

[angrycat9000]

Date and Time Pickers

MUI DatePicker API
StrataKit DatePicker documentation

Part of MUI-X

Composition of DateField and DateCalendar

Prop	Comment
autoFocus
closeOnSelect
dayOfWeekFormatter
defaultValue	Valid - core state
desktopModeMediaQuery
disabled	Valid
disableFuture	Valid - limits date selection to past dates only
disableHighlightToday
disableOpenPicker
disablePast	Valid - limits date selction to future
displayWeekNumber
fixedWeekNumber
formatDensity
inputRef
keepOpenDuringFieldFocus
label	Valid
loading
localeText	Valid - localization
maxDate	Valid - set available date range
minDate	Valid - set available date range
monthsPerRow
name	Valid - sets name attribute on input field
onAccept	Valid
onChange	Valid
onClose	Valid
onError	Valid
onMonthChange	Valid
onOpen	Valid
onSelectedSelectionsChange	Valid
onViewChange	Valid
onYearChange	Valid
open	Valid
openTo	Valid
orientation
readOnly	Valid
reduceAnimations
referenceDate	Valid
renderLoading	probalby deprecate for standard loading - maybe DayCalendarSkeleton
selectedSections
shouldDisableDate	Valid - allows disabling certain dates
shouldDisableMonth	Valid -allows disabling certain months
shouldDisableYear	Valid - allows disabling certain years
showDaysOutsideCurrentMonth	probably deprecate for standard visual
timezone
value	Valid
view	Valid - State
viewRenderers
views	Valid - Would make sense to always include "month" and "year" with day, but having just "month" and"year" is valid
yearOrder	Valid controls if years are shown asc or desc
yearsPerRow

Date Calendar

MUI DateCalendar API

Prop	Comment
autoFocus
dayOfWeekFormatter
defaultValue	Valid
disabled	Valid
disableFuture	Valid - limits date selection to past dates only
disableHighlightToday
disablePast	Valid - limits date seelction to future
fixedWeekNumber
focusedView
loading
maxDate	Valid - set available date range
minDate	Valid - set available date range
monthsPerRow
onChange	Valid
onFocusedViewChanged	Valid
onMonthChange	Valid
onViewChange	Valid
onYearChange	Valid
openTo
readOnly	Valid
reduceAnimations
referenceDate
renderLoading
shouldDisableDate	Valid - allows disabling certain dates
shouldDisableMonth	Valid -allows disabling certain months
shouldDisableYear	Valid - allows disabling certain years
showDaysOutsideCurrentMonth	probably deprecate for standard visual
timezone
value
views	Valid - Would make sense to always include "month" and "year" with day, but having just "month" and"year" is valid
yearOrder	Valid controls if years are shown asc or desc
yearsPerRow

TimePicker

MUI TimePicker API

Prop	Comment
ampm	Valid - localization
ampmInClock	Valid - localization
autoFocus
closeOnSelect
defaultValue	Valid
desktopModeMediaQuery
disabled	Valid
disableFuture	Valid
disabledIgnoreDatePartForTimeValidation
disableOpenPicker	Already deprecated in MUI
disablePast	Valid
format	Valid - localization
formatDensity
inputRef	Valid
keepOpenDuringFocus
label	Valid
localeText	Valid - localization
maxTime	Valid
minTime	Valid
minuteStep	Valid
name	Valid - for input field
onAccept	Valid
onChange	Valid
onClose	Valid
onOpen	Valid
onViewChange	Valid
open	Valid
orientation	Valid - may need to adjust for screen constraints
readOnly	Valid
reduceAnimations
referenceDate	Valid
selectedSections
shouldDisableTime	Valid - allows blocking out certian times
skipDisabled	Valid - controls rendering unavailble times. May be needed if there are large gaps between valid times
thresholdToRenderTimInASingleColumn
timeSteps
timezone	Valid
value	Valid
view
viewRenderers	possibly deprecate, not sure when we would need to use custom view renderers
views	Valid - allows limiting selection to certian precisions

[angrycat9000]

Click-Away Listener

MUI ClickAwayListener API
Not listed in StrataKit documentation

Prop	Comment
onClickAway	Valid
disableReactTree	Valid - adjust how portaled elements are considered
mouseEvent	Valid - - depends on content consumer is trying to block
touchEvent	Valid - depends on content consumer is trying to block