@lumx/react 3.16.1-alpha.0 → 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.0",
-        "@lumx/icons": "^3.16.1-alpha.0",
+        "@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.0"
+    "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.
@@ -193,94 +194,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/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

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
@@ -13,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.
@@ -99,39 +99,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

@@ -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';
@@ -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/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/Portal/PortalProvider.stories.jsx

@@ -0,0 +1,34 @@
+import { Button } from '@lumx/react';
+import React from 'react';
+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() };
+};
+
+/**
+ * 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 } },
+};

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';