@onewelcome/react-lib-components 1.9.0 → 1.9.2

package/dist/react-lib-components.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, Fragment, useCallback, createRef, useLayoutEffect, createContext, useContext, useReducer, useMemo } from 'react';
+import React, { useState, useRef, useEffect, Fragment, createRef, useCallback, useLayoutEffect, createContext, useContext, useReducer, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 
 function _extends() {
@@ -39,6 +39,7 @@ var BaseStyling = function BaseStyling(_ref) {
     colorPrimary700: "#020B59",
     colorPrimary900: "#01041E",
     colorBlueGrey25: "#F7F7F9",
+    colorBlueGrey50: "#EEEFF3",
     colorBlueGrey100: "#DEDEE6",
     colorBlueGrey200: "#BCBECE",
     colorBlueGrey400: "#797D9C",
@@ -604,8 +605,8 @@ var usePosition = function usePosition(providedConfigObject) {
     });
   };
   var calculatePosition = useDebouncedCallback(function () {
-    var _configObject$relativ;
-    if (!((_configObject$relativ = configObject.relativeElement) != null && _configObject$relativ.current)) return;
+    var _configObject$relativ, _configObject$element;
+    if (!((_configObject$relativ = configObject.relativeElement) != null && _configObject$relativ.current) || !((_configObject$element = configObject.elementToBePositioned) != null && _configObject$element.current)) return;
     var relativeElRect = configObject.relativeElement.current.getBoundingClientRect();
     var elementToBePositionedDimensions = {
       height: configObject.elementToBePositioned.current.offsetHeight,
@@ -719,6 +720,27 @@ var useBodyClick = function useBodyClick(checkFunction, callbackFunction, depend
   }, [dependingStateVariable]);
 };
 
+var useGetDomRoot = function useGetDomRoot(passedDomRoot, relativeElement) {
+  var _useState = useState(document.body),
+    root = _useState[0],
+    setRoot = _useState[1];
+  useEffect(function () {
+    if (relativeElement && relativeElement.current && !passedDomRoot) {
+      var closestBaseStylingWrapper = relativeElement.current.closest(".basestyling-wrapper");
+      if (closestBaseStylingWrapper) {
+        setRoot(closestBaseStylingWrapper);
+        return;
+      }
+    } else if (passedDomRoot) {
+      setRoot(passedDomRoot);
+      return;
+    }
+  }, [relativeElement]);
+  return {
+    root: root
+  };
+};
+
 var _excluded$U = ["trigger", "children", "decorativeElement", "id", "show", "onShow", "onClose", "placement", "offset", "transformOrigin", "debounceAmount", "domRoot", "popoverProps"];
 var ContextMenuComponent = function ContextMenuComponent(_ref, ref) {
   var trigger = _ref.trigger,
@@ -747,11 +769,11 @@ var ContextMenuComponent = function ContextMenuComponent(_ref, ref) {
       vertical: "top"
     } : _ref$transformOrigin,
     debounceAmount = _ref.debounceAmount,
-    _ref$domRoot = _ref.domRoot,
-    domRoot = _ref$domRoot === void 0 ? document.body : _ref$domRoot,
+    domRoot = _ref.domRoot,
     popoverProps = _ref.popoverProps,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   var anchorEl = useRef(null);
+  var wrappingDivRef = ref || createRef();
   var _useState = useState(show),
     showContextMenu = _useState[0],
     setShowContextMenu = _useState[1];
@@ -769,6 +791,8 @@ var ContextMenuComponent = function ContextMenuComponent(_ref, ref) {
     setShouldClick = _useState5[1]; /** 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. */
   var _useState6 = useState(React.Children.count(children)),
     childrenCount = _useState6[0];
+  var _useGetDomRoot = useGetDomRoot(domRoot, wrappingDivRef),
+    root = _useGetDomRoot.root;
   if (!id) {
     throw new Error("You need to provide an ID to the context menu");
   }
@@ -866,8 +890,11 @@ var ContextMenuComponent = function ContextMenuComponent(_ref, ref) {
   var onOutOfViewHandler = useCallback(function () {
     setShowContextMenu(false);
   }, []);
+  if (!root) {
+    return null;
+  }
   return React.createElement("div", _extends({}, rest, {
-    ref: ref,
+    ref: wrappingDivRef,
     onKeyDown: onArrowNavigation,
     className: modules_846e6042["context-menu"]
   }), renderTrigger(), createPortal(React.createElement(Popover, _extends({}, popoverProps, {
@@ -885,7 +912,7 @@ var ContextMenuComponent = function ContextMenuComponent(_ref, ref) {
     id: id + "-menu",
     "aria-describedby": id,
     role: "menu"
-  }, renderChildren())), domRoot));
+  }, renderChildren())), root));
 };
 var ContextMenu = /*#__PURE__*/React.forwardRef(ContextMenuComponent);
 
