fix(click-away): fix close on click away across shadow DOM boundary

Author: gcornut

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   `Popover`, `Dialog` & `Lightbox`: fix close on click away across shadow DOM boundary
+
 ### Added
 
 -   `ExpansionPanel`: added `closeMode` to `"unmount"` or `"hide"` children when the item is closed.

packages/lumx-react/src/hooks/useClickAway.tsx

@@ -6,9 +6,9 @@ import isEmpty from 'lodash/isEmpty';
 
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 
-function isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {
-    // The target element is not contained in any of the listed element references.
-    return !refs.some((e) => e?.current?.contains(target));
+function isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {
+    // The targets elements are not contained in any of the listed element references.
+    return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));
 }
 
 export interface ClickAwayParameters {
@@ -34,8 +34,8 @@ export function useClickAway({ callback, childrenRefs }: ClickAwayParameters): v
             return undefined;
         }
         const listener: EventListener = (evt) => {
-            const target = evt.composedPath?.()[0] || evt.target;
-            if (isClickAway(target as HTMLElement, currentRefs)) {
+            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];
+            if (isClickAway(targets, currentRefs)) {
                 callback(evt);
             }
         };

packages/lumx-react/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx

@@ -1,11 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import React, { useCallback, useRef, useState } from 'react';
-import { Button, Popover } from '@lumx/react';
+import { Button } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';
 import { PortalProvider, Portal } from '@lumx/react/utils/Portal';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 
 export default {
     title: 'LumX components/ClickAwayProvider',
@@ -63,16 +62,9 @@ export const NestedClickAway = () => (
  * Testing close on click away for a popover rendered in a shadow DOM
  */
 export const InShadowDOM = () => {
-    const [isOpen, close, , toggle] = useBooleanState(false);
-    const anchorRef = React.useRef();
     return (
         <PortalProvider value={initDemoShadowDOMPortal}>
-            <Button ref={anchorRef} onClick={toggle}>
-                Toggle popover
-            </Button>
-            <Popover isOpen={isOpen} anchorRef={anchorRef} onClose={close} closeOnClickAway>
-                <p style={{ padding: 16, border: '1px solid gray' }}>Popover in shadow DOM</p>
-            </Popover>
+            <NestedClickAway />
         </PortalProvider>
     );
 };