The MDCMenu can be opened/closed by setting MDCMenuOpts.open. However, when the menu is open the user can close it by clicking off the menu, which makes the menu's actual state inconsistent with the internal program state. This behavior can be observed in the sandbox - Anchored Dropdown example: Click in the textfield to show the menu. Then click off the menu to close it. Now clicking in the textfield again will not show the menu because the internal menuOpen state variable value does not change and so the MenuAnchored function doesn't recompose.

The desired behavior would be either to not have the menu close and fire an event that the user clicked off the menu, or allow the menu to close and fire an event to signal that the menu has closed. This would allow the internal state variable to be modified and cause a recomposition in the first case, or to reset the state variable in the second case to keep it synchronized with the menu's actual state.

As I started to work on this (more to come), I wanted to stabilize builds and avoid unpleasant surprises by npm package "updates". Please check if that's OK.

There is code generating DOM element IDs, which looks like this:

  val localId = remember { Random.nextInt(9999) }
  val radioId = remember { "mdc-radio__native-control__$localId" }

The above approach bears some collision risk. This could be avoided and simplified by using a central ID supply function like this:

private val nextDomElementId = 0
fun uniqueDomElementId() = nextDomElementId++

and then use it like this:

  val localId = remember { uniqueDomElementId() }
  val radioId = remember { "mdc-radio__native-control__$localId" }

This would be collision-free almost forever (until an overflow occurs).

• Based on the npm https://github.com/marella/material-icons
• All material icons as of 1.10.4 in an enum - ie: pie_chart -> PieChart("pie_chart") in MDCIconOpts.MDCIconType
• Numbers written out using Proper Case 1MP -> OneMp
• Output is a Span with the right class (Filled, Outlined, TwoTone, etc)
• As elsewhere in KMDC, styling has to be applied externally

Closes #33

Setting a grid cell span directly on a text field like this does not work: MDCTextField(value, attrs = { classes("mdc-layout-grid__cell--span-2") })

A workaround is to enclose it in a Div, and apply classes there.

The text field is a composite and all attributes go to its internal text input element, which is often, but not always what's intended. Ideally the component's user should not have to reason about the component's internal structure. Ideally, the component should know which attributes to apply on which of its elements. If that's not feasible, options might be to

• provide an extra classes parameter which addresses the outermost element, or
• provide separate attr parameters for the outermost and the input element.

Closes #39

• Code of Conduct
• Contributing Guidelines
  • Styleguide
  • Issue guide
  • PR guide
  • Development env setup
  • Using Sandbox
• Tips and Tricks documentation for wrapping MDC modules

After adding the kmdc dependency to my project, I'm getting the following error when running ./gradlew assemble:

> Task :compileKotlinJs FAILED
e: java.lang.IllegalStateException: No file for dev.petuska.kmdc.typography/MDCH1|-7610114650855466055[0] (@ dev.petuska.kmdc.typography/MDCH1|-7610114650855466055[0]) in module <dev.petuska:kmdc-typography>[ModuleDescriptorImpl@251dd060]
        at org.jetbrains.kotlin.backend.common.serialization.BasicIrModuleDeserializer.deserializeIrSymbol(BasicIrModuleDeserializer.kt:95)
        at org.jetbrains.kotlin.backend.common.serialization.IrModuleDeserializer.declareIrSymbol(IrModuleDeserializer.kt:74)
        at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.findDeserializedDeclarationForSymbol(KotlinIrLinker.kt:125)
        at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.getDeclaration(KotlinIrLinker.kt:167)
        at org.jetbrains.kotlin.ir.util.ExternalDependenciesGeneratorKt.getDeclaration(ExternalDependenciesGenerator.kt:57)
        at org.jetbrains.kotlin.ir.util.ExternalDependenciesGenerator.generateUnboundSymbolsAsDependencies(ExternalDependenciesGenerator.kt:44)
        at org.jetbrains.kotlin.psi2ir.generators.ModuleGenerator.generateUnboundSymbolsAsDependencies(ModuleGenerator.kt:52)
        at org.jetbrains.kotlin.psi2ir.Psi2IrTranslator.generateModuleFragment(Psi2IrTranslator.kt:92)
        at org.jetbrains.kotlin.psi2ir.Psi2IrTranslator.generateModuleFragment$default(Psi2IrTranslator.kt:75)
        at org.jetbrains.kotlin.ir.backend.js.KlibKt.generateModuleFragmentWithPlugins(klib.kt:595)
        at org.jetbrains.kotlin.ir.backend.js.KlibKt.generateIrForKlibSerialization(klib.kt:184)
        at org.jetbrains.kotlin.ir.backend.js.KlibKt.generateKLib(klib.kt:219)
        at org.jetbrains.kotlin.ir.backend.js.KlibKt.generateKLib$default(klib.kt:201)
        at org.jetbrains.kotlin.cli.js.K2JsIrCompiler.doExecute(K2JsIrCompiler.kt:269)
        at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:178)
        at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:71)
        at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:91)
        at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:43)
        at org.jetbrains.kotlin.cli.common.CLITool.exec(CLITool.kt:93)
        at org.jetbrains.kotlin.incremental.IncrementalJsCompilerRunner.runCompiler(IncrementalJsCompilerRunner.kt:200)
        at org.jetbrains.kotlin.incremental.IncrementalJsCompilerRunner.runCompiler(IncrementalJsCompilerRunner.kt:77)
        at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compileIncrementally(IncrementalCompilerRunner.kt:367)
        at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compileIncrementally$default(IncrementalCompilerRunner.kt:309)
        at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compileImpl$rebuild(IncrementalCompilerRunner.kt:115)
        at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compileImpl(IncrementalCompilerRunner.kt:167)
        at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compile(IncrementalCompilerRunner.kt:77)
        at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compile$default(IncrementalCompilerRunner.kt:68)
        at org.jetbrains.kotlin.daemon.CompileServiceImplBase.execJsIncrementalCompiler(CompileServiceImpl.kt:565)
        at org.jetbrains.kotlin.daemon.CompileServiceImplBase.access$execJsIncrementalCompiler(CompileServiceImpl.kt:101)
        at org.jetbrains.kotlin.daemon.CompileServiceImpl.compile(CompileServiceImpl.kt:1807)
        at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
        at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.base/java.lang.reflect.Method.invoke(Method.java:566)
        at java.rmi/sun.rmi.server.UnicastServerRef.dispatch(UnicastServerRef.java:359)
        at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:200)
        at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:197)
        at java.base/java.security.AccessController.doPrivileged(Native Method)
        at java.rmi/sun.rmi.transport.Transport.serviceCall(Transport.java:196)
        at java.rmi/sun.rmi.transport.tcp.TCPTransport.handleMessages(TCPTransport.java:562)
        at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run0(TCPTransport.java:796)
        at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.lambda$run$0(TCPTransport.java:677)
        at java.base/java.security.AccessController.doPrivileged(Native Method)
        at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run(TCPTransport.java:676)
        at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
        at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
        at java.base/java.lang.Thread.run(Thread.java:829)

