@carbonorm/carbonreact 4.0.24 → 4.0.25

package/src/components/OutsideClickHandler/OutsideClickHandler.tsx

@@ -0,0 +1,33 @@
+import { ReactNode, useRef, useEffect } from 'react';
+
+interface OutsideClickHandlerProps {
+    onOutsideClick: () => any;
+    children: ReactNode;
+    disabled?: boolean;
+    useCapture?: boolean;
+}
+
+export default function OutsideClickHandler({ onOutsideClick, children, disabled, useCapture }: OutsideClickHandlerProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (disabled) {
+            return;
+        }
+        function handle(event: MouseEvent | TouchEvent) {
+            const element = containerRef.current;
+            if (!element || element.contains(event.target as Node)) {
+                return;
+            }
+            onOutsideClick();
+        }
+        document.addEventListener('mousedown', handle, useCapture);
+        document.addEventListener('touchstart', handle, useCapture);
+        return () => {
+            document.removeEventListener('mousedown', handle, useCapture);
+            document.removeEventListener('touchstart', handle, useCapture);
+        };
+    }, [onOutsideClick, disabled, useCapture]);
+
+    return <div ref={containerRef}>{children}</div>;
+}

package/src/components/Popup/Popup.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import OutsideClickHandler from 'react-outside-click-handler';
+import OutsideClickHandler from '../OutsideClickHandler/OutsideClickHandler';
 import getStyles from "hoc/getStyles";
 import {PropsWithChildren, ReactElement} from "react";
 

package/src/index.ts

@@ -23,6 +23,8 @@ export { default as Loading } from "./components/Loading/Loading";
 export * from "./components/Loading/Loading";
 export { default as Nest } from "./components/Nest/Nest";
 export * from "./components/Nest/Nest";
+export { default as OutsideClickHandler } from "./components/OutsideClickHandler/OutsideClickHandler";
+export * from "./components/OutsideClickHandler/OutsideClickHandler";
 export { default as Popup } from "./components/Popup/Popup";
 export * from "./components/Popup/Popup";
 export { default as CarbonWebSocket } from "./components/WebSocket/CarbonWebSocket";