feat(toolbar): add onOutsideClick prop

src/Toolbar/Toolbar.spec.tsx

@@ -26,4 +26,15 @@ describe('<Toolbar />', () => {
       expect(toolbar).toHaveStyleRule('padding', '0');
     });
   });
+
+  describe('prop: onOutsideClick', () => {
+    it('should fire callback on container click', () => {
+      const mockCallBack = jest.fn();
+      const { container } = render(<Toolbar onOutsideClick={mockCallBack} />);
+
+      container.click();
+
+      expect(mockCallBack).toHaveBeenCalled();
+    });
+  });
 });

src/Toolbar/Toolbar.tsx

@@ -1,9 +1,11 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef, useEffect } from 'react';
 import styled from 'styled-components';
+import useForkRef from '../common/hooks/useForkRef';
 
 type ToolbarProps = {
   children?: React.ReactNode;
   noPadding?: boolean;
+  onOutsideClick?: () => void;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const StyledToolbar = styled.div<ToolbarProps>`
@@ -14,11 +16,34 @@ const StyledToolbar = styled.div<ToolbarProps>`
 `;
 
 const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
-  { children, noPadding = false, ...otherProps },
+  { children, noPadding = false, onOutsideClick, ...otherProps },
   ref
 ) {
+  const toolbarRef = useRef<HTMLDivElement | null>(null);
+  const handleRef = useForkRef(ref, toolbarRef);
+
+  useEffect(() => {
+    if (!onOutsideClick) {
+      return () => {};
+    }
+
+    const handleOutsideClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+
+      if (!toolbarRef.current?.contains(target)) {
+        onOutsideClick();
+      }
+    };
+
+    document.addEventListener('click', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [ref, onOutsideClick]);
+
   return (
-    <StyledToolbar noPadding={noPadding} ref={ref} {...otherProps}>
+    <StyledToolbar noPadding={noPadding} ref={handleRef} {...otherProps}>
       {children}
     </StyledToolbar>
   );