@onewelcome/react-lib-components 1.9.0 → 1.9.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/ContextMenu/ContextMenu.tsx

@@ -16,9 +16,11 @@
 
 import React, {
   ComponentPropsWithRef,
+  createRef,
   ForwardRefRenderFunction,
   ReactElement,
   ReactNode,
+  RefObject,
   useCallback,
   useEffect,
   useRef,
@@ -31,6 +33,7 @@ import { Placement, Offset } from "../hooks/usePosition";
 import classes from "./ContextMenu.module.scss";
 import { useBodyClick } from "../hooks/useBodyClick";
 import { createPortal } from "react-dom";
+import { useGetDomRoot } from "../hooks/useGetDomRoot";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
@@ -61,13 +64,14 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     offset = { top: 0, bottom: 0, left: 0, right: 0 },
     transformOrigin = { horizontal: "left", vertical: "top" },
     debounceAmount,
-    domRoot = document.body,
+    domRoot,
     popoverProps,
     ...rest
   }: Props,
   ref
 ) => {
   const anchorEl = useRef<HTMLButtonElement>(null);
+  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const [showContextMenu, setShowContextMenu] = useState(show);
   const [hasBeenClosed, setHasBeenClosed] = useState(false);
   const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);
@@ -78,6 +82,8 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     ); /** We need this, because whenever we use the arrow keys to select the contextmenu item, and we focus the currently selected item it fires the "click" listener in ContextMenuItem component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
   const [childrenCount] = useState(React.Children.count(children));
 
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+
   if (!id) {
     throw new Error("You need to provide an ID to the context menu");
   }
@@ -198,8 +204,17 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     setShowContextMenu(false);
   }, []);
 
+  if (!root) {
+    return null;
+  }
+
   return (
-    <div {...rest} ref={ref} onKeyDown={onArrowNavigation} className={classes["context-menu"]}>
+    <div
+      {...rest}
+      ref={wrappingDivRef}
+      onKeyDown={onArrowNavigation}
+      className={classes["context-menu"]}
+    >
       {renderTrigger()}
       {createPortal(
         <Popover
@@ -224,7 +239,7 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             {renderChildren()}
           </ul>
         </Popover>,
-        domRoot
+        root
       )}
     </div>
   );

package/src/Notifications/BaseModal/BaseModal.tsx

@@ -14,8 +14,9 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
+import { useGetDomRoot } from "../../hooks/useGetDomRoot";
 import classes from "./BaseModal.module.scss";
 import { labelId, descriptionId } from "./BaseModalContext";
 
@@ -76,12 +77,14 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     disableBackdrop = false,
     forceContainerOpen = false,
     zIndex,
-    domRoot = document.body,
+    domRoot,
     ...rest
   }: Props,
   ref
 ) => {
   useSetBodyScroll(open);
+  const wrappingDivRef = useRef(null);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
   const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (!disableEscapeKeyDown && event.key === "Escape") {
@@ -92,50 +95,54 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
   const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
 
-  return createPortal(
-    <div
-      {...rest}
-      ref={ref}
-      id={id}
-      className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={labelledby || labelId(id)}
-      aria-describedby={describedby || descriptionId(id)}
-      aria-hidden={!open}
-      tabIndex={-1}
-      data-hidden={!open}
-      onKeyDown={handleEscKeyPress}
-      style={{ zIndex }}
-    >
-      <div
-        {...backdropProps}
-        className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
-        onClick={handleBackdropClick}
-      ></div>
-      {forceContainerOpen ? (
+  return (
+    <div ref={wrappingDivRef}>
+      {createPortal(
         <div
-          {...containerProps}
+          {...rest}
+          ref={ref}
+          id={id}
+          className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={labelledby || labelId(id)}
+          aria-describedby={describedby || descriptionId(id)}
           aria-hidden={!open}
-          hidden={!open}
-          style={{ zIndex: zIndex && zIndex + 1 }}
-          className={`${classes["container"]} ${containerProps?.className ?? ""}`}
+          tabIndex={-1}
+          data-hidden={!open}
+          onKeyDown={handleEscKeyPress}
+          style={{ zIndex }}
         >
-          {children}
-        </div>
-      ) : (
-        open && (
           <div
-            {...containerProps}
-            style={{ zIndex: zIndex && zIndex + 1 }}
-            className={`${classes["container"]} ${containerProps?.className ?? ""}`}
-          >
-            {children}
-          </div>
-        )
+            {...backdropProps}
+            className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
+            onClick={handleBackdropClick}
+          ></div>
+          {forceContainerOpen ? (
+            <div
+              {...containerProps}
+              aria-hidden={!open}
+              hidden={!open}
+              style={{ zIndex: zIndex && zIndex + 1 }}
+              className={`${classes["container"]} ${containerProps?.className ?? ""}`}
+            >
+              {children}
+            </div>
+          ) : (
+            open && (
+              <div
+                {...containerProps}
+                style={{ zIndex: zIndex && zIndex + 1 }}
+                className={`${classes["container"]} ${containerProps?.className ?? ""}`}
+              >
+                {children}
+              </div>
+            )
+          )}
+        </div>,
+        root
       )}
-    </div>,
-    domRoot
+    </div>
   );
 };
 

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -14,13 +14,14 @@
  *    limitations under the License.
  */
 
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { SnackbarContextProvider } from "./SnackbarStateProvider";
 import { Actions, SnackbarOptionsProps, Variant } from "../interfaces";
 import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
 import { generateID } from "../../../util/helper";
 import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
