@onewelcome/react-lib-components 1.9.0 → 1.9.1

package/dist/Notifications/BaseModal/BaseModal.d.ts

@@ -16,4 +16,4 @@ export interface Props extends ComponentPropsWithRef<"div"> {
     domRoot?: HTMLElement;
 }
 export declare const useSetBodyScroll: (open: boolean) => void;
-export declare const BaseModal: React.ForwardRefExoticComponent<Pick<Props, "hidden" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "domRoot" | "open" | "onClose" | "containerProps" | "backdropProps" | "labelledby" | "describedby" | "disableEscapeKeyDown" | "disableBackdrop" | "forceContainerOpen" | "zIndex"> & React.RefAttributes<HTMLDivElement>>;
+export declare const BaseModal: React.ForwardRefExoticComponent<Pick<Props, "hidden" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open" | "onClose" | "containerProps" | "backdropProps" | "labelledby" | "describedby" | "disableEscapeKeyDown" | "disableBackdrop" | "forceContainerOpen" | "zIndex" | "domRoot"> & React.RefAttributes<HTMLDivElement>>;

package/dist/hooks/useGetDomRoot.d.ts

@@ -0,0 +1,3 @@
+export declare const useGetDomRoot: (passedDomRoot: HTMLElement | undefined, relativeElement: React.RefObject<HTMLDivElement> | null) => {
+    root: HTMLElement;
+};

package/dist/react-lib-components.cjs.development.js

@@ -612,8 +612,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,
@@ -727,6 +727,27 @@ var useBodyClick = function useBodyClick(checkFunction, callbackFunction, depend
   }, [dependingStateVariable]);
 };
 
+var useGetDomRoot = function useGetDomRoot(passedDomRoot, relativeElement) {
+  var _useState = React.useState(document.body),
+    root = _useState[0],
+    setRoot = _useState[1];
+  React.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,
@@ -755,11 +776,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 = React.useRef(null);
+  var wrappingDivRef = ref || React.createRef();
   var _useState = React.useState(show),
     showContextMenu = _useState[0],
     setShowContextMenu = _useState[1];
@@ -777,6 +798,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 = React.useState(React__default["default"].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");
   }
@@ -874,8 +897,11 @@ var ContextMenuComponent = function ContextMenuComponent(_ref, ref) {
   var onOutOfViewHandler = React.useCallback(function () {
     setShowContextMenu(false);
   }, []);
+  if (!root) {
+    return null;
+  }
   return React__default["default"].createElement("div", _extends({}, rest, {
-    ref: ref,
+    ref: wrappingDivRef,
     onKeyDown: onArrowNavigation,
     className: modules_846e6042["context-menu"]
   }), renderTrigger(), reactDom.createPortal(React__default["default"].createElement(Popover, _extends({}, popoverProps, {
@@ -893,7 +919,7 @@ var ContextMenuComponent = function ContextMenuComponent(_ref, ref) {
     id: id + "-menu",
     "aria-describedby": id,
     role: "menu"
-  }, renderChildren())), domRoot));
+  }, renderChildren())), root));
 };
 var ContextMenu = /*#__PURE__*/React__default["default"].forwardRef(ContextMenuComponent);
 
@@ -1471,8 +1497,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 = React.useState(generateID()),
@@ -1480,6 +1505,9 @@ var TooltipComponent = function TooltipComponent(_ref, ref) {
   var _useState2 = React.useState(false),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var wrappingDivRef = ref || React.createRef();
+  var _useGetDomRoot = useGetDomRoot(domRoot, wrappingDivRef),
+    root = _useGetDomRoot.root;
   var relativeElement = React.useRef(null);
   var elementToBePositioned = React.useRef(null);
   var _usePosition = usePosition({
@@ -1536,7 +1564,7 @@ var TooltipComponent = function TooltipComponent(_ref, ref) {
     }, label);
   };
   return React__default["default"].createElement("div", _extends({}, rest, {
-    ref: ref,
+    ref: wrappingDivRef,
     className: modules_16974fb0.wrapper + " " + (className != null ? className : "")
   }), renderChildren(), React__default["default"].createElement("div", {
     className: "" + modules_16974fb0["tooltip-wrapper"]
@@ -1562,7 +1590,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__default["default"].forwardRef(TooltipComponent);
 
@@ -2462,10 +2490,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 = React.useRef(null);
+  var _useGetDomRoot = useGetDomRoot(domRoot, wrappingDivRef),
+    root = _useGetDomRoot.root;
   var handleEscKeyPress = function handleEscKeyPress(event) {
     if (!disableEscapeKeyDown && event.key === "Escape") {
       event.stopPropagation();
@@ -2475,7 +2505,9 @@ var BaseModalComponent = function BaseModalComponent(_ref, ref) {
   var handleBackdropClick = function handleBackdropClick() {
     return !disableBackdrop && onClose && onClose();
   };
-  return reactDom.createPortal(React__default["default"].createElement("div", _extends({}, rest, {
+  return React__default["default"].createElement("div", {
+    ref: wrappingDivRef
+  }, reactDom.createPortal(React__default["default"].createElement("div", _extends({}, rest, {
     ref: ref,
     id: id,
     className: modules_cf1b230e["modal"] + " " + (open ? modules_cf1b230e["visible"] : "") + " " + className,
@@ -2505,7 +2537,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__default["default"].forwardRef(BaseModalComponent);
 
@@ -3075,13 +3107,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 = React.useState([]),
     snackbars = _useState[0],
     setSnackbars = _useState[1];
+  var wrappingDivRef = React.useRef(null);
+  var _useGetDomRoot = useGetDomRoot(domRoot, wrappingDivRef),
+    root = _useGetDomRoot.root;
   var addSnackbar = function addSnackbar(item) {
     setSnackbars(function (items) {
       return [].concat(items, [item]);
@@ -3159,7 +3193,7 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
   var snackbarPortal = reactDom.createPortal(React__default["default"].createElement(SnackbarContainer, {
     placement: placement,
     className: className
-  }, snackbarList), domRoot);
+  }, snackbarList), root);
   return React__default["default"].createElement(SnackbarContextProvider, {
     initialState: {
       enqueueSnackbar: enqueueSnackbar,
@@ -3168,7 +3202,9 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
       setSnackbarHeight: setSnackbarHeight,
       snackbars: snackbars
     }
-  }, children, snackbarPortal);
+  }, children, React__default["default"].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)}";