I've created a minimal reproducible example at https://github.com/veyndan/kmdc-issue-0. When commenting out MDCH1("Hello World") I don't get the compilation error.

Thanks in advance for any help! I'm looking forward to trying out the library 😄

Bumps com.gradle.enterprise from 3.8.1 to 3.10.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps actions/checkout from 2 to 3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot will merge this PR once it's up-to-date and CI passes on it, as requested by @mpetuska.

Fixes the behavior of value changes between empty and non-empty: Makes floating labels dance and notches open.

Previous behavior was:

With several text fields sharing a common mutable state, the following happens: Changing from empty to non-empty works in the focused field. The notch opens, the label moves up. It does not work when non-focused fields receive their update: The notch remains closed, the floating label remains at the empty position, overwriting the updated text.

Included is a sample to check the behavior of multiple synchronized fields.

Bumps com.gradle.enterprise from 3.10.3 to 3.11.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps com.gradle.enterprise from 3.10.3 to 3.11.4.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps actions/cache from 3.0.5 to 3.0.11.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps de.fayard.refreshVersions from 0.40.2 to 0.51.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps crazy-max/ghaction-github-pages from 3.0.0 to 3.1.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

In the following code button click triggers recomposition of Menu element

val items = remember { mutableStateListOf("item1") }
MDCSelect {
    Anchor("Items")
    Menu { items.forEach { SelectItem(it) } }
}
MDCButton("Add item") {
    onClick { items.add("item${items.size + 1}") }
}

and clicking on newly created item throws errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at MDCSelectFoundation.layout (foundation.ts?cd83:213:45)
    at MDCSelectFoundation.handleChange (foundation.ts?cd83:264:10)
    at MDCSelectFoundation.setSelectedIndex (foundation.ts?cd83:146:12)
    at MDCSelectFoundation.handleMenuItemAction (foundation.ts?cd83:274:10)
    at HTMLDivElement.handleMenuItemAction (component.ts?327b:148:23)
    at MDCComponent.emit (component.ts?327b:116:15)
    at Object.notifySelected (component.ts?327b:341:14)
    at MDCMenuFoundation.handleItemAction (foundation.ts?cd83:98:18)
    at HTMLDivElement.handleItemAction (component.ts?327b:85:23)
    at MDCComponent.emit (component.ts?327b:116:15)
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at MDCSelectFoundation.layout (foundation.ts?cd83:213:45)
    at MDCSelectFoundation.handleFocus (foundation.ts?cd83:282:10)
    at HTMLDivElement.handleFocus (component.ts?327b:135:23)
    at Object.restoreFocus (component.ts?327b:182:32)
    at eval (foundation.ts?cd83:651:22)

This errors is thrown even if i'm triggering recomposition of MDCSelect too