@lumx/react 3.17.1 → 3.17.3-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.17.1",
-        "@lumx/icons": "^3.17.1",
+        "@lumx/core": "^3.17.3-alpha.0",
+        "@lumx/icons": "^3.17.3-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -105,5 +105,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.17.1"
+    "version": "3.17.3-alpha.0"
 }

package/src/components/expansion-panel/ExpansionPanel.stories.tsx

@@ -18,7 +18,11 @@ export default {
     component: ExpansionPanel,
     args: {
         'toggleButtonProps.label': 'Toggle',
-        children: 'Content',
+        children: (
+            <Text as="p" typography="body1" color="dark-L2" className="lumx-spacing-padding-big">
+                content
+            </Text>
+        ),
         label: 'Label',
     },
     decorators: [withNestedProps()],
@@ -77,3 +81,11 @@ export const Nested = {
         );
     },
 };
+
+/** Hide component instead of unmounting it */
+export const HideChildren = {
+    args: {
+        hasBackground: true,
+        closeMode: 'hide',
+    },
+};

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -134,11 +134,11 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
             expect(onToggleOpen).toHaveBeenCalledWith(false, expect.anything());
         });
 
-        it('should hide children after toggling the expansion panel', async () => {
+        it('should unmount children after toggling the expansion panel', async () => {
             const user = userEvent.setup();
             const { query } = setup({}, { controlled: true });
 
-            // Content is not visible by default
+            // Content is not mounted by default
             expect(query.content()).not.toBeInTheDocument();
 
             await user.click(query.header() as any);
@@ -149,6 +149,25 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
 
             expect(query.content()).not.toBeInTheDocument();
         });
+
+        it('should hide children after toggling the expansion panel', async () => {
+            const user = userEvent.setup();
+            const { element, query } = setup({ closeMode: 'hide' }, { controlled: true });
+
+            // Content is hidden (but mounted) by default
+            expect(query.content()).toBeInTheDocument();
+            expect(element).toHaveClass(`${CLASSNAME}--is-close`);
+
+            await user.click(query.header() as any);
+
+            expect(query.content()).toBeInTheDocument();
+            expect(element).toHaveClass(`${CLASSNAME}--is-open`);
+
+            await user.click(query.header() as any);
+
+            expect(query.content()).toBeInTheDocument();
+            expect(element).toHaveClass(`${CLASSNAME}--is-close`);
+        });
     });
 
     // Common tests suite.

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -7,7 +7,7 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import isEmpty from 'lodash/isEmpty';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -17,7 +17,7 @@ import { IS_BROWSER } from '@lumx/react/constants';
 /**
  * Defines the props of the component.
  */
-export interface ExpansionPanelProps extends GenericProps, HasTheme {
+export interface ExpansionPanelProps extends GenericProps, HasCloseMode, HasTheme {
     /** Whether the expansion panel has a background. */
     hasBackground?: boolean;
     /** Whether the header has a divider. */
@@ -52,7 +52,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {};
+const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {
+    closeMode: 'unmount',
+};
 
 const isDragHandle = isComponent(DragHandle);
 const isHeader = isComponent('header');
@@ -69,6 +71,7 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     const defaultTheme = useTheme() || Theme.light;
     const {
         className,
+        closeMode = DEFAULT_PROPS.closeMode,
         children: anyChildren,
         hasBackground,
         hasHeaderDivider,
@@ -127,32 +130,32 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
 
     const wrapperRef = useRef<HTMLDivElement>(null);
 
-    // Children visible while the open/close transition is running
+    // Children stay visible while the open/close transition is running
     const [isChildrenVisible, setChildrenVisible] = React.useState(isOpen);
 
     const isOpenRef = React.useRef(isOpen);
     React.useEffect(() => {
-        if (isOpen) {
+        if (isOpen || closeMode === 'hide') {
             setChildrenVisible(true);
         } else if (!IS_BROWSER) {
             // Outside a browser we can't wait for the transition
             setChildrenVisible(false);
         }
         isOpenRef.current = isOpen;
-    }, [isOpen]);
+    }, [closeMode, isOpen]);
 
-    // Change children visibility on transition end
+    // Change children's visibility on the transition end
     React.useEffect(() => {
         const { current: wrapper } = wrapperRef;
         if (!IS_BROWSER || !wrapper) {
             return undefined;
         }
         const onTransitionEnd = () => {
-            setChildrenVisible(isOpenRef.current);
+            setChildrenVisible(isOpenRef.current || closeMode === 'hide');
         };
         wrapper.addEventListener('transitionend', onTransitionEnd);
         return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
-    }, []);
+    }, [closeMode]);
 
     return (
         <section ref={ref} {...forwardedProps} className={rootClassName}>

package/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,7 +34,8 @@ export function useClickAway({ callback, childrenRefs }: ClickAwayParameters): v
             return undefined;
         }
         const listener: EventListener = (evt) => {
-            if (isClickAway(evt.target as HTMLElement, currentRefs)) {
+            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];
+            if (isClickAway(targets, currentRefs)) {
                 callback(evt);
             }
         };

