feat(toolbar): add onOutsideClick prop

Optional callback that fires when a click occurs outside the Toolbar.
Useful for closing toolbars/menus on outside clicks.

Adapted from upstream PR react95-io#391.

Author: limehawk

dist/Toolbar/Toolbar.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 declare const Toolbar: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     noPadding?: boolean | undefined;
+    onOutsideClick?: (() => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { Toolbar };
 //# sourceMappingURL=Toolbar.d.ts.map

dist/Toolbar/Toolbar.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('styled-components');
+var useForkRef = require('../common/hooks/useForkRef.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,8 +17,23 @@ const StyledToolbar = styled__default["default"].div`
   align-items: center;
   padding: ${(props) => props.$noPadding ? "0" : "4px"};
 `;
-const Toolbar = React.forwardRef(function Toolbar2({ children, noPadding = false, ...otherProps }, ref) {
-  return React__default["default"].createElement(StyledToolbar, { "$noPadding": noPadding, ref, ...otherProps }, children);
+const Toolbar = React.forwardRef(function Toolbar2({ children, noPadding = false, onOutsideClick, ...otherProps }, ref) {
+  const toolbarRef = React.useRef(null);
+  const handleRef = useForkRef(ref, toolbarRef);
+  React.useEffect(() => {
+    if (!onOutsideClick) {
+      return;
+    }
+    const handleOutsideClick = (e) => {
+      var _a;
+      if (!((_a = toolbarRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        onOutsideClick();
+      }
+    };
+    document.addEventListener("click", handleOutsideClick);
+    return () => document.removeEventListener("click", handleOutsideClick);
+  }, [onOutsideClick]);
+  return React__default["default"].createElement(StyledToolbar, { "$noPadding": noPadding, ref: handleRef, ...otherProps }, children);
 });
 Toolbar.displayName = "Toolbar";
 

dist/Toolbar/Toolbar.mjs

@@ -1,14 +1,30 @@
-import React__default, { forwardRef } from 'react';
+import React__default, { forwardRef, useRef, useEffect } from 'react';
 import styled from 'styled-components';
+import useForkRef from '../common/hooks/useForkRef.mjs';
 
 const StyledToolbar = styled.div`
   position: relative;
   display: flex;
   align-items: center;
   padding: ${(props) => props.$noPadding ? "0" : "4px"};
 `;
-const Toolbar = forwardRef(function Toolbar2({ children, noPadding = false, ...otherProps }, ref) {
-  return React__default.createElement(StyledToolbar, { "$noPadding": noPadding, ref, ...otherProps }, children);
+const Toolbar = forwardRef(function Toolbar2({ children, noPadding = false, onOutsideClick, ...otherProps }, ref) {
+  const toolbarRef = useRef(null);
+  const handleRef = useForkRef(ref, toolbarRef);
+  useEffect(() => {
+    if (!onOutsideClick) {
+      return;
+    }
+    const handleOutsideClick = (e) => {
+      var _a;
+      if (!((_a = toolbarRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        onOutsideClick();
+      }
+    };
+    document.addEventListener("click", handleOutsideClick);
+    return () => document.removeEventListener("click", handleOutsideClick);
+  }, [onOutsideClick]);
+  return React__default.createElement(StyledToolbar, { "$noPadding": noPadding, ref: handleRef, ...otherProps }, children);
 });
 Toolbar.displayName = "Toolbar";
 

src/Toolbar/Toolbar.spec.tsx

@@ -26,4 +26,15 @@ describe('<Toolbar />', () => {
       expect(toolbar).toHaveStyleRule('padding', '0');
     });
   });
+
+  describe('prop: onOutsideClick', () => {
+    it('should fire callback on outside 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, useEffect, useRef } 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>;
 
 type StyledToolbarProps = {
@@ -18,11 +20,29 @@ const StyledToolbar = styled.div<StyledToolbarProps>`
 `;
 
 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) => {
+      if (!toolbarRef.current?.contains(e.target as Node)) {
+        onOutsideClick();
+      }
+    };
+
+    document.addEventListener('click', handleOutsideClick);
+    return () => document.removeEventListener('click', handleOutsideClick);
+  }, [onOutsideClick]);
+
   return (
-    <StyledToolbar $noPadding={noPadding} ref={ref} {...otherProps}>
+    <StyledToolbar $noPadding={noPadding} ref={handleRef} {...otherProps}>
       {children}
     </StyledToolbar>
   );