diff --git a/mui-kotlin/src/jsMain/kotlin/mui/base/useOption.types.kt b/mui-kotlin/src/jsMain/kotlin/mui/base/useOption.types.kt index 9f5f898c4..a61ed4305 100644 --- a/mui-kotlin/src/jsMain/kotlin/mui/base/useOption.types.kt +++ b/mui-kotlin/src/jsMain/kotlin/mui/base/useOption.types.kt @@ -2,8 +2,6 @@ package mui.base -import web.dom.Element - external interface SelectOption { var value: Value @@ -21,7 +19,7 @@ external interface UseOptionParameters { var label: react.ReactNode - var rootRef: react.Ref? + var rootRef: react.Ref? var value: Value } @@ -49,5 +47,5 @@ external interface UseOptionReturnValue { /** * Ref to the root slot DOM node. */ - var rootRef: react.RefCallback? + var rootRef: react.RefCallback? } diff --git a/mui-kotlin/src/jsMain/kotlin/mui/material/Table.kt b/mui-kotlin/src/jsMain/kotlin/mui/material/Table.kt index 37d450408..67fe1e8f0 100644 --- a/mui-kotlin/src/jsMain/kotlin/mui/material/Table.kt +++ b/mui-kotlin/src/jsMain/kotlin/mui/material/Table.kt @@ -4,7 +4,6 @@ package mui.material -import web.dom.Element import mui.material.styles.Theme import mui.system.SxProps diff --git a/mui-kotlin/src/jsMain/kotlin/muix/pickers/PickersActionBar.ext.kt b/mui-kotlin/src/jsMain/kotlin/muix/pickers/PickersActionBar.ext.kt index 93e49cbbd..bfb065cf2 100644 --- a/mui-kotlin/src/jsMain/kotlin/muix/pickers/PickersActionBar.ext.kt +++ b/mui-kotlin/src/jsMain/kotlin/muix/pickers/PickersActionBar.ext.kt @@ -2,8 +2,8 @@ package muix.pickers -import seskar.js.JsVirtual import seskar.js.JsValue +import seskar.js.JsVirtual @JsVirtual sealed external interface PickersActionBarAction { diff --git a/package-lock.json b/package-lock.json index 8a87819c7..dda9528c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,8 @@ "packages_imported/kotlin-cssom-core/0.0.1-pre.737", "packages_imported/kotlin-react-dom/18.3.1-pre.737", "packages_imported/kotlin-react-core/18.3.1-pre.737", - "packages_imported/kotlin-csstype/3.1.3-pre.737" + "packages_imported/kotlin-csstype/3.1.3-pre.737", + "packages_imported/kotlin-emotion/11.11.4-pre.737" ], "devDependencies": {} }, @@ -208,6 +209,18 @@ "stylis": "4.2.0" } }, + "node_modules/@emotion/css": { + "version": "11.11.2", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.11.2.tgz", + "integrity": "sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==", + "dependencies": { + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1" + } + }, "node_modules/@emotion/hash": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", @@ -230,7 +243,6 @@ "version": "11.11.4", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -271,7 +283,6 @@ "version": "11.11.5", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz", "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -299,7 +310,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", - "peer": true, "peerDependencies": { "react": ">=16.8.0" } @@ -3218,6 +3228,10 @@ "resolved": "packages_imported/kotlin-csstype/3.1.3-pre.737", "link": true }, + "node_modules/kotlin-emotion": { + "resolved": "packages_imported/kotlin-emotion/11.11.4-pre.737", + "link": true + }, "node_modules/kotlin-popper": { "resolved": "packages_imported/kotlin-popper/2.11.8-pre.737", "link": true @@ -5274,6 +5288,18 @@ }, "devDependencies": {} }, + "packages_imported/kotlin-emotion/11.11.4-pre.737": { + "version": "11.11.4-pre.737", + "dependencies": { + "@emotion/cache": "^11.11.0", + "@emotion/css": "^11.11.2", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", + "format-util": "^1.0.5", + "react": "^18.3.1" + }, + "devDependencies": {} + }, "packages_imported/kotlin-popper/2.11.8-pre.737": { "name": "kotlin-popper", "version": "2.11.8-pre.737", @@ -5347,6 +5373,8 @@ "packages/playground": { "version": "0.0.0-unspecified", "dependencies": { + "@emotion/cache": "^11.11.0", + "@emotion/css": "^11.11.2", "@emotion/react": "11.9.0", "@emotion/styled": "11.8.1", "@mui/base": "5.0.0-beta.42", diff --git a/playground/build.gradle.kts b/playground/build.gradle.kts index 9352190d7..36ee33116 100644 --- a/playground/build.gradle.kts +++ b/playground/build.gradle.kts @@ -6,6 +6,7 @@ val kotlinWrappersVersion = property("kotlin-wrappers.version") as String dependencies { jsMainImplementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:$kotlinWrappersVersion")) + jsMainImplementation("org.jetbrains.kotlin-wrappers:kotlin-emotion") jsMainImplementation("org.jetbrains.kotlin-wrappers:kotlin-react") jsMainImplementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom") diff --git a/playground/src/jsMain/kotlin/App.kt b/playground/src/jsMain/kotlin/App.kt index af0cc55e6..f33cb9951 100644 --- a/playground/src/jsMain/kotlin/App.kt +++ b/playground/src/jsMain/kotlin/App.kt @@ -20,6 +20,7 @@ private val App = FC { MyAutocomplete() Pickers() + SliderStylization() } private fun main() { diff --git a/playground/src/jsMain/kotlin/SliderStylization.kt b/playground/src/jsMain/kotlin/SliderStylization.kt new file mode 100644 index 000000000..a5d3d4222 --- /dev/null +++ b/playground/src/jsMain/kotlin/SliderStylization.kt @@ -0,0 +1,75 @@ +import emotion.styled.styled +import mui.base.Slider +import mui.base.sliderClasses +import react.FC +import react.Props +import react.dom.events.KeyboardEvent +import web.cssom.* +import web.cssom.LineStyle.Companion.solid +import web.cssom.None.Companion.none + +val SliderStylization = FC { + RangeSliderBase { + disableSwap = true + + min = 0.0 + max = 100.0 + + value = 50.0 + + onKeyDown = KeyboardEvent<*>::preventDefault + } +} + +private val RangeSliderBase = Slider.styled { + position = Position.absolute + top = 0.px + width = 100.pct + left = (-36 / 2).px + height = 100.pct + + display = Display.inlineFlex + alignItems = AlignItems.center + cursor = Cursor.pointer + touchAction = none + + sliderClasses.rail { + display = Display.block + position = Position.absolute + width = 100.pct + height = 4.px + borderRadius = 6.px + backgroundColor = Color.currentcolor + opacity = number(0.3) + } + + sliderClasses.track { + display = none + } + + sliderClasses.thumb { + display = Display.flex + alignItems = AlignItems.center + justifyContent = JustifyContent.center + position = Position.absolute + width = 36.px + height = 36.px + boxSizing = BoxSizing.borderBox + borderRadius = 50.pct + outline = Outline(0.px, solid) + backgroundColor = Color("#007FFF") + transitionProperty = many(PropertyName.boxShadow, PropertyName.transform) + transitionTimingFunction = TransitionTimingFunction.ease + transitionDuration = 120.ms + transformOrigin = "center".unsafeCast() + } + + ":hover, :active" { + sliderClasses.thumb { + width = 24.px + height = 24.px + margin = ((36 - 24) / 2).px + border = Border(2.px, solid, NamedColor.white) + } + } +}