package/src/stories/utils/initDemoShadowDOMPortal.ts

@@ -0,0 +1,10 @@
+/** Init a demo shadow DOM to use as portal container */
+export const initDemoShadowDOMPortal = () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const container = div.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.innerText = `button { color: red; }`;
+    container.appendChild(style);
+    return { container, teardown: () => div.remove() };
+};

package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx

@@ -1,8 +1,11 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import { Button } from '@lumx/react';
-import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import React, { useCallback, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { Button, Popover } 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',
@@ -15,16 +18,15 @@ export default {
 // eslint-disable-next-line react/display-name
 const Card = React.forwardRef(({ top, children, close }, ref) => (
     <ClickAwayProvider callback={close} childrenRefs={useRef([ref])}>
-        {createPortal(
+        <Portal>
             <div
                 className="lumx-spacing-padding"
                 ref={ref}
                 style={{ position: 'absolute', top, border: '1px solid red' }}
             >
                 {children}
-            </div>,
-            document.body,
-        )}
+            </div>
+        </Portal>
     </ClickAwayProvider>
 ));
 
@@ -56,3 +58,21 @@ export const NestedClickAway = () => (
         <ButtonWithCard level={0} />
     </>
 );
+
+/**
+ * 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>
+        </PortalProvider>
+    );
+};

package/src/utils/Portal/PortalProvider.stories.jsx

@@ -1,34 +1,23 @@
-import { Button } from '@lumx/react';
 import React from 'react';
+import { Button } from '@lumx/react';
+import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';
 import { PortalProvider } from './PortalProvider';
 import { Portal } from './Portal';
 
 export default {
     title: 'LumX components/PortalProvider',
     component: PortalProvider,
-};
-
-const initShadowDOMPortal = () => {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    const container = div.attachShadow({ mode: 'closed' });
-    const style = document.createElement('style');
-    style.innerText = `button { color: red; }`;
-    container.appendChild(style);
-    return { container, teardown: () => div.remove() };
+    args: { enabled: true },
+    parameters: { chromatic: { disable: true } },
 };
 
 /**
  * Demonstrate how to customize portals to render into a custom shadow root
  */
-export const RenderInShadowDOM = {
-    args: { enabled: true },
-    render: ({ enabled }) => (
-        <PortalProvider value={initShadowDOMPortal}>
-            <Portal enabled={enabled}>
-                <Button>My button {!enabled && 'not'} in a shadow DOM portal</Button>
-            </Portal>
-        </PortalProvider>
-    ),
-    parameters: { chromatic: { disable: true } },
-};
+export const RenderInShadowDOM = ({ enabled }) => (
+    <PortalProvider value={initDemoShadowDOMPortal}>
+        <Portal enabled={enabled}>
+            <Button>My button {!enabled && 'not'} in a shadow DOM portal</Button>
+        </Portal>
+    </PortalProvider>
+);

package/utils/index.js

@@ -3,12 +3,12 @@ import isEmpty from 'lodash/isEmpty';
 import { createPortal } from 'react-dom';
 
 const EVENT_TYPES = ['mousedown', 'touchstart'];
-function isClickAway(target, refs) {
-  // The target element is not contained in any of the listed element references.
-  return !refs.some(e => {
-    var _e$current;
-    return e === null || e === void 0 ? void 0 : (_e$current = e.current) === null || _e$current === void 0 ? void 0 : _e$current.contains(target);
-  });
+function isClickAway(targets, refs) {
+  // The targets elements are not contained in any of the listed element references.
+  return !refs.some(ref => targets.some(target => {
+    var _ref$current;
+    return ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(target);
+  }));
 }
 /**
  * Listen to clicks away from the given elements and callback the passed in function.
@@ -27,7 +27,9 @@ function useClickAway({
       return undefined;
     }
     const listener = evt => {
-      if (isClickAway(evt.target, currentRefs)) {
+      var _evt$composedPath;
+      const targets = [(_evt$composedPath = evt.composedPath) === null || _evt$composedPath === void 0 ? void 0 : _evt$composedPath.call(evt)[0], evt.target];
+      if (isClickAway(targets, currentRefs)) {
         callback(evt);
       }
     };

package/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {\n    // The target element is not contained in any of the listed element references.\n    return !refs.some((e) => e?.current?.contains(target));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            if (isClickAway(evt.target as HTMLElement, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, childrenRefs]);\n}\n","import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n"],"names":["EVENT_TYPES","isClickAway","target","refs","some","e","_e$current","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","React","createElement","Provider","value","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","Fragment","createPortal"],"mappings":";;;;AAMA,MAAMA,WAAW,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;AAE/C,SAASC,WAAWA,CAACC,MAAmB,EAAEC,IAAmC,EAAW;AACpF;AACA,EAAA,OAAO,CAACA,IAAI,CAACC,IAAI,CAAEC,CAAC,IAAA;AAAA,IAAA,IAAAC,UAAA,CAAA;AAAA,IAAA,OAAKD,CAAC,KAADA,IAAAA,IAAAA,CAAC,KAAAC,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,UAAA,GAADD,CAAC,CAAEE,OAAO,MAAA,IAAA,IAAAD,UAAA,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,UAAA,CAAYE,QAAQ,CAACN,MAAM,CAAC,CAAA;GAAC,CAAA,CAAA;AAC1D,CAAA;AAaA;AACA;AACA;AACA;AACA;AACO,SAASO,YAAYA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,YAAAA;AAAkC,CAAC,EAAQ;AAChFC,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEL,MAAAA,OAAO,EAAEM,WAAAA;AAAY,KAAC,GAAGF,YAAY,CAAA;IAC7C,IAAI,CAACD,QAAQ,IAAI,CAACG,WAAW,IAAIC,OAAO,CAACD,WAAW,CAAC,EAAE;AACnD,MAAA,OAAOE,SAAS,CAAA;AACpB,KAAA;IACA,MAAMC,QAAuB,GAAIC,GAAG,IAAK;MACrC,IAAIhB,WAAW,CAACgB,GAAG,CAACf,MAAM,EAAiBW,WAAW,CAAC,EAAE;QACrDH,QAAQ,CAACO,GAAG,CAAC,CAAA;AACjB,OAAA;KACH,CAAA;AAEDjB,IAAAA,WAAW,CAACkB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACC,gBAAgB,CAACF,OAAO,EAAEH,QAAQ,CAAC,CAAC,CAAA;AAC9E,IAAA,OAAO,MAAM;AACThB,MAAAA,WAAW,CAACkB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACE,mBAAmB,CAACH,OAAO,EAAEH,QAAQ,CAAC,CAAC,CAAA;KACpF,CAAA;AACL,GAAC,EAAE,CAACN,QAAQ,EAAEC,YAAY,CAAC,CAAC,CAAA;AAChC;;ACtCA,MAAMY,wBAAwB,gBAAGC,aAAa,CAAsB,IAAI,CAAC,CAAA;AAazE;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,iBAAmD,GAAGA,CAAC;EAChEC,QAAQ;EACRhB,QAAQ;EACRC,YAAY;AACZgB,EAAAA,SAAAA;AACJ,CAAC,KAAK;AACF,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACN,wBAAwB,CAAC,CAAA;AAC1D,EAAA,MAAMO,cAAc,GAAGC,OAAO,CAAC,MAAM;AACjC,IAAA,MAAMC,OAAqB,GAAG;AAC1BrB,MAAAA,YAAY,EAAE,EAAE;AAChB;AACZ;AACA;MACYsB,OAAOA,CAAC,GAAGC,eAAe,EAAE;AACxB;AACAF,QAAAA,OAAO,CAACrB,YAAY,CAACwB,IAAI,CAAC,GAAGD,eAAe,CAAC,CAAA;AAE7C,QAAA,IAAIN,aAAa,EAAE;AACf;AACAA,UAAAA,aAAa,CAACK,OAAO,CAAC,GAAGC,eAAe,CAAC,CAAA;AACzC,UAAA,IAAIP,SAAS,EAAE;AACX;AACAC,YAAAA,aAAa,CAACK,OAAO,CAACN,SAAS,CAAC,CAAA;AACpC,WAAA;AACJ,SAAA;AACJ,OAAA;KACH,CAAA;AACD,IAAA,OAAOK,OAAO,CAAA;AAClB,GAAC,EAAE,CAACJ,aAAa,EAAED,SAAS,CAAC,CAAC,CAAA;AAE9Bf,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEL,MAAAA,OAAO,EAAEM,WAAAA;AAAY,KAAC,GAAGF,YAAY,CAAA;IAC7C,IAAI,CAACE,WAAW,EAAE;AACd,MAAA,OAAA;AACJ,KAAA;AACAiB,IAAAA,cAAc,CAACG,OAAO,CAAC,GAAGpB,WAAW,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACiB,cAAc,EAAEnB,YAAY,CAAC,CAAC,CAAA;AAElCF,EAAAA,YAAY,CAAC;IAAEC,QAAQ;AAAEC,IAAAA,YAAY,EAAEyB,MAAM,CAACN,cAAc,CAACnB,YAAY,CAAA;AAAE,GAAC,CAAC,CAAA;AAC7E,EAAA,oBAAO0B,cAAA,CAAAC,aAAA,CAACf,wBAAwB,CAACgB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEV,cAAAA;AAAe,GAAA,EAAEJ,QAA4C,CAAC,CAAA;AACnH,EAAC;AACDD,iBAAiB,CAACgB,WAAW,GAAG,mBAAmB;;AChEnD;AACA;AACA;AACA;;AAMO,MAAMC,aAAa,gBAAGL,cAAK,CAACb,aAAa,CAAa,OAAO;EAAEmB,SAAS,EAAEvB,QAAQ,CAACwB,IAAAA;AAAK,CAAC,CAAC,CAAC,CAAA;AAOlG;AACA;AACA;AACaC,MAAAA,cAA6C,GAAGH,aAAa,CAACH;;ACd3E;AACA;AACA;AACA;AACO,MAAMO,MAA6B,GAAGA,CAAC;EAAEpB,QAAQ;AAAEqB,EAAAA,OAAO,GAAG,IAAA;AAAK,CAAC,KAAK;AAC3E,EAAA,MAAMC,IAAI,GAAGX,cAAK,CAACR,UAAU,CAACa,aAAa,CAAC,CAAA;AAC5C,EAAA,MAAMV,OAAO,GAAGK,cAAK,CAACN,OAAO,CACzB,MAAM;AACF,IAAA,OAAOgB,OAAO,GAAGC,IAAI,EAAE,GAAG,IAAI,CAAA;GACjC;AACD;AACA;EACA,CAACD,OAAO,CACZ,CAAC,CAAA;EAEDV,cAAK,CAACY,eAAe,CAAC,MAAM;AACxB,IAAA,OAAOjB,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,CAAEkB,QAAQ,CAAA;AAC5B,GAAC,EAAE,CAAClB,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAEkB,QAAQ,EAAEH,OAAO,CAAC,CAAC,CAAA;EAEhC,IAAI,EAACf,OAAO,KAAPA,IAAAA,IAAAA,OAAO,eAAPA,OAAO,CAAEW,SAAS,CAAE,EAAA;IACrB,oBAAON,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAc,QAAA,EAAGzB,IAAAA,EAAAA,QAAW,CAAC,CAAA;AAC1B,GAAA;AACA,EAAA,oBAAO0B,YAAY,CAAC1B,QAAQ,EAAEM,OAAO,CAACW,SAAS,CAAC,CAAA;AACpD;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n    // The targets elements are not contained in any of the listed element references.\n    return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n            if (isClickAway(targets, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, childrenRefs]);\n}\n","import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n"],"names":["EVENT_TYPES","isClickAway","targets","refs","some","ref","target","_ref$current","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","_evt$composedPath","composedPath","call","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","React","createElement","Provider","value","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","Fragment","createPortal"],"mappings":"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"}