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

Grafana Components Library

{"version":3,"file":"ClickOutsideWrapper.mjs","sources":["../../../../src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport * as React from 'react';\n\nexport interface Props {\n  /** Callback to trigger when clicking outside of current element occurs. */\n  onClick: () => void;\n  /** Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true. */\n  includeButtonPress?: boolean;\n  /** Object to attach the click event listener to. */\n  parent?: Window | Document;\n  /** https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Defaults to false. */\n  useCapture?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * A wrapper component that detects clicks outside of the elements by attaching event listener to `window` or `document` objects. Useful for components that require an action being triggered when a click outside has occurred, for example closing an overlay or popup.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-clickoutsidewrapper--docs\n */\nexport function ClickOutsideWrapper({\n  includeButtonPress = true,\n  parent = window,\n  useCapture = false,\n  onClick,\n  children,\n}: Props) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const onOutsideClick = useCallback(\n    (event: Event) => {\n      const domNode = wrapperRef.current;\n\n      if (!domNode || (event.target instanceof Node && !domNode.contains(event.target))) {\n        onClick();\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    parent.addEventListener('click', onOutsideClick, useCapture);\n    if (includeButtonPress) {\n      // Use keyup since keydown already has an event listener on window\n      parent.addEventListener('keyup', onOutsideClick, useCapture);\n    }\n\n    return () => {\n      parent.removeEventListener('click', onOutsideClick, useCapture);\n      if (includeButtonPress) {\n        parent.removeEventListener('keyup', onOutsideClick, useCapture);\n      }\n    };\n  }, [includeButtonPress, onOutsideClick, parent, useCapture]);\n\n  return <div ref={wrapperRef}>{children}</div>;\n}\n"],"names":[],"mappings":";;;;AAoBO,SAAS,mBAAA,CAAoB;AAAA,EAClC,kBAAA,GAAqB,IAAA;AAAA,EACrB,MAAA,GAAS,MAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,OAAA;AAAA,EACA;AACF,CAAA,EAAU;AACR,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,KAAA,KAAiB;AAChB,MAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAE3B,MAAA,IAAI,CAAC,OAAA,IAAY,KAAA,CAAM,MAAA,YAAkB,IAAA,IAAQ,CAAC,OAAA,CAAQ,QAAA,CAAS,KAAA,CAAM,MAAM,CAAA,EAAI;AACjF,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAA,CAAO,gBAAA,CAAiB,OAAA,EAAS,cAAA,EAAgB,UAAU,CAAA;AAC3D,IAAA,IAAI,kBAAA,EAAoB;AAEtB,MAAA,MAAA,CAAO,gBAAA,CAAiB,OAAA,EAAS,cAAA,EAAgB,UAAU,CAAA;AAAA,IAC7D;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,OAAA,EAAS,cAAA,EAAgB,UAAU,CAAA;AAC9D,MAAA,IAAI,kBAAA,EAAoB;AACtB,QAAA,MAAA,CAAO,mBAAA,CAAoB,OAAA,EAAS,cAAA,EAAgB,UAAU,CAAA;AAAA,MAChE;AAAA,IACF,CAAA;AAAA,EACF,GAAG,CAAC,kBAAA,EAAoB,cAAA,EAAgB,MAAA,EAAQ,UAAU,CAAC,CAAA;AAE3D,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EAAa,QAAA,EAAS,CAAA;AACzC;;;;"}