/*
* Copyright 2022 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package androidx.compose.material3
import android.graphics.Rect
import android.view.View
import android.view.ViewTreeObserver
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.foundation.gestures.forEachGesture
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material3.internal.ExposedDropdownMenuPopup
import androidx.compose.material3.tokens.FilledAutocompleteTokens
import androidx.compose.material3.tokens.OutlinedAutocompleteTokens
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.input.pointer.PointerEvent
import androidx.compose.ui.input.pointer.PointerEventPass
import androidx.compose.ui.input.pointer.changedToUp
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.LayoutCoordinates
import androidx.compose.ui.layout.boundsInWindow
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.node.Ref
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.util.fastAll
import kotlin.math.max
import kotlinx.coroutines.coroutineScope
/**
* <a href="https://m3.material.io/components/menus/overview" class="external" target="_blank">Material Design Exposed Dropdown Menu</a>.
*
* Exposed dropdown menus display the currently selected item in a text field above the menu. In
* some cases, it can accept and display user input (whether or not it’s listed as a menu choice).
* If the text field input is used to filter results in the menu, the component is also known as
* "autocomplete" or a "combobox".
*
* The [ExposedDropdownMenuBox] is expected to contain a [TextField] (or [OutlinedTextField]) and
* [ExposedDropdownMenuBoxScope.ExposedDropdownMenu] as content.
*
* An example of read-only Exposed Dropdown Menu:
* @sample androidx.compose.material3.samples.ExposedDropdownMenuSample
*
* An example of editable Exposed Dropdown Menu:
* @sample androidx.compose.material3.samples.EditableExposedDropdownMenuSample
*
* @param expanded Whether the dropdown menu is expanded or not.
* @param onExpandedChange Executes when the user clicks on the ExposedDropdownMenuBox and the
* expansion state changes.
* @param modifier The modifier to apply to this layout.
* @param content The content to be displayed inside ExposedDropdownMenuBox.
*/
@ExperimentalMaterial3Api
@Composable
fun ExposedDropdownMenuBox(
expanded: Boolean,
onExpandedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
content: @Composable ExposedDropdownMenuBoxScope.() -> Unit
) {
val density = LocalDensity.current
val view = LocalView.current
var width by remember { mutableStateOf(0) }
var menuHeight by remember { mutableStateOf(0) }
val verticalMarginInPx = with(density) { MenuVerticalMargin.roundToPx() }
val coordinates = remember { Ref<LayoutCoordinates>() }
val scope = remember(density, menuHeight, width) {
object : ExposedDropdownMenuBoxScope {
override fun Modifier.exposedDropdownSize(matchTextFieldWidth: Boolean): Modifier {
return with(density) {
heightIn(max = menuHeight.toDp()).let {
if (matchTextFieldWidth) {
it.width(width.toDp())
} else it
}
}
}
}
}
val focusRequester = remember { FocusRequester() }
Box(
modifier.onGloballyPositioned {
width = it.size.width
coordinates.value = it
updateHeight(
view.rootView,
coordinates.value,
verticalMarginInPx
) { newHeight ->
menuHeight = newHeight
}
}.expandable(
onExpandedChange = { onExpandedChange(!expanded) },
menuLabel = getString(Strings.ExposedDropdownMenu)
).focusRequester(focusRequester)
) {
scope.content()
}
SideEffect {
if (expanded) focusRequester.requestFocus()
}
DisposableEffect(view) {
val listener = OnGlobalLayoutListener(view) {
// We want to recalculate the menu height on relayout - e.g. when keyboard shows up.
updateHeight(
view.rootView,
coordinates.value,
verticalMarginInPx
) { newHeight ->
menuHeight = newHeight
}
}
onDispose { listener.dispose() }
}
}
/**
* Subscribes to onGlobalLayout and correctly removes the callback when the View is detached.
* Logic copied from AndroidPopup.android.kt.
*/
private class OnGlobalLayoutListener(
private val view: View,
private val onGlobalLayoutCallback: () -> Unit
) : View.OnAttachStateChangeListener, ViewTreeObserver.OnGlobalLayoutListener {
private var isListeningToGlobalLayout = false
init {
view.addOnAttachStateChangeListener(this)
registerOnGlobalLayoutListener()
}
override fun onViewAttachedToWindow(p0: View?) = registerOnGlobalLayoutListener()
override fun onViewDetachedFromWindow(p0: View?) = unregisterOnGlobalLayoutListener()
override fun onGlobalLayout() = onGlobalLayoutCallback()
private fun registerOnGlobalLayoutListener() {
if (isListeningToGlobalLayout || !view.isAttachedToWindow) return
view.viewTreeObserver.addOnGlobalLayoutListener(this)
isListeningToGlobalLayout = true
}
private fun unregisterOnGlobalLayoutListener() {
if (!isListeningToGlobalLayout) return
view.viewTreeObserver.removeOnGlobalLayoutListener(this)
isListeningToGlobalLayout = false
}
fun dispose() {
unregisterOnGlobalLayoutListener()
view.removeOnAttachStateChangeListener(this)
}
}
/**
* Scope for [ExposedDropdownMenuBox].
*/
@ExperimentalMaterial3Api
interface ExposedDropdownMenuBoxScope {
/**
* Modifier which should be applied to an [ExposedDropdownMenu]
* placed inside the scope. It's responsible for
* setting the width of the [ExposedDropdownMenu], which
* will match the width of the [TextField]
* (if [matchTextFieldWidth] is set to true).
* Also it'll change the height of [ExposedDropdownMenu], so
* it'll take the largest possible height to not overlap
* the [TextField] and the software keyboard.
*
* @param matchTextFieldWidth Whether menu should match
* the width of the text field to which it's attached.
* If set to true the width will match the width
* of the text field.
*/
fun Modifier.exposedDropdownSize(
matchTextFieldWidth: Boolean = true
): Modifier
/**
* Popup which contains content for Exposed Dropdown Menu.
* Should be used inside the content of [ExposedDropdownMenuBox].
*
* @param expanded Whether the menu is currently open and visible to the user
* @param onDismissRequest Called when the user requests to dismiss the menu, such as by
* tapping outside the menu's bounds
* @param modifier The modifier to apply to this layout
* @param content The content of the [ExposedDropdownMenu]
*/
@Composable
fun ExposedDropdownMenu(
expanded: Boolean,
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit
) {
// TODO(b/202810604): use DropdownMenu when PopupProperties constructor is stable
// return DropdownMenu(
// expanded = expanded,
// onDismissRequest = onDismissRequest,
// modifier = modifier.exposedDropdownSize(),
// properties = ExposedDropdownMenuDefaults.PopupProperties,
// content = content
// )
val expandedStates = remember { MutableTransitionState(false) }
expandedStates.targetState = expanded
if (expandedStates.currentState || expandedStates.targetState) {
val transformOriginState = remember { mutableStateOf(TransformOrigin.Center) }
val density = LocalDensity.current
val popupPositionProvider = DropdownMenuPositionProvider(
DpOffset.Zero,
density
) { parentBounds, menuBounds ->
transformOriginState.value = calculateTransformOrigin(parentBounds, menuBounds)
}
ExposedDropdownMenuPopup(
onDismissRequest = onDismissRequest,
popupPositionProvider = popupPositionProvider
) {
DropdownMenuContent(
expandedStates = expandedStates,
transformOriginState = transformOriginState,
modifier = modifier.exposedDropdownSize(),
content = content
)
}
}
}
}
/**
* Contains default values used by Exposed Dropdown Menu.
*/
@ExperimentalMaterial3Api
object ExposedDropdownMenuDefaults {
/**
* Default trailing icon for Exposed Dropdown Menu.
*
* @param expanded Whether [ExposedDropdownMenuBoxScope.ExposedDropdownMenu]
* is expanded or not. Affects the appearance of the icon.
* @param onIconClick Called when the icon was clicked.
*/
@ExperimentalMaterial3Api
@Composable
fun TrailingIcon(
expanded: Boolean,
onIconClick: () -> Unit = {}
) {
// Clear semantics here as otherwise icon will be a11y focusable but without an
// action. When there's an API to check if Talkback is on, developer will be able to
// expand the menu on icon click in a11y mode only esp. if using their own custom
// trailing icon.
IconButton(onClick = onIconClick, modifier = Modifier.clearAndSetSemantics { }) {
Icon(
Icons.Filled.ArrowDropDown,
"Trailing icon for exposed dropdown menu",
Modifier.rotate(
if (expanded)
180f
else
360f
)
)
}
}
/**
* Creates a [TextFieldColors] that represents the default input text, background and content
* (including label, placeholder, leading and trailing icons) colors used in a [TextField].
*
* @param textColor Represents the color used for the input text of this text field.
* @param disabledTextColor Represents the color used for the input text of this text field when
* it's disabled.
* @param backgroundColor Represents the background color for this text field.
* @param cursorColor Represents the cursor color for this text field.
* @param errorCursorColor Represents the cursor color for this text field when it's in error
* state.
* @param focusedIndicatorColor Represents the indicator color for this text field when it's
* focused.
* @param unfocusedIndicatorColor Represents the indicator color for this text field when it's
* not focused.
* @param disabledIndicatorColor Represents the indicator color for this text field when it's
* disabled.
* @param errorIndicatorColor Represents the indicator color for this text field when it's in
* error state.
* @param focusedLeadingIconColor Represents the leading icon color for this text field when
* it's focused.
* @param unfocusedLeadingIconColor Represents the leading icon color for this text field when
* it's not focused.
* @param disabledLeadingIconColor Represents the leading icon color for this text field when
* it's disabled.
* @param errorLeadingIconColor Represents the leading icon color for this text field when it's
* in error state.
* @param focusedTrailingIconColor Represents the trailing icon color for this text field when
* it's focused.
* @param unfocusedTrailingIconColor Represents the trailing icon color for this text field when
* it's not focused.
* @param disabledTrailingIconColor Represents the trailing icon color for this text field when
* it's disabled.
* @param errorTrailingIconColor Represents the trailing icon color for this text field when
* it's in error state.
* @param focusedLabelColor Represents the label color for this text field when it's focused.
* @param unfocusedLabelColor Represents the label color for this text field when it's not
* focused.
* @param disabledLabelColor Represents the label color for this text field when it's disabled.
* @param errorLabelColor Represents the label color for this text field when it's in error
* state.
* @param placeholderColor Represents the placeholder color for this text field.
* @param disabledPlaceholderColor Represents the placeholder color for this text field when
* it's disabled.
*/
@Composable
fun textFieldColors(
textColor: Color = FilledAutocompleteTokens.FieldInputTextColor.toColor(),
disabledTextColor: Color = FilledAutocompleteTokens.FieldDisabledInputTextColor.toColor()
.copy(alpha = FilledAutocompleteTokens.FieldDisabledInputTextOpacity),
backgroundColor: Color = FilledAutocompleteTokens.TextFieldContainerColor.toColor(),
cursorColor: Color = FilledAutocompleteTokens.TextFieldCaretColor.toColor(),
errorCursorColor: Color = FilledAutocompleteTokens.TextFieldErrorFocusCaretColor.toColor(),
focusedIndicatorColor: Color =
FilledAutocompleteTokens.TextFieldFocusActiveIndicatorColor.toColor(),
unfocusedIndicatorColor: Color =
FilledAutocompleteTokens.TextFieldActiveIndicatorColor.toColor(),
disabledIndicatorColor: Color =
FilledAutocompleteTokens.TextFieldDisabledActiveIndicatorColor.toColor()
.copy(alpha = FilledAutocompleteTokens.TextFieldDisabledActiveIndicatorOpacity),
errorIndicatorColor: Color =
FilledAutocompleteTokens.TextFieldErrorActiveIndicatorColor.toColor(),
focusedLeadingIconColor: Color =
FilledAutocompleteTokens.TextFieldFocusLeadingIconColor.toColor(),
unfocusedLeadingIconColor: Color =
FilledAutocompleteTokens.TextFieldLeadingIconColor.toColor(),
disabledLeadingIconColor: Color =
FilledAutocompleteTokens.TextFieldDisabledLeadingIconColor.toColor()
.copy(alpha = FilledAutocompleteTokens.TextFieldDisabledLeadingIconOpacity),
errorLeadingIconColor: Color =
FilledAutocompleteTokens.TextFieldErrorLeadingIconColor.toColor(),
focusedTrailingIconColor: Color =
FilledAutocompleteTokens.TextFieldFocusTrailingIconColor.toColor(),
unfocusedTrailingIconColor: Color =
FilledAutocompleteTokens.TextFieldTrailingIconColor.toColor(),
disabledTrailingIconColor: Color =
FilledAutocompleteTokens.TextFieldDisabledTrailingIconColor.toColor()
.copy(alpha = FilledAutocompleteTokens.TextFieldDisabledTrailingIconOpacity),
errorTrailingIconColor: Color =
FilledAutocompleteTokens.TextFieldErrorTrailingIconColor.toColor(),
focusedLabelColor: Color = FilledAutocompleteTokens.FieldFocusLabelTextColor.toColor(),
unfocusedLabelColor: Color = FilledAutocompleteTokens.FieldLabelTextColor.toColor(),
disabledLabelColor: Color = FilledAutocompleteTokens.FieldDisabledLabelTextColor.toColor(),
errorLabelColor: Color = FilledAutocompleteTokens.FieldErrorLabelTextColor.toColor(),
placeholderColor: Color = FilledAutocompleteTokens.FieldSupportingTextColor.toColor(),
disabledPlaceholderColor: Color =
FilledAutocompleteTokens.FieldDisabledInputTextColor.toColor()
.copy(alpha = FilledAutocompleteTokens.FieldDisabledInputTextOpacity)
): TextFieldColors =
TextFieldDefaults.textFieldColors(
textColor = textColor,
disabledTextColor = disabledTextColor,
cursorColor = cursorColor,
errorCursorColor = errorCursorColor,
focusedIndicatorColor = focusedIndicatorColor,
unfocusedIndicatorColor = unfocusedIndicatorColor,
errorIndicatorColor = errorIndicatorColor,
disabledIndicatorColor = disabledIndicatorColor,
focusedLeadingIconColor = focusedLeadingIconColor,
unfocusedLeadingIconColor = unfocusedLeadingIconColor,
disabledLeadingIconColor = disabledLeadingIconColor,
errorLeadingIconColor = errorLeadingIconColor,
focusedTrailingIconColor = focusedTrailingIconColor,
unfocusedTrailingIconColor = unfocusedTrailingIconColor,
disabledTrailingIconColor = disabledTrailingIconColor,
errorTrailingIconColor = errorTrailingIconColor,
backgroundColor = backgroundColor,
focusedLabelColor = focusedLabelColor,
unfocusedLabelColor = unfocusedLabelColor,
disabledLabelColor = disabledLabelColor,
errorLabelColor = errorLabelColor,
placeholderColor = placeholderColor,
disabledPlaceholderColor = disabledPlaceholderColor
)
/**
* Creates a [TextFieldColors] that represents the default input text, background and content
* (including label, placeholder, leading and trailing icons) colors used in an
* [OutlinedTextField].
*
* @param textColor Represents the color used for the input text of this text field.
* @param disabledTextColor Represents the color used for the input text of this text field when
* it's disabled.
* @param backgroundColor Represents the background color for this text field.
* @param cursorColor Represents the cursor color for this text field.
* @param errorCursorColor Represents the cursor color for this text field when it's in error
* state.
* @param focusedBorderColor Represents the border color for this text field when it's focused.
* @param unfocusedBorderColor Represents the border color for this text field when it's not
* focused.
* @param disabledBorderColor Represents the border color for this text field when it's
* disabled.
* @param errorBorderColor Represents the border color for this text field when it's in error
* state.
* @param focusedLeadingIconColor Represents the leading icon color for this text field when
* it's focused.
* @param unfocusedLeadingIconColor Represents the leading icon color for this text field when
* it's not focused.
* @param disabledLeadingIconColor Represents the leading icon color for this text field when
* it's disabled.
* @param errorLeadingIconColor Represents the leading icon color for this text field when it's
* in error state.
* @param focusedTrailingIconColor Represents the trailing icon color for this text field when
* it's focused.
* @param unfocusedTrailingIconColor Represents the trailing icon color for this text field when
* it's not focused.
* @param disabledTrailingIconColor Represents the trailing icon color for this text field when
* it's disabled.
* @param errorTrailingIconColor Represents the trailing icon color for this text field when
* it's in error state.
* @param focusedLabelColor Represents the label color for this text field when it's focused.
* @param unfocusedLabelColor Represents the label color for this text field when it's not
* focused.
* @param disabledLabelColor Represents the label color for this text field when it's disabled.
* @param errorLabelColor Represents the label color for this text field when it's in error
* state.
* @param placeholderColor Represents the placeholder color for this text field.
* @param disabledPlaceholderColor Represents the placeholder color for this text field when
* it's disabled.
*/
@Composable
fun outlinedTextFieldColors(
textColor: Color = OutlinedAutocompleteTokens.FieldInputTextColor.toColor(),
disabledTextColor: Color = OutlinedAutocompleteTokens.FieldDisabledInputTextColor.toColor()
.copy(alpha = OutlinedAutocompleteTokens.FieldDisabledInputTextOpacity),
backgroundColor: Color = Color.Transparent,
cursorColor: Color = OutlinedAutocompleteTokens.TextFieldCaretColor.toColor(),
errorCursorColor: Color =
OutlinedAutocompleteTokens.TextFieldErrorFocusCaretColor.toColor(),
focusedBorderColor: Color = OutlinedAutocompleteTokens.TextFieldFocusOutlineColor.toColor(),
unfocusedBorderColor: Color = OutlinedAutocompleteTokens.TextFieldOutlineColor.toColor(),
disabledBorderColor: Color =
OutlinedAutocompleteTokens.TextFieldDisabledOutlineColor.toColor()
.copy(alpha = OutlinedAutocompleteTokens.TextFieldDisabledOutlineOpacity),
errorBorderColor: Color = OutlinedAutocompleteTokens.TextFieldErrorOutlineColor.toColor(),
focusedLeadingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldFocusLeadingIconColor.toColor(),
unfocusedLeadingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldLeadingIconColor.toColor(),
disabledLeadingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldDisabledLeadingIconColor.toColor()
.copy(alpha = OutlinedAutocompleteTokens.TextFieldDisabledLeadingIconOpacity),
errorLeadingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldErrorLeadingIconColor.toColor(),
focusedTrailingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldFocusTrailingIconColor.toColor(),
unfocusedTrailingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldTrailingIconColor.toColor(),
disabledTrailingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldDisabledTrailingIconColor.toColor()
.copy(alpha = OutlinedAutocompleteTokens.TextFieldDisabledTrailingIconOpacity),
errorTrailingIconColor: Color =
OutlinedAutocompleteTokens.TextFieldErrorTrailingIconColor.toColor(),
focusedLabelColor: Color = OutlinedAutocompleteTokens.FieldFocusLabelTextColor.toColor(),
unfocusedLabelColor: Color = OutlinedAutocompleteTokens.FieldLabelTextColor.toColor(),
disabledLabelColor: Color = OutlinedAutocompleteTokens.FieldDisabledLabelTextColor.toColor()
.copy(alpha = OutlinedAutocompleteTokens.FieldDisabledLabelTextOpacity),
errorLabelColor: Color = OutlinedAutocompleteTokens.FieldErrorLabelTextColor.toColor(),
placeholderColor: Color = OutlinedAutocompleteTokens.FieldSupportingTextColor.toColor(),
disabledPlaceholderColor: Color =
OutlinedAutocompleteTokens.FieldDisabledInputTextColor.toColor()
.copy(alpha = OutlinedAutocompleteTokens.FieldDisabledInputTextOpacity)
): TextFieldColors =
TextFieldDefaults.outlinedTextFieldColors(
textColor = textColor,
disabledTextColor = disabledTextColor,
cursorColor = cursorColor,
errorCursorColor = errorCursorColor,
focusedBorderColor = focusedBorderColor,
unfocusedBorderColor = unfocusedBorderColor,
errorBorderColor = errorBorderColor,
disabledBorderColor = disabledBorderColor,
focusedLeadingIconColor = focusedLeadingIconColor,
unfocusedLeadingIconColor = unfocusedLeadingIconColor,
disabledLeadingIconColor = disabledLeadingIconColor,
errorLeadingIconColor = errorLeadingIconColor,
focusedTrailingIconColor = focusedTrailingIconColor,
unfocusedTrailingIconColor = unfocusedTrailingIconColor,
disabledTrailingIconColor = disabledTrailingIconColor,
errorTrailingIconColor = errorTrailingIconColor,
backgroundColor = backgroundColor,
focusedLabelColor = focusedLabelColor,
unfocusedLabelColor = unfocusedLabelColor,
disabledLabelColor = disabledLabelColor,
errorLabelColor = errorLabelColor,
placeholderColor = placeholderColor,
disabledPlaceholderColor = disabledPlaceholderColor
)
}
private fun Modifier.expandable(
onExpandedChange: () -> Unit,
menuLabel: String
) = pointerInput(Unit) {
forEachGesture {
coroutineScope {
awaitPointerEventScope {
var event: PointerEvent
do {
event = awaitPointerEvent(PointerEventPass.Initial)
} while (
!event.changes.fastAll { it.changedToUp() }
)
onExpandedChange.invoke()
}
}
}
}.semantics {
contentDescription = menuLabel // this should be a localised string
onClick {
onExpandedChange()
true
}
}
private fun updateHeight(
view: View,
coordinates: LayoutCoordinates?,
verticalMarginInPx: Int,
onHeightUpdate: (Int) -> Unit
) {
coordinates ?: return
val visibleWindowBounds = Rect().let {
view.getWindowVisibleDisplayFrame(it)
it
}
val heightAbove = coordinates.boundsInWindow().top - visibleWindowBounds.top
val heightBelow =
visibleWindowBounds.bottom - visibleWindowBounds.top - coordinates.boundsInWindow().bottom
onHeightUpdate(max(heightAbove, heightBelow).toInt() - verticalMarginInPx)
}