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

package/package.json

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

package/src/components/dialog/Dialog.tsx

@@ -193,94 +193,94 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
 
     const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
 
-    return isOpen || isVisible
-        ? <Portal>
-              <div
-                  ref={mergeRefs(rootRef, ref)}
-                  {...forwardedProps}
-                  className={classNames(
-                      className,
-                      handleBasicClasses({
-                          isHidden: !isOpen,
-                          isLoading,
-                          isShown: isOpen || isVisible,
-                          prefix: CLASSNAME,
-                          size,
-                      }),
-                  )}
-                  style={{ zIndex }}
-              >
-                  <div className={`${CLASSNAME}__overlay`} />
-
-                  <HeadingLevelProvider level={2}>
-                      <ThemeProvider value={undefined}>
-                          <div className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                              <ClickAwayProvider
-                                  callback={!shouldPreventCloseOnClickAway && onClose}
-                                  childrenRefs={clickAwayRefs}
-                                  parentRef={rootRef}
-                              >
-                                  <section className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
-                                      {(header || headerChildContent) && (
-                                          <header
-                                              {...headerChildProps}
-                                              className={classNames(
-                                                  `${CLASSNAME}__header`,
-                                                  (forceHeaderDivider || hasTopIntersection) &&
-                                                      `${CLASSNAME}__header--has-divider`,
-                                                  headerChildProps?.className,
-                                              )}
-                                          >
-                                              {header}
-                                              {headerChildContent}
-                                          </header>
-                                      )}
-
-                                      <div
-                                          ref={mergeRefs(contentRef, localContentRef)}
-                                          className={`${CLASSNAME}__content`}
-                                      >
-                                          <div
-                                              className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
-                                              ref={setSentinelTop}
-                                          />
-
-                                          {content}
-
-                                          <div
-                                              className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
-                                              ref={setSentinelBottom}
-                                          />
-                                      </div>
-
-                                      {(footer || footerChildContent) && (
-                                          <footer
-                                              {...footerChildProps}
-                                              className={classNames(
-                                                  `${CLASSNAME}__footer`,
-                                                  (forceFooterDivider || hasBottomIntersection) &&
-                                                      `${CLASSNAME}__footer--has-divider`,
-                                                  footerChildProps?.className,
-                                              )}
-                                          >
-                                              {footer}
-                                              {footerChildContent}
-                                          </footer>
-                                      )}
-
-                                      {isLoading && (
-                                          <div className={`${CLASSNAME}__progress-overlay`}>
-                                              <Progress variant={ProgressVariant.circular} />
-                                          </div>
-                                      )}
-                                  </section>
-                              </ClickAwayProvider>
-                          </div>
-                      </ThemeProvider>
-                  </HeadingLevelProvider>
-              </div>
+    return isOpen || isVisible ? (
+        <Portal>
+            <div
+                ref={mergeRefs(rootRef, ref)}
+                {...forwardedProps}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        isHidden: !isOpen,
+                        isLoading,
+                        isShown: isOpen || isVisible,
+                        prefix: CLASSNAME,
+                        size,
+                    }),
+                )}
+                style={{ zIndex }}
+            >
+                <div className={`${CLASSNAME}__overlay`} />
+
+                <HeadingLevelProvider level={2}>
+                    <ThemeProvider value={undefined}>
+                        <div className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
+                            <ClickAwayProvider
+                                callback={!shouldPreventCloseOnClickAway && onClose}
+                                childrenRefs={clickAwayRefs}
+                                parentRef={rootRef}
+                            >
+                                <section className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                    {(header || headerChildContent) && (
+                                        <header
+                                            {...headerChildProps}
+                                            className={classNames(
+                                                `${CLASSNAME}__header`,
+                                                (forceHeaderDivider || hasTopIntersection) &&
+                                                    `${CLASSNAME}__header--has-divider`,
+                                                headerChildProps?.className,
+                                            )}
+                                        >
+                                            {header}
+                                            {headerChildContent}
+                                        </header>
+                                    )}
+
+                                    <div
+                                        ref={mergeRefs(contentRef, localContentRef)}
+                                        className={`${CLASSNAME}__content`}
+                                    >
+                                        <div
+                                            className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
+                                            ref={setSentinelTop}
+                                        />
+
+                                        {content}
+
+                                        <div
+                                            className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
+                                            ref={setSentinelBottom}
+                                        />
+                                    </div>
+
+                                    {(footer || footerChildContent) && (
+                                        <footer
+                                            {...footerChildProps}
+                                            className={classNames(
+                                                `${CLASSNAME}__footer`,
+                                                (forceFooterDivider || hasBottomIntersection) &&
+                                                    `${CLASSNAME}__footer--has-divider`,
+                                                footerChildProps?.className,
+                                            )}
+                                        >
+                                            {footer}
+                                            {footerChildContent}
+                                        </footer>
+                                    )}
+
+                                    {isLoading && (
+                                        <div className={`${CLASSNAME}__progress-overlay`}>
+                                            <Progress variant={ProgressVariant.circular} />
+                                        </div>
+                                    )}
+                                </section>
+                            </ClickAwayProvider>
+                        </div>
+                    </ThemeProvider>
+                </HeadingLevelProvider>
+            </div>
         </Portal>