@@ -1463,8 +1490,7 @@ var TooltipComponent = function TooltipComponent(_ref, ref) {
     offset = _ref$offset === void 0 ? defaultPosition.offset : _ref$offset,
     _ref$transformOrigin = _ref.transformOrigin,
     transformOrigin = _ref$transformOrigin === void 0 ? defaultPosition.transformOrigin : _ref$transformOrigin,
-    _ref$domRoot = _ref.domRoot,
-    domRoot = _ref$domRoot === void 0 ? document.body : _ref$domRoot,
+    domRoot = _ref.domRoot,
     label = _ref.label,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var _useState = useState(generateID()),
@@ -1472,6 +1498,9 @@ var TooltipComponent = function TooltipComponent(_ref, ref) {
   var _useState2 = useState(false),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var wrappingDivRef = ref || createRef();
+  var _useGetDomRoot = useGetDomRoot(domRoot, wrappingDivRef),
+    root = _useGetDomRoot.root;
   var relativeElement = useRef(null);
   var elementToBePositioned = useRef(null);
   var _usePosition = usePosition({
@@ -1528,7 +1557,7 @@ var TooltipComponent = function TooltipComponent(_ref, ref) {
     }, label);
   };
   return React.createElement("div", _extends({}, rest, {
-    ref: ref,
+    ref: wrappingDivRef,
     className: modules_16974fb0.wrapper + " " + (className != null ? className : "")
   }), renderChildren(), React.createElement("div", {
     className: "" + modules_16974fb0["tooltip-wrapper"]
@@ -1554,7 +1583,7 @@ var TooltipComponent = function TooltipComponent(_ref, ref) {
     "aria-hidden": !visible,
     id: identifier,
     className: modules_16974fb0.tooltip + " " + (visible ? modules_16974fb0.visible : "")
-  }, children), domRoot)));
+  }, children), root)));
 };
 var Tooltip = /*#__PURE__*/React.forwardRef(TooltipComponent);
 
