@lumx/react 3.16.0 → 3.16.1-alpha.1

package/index.js

@@ -4,7 +4,6 @@ import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
 import kebabCase from 'lodash/kebabCase';
 import noop from 'lodash/noop';
-import ReactDOM, { createPortal } from 'react-dom';
 import last from 'lodash/last';
 import pull from 'lodash/pull';
 import get from 'lodash/get';
@@ -12,7 +11,7 @@ import concat from 'lodash/concat';
 import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
-import { ClickAwayProvider } from './utils/index.js';
+import { Portal, ClickAwayProvider } from './utils/index.js';
 import memoize from 'lodash/memoize';
 import isFunction from 'lodash/isFunction';
 import castArray from 'lodash/castArray';
@@ -21,6 +20,7 @@ import isInteger from 'lodash/isInteger';
 import throttle from 'lodash/throttle';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
+import ReactDOM from 'react-dom';
 import take from 'lodash/take';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
@@ -3284,7 +3284,7 @@ const Dialog = forwardRef((props, ref) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
   const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
-  return isOpen || isVisible ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _extends({
+  return isOpen || isVisible ? /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(rootRef, ref)
   }, forwardedProps, {
     className: classNames(className, handleBasicClasses({
@@ -3331,7 +3331,7 @@ const Dialog = forwardRef((props, ref) => {
     className: `${CLASSNAME$16}__progress-overlay`
   }, /*#__PURE__*/React__default.createElement(Progress, {
     variant: ProgressVariant.circular
-  })))))))), document.body) : null;
+  }))))))))) : null;
 });
 Dialog.displayName = COMPONENT_NAME$16;
 Dialog.className = CLASSNAME$16;
@@ -6641,11 +6641,6 @@ const DEFAULT_PROPS$P = {
   zIndex: POPOVER_ZINDEX
 };
 
-/** Method to render the popover inside a portal if usePortal is true */
-const renderPopover = (children, usePortal) => {
-  return usePortal ? /*#__PURE__*/createPortal(children, document.body) : children;
-};
-
 // Inner component (must be wrapped before export)
 const _InnerPopover = forwardRef((props, ref) => {
   var _styles$popover;
@@ -6709,7 +6704,9 @@ const _InnerPopover = forwardRef((props, ref) => {
   useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   const clickAwayRefs = useRef([popoverRef, anchorRef]);
   const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
-  return isOpen ? renderPopover(/*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
+  return isOpen ? /*#__PURE__*/React__default.createElement(Portal, {
+    enabled: usePortal
+  }, /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: mergedRefs,
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$11,
@@ -6733,7 +6730,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
   }))), /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: theme
-  }, children))), usePortal) : null;
+  }, children)))) : null;
 });
 _InnerPopover.displayName = COMPONENT_NAME$11;
 
@@ -8896,10 +8893,7 @@ const Lightbox = forwardRef((props, ref) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const clickAwayRefs = useRef([wrapperRef]);
   if (!isOpen && !isVisible) return null;
-  return /*#__PURE__*/createPortal(
-  /*#__PURE__*/
-  /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
-  React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(ref, wrapperRef)
   }, forwardedProps, {
     "aria-label": ariaLabel,
@@ -8937,7 +8931,7 @@ const Lightbox = forwardRef((props, ref) => {
     ref: childrenRef,
     className: `${CLASSNAME$M}__wrapper`,
     role: "presentation"
-  }, children))))), document.body);
+  }, children))))));
 });
 Lightbox.displayName = COMPONENT_NAME$M;
 Lightbox.className = CLASSNAME$M;
@@ -9657,10 +9651,9 @@ const Notification = forwardRef((props, ref) => {
   if (!type || !isVisible) {
     return null;
   }
-  const notification =
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-  React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement(Portal, {
+    enabled: usePortal
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(ref, rootRef),
     role: "alert"
   }, forwardedProps, {
@@ -9687,8 +9680,7 @@ const Notification = forwardRef((props, ref) => {
     emphasis: Emphasis.medium,
     theme: theme,
     onClick: handleCallback
-  }, /*#__PURE__*/React__default.createElement("span", null, actionLabel))));
-  return usePortal ? /*#__PURE__*/createPortal(notification, document.body) : notification;
+  }, /*#__PURE__*/React__default.createElement("span", null, actionLabel)))), ");");
 });
 Notification.displayName = COMPONENT_NAME$C;
 Notification.className = CLASSNAME$C;
@@ -14159,7 +14151,7 @@ const Tooltip = forwardRef((props, ref) => {
   }, [isOpen, update, popperElement]);
   const labelLines = label ? label.split('\n') : [];
   const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", _extends({
     ref: tooltipRef
   }, forwardedProps, {
     id: id,
@@ -14178,7 +14170,7 @@ const Tooltip = forwardRef((props, ref) => {
     className: `${CLASSNAME$2}__inner`
   }, labelLines.map(line => /*#__PURE__*/React__default.createElement("p", {
     key: line
-  }, line)))), document.body));
+  }, line))))));
 });
 Tooltip.displayName = COMPONENT_NAME$2;
 Tooltip.className = CLASSNAME$2;