@grafana/ui/dist/cjs/components/Combobox/getComboboxStyles.cjs.map

Grafana Components Library

{"version":3,"file":"getComboboxStyles.cjs","sources":["../../../../src/components/Combobox/getComboboxStyles.ts"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\n// We need a px font size to accurately measure the width of items.\n// This should be in sync with the body font size in the theme.\nexport const MENU_ITEM_FONT_SIZE = 14;\nexport const MENU_ITEM_DESCRIPTION_FONT_SIZE = 12;\nexport const MENU_ITEM_FONT_WEIGHT = 500;\nexport const MENU_ITEM_PADDING = 8;\nconst MENU_ITEM_GAP = 2;\nconst MENU_ITEM_LINE_HEIGHT = 1.5;\n\n// Used with Downshift to get the height of each item\nexport const MENU_OPTION_HEIGHT = MENU_ITEM_GAP + MENU_ITEM_PADDING * 2 + MENU_ITEM_FONT_SIZE * MENU_ITEM_LINE_HEIGHT;\nexport const MENU_OPTION_HEIGHT_DESCRIPTION =\n  MENU_OPTION_HEIGHT + MENU_ITEM_DESCRIPTION_FONT_SIZE * MENU_ITEM_LINE_HEIGHT;\nexport const POPOVER_MAX_HEIGHT = MENU_OPTION_HEIGHT * 8.5;\n\nexport const getComboboxStyles = (theme: GrafanaTheme2) => {\n  return {\n    menuClosed: css({\n      display: 'none',\n    }),\n    menu: css({\n      label: 'combobox-menu',\n      background: theme.components.dropdown.background,\n      boxShadow: theme.shadows.z3,\n      zIndex: theme.zIndex.dropdown,\n      position: 'relative',\n      borderRadius: theme.shape.radius.lg,\n      overflow: 'hidden',\n    }),\n    menuUlContainer: css({\n      label: 'combobox-menu-ul-container',\n      listStyle: 'none',\n    }),\n\n    // The wrapper around the group header and option, not the option itself.\n    // Should not contain visual styling itself.\n    listItem: css({\n      label: 'list-item',\n      position: 'absolute',\n      width: '100%',\n    }),\n\n    optionGroupHeader: css({\n      label: 'combobox-new-option-group',\n      borderTop: `1px solid ${theme.colors.border.weak}`,\n    }),\n\n    optionFirstGroupHeader: css({\n      borderTop: 'none',\n    }),\n\n    optionGroupLabel: css({\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      letterSpacing: 0,\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightLight,\n      padding: MENU_ITEM_PADDING,\n    }),\n\n    option: css({\n      label: 'combobox-option',\n      position: 'relative', // for the selection gradient to grab to\n      display: 'flex',\n      width: '100%',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n      padding: MENU_ITEM_PADDING,\n      marginBottom: MENU_ITEM_GAP,\n      borderRadius: theme.shape.radius.default,\n      fontWeight: theme.typography.fontWeightMedium,\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      cursor: 'pointer',\n      '&:hover': {\n        background: theme.colors.action.hover,\n        '@media (forced-colors: active), (prefers-contrast: more)': {\n          border: `1px solid ${theme.colors.primary.border}`,\n        },\n      },\n    }),\n\n    optionAccessory: css({\n      label: 'combobox-option-accessory',\n      height: MENU_ITEM_FONT_SIZE * MENU_ITEM_LINE_HEIGHT, // Ensure the accessory doesn't make the option too tall\n    }),\n\n    optionBody: css({\n      label: 'combobox-option-body',\n      display: 'flex',\n      flexDirection: 'column',\n      flexGrow: 1,\n      overflow: 'hidden',\n    }),\n\n    optionLabel: css({\n      label: 'combobox-option-label',\n      fontSize: MENU_ITEM_FONT_SIZE,\n      fontWeight: MENU_ITEM_FONT_WEIGHT,\n      lineHeight: MENU_ITEM_LINE_HEIGHT,\n      letterSpacing: 0,\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    }),\n\n    optionDescription: css({\n      label: 'combobox-option-description',\n      color: theme.colors.text.secondary,\n      fontSize: MENU_ITEM_DESCRIPTION_FONT_SIZE,\n      fontWeight: theme.typography.fontWeightRegular,\n      lineHeight: MENU_ITEM_LINE_HEIGHT,\n      letterSpacing: 0,\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    }),\n\n    optionFocused: css({\n      label: 'combobox-option-focused',\n      // top: 0,\n      background: theme.colors.action.focus,\n      '@media (forced-colors: active), (prefers-contrast: more)': {\n        border: `1px solid ${theme.colors.primary.border}`,\n      },\n    }),\n    optionSelected: css({\n      background: theme.colors.action.selected,\n      '&::before': {\n        backgroundImage: theme.colors.gradients.brandVertical,\n        borderRadius: theme.shape.radius.default,\n        content: '\" \"',\n        display: 'block',\n        height: '100%',\n        position: 'absolute',\n        width: theme.spacing(0.5),\n        left: 0,\n        top: 0,\n      },\n    }),\n    optionInfo: css({\n      label: 'combobox-option-info',\n      color: theme.colors.text.disabled,\n      cursor: 'not-allowed',\n      pointerEvents: 'none',\n      '&:hover': {\n        background: 'transparent',\n      },\n    }),\n    clear: css({\n      label: 'combobox-clear',\n      cursor: 'pointer',\n      pointerEvents: 'auto',\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n    input: css({\n      label: 'combobox-input',\n      '> div > div:last-child': {\n        pointerEvents: 'none',\n      },\n      '& input': {\n        cursor: 'pointer',\n      },\n      '& input:focus': {\n        cursor: 'text',\n      },\n    }),\n    adaptToParent: css({\n      label: 'combobox-adapt-to-parent',\n      maxWidth: '100%',\n      '[class*=\"input-wrapper-combobox-input\"]': {\n        maxWidth: '100%',\n      },\n    }),\n  };\n};\n"],"names":["css"],"mappings":"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"}