@@ -2454,10 +2483,12 @@ var BaseModalComponent = function BaseModalComponent(_ref, ref) {
     _ref$forceContainerOp = _ref.forceContainerOpen,
     forceContainerOpen = _ref$forceContainerOp === void 0 ? false : _ref$forceContainerOp,
     zIndex = _ref.zIndex,
-    _ref$domRoot = _ref.domRoot,
-    domRoot = _ref$domRoot === void 0 ? document.body : _ref$domRoot,
+    domRoot = _ref.domRoot,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   useSetBodyScroll(open);
+  var wrappingDivRef = useRef(null);
+  var _useGetDomRoot = useGetDomRoot(domRoot, wrappingDivRef),
+    root = _useGetDomRoot.root;
   var handleEscKeyPress = function handleEscKeyPress(event) {
     if (!disableEscapeKeyDown && event.key === "Escape") {
       event.stopPropagation();
@@ -2467,7 +2498,9 @@ var BaseModalComponent = function BaseModalComponent(_ref, ref) {
   var handleBackdropClick = function handleBackdropClick() {
     return !disableBackdrop && onClose && onClose();
   };
-  return createPortal(React.createElement("div", _extends({}, rest, {
+  return React.createElement("div", {
+    ref: wrappingDivRef
+  }, createPortal(React.createElement("div", _extends({}, rest, {
     ref: ref,
     id: id,
     className: modules_cf1b230e["modal"] + " " + (open ? modules_cf1b230e["visible"] : "") + " " + className,
@@ -2497,7 +2530,7 @@ var BaseModalComponent = function BaseModalComponent(_ref, ref) {
       zIndex: zIndex && zIndex + 1
     },
     className: modules_cf1b230e["container"] + " " + ((_containerProps$class2 = containerProps == null ? void 0 : containerProps.className) != null ? _containerProps$class2 : "")
-  }), children)), domRoot);
+  }), children)), root));
 };
 var BaseModal = /*#__PURE__*/React.forwardRef(BaseModalComponent);
 
@@ -3067,13 +3100,15 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
     } : _ref$autoHideDuration,
     _ref$stackSize = _ref.stackSize,
     stackSize = _ref$stackSize === void 0 ? 3 : _ref$stackSize,
-    _ref$domRoot = _ref.domRoot,
-    domRoot = _ref$domRoot === void 0 ? document.body : _ref$domRoot,
+    domRoot = _ref.domRoot,
     children = _ref.children,
     className = _ref.className;
   var _useState = useState([]),
     snackbars = _useState[0],
     setSnackbars = _useState[1];
+  var wrappingDivRef = useRef(null);
+  var _useGetDomRoot = useGetDomRoot(domRoot, wrappingDivRef),
+    root = _useGetDomRoot.root;
   var addSnackbar = function addSnackbar(item) {
     setSnackbars(function (items) {
       return [].concat(items, [item]);
@@ -3151,7 +3186,7 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
   var snackbarPortal = createPortal(React.createElement(SnackbarContainer, {
     placement: placement,
     className: className
-  }, snackbarList), domRoot);
+  }, snackbarList), root);
   return React.createElement(SnackbarContextProvider, {
     initialState: {
       enqueueSnackbar: enqueueSnackbar,
@@ -3160,7 +3195,9 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
       setSnackbarHeight: setSnackbarHeight,
       snackbars: snackbars
     }
-  }, children, snackbarPortal);
+  }, children, React.createElement("div", {
+    ref: wrappingDivRef
+  }, snackbarPortal));
 };
 
 var css$p = ".Checkbox_module_checkboxWrapper__0342c60f{position:relative}.Checkbox_module_checkboxWrapper__0342c60f+.Checkbox_module_checkboxWrapper__0342c60f{margin-top:1.25rem}.Checkbox_module_checkboxContainer__0342c60f{align-items:center;display:flex}.Checkbox_module_checkboxContainer__0342c60f label{display:inline-block;font-family:var(--font-family);font-size:var(--font-size);margin-left:.5rem;user-select:none}.Checkbox_module_checkboxList__0342c60f{list-style:none;margin:1.25rem 0 0 1.75rem;padding:0}.Checkbox_module_checkboxList__0342c60f li+li{margin-top:1.25rem}.Checkbox_module_nativeInput__0342c60f{height:1.25rem;left:0;margin:0;opacity:0;position:absolute;top:0;width:1.25rem}.Checkbox_module_nativeInput__0342c60f:checked+*{color:var(--color-primary)}.Checkbox_module_nativeInput__0342c60f:focus-visible+*{border-radius:2px;outline:1px solid var(--color-focus);outline-offset:1px}.Checkbox_module_nativeInput__0342c60f.Checkbox_module_error__0342c60f:focus-visible+*{outline-color:var(--color-error)}.Checkbox_module_input__0342c60f{font-size:1.25rem;pointer-events:none}.Checkbox_module_disabled__0342c60f{color:var(--disabled)}";