@lumx/react 3.16.1-alpha.1 → 3.16.1-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.16.1-alpha.1",
-        "@lumx/icons": "^3.16.1-alpha.1",
+        "@lumx/core": "^3.16.1-alpha.2",
+        "@lumx/icons": "^3.16.1-alpha.2",
         "@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.16.1-alpha.1"
+    "version": "3.16.1-alpha.2"
 }

package/src/components/dialog/Dialog.tsx

@@ -19,7 +19,8 @@ import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
-import { Portal } from '@lumx/react/utils/PortalProvider';
+
+import { Portal } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.

package/src/components/lightbox/Lightbox.tsx

@@ -16,7 +16,8 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { Portal } from '@lumx/react/utils/PortalProvider';
+
+import { Portal } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.

package/src/components/notification/Notification.tsx

@@ -12,7 +12,8 @@ import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibili
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { Portal } from '@lumx/react/utils/PortalProvider';
+
+import { Portal } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.

package/src/components/popover/Popover.tsx

@@ -14,7 +14,7 @@ import { skipRender } from '@lumx/react/utils/react/skipRender';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
-import { Portal } from '@lumx/react/utils/PortalProvider';
+import { Portal } from '@lumx/react/utils';
 import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
 import { usePopoverStyle } from './usePopoverStyle';
 import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';

package/src/components/tooltip/Tooltip.tsx

@@ -14,7 +14,7 @@ import { usePopper } from '@lumx/react/hooks/usePopper';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';
-import { Portal } from '@lumx/react/utils/PortalProvider';
+import { Portal } from '@lumx/react/utils';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 

package/src/utils/Portal/Portal.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Portal } from './Portal';
+
+const TEST_ID = 'portal-child';
+const PortalChild = () => <div data-testid={TEST_ID}>Hello from portal</div>;
+
+describe(Portal, () => {
+    it('should render portal content in document.body by default', () => {
+        render(
+            <Portal>
+                <PortalChild />
+            </Portal>,
+        );
+
+        const child = screen.getByTestId(TEST_ID);
+        expect(child.parentElement).toBe(document.body);
+    });
+
+    it('should render inline when enabled is false', () => {
+        const { container } = render(
+            <div id="wrapper">
+                <Portal enabled={false}>
+                    <PortalChild />
+                </Portal>
+            </div>,
+        );
+
+        const child = screen.getByTestId(TEST_ID);
+        expect(child.parentElement).toBe(container.querySelector('#wrapper'));
+    });
+});

package/src/utils/Portal/Portal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { PortalContext } from './PortalProvider';
+
+export interface PortalProps {
+    enabled?: boolean;
+    children: React.ReactNode;
+}
+
+/**
+ * Render children in a portal outside the current DOM position
+ * (defaults to `document.body` but can be customized with the PortalContextProvider)
+ */
+export const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {
+    const init = React.useContext(PortalContext);
+    const context = React.useMemo(
+        () => {
+            return enabled ? init() : null;
+        },
+        // Only update on 'enabled'
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [enabled],
+    );
+
+    React.useLayoutEffect(() => {
+        return context?.teardown;
+    }, [context?.teardown, enabled]);
+
+    if (!context?.container) {
+        return <>{children}</>;
+    }
+    return createPortal(children, context.container);
+};

package/src/utils/{PortalProvider → Portal}/PortalProvider.stories.jsx

@@ -1,6 +1,7 @@
 import { Button } from '@lumx/react';
-import { Portal, PortalProvider } from '@lumx/react/utils';
 import React from 'react';
