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

Grafana Components Library

{"version":3,"file":"Toggletip.mjs","sources":["../../../../src/components/Toggletip/Toggletip.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingFocusManager,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from '@floating-ui/react';\nimport { Placement } from '@popperjs/core';\nimport { memo, cloneElement, isValidElement, useRef, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { buildTooltipTheme, getPlacement } from '../../utils/tooltipUtils';\nimport { IconButton } from '../IconButton/IconButton';\n\nimport { ToggletipContent } from './types';\n\nexport interface ToggletipProps {\n  /** The theme used to display the toggletip */\n  theme?: 'info' | 'error';\n  /** The title to be displayed on the header */\n  title?: JSX.Element | string;\n  /** determine whether to show or not the close button **/\n  closeButton?: boolean;\n  /** Callback function to be called when the toggletip is closed */\n  onClose?: () => void;\n  /** The preferred placement of the toggletip */\n  placement?: Placement;\n  /** The text or component that houses the content of the toggleltip */\n  content: ToggletipContent;\n  /** The text or component to be displayed on the toggletip's bottom */\n  footer?: JSX.Element | string;\n  /** The UI control users interact with to display toggletips */\n  children: JSX.Element;\n  /** Determine whether the toggletip should fit its content or not */\n  fitContent?: boolean;\n  /** Determine whether the toggletip should be shown or not */\n  show?: boolean;\n  /** Callback function to be called when the toggletip is opened */\n  onOpen?: () => void;\n}\n\nexport const Toggletip = memo(\n  ({\n    children,\n    theme = 'info',\n    placement = 'auto',\n    content,\n    title,\n    closeButton = true,\n    onClose,\n    footer,\n    fitContent = false,\n    onOpen,\n    show,\n  }: ToggletipProps) => {\n    const arrowRef = useRef(null);\n    const grafanaTheme = useTheme2();\n    const styles = useStyles2(getStyles);\n    const style = styles[theme];\n    const [controlledVisible, setControlledVisible] = useState(show);\n    const isOpen = show ?? controlledVisible;\n\n    // the order of middleware is important!\n    // `arrow` should almost always be at the end\n    // see https://floating-ui.com/docs/arrow#order\n    const middleware = [\n      offset(8),\n      flip({\n        fallbackAxisSideDirection: 'end',\n        // see https://floating-ui.com/docs/flip#combining-with-shift\n        crossAxis: false,\n        boundary: document.body,\n      }),\n      shift(),\n      arrow({\n        element: arrowRef,\n      }),\n    ];\n\n    const { context, refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: getPlacement(placement),\n      onOpenChange: (open) => {\n        if (show === undefined) {\n          setControlledVisible(open);\n        }\n        if (!open) {\n          onClose?.();\n        } else {\n          onOpen?.();\n        }\n      },\n      middleware,\n      whileElementsMounted: autoUpdate,\n      strategy: 'fixed',\n    });\n\n    const click = useClick(context);\n    const dismiss = useDismiss(context);\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n    return (\n      <>\n        {cloneElement(children, {\n          ref: refs.setReference,\n          tabIndex: 0,\n          'aria-expanded': isOpen,\n          ...getReferenceProps(),\n        })}\n        {isOpen && (\n          <FloatingFocusManager context={context} modal={false} closeOnFocusOut={false}>\n            <div\n              data-testid=\"toggletip-content\"\n              className={cx(style.container, {\n                [styles.fitContent]: fitContent,\n              })}\n              ref={refs.setFloating}\n              style={floatingStyles}\n              {...getFloatingProps()}\n            >\n              <FloatingArrow\n                strokeWidth={0.3}\n                stroke={grafanaTheme.colors.border.weak}\n                className={style.arrow}\n                ref={arrowRef}\n                context={context}\n              />\n              {Boolean(title) && <div className={style.header}>{title}</div>}\n              {closeButton && (\n                <div className={style.headerClose}>\n                  <IconButton\n                    aria-label={t('grafana-ui.toggletip.close', 'Close')}\n                    name=\"times\"\n                    data-testid=\"toggletip-header-close\"\n                    onClick={() => {\n                      setControlledVisible(false);\n                      onClose?.();\n                    }}\n                  />\n                </div>\n              )}\n              <div className={style.body}>\n                {(typeof content === 'string' || isValidElement(content)) && content}\n                {typeof content === 'function' && content({})}\n              </div>\n              {Boolean(footer) && <div className={style.footer}>{footer}</div>}\n            </div>\n          </FloatingFocusManager>\n        )}\n      </>\n    );\n  }\n);\n\nToggletip.displayName = 'Toggletip';\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n  const info = buildTooltipTheme(\n    theme,\n    theme.colors.background.primary,\n    theme.colors.border.weak,\n    theme.components.tooltip.text,\n    { topBottom: 2, rightLeft: 2 }\n  );\n  const error = buildTooltipTheme(\n    theme,\n    theme.colors.error.main,\n    theme.colors.error.main,\n    theme.colors.error.contrastText,\n    { topBottom: 2, rightLeft: 2 }\n  );\n\n  return {\n    info,\n    error,\n    fitContent: css({\n      maxWidth: 'fit-content',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}