-        : null;
+    ) : null;
 });
 Dialog.displayName = COMPONENT_NAME;
 Dialog.className = CLASSNAME;

package/src/components/notification/Notification.tsx

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
@@ -99,39 +98,40 @@ export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props
         return null;
     }
 
-    const notification = (
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        <div
-            ref={mergeRefs(ref, rootRef)}
-            role="alert"
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    color,
-                    hasAction,
-                    isHidden: !isOpen,
-                    prefix: CLASSNAME,
-                }),
-            )}
-            onClick={onClick}
-            style={{ ...style, zIndex }}
-        >
-            <div className={`${CLASSNAME}__icon`}>
-                <Icon icon={icon} size={Size.s} />
-            </div>
-            <div className={`${CLASSNAME}__content`}>{content}</div>
-            {hasAction && (
-                <div className={`${CLASSNAME}__action`}>
-                    <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>
-                        <span>{actionLabel}</span>
-                    </Button>
+    return (
+        <Portal enabled={usePortal}>
+            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+            <div
+                ref={mergeRefs(ref, rootRef)}
+                role="alert"
+                {...forwardedProps}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        color,
+                        hasAction,
+                        isHidden: !isOpen,
+                        prefix: CLASSNAME,
+                    }),
+                )}
+                onClick={onClick}
+                style={{ ...style, zIndex }}
+            >
+                <div className={`${CLASSNAME}__icon`}>
+                    <Icon icon={icon} size={Size.s} />
                 </div>
-            )}
-        </div>
+                <div className={`${CLASSNAME}__content`}>{content}</div>
+                {hasAction && (
+                    <div className={`${CLASSNAME}__action`}>
+                        <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>
+                            <span>{actionLabel}</span>
+                        </Button>
+                    </div>
+                )}
+            </div>
+            );
+        </Portal>
     );
-
-    return usePortal ? <Portal>{notification}</Portal> : notification;
 });
 Notification.displayName = COMPONENT_NAME;
 Notification.className = CLASSNAME;

package/src/components/popover/Popover.tsx

@@ -93,11 +93,6 @@ const DEFAULT_PROPS: Partial<PopoverProps> = {
     zIndex: POPOVER_ZINDEX,
 };
 
-/** Method to render the popover inside a portal if usePortal is true */
-const renderPopover = (children: ReactNode, usePortal?: boolean): any => {
-    return usePortal ? <Portal>{children}</Portal> : children;
-};
-
 // Inner component (must be wrapped before export)
 const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
     const {
@@ -154,39 +149,38 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
     const clickAwayRefs = useRef([popoverRef, anchorRef]);
     const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);
 
-    return isOpen
-        ? renderPopover(
-              <Component
-                  {...forwardedProps}
-                  ref={mergedRefs}
-                  className={classNames(
-                      className,
-                      handleBasicClasses({
-                          prefix: CLASSNAME,
-                          theme,
-                          elevation: Math.min(elevation || 0, 5),
-                          position,
-                          isInitializing: !styles.popover?.transform,
-                      }),
-                  )}
-                  style={styles.popover}
-                  {...attributes.popper}
-              >
-                  {unmountSentinel}
-                  <ClickAwayProvider callback={closeOnClickAway && onClose} childrenRefs={clickAwayRefs}>
-                      {hasArrow && (
-                          <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow}>
-                              <svg viewBox="0 0 14 14" aria-hidden>
-                                  <path d="M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z" />
-                              </svg>
-                          </div>
-                      )}
-                      <ThemeProvider value={theme}>{children}</ThemeProvider>
-                  </ClickAwayProvider>
-              </Component>,
-              usePortal,
-          )
-        : null;
+    return isOpen ? (
+        <Portal enabled={usePortal}>
+            <Component
+                {...forwardedProps}
+                ref={mergedRefs}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        theme,
+                        elevation: Math.min(elevation || 0, 5),
+                        position,
+                        isInitializing: !styles.popover?.transform,
+                    }),
+                )}
+                style={styles.popover}
+                {...attributes.popper}
+            >
+                {unmountSentinel}
+                <ClickAwayProvider callback={closeOnClickAway && onClose} childrenRefs={clickAwayRefs}>
+                    {hasArrow && (
+                        <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow}>
+                            <svg viewBox="0 0 14 14" aria-hidden>
+                                <path d="M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z" />
+                            </svg>
+                        </div>
+                    )}
+                    <ThemeProvider value={theme}>{children}</ThemeProvider>
+                </ClickAwayProvider>
+            </Component>
+        </Portal>
+    ) : null;
 });
 _InnerPopover.displayName = COMPONENT_NAME;
 

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

