@lumx/react 3.16.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.0",
-        "@lumx/icons": "^3.16.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.0"
+    "version": "3.16.1-alpha.1"
 }

package/src/components/dialog/Dialog.tsx

@@ -1,5 +1,4 @@
 import React, { Children, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
@@ -20,6 +19,7 @@ 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';
 
 /**
  * Defines the props of the component.
@@ -193,95 +193,94 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
 
     const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
 
-    return isOpen || isVisible
-        ? createPortal(
-              <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>,
-              document.body,
-          )
-        : null;
+    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;
 });
 Dialog.displayName = COMPONENT_NAME;
 Dialog.className = CLASSNAME;

package/src/components/lightbox/Lightbox.tsx

@@ -1,7 +1,6 @@
 import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
-import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
 import { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';
@@ -17,6 +16,7 @@ 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';
 
 /**
  * Defines the props of the component.
@@ -127,52 +127,52 @@ export const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) =
 
     if (!isOpen && !isVisible) return null;
 
-    return createPortal(
-        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
-        <div
-            ref={mergeRefs(ref, wrapperRef)}
-            {...forwardedProps}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledBy}
-            aria-modal="true"
-            role="dialog"
-            tabIndex={-1}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    isHidden: !isOpen,
-                    isShown: isOpen || isVisible,
-                    theme,
-                }),
-            )}
-            style={{ zIndex }}
-        >
-            {closeButtonProps && (
-                <div className={`${CLASSNAME}__close`}>
-                    <IconButton
-                        {...closeButtonProps}
-                        ref={closeButtonRef}
-                        emphasis="low"
-                        hasBackground
-                        icon={mdiClose}
-                        theme="dark"
-                        type="button"
-                        onClick={onClose}
-                    />
-                </div>
-            )}
-            <HeadingLevelProvider level={2}>
-                <ThemeProvider value={undefined}>
-                    <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
-                        <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
-                            {children}
-                        </div>
-                    </ClickAwayProvider>
-                </ThemeProvider>
-            </HeadingLevelProvider>
-        </div>,
-        document.body,
+    return (
+        <Portal>
+            <div
+                ref={mergeRefs(ref, wrapperRef)}
+                {...forwardedProps}
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
+                aria-modal="true"
+                role="dialog"
+                tabIndex={-1}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        isHidden: !isOpen,
+                        isShown: isOpen || isVisible,
+                        theme,
+                    }),
+                )}
+                style={{ zIndex }}
+            >
+                {closeButtonProps && (
+                    <div className={`${CLASSNAME}__close`}>
+                        <IconButton
+                            {...closeButtonProps}
+                            ref={closeButtonRef}
+                            emphasis="low"
+                            hasBackground
+                            icon={mdiClose}
+                            theme="dark"
+                            type="button"
+                            onClick={onClose}
+                        />
+                    </div>
+                )}
+                <HeadingLevelProvider level={2}>
+                    <ThemeProvider value={undefined}>
+                        <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
+                            <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
+                                {children}
+                            </div>
+                        </ClickAwayProvider>
+                    </ThemeProvider>
+                </HeadingLevelProvider>
+            </div>
+        </Portal>
     );
 });
 Lightbox.displayName = COMPONENT_NAME;

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,6 +12,7 @@ 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';
 
 /**
  * Defines the props of the component.
@@ -98,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 ? createPortal(notification, document.body) : notification;
 });
 Notification.displayName = COMPONENT_NAME;
 Notification.className = CLASSNAME;

package/src/components/popover/Popover.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, RefObject, useRef } from 'react';
-import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
@@ -15,6 +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 { 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 ? createPortal(children, document.body) : 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

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { ReactNode, useState } from 'react';
-import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
@@ -15,6 +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 { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 
@@ -129,8 +129,8 @@ export const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) =>
     return (
         <>
             <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>
-            {isMounted &&
-                createPortal(
+            {isMounted && (
+                <Portal>
                     <div
                         ref={tooltipRef}
                         {...forwardedProps}
@@ -154,9 +154,9 @@ export const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) =>
                                 <p key={line}>{line}</p>
                             ))}
                         </div>
-                    </div>,
-                    document.body,
-                )}
+                    </div>
+                </Portal>
+            )}
         </>
     );
 });

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

@@ -0,0 +1,33 @@
+import { Button } from '@lumx/react';
+import { Portal, PortalProvider } from '@lumx/react/utils';
+import React from 'react';
+
+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/PortalProvider/index.tsx

@@ -0,0 +1,36 @@
+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);
+};

package/src/utils/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from './ClickAwayProvider';
+export * from './PortalProvider';