@grafana/ui/dist/esm/components/Text/Text.mjs.map

Grafana Components Library

{"version":3,"file":"Text.mjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { createElement, CSSProperties } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, ThemeTypographyVariantTypes } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { TruncatedText } from './TruncatedText';\nimport { customWeight, customColor, customVariant } from './utils';\n\nexport interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {\n  /** Defines what HTML element is defined underneath. \"span\" by default */\n  element?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'li';\n  /** What typograpy variant should be used for the component. Only use if default variant for the defined element is not what is needed */\n  variant?: keyof ThemeTypographyVariantTypes;\n  /** Override the default weight for the used variant */\n  weight?: 'light' | 'regular' | 'medium' | 'bold';\n  /** Color to use for text */\n  color?: keyof GrafanaTheme2['colors']['text'] | 'error' | 'success' | 'warning' | 'info';\n  /** Use to cut the text off with ellipsis if there isn't space to show all of it. On hover shows the rest of the text */\n  truncate?: boolean;\n  /** If true, show the text as italic. False by default */\n  italic?: boolean;\n  /** If true, numbers will have fixed width, useful for displaying tabular data. False by default */\n  tabular?: boolean;\n  /** Whether to align the text to left, center or right */\n  textAlignment?: CSSProperties['textAlign'];\n  children: NonNullable<React.ReactNode>;\n}\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\n  (\n    { element = 'span', variant, weight, color, truncate, italic, textAlignment, children, tabular, ...restProps },\n    ref\n  ) => {\n    const styles = useStyles2(getTextStyles, element, variant, color, weight, truncate, italic, textAlignment, tabular);\n\n    const childElement = (ref: React.ForwardedRef<HTMLElement> | undefined) => {\n      return createElement(\n        element,\n        {\n          ...restProps,\n          style: undefined, // Remove the style prop to avoid overriding the styles\n          className: styles,\n          // When overflowing, the internalRef is passed to the tooltip, which forwards it to the child element\n          ref,\n        },\n        children\n      );\n    };\n\n    // A 'span' is an inline element, so it can't be truncated\n    // and it should be wrapped in a parent element that will show the tooltip\n    if (!truncate || element === 'span') {\n      return childElement(undefined);\n    }\n\n    return (\n      <TruncatedText\n        childElement={childElement}\n        // eslint-disable-next-line react/no-children-prop\n        children={children}\n        ref={ref}\n      />\n    );\n  }\n);\n\nText.displayName = 'Text';\n\nconst getTextStyles = (\n  theme: GrafanaTheme2,\n  element?: TextProps['element'],\n  variant?: keyof ThemeTypographyVariantTypes,\n  color?: TextProps['color'],\n  weight?: TextProps['weight'],\n  truncate?: TextProps['truncate'],\n  italic?: TextProps['italic'],\n  textAlignment?: TextProps['textAlignment'],\n  tabular?: TextProps['tabular']\n) => {\n  return css([\n    {\n      margin: 0,\n      padding: 0,\n      ...customVariant(theme, element, variant),\n    },\n    variant && {\n      ...theme.typography[variant],\n    },\n    color && {\n      color: customColor(color, theme),\n    },\n    weight && {\n      fontWeight: customWeight(weight, theme),\n    },\n    truncate && {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    italic && {\n      fontStyle: 'italic',\n    },\n    textAlignment && {\n      textAlign: textAlignment,\n    },\n    tabular && {\n      fontFeatureSettings: '\"tnum\"',\n    },\n  ]);\n};\n"],"names":["ref"],"mappings":";;;;;;;;AA+BO,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CACE,EAAE,OAAU,GAAA,MAAA,EAAQ,SAAS,MAAQ,EAAA,KAAA,EAAO,QAAU,EAAA,MAAA,EAAQ,eAAe,QAAU,EAAA,OAAA,EAAS,GAAG,SAAA,IACnG,GACG,KAAA;AACH,IAAM,MAAA,MAAA,GAAS,UAAW,CAAA,aAAA,EAAe,OAAS,EAAA,OAAA,EAAS,OAAO,MAAQ,EAAA,QAAA,EAAU,MAAQ,EAAA,aAAA,EAAe,OAAO,CAAA;AAElH,IAAM,MAAA,YAAA,GAAe,CAACA,IAAqD,KAAA;AACzE,MAAO,OAAA,aAAA;AAAA,QACL,OAAA;AAAA,QACA;AAAA,UACE,GAAG,SAAA;AAAA,UACH,KAAO,EAAA,KAAA,CAAA;AAAA;AAAA,UACP,SAAW,EAAA,MAAA;AAAA;AAAA,UAEX,GAAAA,EAAAA;AAAA,SACF;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAIA,IAAI,IAAA,CAAC,QAAY,IAAA,OAAA,KAAY,MAAQ,EAAA;AACnC,MAAA,OAAO,aAAa,KAAS,CAAA,CAAA;AAAA;AAG/B,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,YAAA;AAAA,QAEA,QAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA;AAGN;AAEA,IAAA,CAAK,WAAc,GAAA,MAAA;AAEnB,MAAM,aAAA,GAAgB,CACpB,KAAA,EACA,OACA,EAAA,OAAA,EACA,OACA,MACA,EAAA,QAAA,EACA,MACA,EAAA,aAAA,EACA,OACG,KAAA;AACH,EAAA,OAAO,GAAI,CAAA;AAAA,IACT;AAAA,MACE,MAAQ,EAAA,CAAA;AAAA,MACR,OAAS,EAAA,CAAA;AAAA,MACT,GAAG,aAAA,CAAc,KAAO,EAAA,OAAA,EAAS,OAAO;AAAA,KAC1C;AAAA,IACA,OAAW,IAAA;AAAA,MACT,GAAG,KAAM,CAAA,UAAA,CAAW,OAAO;AAAA,KAC7B;AAAA,IACA,KAAS,IAAA;AAAA,MACP,KAAA,EAAO,WAAY,CAAA,KAAA,EAAO,KAAK;AAAA,KACjC;AAAA,IACA,MAAU,IAAA;AAAA,MACR,UAAA,EAAY,YAAa,CAAA,MAAA,EAAQ,KAAK;AAAA,KACxC;AAAA,IACA,QAAY,IAAA;AAAA,MACV,QAAU,EAAA,QAAA;AAAA,MACV,YAAc,EAAA,UAAA;AAAA,MACd,UAAY,EAAA;AAAA,KACd;AAAA,IACA,MAAU,IAAA;AAAA,MACR,SAAW,EAAA;AAAA,KACb;AAAA,IACA,aAAiB,IAAA;AAAA,MACf,SAAW,EAAA;AAAA,KACb;AAAA,IACA,OAAW,IAAA;AAAA,MACT,mBAAqB,EAAA;AAAA;AACvB,GACD,CAAA;AACH,CAAA;;;;"}