+import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 
 /** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
 interface Duration {
@@ -55,12 +56,14 @@ export const SnackbarProvider = (
     placement = { vertical: "bottom", horizontal: "center" },
     autoHideDuration = { long: 8000, short: 4000 },
     stackSize = 3,
-    domRoot = document.body,
+    domRoot,
     children,
     className
   }: Props = { closeButtonTitle: "" }
 ) => {
   const [snackbars, setSnackbars] = useState<Item[]>([]);
+  const wrappingDivRef = useRef(null);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
   const addSnackbar = (item: Item) => {
     setSnackbars(items => [...items, item]);
@@ -149,7 +152,7 @@ export const SnackbarProvider = (
     <SnackbarContainer placement={placement} className={className}>
       {snackbarList}
     </SnackbarContainer>,
-    domRoot
+    root
   );
 
   return (
@@ -163,7 +166,7 @@ export const SnackbarProvider = (
       }}
     >
       {children}
-      {snackbarPortal}
+      <div ref={wrappingDivRef}>{snackbarPortal}</div>
     </SnackbarContextProvider>
   );
 };

package/src/Tooltip/Tooltip.tsx

@@ -16,9 +16,11 @@
 
 import React, {
   ComponentPropsWithRef,
+  createRef,
   ForwardRefRenderFunction,
   ReactElement,
   ReactNode,
+  RefObject,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -29,6 +31,7 @@ import classes from "./Tooltip.module.scss";
 import { generateID } from "../util/helper";
 import { Offset, Placement, usePosition } from "../hooks/usePosition";
 import { createPortal } from "react-dom";
+import { useGetDomRoot } from "../hooks/useGetDomRoot";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   label: string | ReactNode;
@@ -58,7 +61,7 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     placement = defaultPosition.placement,
     offset = defaultPosition.offset,
     transformOrigin = defaultPosition.transformOrigin,
-    domRoot = document.body,
+    domRoot,
     label,
     ...rest
   }: Props,
@@ -67,6 +70,9 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const [identifier] = useState(generateID());
   const [visible, setVisible] = useState(false);
 
+  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+
   const relativeElement = useRef<HTMLDivElement>(null);
   const elementToBePositioned = useRef<HTMLDivElement>(null);
 
@@ -123,7 +129,7 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   };
 
   return (
-    <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ""}`}>
+    <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? ""}`}>
       {renderChildren()}
       <div className={`${classes["tooltip-wrapper"]}`}>
         <Icon
@@ -150,7 +156,7 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           >
             {children}
           </div>,
-          domRoot
+          root
         )}
       </div>
     </div>

package/src/hooks/useGetDomRoot.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { useEffect, useState } from "react";
+
+export const useGetDomRoot = (
+  passedDomRoot: HTMLElement | undefined,
+  relativeElement: React.RefObject<HTMLDivElement> | null
+) => {
+  const [root, setRoot] = useState<HTMLElement>(document.body);
+
+  useEffect(() => {
+    if (relativeElement && relativeElement.current && !passedDomRoot) {
+      const closestBaseStylingWrapper = relativeElement.current.closest(".basestyling-wrapper");
+
+      if (closestBaseStylingWrapper) {
+        setRoot(closestBaseStylingWrapper as HTMLElement);
+        return;
+      }
+    } else if (passedDomRoot) {
+      setRoot(passedDomRoot);
+      return;
+    }
+  }, [relativeElement]);
+
+  return { root };
+};

package/src/hooks/usePosition.ts

@@ -330,7 +330,8 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
   };
 
   const calculatePosition = useDebouncedCallback(() => {
-    if (!configObject.relativeElement?.current) return;
+    if (!configObject.relativeElement?.current || !configObject.elementToBePositioned?.current)
+      return;
     const relativeElRect = (configObject.relativeElement!
       .current as HTMLElement)!.getBoundingClientRect();
     const elementToBePositionedDimensions: Dimensions = {