{"version":3,"file":"Toggletip.cjs","sources":["../../../../src/components/Toggletip/Toggletip.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport {\n  arrow,\n  autoUpdate,\n  FloatingArrow,\n  FloatingFocusManager,\n  offset,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from '@floating-ui/react';\nimport { Placement } from '@popperjs/core';\nimport { memo, cloneElement, isValidElement, useRef, useState, type JSX } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { getPositioningMiddleware } from '../../utils/floating';\nimport { buildTooltipTheme, getPlacement } from '../../utils/tooltipUtils';\nimport { IconButton } from '../IconButton/IconButton';\nimport { getPortalContainer, Portal } from '../Portal/Portal';\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\n/**\n * Toggletips, similar to Tooltips, provide contextual support for users when needed. They are hidden by default, a UI trigger or text link are clicked to set them to their visible state. Toggletips, unlike tooltips, are persistent until a user takes action to dismiss them by clicking on the required “X” (close) trigger. Toggletips are capable of containing varying types of complex content including interactive components, buttons, and dropdowns.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-toggletip--docs\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    const floatingUIPlacement = getPlacement(placement);\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      ...getPositioningMiddleware(floatingUIPlacement),\n      arrow({\n        element: arrowRef,\n      }),\n    ];\n\n    const { context, refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: floatingUIPlacement,\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          <Portal>\n            <FloatingFocusManager context={context} modal={true} getInsideElements={() => [getPortalContainer()]}>\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          </Portal>\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":["memo","useRef","useTheme2","useStyles2","useState","getPlacement","offset","getPositioningMiddleware","arrow","useFloating","autoUpdate","useClick","useDismiss","useInteractions","jsxs","Fragment","cloneElement","jsx","Portal","FloatingFocusManager","getPortalContainer","cx","FloatingArrow","IconButton","t","isValidElement","buildTooltipTheme","css"],"mappings":"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"}