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

Grafana Components Library

{"version":3,"file":"Dropdown.mjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport {\n  FloatingFocusManager,\n  autoUpdate,\n  flip,\n  offset as floatingUIOffset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from '@floating-ui/react';\nimport { useCallback, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { renderOrCallToRender } from '../../utils/reactUtils';\nimport { getPlacement } from '../../utils/tooltipUtils';\nimport { Portal } from '../Portal/Portal';\nimport { TooltipPlacement } from '../Tooltip/types';\n\nexport interface Props {\n  overlay: React.ReactElement | (() => React.ReactElement);\n  placement?: TooltipPlacement;\n  children: React.ReactElement;\n  /** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */\n  offset?: [number, number];\n  onVisibleChange?: (state: boolean) => void;\n}\n\nexport const Dropdown = React.memo(({ children, overlay, placement, offset, onVisibleChange }: Props) => {\n  const [show, setShow] = useState(false);\n  const transitionRef = useRef(null);\n\n  const handleOpenChange = useCallback(\n    (newState: boolean) => {\n      setShow(newState);\n      onVisibleChange?.(newState);\n    },\n    [onVisibleChange]\n  );\n\n  // the order of middleware is important!\n  const middleware = [\n    floatingUIOffset({\n      mainAxis: offset?.[0] ?? 8,\n      crossAxis: offset?.[1] ?? 0,\n    }),\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  ];\n\n  const { context, refs, floatingStyles } = useFloating({\n    open: show,\n    placement: getPlacement(placement),\n    onOpenChange: handleOpenChange,\n    middleware,\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n  const animationDuration = 150;\n  const animationStyles = useStyles2(getStyles, animationDuration);\n\n  const onOverlayClicked = () => {\n    handleOpenChange(false);\n  };\n\n  const handleKeys = (event: React.KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      handleOpenChange(false);\n    }\n  };\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: refs.setReference,\n        ...getReferenceProps(),\n      })}\n      {show && (\n        <Portal>\n          <FloatingFocusManager context={context}>\n            {/*\n              this is handling bubbled events from the inner overlay\n              see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events\n            */}\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n            <div ref={refs.setFloating} style={floatingStyles} onClick={onOverlayClicked} onKeyDown={handleKeys}>\n              <CSSTransition\n                nodeRef={transitionRef}\n                appear={true}\n                in={true}\n                timeout={{ appear: animationDuration, exit: 0, enter: 0 }}\n                classNames={animationStyles}\n              >\n                <div ref={transitionRef}>{renderOrCallToRender(overlay, { ...getFloatingProps() })}</div>\n              </CSSTransition>\n            </div>\n          </FloatingFocusManager>\n        </Portal>\n      )}\n    </>\n  );\n});\n\nDropdown.displayName = 'Dropdown';\n\nconst getStyles = (theme: GrafanaTheme2, duration: number) => {\n  return {\n    appear: css({\n      opacity: '0',\n      position: 'relative',\n      transformOrigin: 'top',\n      [theme.transitions.handleMotion('no-preference')]: {\n        transform: 'scaleY(0.5)',\n      },\n    }),\n    appearActive: css({\n      opacity: '1',\n      [theme.transitions.handleMotion('no-preference')]: {\n        transform: 'scaleY(1)',\n        transition: `transform ${duration}ms cubic-bezier(0.2, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.2, 0, 0.2, 1)`,\n      },\n    }),\n  };\n};\n"],"names":["offset","floatingUIOffset"],"mappings":"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"}