@arizeai/phoenix-mcp

import { css } from "@emotion/react"; import { fieldPopoverCSS } from "../field/styles"; export const comboBoxCSS = css` &[data-size="M"] { --combobox-input-height: var(--ac-global-input-height-s); --combobox-vertical-padding: 6px; --combobox-start-padding: var(--ac-global-dimension-static-size-100); --combobox-end-padding: var(--ac-global-dimension-static-size-50); } &[data-size="L"] { --combobox-input-height: var(--ac-global-input-height-m); --combobox-vertical-padding: 10px; --combobox-start-padding: var(--ac-global-dimension-static-size-200); --combobox-end-padding: var(--ac-global-dimension-static-size-100); } color: var(--ac-global-text-color-900); &[data-required] { .react-aria-Label { &::after { content: " *"; } } } .px-combobox-container { display: flex; flex-direction: row; min-width: 200px; position: relative; .react-aria-Input { height: var(--combobox-input-height); box-sizing: border-box; padding: var(--combobox-vertical-padding) var(--combobox-end-padding) var(--combobox-vertical-padding) var(--combobox-start-padding); &:hover:not([disabled]) { background-color: var(--ac-global-input-field-border-color-hover); } } .react-aria-Button { /* Account for the border width of the input */ padding: 0 calc(var(--combobox-end-padding) + 1px); background: none; color: inherit; forced-color-adjust: none; position: absolute; top: 50%; right: 0; border: none; transform: translateY(-50%); cursor: pointer; &[data-disabled] { opacity: var(--ac-global-opacity-disabled); } } } `; export const comboBoxPopoverCSS = css( fieldPopoverCSS, css` .react-aria-ListBox { display: block; width: unset; max-height: inherit; min-height: unset; border: none; overflow: auto; } ` ); export const comboBoxItemCSS = css` outline: none; display: flex; align-items: center; justify-content: space-between; color: var(--ac-global-text-color-900); padding: var(--ac-global-dimension-static-size-100) var(--ac-global-dimension-static-size-200); font-size: var(--ac-global-dimension-static-font-size-100); cursor: pointer; position: relative; & > .ac-icon-wrap.px-menu-item__selected-checkmark { height: var(--ac-global-dimension-static-size-200); width: var(--ac-global-dimension-static-size-200); } &[href] { text-decoration: none; cursor: pointer; } &[data-selected] { i { color: var(--ac-global-color-primary); } } &[data-focused], &[data-hovered] { background-color: var(--ac-global-menu-item-background-color-hover); } &[data-disabled] { cursor: not-allowed; color: var(--ac-global-color-text-30); } &[data-focus-visible] { outline: none; } `;