+import { PortalProvider } from './PortalProvider';
+import { Portal } from './Portal';
 
 export default {
     title: 'LumX components/PortalProvider',

package/src/utils/Portal/PortalProvider.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PortalInit, PortalProvider } from './PortalProvider';
+import { Portal } from './Portal';
+
+const TEST_ID = 'portal-child';
+const PORTAL_CONTAINER_ID = 'portal-container';
+
+const PortalChild = () => <div data-testid={TEST_ID}>Hello from portal</div>;
+
+describe(PortalProvider, () => {
+    it('should render portal content in the provided container', () => {
+        const portalContainer = document.createElement('div');
+        portalContainer.id = PORTAL_CONTAINER_ID;
+        document.body.appendChild(portalContainer);
+
+        const getContainer: PortalInit = () => ({ container: portalContainer });
+
+        render(
+            <PortalProvider value={getContainer}>
+                <Portal>
+                    <PortalChild />
+                </Portal>
+            </PortalProvider>,
+        );
+
+        const child = screen.getByTestId(TEST_ID);
+        expect(child.parentElement).toBe(portalContainer);
+        portalContainer.remove();
+    });
+
+    it('should call teardown on unmount', () => {
+        const teardownMock = jest.fn();
+        const portalContainer = document.createElement('div');
+        portalContainer.id = PORTAL_CONTAINER_ID;
+        document.body.appendChild(portalContainer);
+
+        const getContainer: PortalInit = () => ({
+            container: portalContainer,
+            teardown: teardownMock,
+        });
+
+        const { unmount } = render(
+            <PortalProvider value={getContainer}>
+                <Portal>
+                    <PortalChild />
+                </Portal>
+            </PortalProvider>,
+        );
+
+        expect(teardownMock).not.toHaveBeenCalled();
+        unmount();
+        expect(teardownMock).toHaveBeenCalledTimes(1);
+        portalContainer.remove();
+    });
+
+    it('should render inline if provider does not return a container', () => {
+        const getContainer: PortalInit = () => ({}); // No container
+
+        const { container } = render(
+            <div id="wrapper">
+                <PortalProvider value={getContainer}>
+                    <Portal>
+                        <PortalChild />
+                    </Portal>
+                </PortalProvider>
+            </div>,
+        );
+
+        const child = screen.getByTestId(TEST_ID);
+        expect(child.parentElement).toBe(container.querySelector('#wrapper'));
+    });
+});

package/src/utils/Portal/PortalProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+type Container = DocumentFragment | Element;
+
+/**
+ * Portal initializing function.
+ * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
+ */
+export type PortalInit = () => {
+    container?: Container;
+    teardown?: () => void;
+};
+
+export const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));
+
+export interface PortalProviderProps {
+    children?: React.ReactNode;
+    value: PortalInit;
+}
+
+/**
+ * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+ */
+export const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;

package/src/utils/Portal/index.tsx

@@ -0,0 +1,2 @@
+export { type PortalInit, PortalProvider, type PortalProviderProps } from './PortalProvider';
+export { type PortalProps, Portal } from './Portal';

package/src/utils/index.ts

@@ -2,5 +2,5 @@
  * WARNING: All modules exported here are exposed to NPM in '@lumx/react/utils'.
  */
 
-export * from './ClickAwayProvider';
-export * from './PortalProvider';
+export { ClickAwayProvider } from './ClickAwayProvider';
+export { Portal, type PortalProps, type PortalInit, PortalProvider, type PortalProviderProps } from './Portal';

package/utils/index.d.ts

