@grafana/ui/dist/esm/components/Combobox/getComboboxStyles.mjs.map

Grafana Components Library

{"version":3,"file":"getComboboxStyles.mjs","sources":["../../../../src/components/Combobox/getComboboxStyles.ts"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { 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;\nexport const MENU_ITEM_GAP = 2;\nexport const 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.default,\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    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":[],"mappings":";;AAMO,MAAM,mBAAsB,GAAA;AAC5B,MAAM,+BAAkC,GAAA;AACxC,MAAM,qBAAwB,GAAA;AAC9B,MAAM,iBAAoB,GAAA;AAC1B,MAAM,aAAgB,GAAA;AACtB,MAAM,qBAAwB,GAAA;AAG9B,MAAM,kBAAqB,GAAA,aAAA,GAAgB,iBAAoB,GAAA,CAAA,GAAI,mBAAsB,GAAA;AACnF,MAAA,8BAAA,GACX,qBAAqB,+BAAkC,GAAA;AAClD,MAAM,qBAAqB,kBAAqB,GAAA;AAE1C,MAAA,iBAAA,GAAoB,CAAC,KAAyB,KAAA;AACzD,EAAO,OAAA;AAAA,IACL,YAAY,GAAI,CAAA;AAAA,MACd,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAO,EAAA,eAAA;AAAA,MACP,UAAA,EAAY,KAAM,CAAA,UAAA,CAAW,QAAS,CAAA,UAAA;AAAA,MACtC,SAAA,EAAW,MAAM,OAAQ,CAAA,EAAA;AAAA,MACzB,MAAA,EAAQ,MAAM,MAAO,CAAA,QAAA;AAAA,MACrB,QAAU,EAAA,UAAA;AAAA,MACV,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACjC,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,iBAAiB,GAAI,CAAA;AAAA,MACnB,KAAO,EAAA,4BAAA;AAAA,MACP,SAAW,EAAA;AAAA,KACZ,CAAA;AAAA;AAAA;AAAA,IAID,UAAU,GAAI,CAAA;AAAA,MACZ,KAAO,EAAA,WAAA;AAAA,MACP,QAAU,EAAA,UAAA;AAAA,MACV,KAAO,EAAA;AAAA,KACR,CAAA;AAAA,IAED,mBAAmB,GAAI,CAAA;AAAA,MACrB,KAAO,EAAA,2BAAA;AAAA,MACP,SAAW,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,IAAI,CAAA;AAAA,KACjD,CAAA;AAAA,IAED,wBAAwB,GAAI,CAAA;AAAA,MAC1B,SAAW,EAAA;AAAA,KACZ,CAAA;AAAA,IAED,kBAAkB,GAAI,CAAA;AAAA,MACpB,YAAc,EAAA,UAAA;AAAA,MACd,QAAU,EAAA,QAAA;AAAA,MACV,aAAe,EAAA,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,UAAW,CAAA,eAAA;AAAA,MAC7B,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,IAED,QAAQ,GAAI,CAAA;AAAA,MACV,KAAO,EAAA,iBAAA;AAAA,MACP,QAAU,EAAA,UAAA;AAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,KAAO,EAAA,MAAA;AAAA,MACP,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,iBAAA;AAAA,MACT,YAAc,EAAA,aAAA;AAAA,MACd,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACjC,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,QAAA;AAAA,MACV,MAAQ,EAAA,SAAA;AAAA,MACR,SAAW,EAAA;AAAA,QACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,KAAA;AAAA,QAChC,0DAA4D,EAAA;AAAA,UAC1D,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AAAA,IAED,iBAAiB,GAAI,CAAA;AAAA,MACnB,KAAO,EAAA,2BAAA;AAAA,MACP,QAAQ,mBAAsB,GAAA;AAAA;AAAA,KAC/B,CAAA;AAAA,IAED,YAAY,GAAI,CAAA;AAAA,MACd,KAAO,EAAA,sBAAA;AAAA,MACP,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,QAAA;AAAA,MACf,QAAU,EAAA,CAAA;AAAA,MACV,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IAED,aAAa,GAAI,CAAA;AAAA,MACf,KAAO,EAAA,uBAAA;AAAA,MACP,QAAU,EAAA,mBAAA;AAAA,MACV,UAAY,EAAA,qBAAA;AAAA,MACZ,UAAY,EAAA,qBAAA;AAAA,MACZ,aAAe,EAAA,CAAA;AAAA,MACf,YAAc,EAAA,UAAA;AAAA,MACd,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IAED,mBAAmB,GAAI,CAAA;AAAA,MACrB,KAAO,EAAA,6BAAA;AAAA,MACP,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,QAAU,EAAA,+BAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA,iBAAA;AAAA,MAC7B,UAAY,EAAA,qBAAA;AAAA,MACZ,aAAe,EAAA,CAAA;AAAA,MACf,YAAc,EAAA,UAAA;AAAA,MACd,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IAED,eAAe,GAAI,CAAA;AAAA,MACjB,KAAO,EAAA,yBAAA;AAAA;AAAA,MAEP,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,KAAA;AAAA,MAChC,0DAA4D,EAAA;AAAA,QAC1D,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA;AAAA;AAClD,KACD,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,QAAA;AAAA,MAChC,WAAa,EAAA;AAAA,QACX,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,SAAU,CAAA,aAAA;AAAA,QACxC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,QACjC,OAAS,EAAA,KAAA;AAAA,QACT,OAAS,EAAA,OAAA;AAAA,QACT,MAAQ,EAAA,MAAA;AAAA,QACR,QAAU,EAAA,UAAA;AAAA,QACV,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,QACxB,IAAM,EAAA,CAAA;AAAA,QACN,GAAK,EAAA;AAAA;AACP,KACD,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,KAAO,EAAA,gBAAA;AAAA,MACP,MAAQ,EAAA,SAAA;AAAA,MACR,aAAe,EAAA,MAAA;AAAA,MACf,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,KAAO,EAAA,gBAAA;AAAA,MACP,wBAA0B,EAAA;AAAA,QACxB,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,SAAW,EAAA;AAAA,QACT,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,MAAQ,EAAA;AAAA;AACV,KACD,CAAA;AAAA,IACD,eAAe,GAAI,CAAA;AAAA,MACjB,KAAO,EAAA,0BAAA;AAAA,MACP,QAAU,EAAA,MAAA;AAAA,MACV,yCAA2C,EAAA;AAAA,QACzC,QAAU,EAAA;AAAA;AACZ,KACD;AAAA,GACH;AACF;;;;"}