@pmndrs/uikit-horizon/dist/dropdown/list.js

Horizon kit for @pmndrs/uikit based on the Reality Labs Design System (RLDS)

import { Container } from '@pmndrs/uikit';
import { theme } from '../theme.js';
import { computed } from '@preact/signals-core';
import { Dropdown } from './index.js';
export class DropdownList extends Container {
    constructor(inputProperties, initialClasses, config) {
        super(inputProperties, initialClasses, {
            ...config,
            defaultOverrides: {
                minWidth: '100%',
                backgroundColor: '#5c5c5c',
                color: theme.component.selectionDropdown.label.hovered,
                display: computed(() => this.parentContainer.value instanceof Dropdown && this.parentContainer.value.currentOpenSignal.value
                    ? 'flex'
                    : 'none'),
                zIndex: 10000,
                '*': {
                    zIndex: 10000,
                },
                flexDirection: 'column',
                positionType: 'absolute',
                positionTop: '110%',
                positionLeft: 0,
                borderRadius: 16,
                padding: 8,
                gap: 8,
                ...config?.defaultOverrides,
            },
        });
    }
}