@@ -31,24 +31,31 @@ interface ClickAwayProviderProps extends ClickAwayParameters {
 declare const ClickAwayProvider: React.FC<ClickAwayProviderProps>;
 
 type Container = DocumentFragment | Element;
+/**
+ * Portal initializing function.
+ * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
+ */
 type PortalInit = () => {
-    container: Container;
+    container?: Container;
     teardown?: () => void;
 };
+interface PortalProviderProps {
+    children?: React.ReactNode;
+    value: PortalInit;
+}
 /**
  * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
  */
-declare const PortalProvider: React.FC<{
-    children?: React.ReactNode;
-    value: PortalInit;
-}>;
+declare const PortalProvider: React.FC<PortalProviderProps>;
+
+interface PortalProps {
+    enabled?: boolean;
+    children: React.ReactNode;
+}
 /**
  * Render children in a portal outside the current DOM position
  * (defaults to `document.body` but can be customized with the PortalContextProvider)
  */
-declare const Portal: React.FC<{
-    enabled?: boolean;
-    children: React.ReactNode;
-}>;
+declare const Portal: React.FC<PortalProps>;
 
-export { ClickAwayProvider, Portal, type PortalInit, PortalProvider };
+export { ClickAwayProvider, Portal, type PortalInit, type PortalProps, PortalProvider, type PortalProviderProps };

package/utils/index.js

@@ -1,6 +1,6 @@
 import React__default, { useEffect, useContext, useMemo, useRef, createContext } from 'react';
-import { createPortal } from 'react-dom';
 import isEmpty from 'lodash/isEmpty';
+import { createPortal } from 'react-dom';
 
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 function isClickAway(target, refs) {
@@ -92,10 +92,14 @@ const ClickAwayProvider = ({
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
+/**
+ * Portal initializing function.
+ * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
+ */
+
 const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
   container: document.body
 }));
-
 /**
  * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
  */
@@ -111,8 +115,7 @@ const Portal = ({
 }) => {
   const init = React__default.useContext(PortalContext);
   const context = React__default.useMemo(() => {
-    if (!enabled) return undefined;
-    return init();
+    return enabled ? init() : null;
   },
   // Only update on 'enabled'
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -120,8 +123,10 @@ const Portal = ({
   React__default.useLayoutEffect(() => {
     return context === null || context === void 0 ? void 0 : context.teardown;
   }, [context === null || context === void 0 ? void 0 : context.teardown, enabled]);
-  if (!enabled) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
-  return /*#__PURE__*/createPortal(children, context === null || context === void 0 ? void 0 : context.container);
+  if (!(context !== null && context !== void 0 && context.container)) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/createPortal(children, context.container);
 };
 
 export { ClickAwayProvider, Portal, PortalProvider };

package/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/PortalProvider/index.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';\nimport { createPortal } from 'react-dom';\n\ntype Container = DocumentFragment | Element;\nexport type PortalInit = () => { container: Container; teardown?: () => void };\n\nconst PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<{ children?: React.ReactNode; value: PortalInit }> = PortalContext.Provider;\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<{ enabled?: boolean; children: React.ReactNode }> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            if (!enabled) return undefined;\n            return init();\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 (!enabled) return <>{children}</>;\n    return createPortal(children, context?.container as 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;;AC9DnD,MAAMC,aAAa,gBAAGL,cAAK,CAACb,aAAa,CAAa,OAAO;EAAEmB,SAAS,EAAEvB,QAAQ,CAACwB,IAAAA;AAAK,CAAC,CAAC,CAAC,CAAA;;AAE3F;AACA;AACA;AACaC,MAAAA,cAA2E,GAAGH,aAAa,CAACH,SAAQ;;AAEjH;AACA;AACA;AACA;AACO,MAAMO,MAAkE,GAAGA,CAAC;EAAEpB,QAAQ;AAAEqB,EAAAA,OAAO,GAAG,IAAA;AAAK,CAAC,KAAK;AAChH,EAAA,MAAMC,IAAI,GAAGX,cAAK,CAACR,UAAU,CAACa,aAAa,CAAC,CAAA;AAC5C,EAAA,MAAMV,OAAO,GAAGK,cAAK,CAACN,OAAO,CACzB,MAAM;AACF,IAAA,IAAI,CAACgB,OAAO,EAAE,OAAOhC,SAAS,CAAA;IAC9B,OAAOiC,IAAI,EAAE,CAAA;GAChB;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;AAEhC,EAAA,IAAI,CAACA,OAAO,EAAE,oBAAOV,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAc,QAAA,EAAA,IAAA,EAAGzB,QAAW,CAAC,CAAA;EACpC,oBAAO0B,YAAY,CAAC1B,QAAQ,EAAEM,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,CAAEW,SAAsB,CAAC,CAAA;AAClE;;;;"}
+{"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":"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"}

package/src/utils/PortalProvider/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-
-type Container = DocumentFragment | Element;
-export type PortalInit = () => { container: Container; teardown?: () => void };
-
-const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));
-
-/**
- * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
- */
-export const PortalProvider: React.FC<{ children?: React.ReactNode; value: PortalInit }> = PortalContext.Provider;
-
-/**
- * Render children in a portal outside the current DOM position
- * (defaults to `document.body` but can be customized with the PortalContextProvider)
- */
-export const Portal: React.FC<{ enabled?: boolean; children: React.ReactNode }> = ({ children, enabled = true }) => {
-    const init = React.useContext(PortalContext);
-    const context = React.useMemo(
-        () => {
-            if (!enabled) return undefined;
-            return init();
-        },
-        // Only update on 'enabled'
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [enabled],
-    );
-
-    React.useLayoutEffect(() => {
-        return context?.teardown;
-    }, [context?.teardown, enabled]);
-
-    if (!enabled) return <>{children}</>;
-    return createPortal(children, context?.container as Container);
-};