Grafana-UI: Add docs for ClickOutsideWrapper (#27429)

* Grafana-UI: Add docs and story for ClickOutsideWrapper

* Grafana-UI: Update comments

* Grafana-UI: expand usage

* Grafana-UI: Tweak docs

packages/grafana-ui/src/components/Alert/Alert.mdx

-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Props } from '@storybook/addon-docs/blocks';
 import { Alert } from './Alert';
 import { Alert } from './Alert';
 
 
 <Meta title="MDX|Alert" component={Alert} />
 <Meta title="MDX|Alert" component={Alert} />

packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.mdx

+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { ClickOutsideWrapper } from './ClickOutsideWrapper';
+
+<Meta title="MDX|ClickOutsideWrapper" component={ClickOutsideWrapper} />
+
+# ClickOutsideWrapper
+
+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.
+
+# Usage
+
+```jsx
+<ClickOutsideWrapper onClick={() => console.log('Clicked outside')}>
+  <div style={{width: '300px'}}>Container</div>
+</ClickOutsideWrapper>
+````
+<Props of={ClickOutsideWrapper}/>

packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.story.tsx

+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { ClickOutsideWrapper } from './ClickOutsideWrapper';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import mdx from './ClickOutsideWrapper.mdx';
+
+export default {
+  title: 'Layout/ClickOutsideWrapper',
+  component: ClickOutsideWrapper,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  return (
+    <ClickOutsideWrapper onClick={action('Clicked outside')}>
+      <div style={{ width: '300px', border: '1px solid grey', padding: '20px' }}>Container</div>
+    </ClickOutsideWrapper>
+  );
+};

packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx

@@ -3,15 +3,15 @@ import ReactDOM from 'react-dom';
 
 
 export interface Props {
 export interface Props {
   /**
   /**
-   *  When clicking outside of current element
+   *  Callback to trigger when clicking outside of current element occurs.
    */
    */
   onClick: () => void;
   onClick: () => void;
   /**
   /**
    *  Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.
    *  Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.
    */
    */
   includeButtonPress: boolean;
   includeButtonPress: boolean;
+  /** Object to attach the click event listener to. */
   parent: Window | Document;
   parent: Window | Document;
-
   /**
   /**
    * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Defaults to false.
    * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Defaults to false.
    */
    */
@@ -35,7 +35,7 @@ export class ClickOutsideWrapper extends PureComponent<Props, State> {
   componentDidMount() {
   componentDidMount() {
     this.props.parent.addEventListener('click', this.onOutsideClick, this.props.useCapture);
     this.props.parent.addEventListener('click', this.onOutsideClick, this.props.useCapture);
     if (this.props.includeButtonPress) {
     if (this.props.includeButtonPress) {
-      // Use keyup since keydown already has an eventlistener on window
+      // Use keyup since keydown already has an event listener on window
       this.props.parent.addEventListener('keyup', this.onOutsideClick, this.props.useCapture);
       this.props.parent.addEventListener('keyup', this.onOutsideClick, this.props.useCapture);
     }
     }
   }
   }