MUI. Advanced Declarations

[aerialist7]

Current detected problems (per component)

https://github.com/karakum-team/kotlin-mui-showcase/blob/main/src/main/kotlin/team/karakum/common/MissedWrappers.kt

TreeView

• [ ] TreeViewProps should extends TreeViewPropsBase

DialogTitle

• [x] DialogTitleProps should extends DialogTitlePropsBase
• [x] check other Dialog components

Grid

• [ ] Missed props
  • xs, sm, md, lg, xl

Tabs

• [ ] Missed props
  • ariaLabel

Box

• [ ] Missed props
  • noValidate
  • autoComplete

Typography

• [ ] Missed props
  • color
  • component #1118

DesktopDatePicker

• [ ] no props at all

Select

• [x] Broken props
  • value #1129
  • onChange #1129

Stack

• [x] Broken props
  • spacing #1114
  • direction #1130

TableCell

• [x] Missed props
  • colSpan #1111
• [x] Broken props
  • component #1127
  • scope #1111

ListItemButton

• [x] Missed props
  • selected #1125

Pagination

• [x] Missed props
  • count #1126
  • disabled #1126

Popper

• [x] Missed props
  • open #1124
  • anchorEl #1124
  • placement #1124

Badge

• [x] Missed props
  • badgeContent #1120

Stack

• [x] Broken props
  • spacing #1114

ListItem

• [x] Missed props
  • disablePadding #1113

Popover

• [x] Missed props
  • id #1117
  • anchorEl #1117

Grid

• [x] Broken props
  • direction #1114

FormControl

• [x] Missed props
  • component #1118

FormLabel

• [x] Missed props
  • component #1118

Slider

• [x] Missed props
  • value #1120
  • disabled #1120

TableContainer

• [x] Missed props
  • component #1118

[turansky]

Submitted

[xuanswe]

Hi, I am leaning kotlin react with MUI. I found something quite annoying below.

Stack {
      direction = ResponsiveStyleValue(StackDirection.row)
      spacing = ResponsiveStyleValue(2)
}

Stack {
      spacing = ResponsiveStyleValue(StackDirection.row) // this case: not type-safe?
}

is this possible to improve the API to be more concise and fix the type-safe for Stack spacing?

Similar to label = ReactNode("Text Fields"), it would be nice if label accept a normal string without ReactNode.

[xuanswe]

It's not possible to get value of the event below.

TextField {
  onChange = { event ->
    event.target.value // compile error
  }
}

[turansky]

@nguyenxndaidev About TextField

[turansky]

is this possible to improve the API to be more concise and fix the type-safe for Stack spacing?

@nguyenxndaidev to solve this problem we need union support in Kotlin to describe Int | Length :(

[xuanswe]

Thanks @turansky for the info!

[piacenti]

All props are missing from DesktopDatePicker and I'd assume the other date pickers as well.

[xuanswe]

Hi, I tried latest versions and get warnings.

KotlinJs 1.8.0
org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:1.0.0-pre.471

Grid {
          item = true

          columns = responsive( // warning
            Breakpoint.xs to responsive(12),
            Breakpoint.md to responsive(6)
          )
}

Type argument for a type parameter R can't be inferred because it has incompatible upper bounds: Any, ResponsiveStyleValue<Number>, ResponsiveStyleValue<in ResponsiveStyleValue<Int>>, ResponsiveStyleValue<Int>, ResponsiveStyleValue<ResponsiveStyleValue<Int>> (incompatible type arguments: Number, ResponsiveStyleValue<Int>). This will become an error in Kotlin 1.9

[turansky]

@xuan-nguyen-swe It looks like separate issue :)