@lumx/react 3.15.2-alpha.5 → 3.16.1-alpha.0

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;
@@ -6643,7 +6643,7 @@ const DEFAULT_PROPS$P = {
 
 /** Method to render the popover inside a portal if usePortal is true */
 const renderPopover = (children, usePortal) => {
-  return usePortal ? /*#__PURE__*/createPortal(children, document.body) : children;
+  return usePortal ? /*#__PURE__*/React__default.createElement(Portal, null, children) : children;
 };
 
 // Inner component (must be wrapped before export)
@@ -8896,10 +8896,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 +8934,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;
@@ -9688,7 +9685,7 @@ const Notification = forwardRef((props, ref) => {
     theme: theme,
     onClick: handleCallback
   }, /*#__PURE__*/React__default.createElement("span", null, actionLabel))));
-  return usePortal ? /*#__PURE__*/createPortal(notification, document.body) : notification;
+  return usePortal ? /*#__PURE__*/React__default.createElement(Portal, null, notification) : notification;
 });
 Notification.displayName = COMPONENT_NAME$C;
 Notification.className = CLASSNAME$C;
@@ -14159,7 +14156,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 +14175,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;