ExposedDropdownMenu.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
pragma ComponentBehavior: Bound
 
import Fluid as MD
import Fluid.Private as P
import "../core/UiMetrics.js" as UiMetrics
import "../internal/MotionAnimation.js" as MotionAnimation
import QtQuick
import QtQuick.Templates as T
import QtQuick.Window
 
T.ComboBox {
    id: control
    objectName: "exposedDropdownMenu"
 
    enum FieldStyle {
        Filled = 0,
        Outlined = 1
    }
 
    enum MenuColorStyle {
        Standard = 0,
        Vibrant = 1
    }
 
    property int fieldStyle: MD.ExposedDropdownMenu.Filled
    property int menuColorStyle: MD.ExposedDropdownMenu.Standard
    property string label: ""
    property string placeholderText: ""
    property string supportingText: ""
    property string errorText: ""
    property bool error: false
    property string leadingIconName: ""
    property url leadingIconSource
    property string enabledRole: ""
    property string leadingIconRole: ""
    property string supportingTextRole: ""
    property string trailingTextRole: ""
    property string badgeRole: ""
 
    readonly property bool _filledField: fieldStyle === MD.ExposedDropdownMenu.Filled
    readonly property bool _outlinedField: fieldStyle === MD.ExposedDropdownMenu.Outlined
    readonly property bool _vibrantMenu: menuColorStyle === MD.ExposedDropdownMenu.Vibrant
    readonly property bool _hasLeadingIcon: leadingIconName.length > 0
                                            || leadingIconSource.toString().length > 0
    readonly property bool _fieldActive: activeFocus || popup.visible
    readonly property color _inputColor: control.MD.Style.onSurfaceColor
    readonly property color _labelColor: !enabled ? control.MD.Style.onSurfaceColor
                                         : error && hovered
                                           ? control.MD.Style.onErrorContainerColor
                                         : error ? control.MD.Style.errorColor
                                         : _fieldActive ? control.MD.Style.primaryColor
                                         : control.MD.Style.onSurfaceVariantColor
    readonly property color _leadingIconColor: !enabled ? control.MD.Style.onSurfaceColor
                                                        : control.MD.Style.onSurfaceVariantColor
    readonly property color _trailingIconColor: !enabled ? control.MD.Style.onSurfaceColor
                                             : error && hovered
                                               ? control.MD.Style.onErrorContainerColor
                                             : error ? control.MD.Style.errorColor
                                             : control.MD.Style.onSurfaceVariantColor
    readonly property color _indicatorColor: !enabled ? control.MD.Style.onSurfaceColor
                                         : error && hovered
                                           ? control.MD.Style.onErrorContainerColor
                                         : error ? control.MD.Style.errorColor
                                         : _fieldActive ? control.MD.Style.primaryColor
                                         : hovered ? control.MD.Style.onSurfaceColor
                                         : _outlinedField
                                           ? control.MD.Style.outlineColor
                                           : control.MD.Style.onSurfaceVariantColor
    readonly property color _supportingColor: !enabled ? control.MD.Style.onSurfaceColor
                                                       : error ? control.MD.Style.errorColor
                                                       : control.MD.Style.onSurfaceVariantColor
    readonly property real _leadingIconSize: _filledField
                                             ? MD.Tokens.exposedDropdownMenu.filledLeadingIconSize
                                             : MD.Tokens.exposedDropdownMenu.outlinedLeadingIconSize
    readonly property real _leadingReservation: MD.Tokens.exposedDropdownMenu.horizontalPadding
                                                + (_hasLeadingIcon
                                                   ? _leadingIconSize
                                                     + MD.Tokens.exposedDropdownMenu.leadingIconContentSpace
                                                   : 0)
    readonly property real _trailingReservation: MD.Tokens.exposedDropdownMenu.horizontalPadding
                                                 + MD.Tokens.exposedDropdownMenu.trailingIconSize
                                                 + MD.Tokens.exposedDropdownMenu.trailingIconContentSpace
    readonly property real _supportingAreaHeight: fieldDecoration.supportingAreaHeight
 
    function _roleValue(row, roleName, rowModel) {
        if (roleName.length === 0 || row < 0)
            return undefined;
        if (rowModel && rowModel[roleName] !== undefined)
            return rowModel[roleName];
        if (model && typeof model.get === "function") {
            const data = model.get(row);
            return data ? data[roleName] : undefined;
        }
        if (model && model[row] !== undefined && model[row] !== null)
            return model[row][roleName];
        return undefined;
    }
 
    function _roleText(row, roleName, rowModel) {
        const value = _roleValue(row, roleName, rowModel);
        return value === undefined || value === null ? "" : value.toString();
    }
 
    function _roleEnabled(row, rowModel) {
        const value = _roleValue(row, enabledRole, rowModel);
        return value === undefined || value === null ? true : Boolean(value);
    }
 
    function _isIconSource(value) {
        if (value === undefined || value === null)
            return false;
        const stringValue = value.toString();
        return stringValue.indexOf(":") >= 0 || stringValue.indexOf("/") >= 0
               || stringValue.indexOf(".") >= 0;
    }
 
    implicitWidth: Math.max(MD.Tokens.exposedDropdownMenu.minimumWidth,
                            MD.Tokens.exposedDropdownMenu.preferredWidth)
    implicitHeight: MD.Tokens.exposedDropdownMenu.fieldHeight
                    + _supportingAreaHeight
    leftPadding: mirrored ? _trailingReservation : _leadingReservation
    rightPadding: mirrored ? _leadingReservation : _trailingReservation
    topPadding: 0
    bottomPadding: _supportingAreaHeight
    focusPolicy: Qt.StrongFocus
    hoverEnabled: true
 
    Accessible.name: label.length > 0 ? label : placeholderText
    Accessible.description: error && errorText.length > 0 ? errorText : supportingText
    Accessible.editable: editable
 
    delegate: T.ItemDelegate {
        id: optionDelegate
        required property int index
        required property var model
 
        readonly property string supportingText: control._roleText(
                                                     index, control.supportingTextRole, model)
        readonly property string trailingText: control._roleText(
                                                   index, control.trailingTextRole, model)
        readonly property var badgeContent: control._roleValue(index, control.badgeRole, model)
        readonly property var iconValue: control._roleValue(index, control.leadingIconRole, model)
        readonly property bool selected: control.currentIndex === index
        readonly property bool hasBadge: badgeContent !== undefined && badgeContent !== null
                                         && badgeContent.toString().length > 0
        readonly property bool hasIcon: iconValue !== undefined && iconValue !== null
                                        && iconValue.toString().length > 0
        readonly property var containerShape: {
            if (selected)
                return MD.Tokens.menu.verticalSelectedItemShape;
            if (control.count <= 1)
                return MD.Tokens.menu.verticalOnlyItemShape;
            if (index === 0)
                return MD.Tokens.menu.verticalFirstItemShape;
            if (index === control.count - 1)
                return MD.Tokens.menu.verticalLastItemShape;
            return MD.Tokens.menu.verticalMiddleItemShape;
        }
        readonly property color contentColor: control._vibrantMenu
                                              ? selected
                                                ? control.MD.Style.onTertiaryColor
                                                : control.MD.Style.onTertiaryContainerColor
                                              : selected
                                                ? control.MD.Style.onTertiaryContainerColor
                                                : control.MD.Style.onSurfaceColor
        readonly property color secondaryColor: selected ? contentColor
                                                 : control._vibrantMenu
                                                   ? control.MD.Style.onTertiaryContainerColor
                                                   : control.MD.Style.onSurfaceVariantColor
        readonly property real contentOpacity: enabled ? 1
                                                       : MD.Tokens.menu.disabledContentOpacity
 
        width: ListView.view ? ListView.view.width : implicitWidth
        text: control.textAt(index)
        enabled: control._roleEnabled(index, model)
        highlighted: control.highlightedIndex === index
        implicitHeight: Math.max(MD.Tokens.menu.verticalItemHeight,
                                 optionLabels.implicitHeight
                                 + MD.Tokens.menu.verticalItemTopPadding
                                 + MD.Tokens.menu.verticalItemBottomPadding)
        leftPadding: MD.Tokens.menu.verticalItemLeadingSpace
        rightPadding: MD.Tokens.menu.verticalItemTrailingSpace
        topPadding: MD.Tokens.menu.verticalItemTopPadding
        bottomPadding: MD.Tokens.menu.verticalItemBottomPadding
        spacing: MD.Tokens.menu.verticalItemBetweenSpace
        hoverEnabled: control.hoverEnabled
        focusPolicy: Qt.StrongFocus
        LayoutMirroring.enabled: control.mirrored
        LayoutMirroring.childrenInherit: true
 
        contentItem: Row {
            spacing: optionDelegate.spacing
 
            Item {
                id: optionIcon
                objectName: "menuItemIcon"
                width: MD.Tokens.menu.verticalIconSize
                height: width
                anchors.verticalCenter: parent.verticalCenter
                // Keep the selection/icon slot stable so labels do not move
                // when currentIndex changes.
                visible: true
 
                MD.Symbol {
                    objectName: "menuItemSelection"
                    anchors.fill: parent
                    name: MD.Symbols.check
                    iconWidth: parent.width
                    iconHeight: parent.height
                    color: optionDelegate.secondaryColor
                    opacity: optionDelegate.contentOpacity
                    visible: optionDelegate.selected
                }
                Image {
                    anchors.fill: parent
                    source: control._isIconSource(optionDelegate.iconValue)
                            ? optionDelegate.iconValue : ""
                    sourceSize: Qt.size(width, height)
                    fillMode: Image.PreserveAspectFit
                    opacity: optionDelegate.contentOpacity
                    visible: !optionDelegate.selected
                             && control._isIconSource(optionDelegate.iconValue)
                }
                MD.Symbol {
                    anchors.fill: parent
                    name: optionDelegate.hasIcon
                          && !control._isIconSource(optionDelegate.iconValue)
                          ? optionDelegate.iconValue.toString() : ""
                    iconWidth: parent.width
                    iconHeight: parent.height
                    color: optionDelegate.secondaryColor
                    opacity: optionDelegate.contentOpacity
                    visible: !optionDelegate.selected && optionDelegate.hasIcon
                             && !control._isIconSource(optionDelegate.iconValue)
                }
            }
 
            Column {
                id: optionLabels
                width: Math.max(0, parent.width
                                - (optionIcon.visible ? optionIcon.width
                                                        + optionDelegate.spacing : 0)
                                - (optionTrailing.visible ? optionTrailing.implicitWidth
                                                            + optionDelegate.spacing : 0)
                                - (optionBadge.visible ? optionBadge.implicitWidth
                                                        + optionDelegate.spacing : 0))
                anchors.verticalCenter: parent.verticalCenter
                spacing: 0
                MD.Label {
                    objectName: "menuItemLabel"
                    width: parent.width
                    text: optionDelegate.text
                    typescale: MD.Tokens.typescale.labelLarge
                    color: optionDelegate.contentColor
                    opacity: optionDelegate.contentOpacity
                    horizontalAlignment: optionDelegate.mirrored ? Text.AlignRight : Text.AlignLeft
                    wrapMode: Text.NoWrap
                    elide: Text.ElideRight
                }
                MD.Label {
                    objectName: "menuItemSupportingText"
                    width: parent.width
                    text: optionDelegate.supportingText
                    typescale: MD.Tokens.typescale.bodySmall
                    color: optionDelegate.secondaryColor
                    opacity: optionDelegate.contentOpacity
                    horizontalAlignment: optionDelegate.mirrored ? Text.AlignRight : Text.AlignLeft
                    wrapMode: Text.NoWrap
                    elide: Text.ElideRight
                    visible: text.length > 0
                }
            }
 
            MD.Label {
                id: optionTrailing
                objectName: "menuItemTrailingText"
                anchors.verticalCenter: parent.verticalCenter
                text: optionDelegate.trailingText
                typescale: MD.Tokens.typescale.labelLarge
                color: optionDelegate.secondaryColor
                opacity: optionDelegate.contentOpacity
                visible: text.length > 0
            }
            MD.Label {
                id: optionBadge
                objectName: "menuItemBadge"
                anchors.verticalCenter: parent.verticalCenter
                text: optionDelegate.hasBadge ? optionDelegate.badgeContent.toString() : ""
                typescale: MD.Tokens.typescale.labelSmall
                color: optionDelegate.secondaryColor
                opacity: optionDelegate.contentOpacity
                visible: optionDelegate.hasBadge
            }
        }
 
        background: Rectangle {
            objectName: "menuItemBackground"
            color: optionDelegate.selected
                   ? control._vibrantMenu
                     ? control.MD.Style.tertiaryColor
                     : control.MD.Style.tertiaryContainerColor
                   : "transparent"
            topLeftRadius: UiMetrics.resolveShapeRadius(
                               optionDelegate.containerShape.topLeft, width, height)
            topRightRadius: UiMetrics.resolveShapeRadius(
                                optionDelegate.containerShape.topRight, width, height)
            bottomLeftRadius: UiMetrics.resolveShapeRadius(
                                  optionDelegate.containerShape.bottomLeft, width, height)
            bottomRightRadius: UiMetrics.resolveShapeRadius(
                                   optionDelegate.containerShape.bottomRight, width, height)
 
            MD.Ripple {
                objectName: "menuItemStateLayer"
                anchors.fill: parent
                pressed: optionDelegate.pressed
                pressX: optionDelegate.pressX
                pressY: optionDelegate.pressY
                color: optionDelegate.contentColor
                topLeftRadius: parent.topLeftRadius
                topRightRadius: parent.topRightRadius
                bottomLeftRadius: parent.bottomLeftRadius
                bottomRightRadius: parent.bottomRightRadius
                stateOpacity: {
                    if (!optionDelegate.enabled)
                        return 0;
                    if (optionDelegate.pressed)
                        return MD.Tokens.menu.pressedStateLayerOpacity;
                    if (optionDelegate.visualFocus || optionDelegate.highlighted)
                        return MD.Tokens.menu.focusStateLayerOpacity;
                    if (optionDelegate.hovered)
                        return MD.Tokens.menu.hoverStateLayerOpacity;
                    return 0;
                }
            }
        }
    }
 
    contentItem: T.TextField {
        id: field
        objectName: "exposedDropdownField"
        x: control.leftPadding
        y: 0
        width: Math.max(0, control.width - control.leftPadding - control.rightPadding)
        height: MD.Tokens.exposedDropdownMenu.fieldHeight
        text: control.editable ? control.editText : control.displayText
        enabled: control.editable && control.enabled
        readOnly: !control.editable
        validator: control.validator
        inputMethodHints: control.inputMethodHints
        selectByMouse: control.selectTextByMouse
        color: control.enabled
               ? control._inputColor
               : MD.Color.transparent(control.MD.Style.onSurfaceColor,
                                      MD.Tokens.exposedDropdownMenu.disabledContentOpacity)
        selectionColor: control.MD.Style.primaryColor
        selectedTextColor: control.MD.Style.onPrimaryColor
        font.family: control.MD.Style.plainFontFamily
        font.pixelSize: MD.Tokens.typescale.bodyLarge.fontSize
        font.weight: MD.Tokens.typescale.bodyLarge.fontWeight
        font.letterSpacing: MD.Tokens.typescale.bodyLarge.tracking
        horizontalAlignment: control.mirrored ? Text.AlignRight : Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        leftPadding: 0
        rightPadding: 0
        topPadding: control._filledField
                    ? (fieldDecoration.labelImplicitHeight
                       + MD.Tokens.exposedDropdownMenu.labelInputTextSpace)
                      * fieldDecoration.labelProgress
                    : 0
        bottomPadding: 0
        background: Item {}
        Accessible.ignored: true
    }
 
    indicator: Item {
        objectName: "exposedDropdownIndicator"
        x: control.mirrored ? MD.Tokens.exposedDropdownMenu.horizontalPadding
                            : control.width - width
                              - MD.Tokens.exposedDropdownMenu.horizontalPadding
        y: (MD.Tokens.exposedDropdownMenu.fieldHeight - height) / 2
        width: MD.Tokens.exposedDropdownMenu.trailingIconSize
        height: width
        opacity: control.enabled ? 1 : MD.Tokens.exposedDropdownMenu.disabledContentOpacity
 
        MD.Symbol {
            objectName: "exposedDropdownTrailingIcon"
            anchors.fill: parent
            name: MD.Symbols.arrowDropDown
            iconWidth: parent.width
            iconHeight: parent.height
            color: control._trailingIconColor
            rotation: control.popup.visible ? 180 : 0
        }
    }
 
    background: Loader {
        sourceComponent: fieldDecoration.backgroundComponent
    }
 
    Component {
        id: exposedDropdownLeadingIcon
 
        Item {
            objectName: "exposedDropdownLeadingIcon"
            width: control._leadingIconSize
            height: width
            opacity: control.enabled
                     ? 1 : MD.Tokens.exposedDropdownMenu.disabledContentOpacity
 
            Image {
                anchors.fill: parent
                source: control.leadingIconSource
                sourceSize: Qt.size(width, height)
                fillMode: Image.PreserveAspectFit
                visible: source.toString().length > 0
            }
 
            MD.Symbol {
                anchors.fill: parent
                name: control.leadingIconName
                iconWidth: parent.width
                iconHeight: parent.height
                color: control._leadingIconColor
                visible: control.leadingIconSource.toString().length === 0
                         && control.leadingIconName.length > 0
            }
        }
    }
 
    P.FieldDecoration {
        id: fieldDecoration
        objectName: "exposedDropdownFieldDecoration"
        anchors.fill: parent
 
        containerObjectName: "exposedDropdownBackground"
        activeIndicatorObjectName: "exposedDropdownActiveIndicator"
        labelNotchObjectName: "exposedDropdownLabelNotch"
        labelObjectName: "exposedDropdownLabel"
        placeholderObjectName: "exposedDropdownPlaceholder"
        prefixObjectName: "exposedDropdownPrefix"
        suffixObjectName: "exposedDropdownSuffix"
        leadingSlotObjectName: "exposedDropdownLeadingSlot"
        trailingSlotObjectName: "exposedDropdownTrailingSlot"
        supportingObjectName: "exposedDropdownSupportingText"
        errorObjectName: "exposedDropdownErrorText"
        mirrored: control.mirrored
        outlined: control._outlinedField
        fieldFocused: control._fieldActive
        fieldEnabled: control.enabled
        error: control.error
        containerTransitionsEnabled: true
        labelTransitionsEnabled: true
        indicatorTransitionsEnabled: control.enabled
        applySlotDisabledOpacity: false
        backgroundImplicitWidth: Math.max(
                                     MD.Tokens.exposedDropdownMenu.minimumWidth,
                                     MD.Tokens.exposedDropdownMenu.preferredWidth)
        containerHeight: MD.Tokens.exposedDropdownMenu.fieldHeight
        horizontalPadding: MD.Tokens.exposedDropdownMenu.horizontalPadding
        contentVerticalPadding: MD.Tokens.exposedDropdownMenu.contentVerticalPadding
        supportingTextTopSpace: MD.Tokens.exposedDropdownMenu.supportingTextTopSpace
        supportingTextMinimumHeight: 0
        outlinedLabelHorizontalPadding: MD.Tokens.exposedDropdownMenu.outlinedLabelHorizontalPadding
        disabledContentOpacity: MD.Tokens.exposedDropdownMenu.disabledContentOpacity
        leadingSlotMinimumSize: control._leadingIconSize
        trailingSlotMinimumSize: 0
        inputCenterY: MD.Tokens.exposedDropdownMenu.fieldHeight / 2
        inputBaselineY: field.baselineOffset
        alignInputDecorationsToBaseline: true
        leadingReservation: control._leadingReservation
        trailingReservation: control._trailingReservation
        inputLeftPadding: control.leftPadding
        inputRightPadding: control.rightPadding
        labelLeadingPosition: control._leadingReservation
                              + (control._outlinedField
                                 ? MD.Tokens.exposedDropdownMenu.outlinedLabelHorizontalPadding
                                   * labelProgress
                                 : 0)
        labelTrailingPosition: control._trailingReservation
                               + (control._outlinedField
                                  ? MD.Tokens.exposedDropdownMenu.outlinedLabelHorizontalPadding
                                    * labelProgress
                                  : 0)
        fullShapeValue: MD.Tokens.shape.cornerValueFull
        labelText: control.label
        placeholderText: control.placeholderText
        inputText: field.text
        prefixText: ""
        suffixText: ""
        supportingText: control.supportingText
        errorText: control.errorText
        containerColor: control.flat || control._outlinedField
                        ? "transparent"
                        : !control.enabled
                          ? MD.Color.transparent(
                                control.MD.Style.onSurfaceColor,
                                MD.Tokens.exposedDropdownMenu.filledDisabledContainerOpacity)
                          : control.MD.Style.surfaceContainerHighestColor
        outlineColor: !control.enabled
                      ? MD.Color.transparent(
                            control.MD.Style.onSurfaceColor,
                            MD.Tokens.exposedDropdownMenu.outlinedDisabledOutlineOpacity)
                      : control._indicatorColor
        indicatorColor: control._indicatorColor
        labelColor: control._labelColor
        inputDecorationColor: control.enabled
                              ? control.MD.Style.onSurfaceVariantColor
                              : control.MD.Style.onSurfaceColor
        supportingColor: control._supportingColor
        notchColor: control.MD.Style.surfaceColor
        containerShape: control._filledField
                        ? MD.Tokens.exposedDropdownMenu.filledContainerShape
                        : MD.Tokens.exposedDropdownMenu.outlinedContainerShape
        outlineWidth: control._outlinedField && !control.flat
                      ? control._fieldActive
                        ? MD.Tokens.exposedDropdownMenu.outlinedFocusOutlineWidth
                        : control.hovered
                          ? MD.Tokens.exposedDropdownMenu.outlinedHoverOutlineWidth
                          : MD.Tokens.exposedDropdownMenu.outlinedOutlineWidth
                      : 0
        activeIndicatorVisible: control._filledField && !control.flat
        activeIndicatorHeight: control._fieldActive
                               ? MD.Tokens.exposedDropdownMenu.filledFocusActiveIndicatorHeight
                               : control.hovered
                                 ? MD.Tokens.exposedDropdownMenu.filledHoverActiveIndicatorHeight
                                 : MD.Tokens.exposedDropdownMenu.filledActiveIndicatorHeight
        activeIndicatorOpacity: control.enabled
                                ? 1
                                : MD.Tokens.exposedDropdownMenu.disabledContentOpacity
        fontFamily: control.MD.Style.plainFontFamily
        bodyLargeTypeScale: MD.Tokens.typescale.bodyLarge
        bodySmallTypeScale: MD.Tokens.typescale.bodySmall
        supportingWrapMode: Text.Wrap
        supportingElide: Text.ElideRight
        effectsDuration: MotionAnimation.expressiveFastEffectsDuration
        slowEffectsDuration: MotionAnimation.expressiveSlowEffectsDuration
        spatialDuration: MotionAnimation.expressiveFastSpatialDuration
        effectsCurve: MotionAnimation.expressiveFastEffectsCurve
        slowEffectsCurve: MotionAnimation.expressiveSlowEffectsCurve
        spatialCurve: MotionAnimation.expressiveFastSpatialCurve
        leading: control._hasLeadingIcon ? exposedDropdownLeadingIcon : null
    }
 
    popup: T.Popup {
        id: dropdownPopup
        objectName: "exposedDropdownPopup"
 
        property alias currentIndex: menuList.currentIndex
        readonly property real _fieldWindowY: control.mapToItem(null, 0, 0).y
        readonly property var _window: control.parent ? control.parent.Window.window : null
        readonly property real _availableBelow: _window
                                                ? _window.height - _fieldWindowY
                                                  - MD.Tokens.exposedDropdownMenu.fieldHeight
                                                  - MD.Tokens.menu.verticalViewportMargin
                                                  - MD.Tokens.exposedDropdownMenu.popupAnchorGap
                                                : Number.POSITIVE_INFINITY
        readonly property real _availableAbove: _window
                                                ? _fieldWindowY
                                                  - MD.Tokens.menu.verticalViewportMargin
                                                  - MD.Tokens.exposedDropdownMenu.popupAnchorGap
                                                : Number.POSITIVE_INFINITY
        readonly property real _naturalHeight: menuList.contentHeight + topPadding + bottomPadding
        readonly property bool _opensBelow: _availableBelow >= _naturalHeight
                                            || _availableBelow >= _availableAbove
        readonly property real _availableHeight: Math.max(0, _opensBelow
                                                             ? _availableBelow
                                                             : _availableAbove)
 
        function itemAt(row) {
            return menuList.itemAtIndex(row);
        }
 
        x: control.mirrored ? control.width - width : 0
        y: _opensBelow
           ? MD.Tokens.exposedDropdownMenu.fieldHeight
             + MD.Tokens.exposedDropdownMenu.popupAnchorGap
           : -implicitHeight - MD.Tokens.exposedDropdownMenu.popupAnchorGap
        width: control.width
        implicitWidth: control.width
        implicitHeight: Math.min(_naturalHeight, _availableHeight)
        margins: 0
        leftMargin: MD.Tokens.menu.horizontalViewportMargin
        rightMargin: MD.Tokens.menu.horizontalViewportMargin
        topMargin: MD.Tokens.menu.verticalViewportMargin
        bottomMargin: MD.Tokens.menu.verticalViewportMargin
        topPadding: MD.Tokens.menu.verticalGroupPadding
        bottomPadding: MD.Tokens.menu.verticalGroupPadding
        leftPadding: MD.Tokens.menu.verticalGroupPadding
        rightPadding: MD.Tokens.menu.verticalGroupPadding
        focus: true
        modal: false
        closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside
        transformOrigin: _opensBelow ? Item.Top : Item.Bottom
 
        contentItem: ListView {
            id: menuList
            objectName: "menuListView"
            implicitHeight: contentHeight
            model: control.delegateModel
            currentIndex: control.highlightedIndex
            interactive: contentHeight + dropdownPopup.topPadding + dropdownPopup.bottomPadding
                         > dropdownPopup.height
            boundsBehavior: Flickable.StopAtBounds
            spacing: MD.Tokens.menu.verticalSegmentedGap
            clip: true
            ScrollIndicator.vertical: MD.ScrollIndicator {}
        }
 
        background: MD.ElevationRectangle {
            objectName: "exposedDropdownPopupBackground"
            color: control._vibrantMenu
                   ? control.MD.Style.tertiaryContainerColor
                   : control.MD.Style.surfaceContainerLowColor
            topLeftRadius: UiMetrics.resolveShapeRadius(
                               MD.Tokens.exposedDropdownMenu.popupContainerShape.topLeft,
                               width, height)
            topRightRadius: UiMetrics.resolveShapeRadius(
                                MD.Tokens.exposedDropdownMenu.popupContainerShape.topRight,
                                width, height)
            bottomLeftRadius: UiMetrics.resolveShapeRadius(
                                  MD.Tokens.exposedDropdownMenu.popupContainerShape.bottomLeft,
                                  width, height)
            bottomRightRadius: UiMetrics.resolveShapeRadius(
                                   MD.Tokens.exposedDropdownMenu.popupContainerShape.bottomRight,
                                   width, height)
            elevation: MD.Tokens.exposedDropdownMenu.popupContainerElevation
        }
 
        enter: Transition {
            NumberAnimation {
                property: "scale"
                from: MD.Tokens.menu.closedScale
                to: 1
                duration: MotionAnimation.expressiveFastSpatialDuration
                easing.type: Easing.BezierSpline
                easing.bezierCurve: MotionAnimation.expressiveFastSpatialCurve
            }
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: MotionAnimation.expressiveFastEffectsDuration
                easing.type: Easing.BezierSpline
                easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
            }
        }
 
        exit: Transition {
            NumberAnimation {
                property: "scale"
                from: 1
                to: MD.Tokens.menu.closedScale
                duration: MotionAnimation.expressiveFastSpatialDuration
                easing.type: Easing.BezierSpline
                easing.bezierCurve: MotionAnimation.expressiveFastSpatialCurve
            }
            NumberAnimation {
                property: "opacity"
                from: 1
                to: 0
                duration: MotionAnimation.expressiveFastEffectsDuration
                easing.type: Easing.BezierSpline
                easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
            }
        }
    }
}