@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\n/**\n * The Text component can be used to apply typography styles in a simple way, without the need of extra css.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/foundations-text--docs\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":";;;;;;;;;AAoCO,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CACE,EAAE,OAAA,GAAU,MAAA,EAAQ,SAAS,MAAA,EAAQ,KAAA,EAAO,QAAA,EAAU,MAAA,EAAQ,eAAe,QAAA,EAAU,OAAA,EAAS,GAAG,SAAA,IACnG,GAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAS,UAAA,CAAW,aAAA,EAAe,OAAA,EAAS,OAAA,EAAS,OAAO,MAAA,EAAQ,QAAA,EAAU,MAAA,EAAQ,aAAA,EAAe,OAAO,CAAA;AAElH,IAAA,MAAM,YAAA,GAAe,CAACA,IAAAA,KAAqD;AACzE,MAAA,OAAO,aAAA;AAAA,QACL,OAAA;AAAA,QACA;AAAA,UACE,GAAG,SAAA;AAAA,UACH,KAAA,EAAO,KAAA,CAAA;AAAA;AAAA,UACP,SAAA,EAAW,MAAA;AAAA;AAAA,UAEX,GAAA,EAAAA;AAAA,SACF;AAAA,QACA;AAAA,OACF;AAAA,IACF,CAAA;AAIA,IAAA,IAAI,CAAC,QAAA,IAAY,OAAA,KAAY,MAAA,EAAQ;AACnC,MAAA,OAAO,aAAa,KAAA,CAAS,CAAA;AAAA,IAC/B;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,YAAA;AAAA,QAEA,QAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;AAEnB,MAAM,aAAA,GAAgB,CACpB,KAAA,EACA,OAAA,EACA,OAAA,EACA,OACA,MAAA,EACA,QAAA,EACA,MAAA,EACA,aAAA,EACA,OAAA,KACG;AACH,EAAA,OAAO,GAAA,CAAI;AAAA,IACT;AAAA,MACE,MAAA,EAAQ,CAAA;AAAA,MACR,OAAA,EAAS,CAAA;AAAA,MACT,GAAG,aAAA,CAAc,KAAA,EAAO,OAAA,EAAS,OAAO;AAAA,KAC1C;AAAA,IACA,OAAA,IAAW;AAAA,MACT,GAAG,KAAA,CAAM,UAAA,CAAW,OAAO;AAAA,KAC7B;AAAA,IACA,KAAA,IAAS;AAAA,MACP,KAAA,EAAO,WAAA,CAAY,KAAA,EAAO,KAAK;AAAA,KACjC;AAAA,IACA,MAAA,IAAU;AAAA,MACR,UAAA,EAAY,YAAA,CAAa,MAAA,EAAQ,KAAK;AAAA,KACxC;AAAA,IACA,QAAA,IAAY;AAAA,MACV,QAAA,EAAU,QAAA;AAAA,MACV,YAAA,EAAc,UAAA;AAAA,MACd,UAAA,EAAY;AAAA,KACd;AAAA,IACA,MAAA,IAAU;AAAA,MACR,SAAA,EAAW;AAAA,KACb;AAAA,IACA,aAAA,IAAiB;AAAA,MACf,SAAA,EAAW;AAAA,KACb;AAAA,IACA,OAAA,IAAW;AAAA,MACT,mBAAA,EAAqB;AAAA;AACvB,GACD,CAAA;AACH,CAAA;;;;"}