@@ -1,5 +1,4 @@
-import { Button, Switch } from '@lumx/react';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { Button } from '@lumx/react';
 import { Portal, PortalProvider } from '@lumx/react/utils';
 import React from 'react';
 
@@ -9,17 +8,13 @@ export default {
 };
 
 const initShadowDOMPortal = () => {
-    let container;
-    return {
-        mount() {
-            container = document.createElement('div');
-            document.body.appendChild(container);
-            return container.attachShadow({ mode: 'closed' });
-        },
-        unmount() {
-            container?.remove();
-        },
-    };
+    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() };
 };
 
 /**
@@ -27,14 +22,12 @@ const initShadowDOMPortal = () => {
  */
 export const RenderInShadowDOM = {
     args: { enabled: true },
-    render({ enabled }) {
-        return (
-            <PortalProvider value={initShadowDOMPortal}>
-                <Portal enabled={enabled}>
-                    <Button>My button in a portal</Button>
-                </Portal>
-            </PortalProvider>
-        );
-    },
+    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 } },
 };

package/src/utils/PortalProvider/index.tsx

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

package/utils/index.d.ts

@@ -31,12 +31,10 @@ interface ClickAwayProviderProps extends ClickAwayParameters {
 declare const ClickAwayProvider: React.FC<ClickAwayProviderProps>;
 
 type Container = DocumentFragment | Element;
-type PortalInit = () => PortalContext;
-interface PortalContext {
-    mount(): Container;
-    unmount?(): void;
-}
-declare const PortalContext: React.Context<PortalInit>;
+type PortalInit = () => {
+    container: Container;
+    teardown?: () => void;
+};
 /**
  * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
  */
@@ -46,11 +44,11 @@ declare const PortalProvider: React.FC<{
 }>;
 /**
  * Render children in a portal outside the current DOM position
- * (defaults to document.body but can be customized with the PortalContextProvider)
+ * (defaults to `document.body` but can be customized with the PortalContextProvider)
  */
 declare const Portal: React.FC<{
     enabled?: boolean;
     children: React.ReactNode;
 }>;
 
-export { ClickAwayProvider, Portal, PortalProvider };
+export { ClickAwayProvider, Portal, type PortalInit, PortalProvider };

package/utils/index.js

@@ -93,7 +93,7 @@ const ClickAwayProvider = ({
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
 const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
-  mount: () => document.body
+  container: document.body
 }));
 
 /**
@@ -103,33 +103,25 @@ const PortalProvider = PortalContext.Provider;
 
 /**
  * Render children in a portal outside the current DOM position
- * (defaults to document.body but can be customized with the PortalContextProvider)
+ * (defaults to `document.body` but can be customized with the PortalContextProvider)
  */
 const Portal = ({
   children,
   enabled = true
 }) => {
   const init = React__default.useContext(PortalContext);
-  const {
-    context,
-    container
-  } = React__default.useMemo(() => {
-    if (!enabled) return {};
-    const context = init();
-    const container = context.mount();
-    return {
-      context,
-      container
-    };
+  const context = React__default.useMemo(() => {
+    if (!enabled) return undefined;
+    return init();
   },
   // Only update on 'enabled'
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [enabled]);
   React__default.useLayoutEffect(() => {
-    return context === null || context === void 0 ? void 0 : context.unmount;
-  }, [context === null || context === void 0 ? void 0 : context.unmount, enabled]);
+    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, container);
+  return /*#__PURE__*/createPortal(children, context === null || context === void 0 ? void 0 : 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;\ninterface PortalContext {\n    mount(): Container;\n    unmount?(): void;\n}\ntype PortalInit = () => PortalContext;\n\nconst PortalContext = React.createContext<PortalInit>(() => ({ mount: () => 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, container } = React.useMemo(\n        () => {\n            if (!enabled) return {};\n            const context = init();\n            const container = context.mount();\n            return { context, container };\n        },\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?.unmount;\n    }, [context?.unmount, enabled]);\n\n    if (!enabled) return <>{children}</>;\n    return createPortal(children, 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","mount","body","PortalProvider","Portal","enabled","init","container","useLayoutEffect","unmount","Fragment","createPortal"],"mappings":"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"}
+{"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":"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"}