magneto365.ui 2.67.0 → 2.68.0

package/dist/cjs/index.js

@@ -221,10 +221,31 @@ var ResponsiveContextProvider = function (_a) {
     return React__default["default"].createElement(ResponsiveContext.Provider, { value: { dim: dim } }, children);
 };
 
+var isClient = typeof window !== 'undefined';
+var isServer = !isClient;
+
+var ContainerContext = React.createContext({
+    container: isClient ? window.document.body : null
+});
+var ContainerContextProvider = function (_a) {
+    var children = _a.children, _b = _a.container, container = _b === void 0 ? null : _b;
+    var ctx = React.useMemo(function () {
+        var element = container;
+        if (!element && isClient) {
+            element = document.body;
+        }
+        return {
+            container: element
+        };
+    }, [container]);
+    return React__default["default"].createElement(ContainerContext.Provider, { value: ctx }, children);
+};
+
 var ContextAppProvider = function (_a) {
-    var children = _a.children, device = _a.device;
+    var children = _a.children, device = _a.device, container = _a.container;
     return (React__default["default"].createElement(EventDispatcherContextProvider, null,
-        React__default["default"].createElement(ResponsiveContextProvider, { device: device }, children)));
+        React__default["default"].createElement(ContainerContextProvider, { container: container },
+            React__default["default"].createElement(ResponsiveContextProvider, { device: device }, children))));
 };
 
 var screenList = Object.entries(screenSize).sort(function (a, b) { return a[1] - b[1]; });
@@ -3032,20 +3053,21 @@ var AlertJobModalButton = function (_a) {
 var DrawerPortal = function (_a) {
     var children = _a.children;
     var portalNode = React.useRef(null);
+    var container = React.useContext(ContainerContext).container;
     var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
     React.useEffect(function () {
-        if (!document)
+        if (isServer || !container)
             return;
         portalNode.current = document.createElement('div');
         portalNode.current.classList.add('magneto-ui-drawer');
-        document.body.appendChild(portalNode.current);
+        container.appendChild(portalNode.current);
         setMounted(true);
         return function () {
             if (portalNode.current) {
-                document.body.removeChild(portalNode.current);
+                container.removeChild(portalNode.current);
             }
         };
-    }, []);
+    }, [container]);
     return mounted && portalNode.current ? ReactDOM__default["default"].createPortal(children, portalNode.current) : null;
 };
 
@@ -3094,21 +3116,22 @@ var styles$2i = {"magneto-ui-modal":"mg_modal_magneto-ui-modal_1ffsw","magneto-u
 
 var ModalPortal = function (_a) {
     var children = _a.children;
+    var container = React.useContext(ContainerContext).container;
     var portalNode = React.useRef(null);
     var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
     React.useEffect(function () {
-        if (!document)
+        if (isServer || !container)
             return;
         portalNode.current = document.createElement('div');
         portalNode.current.classList.add('modal-ui-drawer');
-        document.body.appendChild(portalNode.current);
+        container.appendChild(portalNode.current);
         setMounted(true);
         return function () {
             if (portalNode.current) {
-                document.body.removeChild(portalNode.current);
+                container.removeChild(portalNode.current);
             }
         };
-    }, []);
+    }, [container]);
     return mounted && portalNode.current ? ReactDOM__default["default"].createPortal(children, portalNode.current) : null;
 };
 
@@ -3290,6 +3313,7 @@ var BrandsMenuMobile = function (_a) {
 
 var withClickOut = function (WrappedComponent) {
     var Component = function (props) {
+        var container = React.useContext(ContainerContext).container;
         var _a = React.useState(false), clickOut = _a[0], setClickOut = _a[1];
         var ref = React.useRef(null);
         var handleClick = React.useCallback(function (e) {
@@ -3300,11 +3324,11 @@ var withClickOut = function (WrappedComponent) {
             }
         }, [clickOut]);
         React.useEffect(function () {
-            document.addEventListener('click', handleClick);
+            container === null || container === void 0 ? void 0 : container.addEventListener('click', handleClick);
             return function () {
-                document.removeEventListener('click', handleClick);
+                container === null || container === void 0 ? void 0 : container.removeEventListener('click', handleClick);
             };
-        }, [handleClick]);
+        }, [handleClick, container]);
         return (React__default["default"].createElement("div", { ref: ref },
             React__default["default"].createElement(WrappedComponent, __assign({ clickOut: clickOut, setClickOut: setClickOut }, props))));
     };
@@ -5214,6 +5238,7 @@ var Component$1B = function (_a) {
     var _g = React.useState(false), isAnimating = _g[0], setIsAnimating = _g[1];
     var removeTimeoutRef = React.useRef(null);
     var hideTimeoutRef = React.useRef(null);
+    var container = React.useContext(ContainerContext).container;
     var containerVar = React.useMemo(function () { return ({
         '--transition-duration': "".concat(transitionDuration / 1000, "s")
     }); }, []);
@@ -5258,13 +5283,13 @@ var Component$1B = function (_a) {
         setLocalVisible(visible);
         setIsAnimating(visible);
     }, [isAnimating, visible]);
-    return localVisible
+    return localVisible && container
         ? ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: containerVar, className: CNM.get({ styles: styles$1r, cls: [className] }) },
             React__default["default"].createElement("div", { className: containerStyles },
                 React__default["default"].createElement(IconItem, __assign({ alt: type, className: CNM.get({ styles: styles$1r, cls: ['message__icon'] }), icon: iconByType[type], showDefaultFallback: false, size: 20 }, iconProps)),
                 React__default["default"].createElement("div", null,
                     text && React__default["default"].createElement("span", { className: textStyles(!!description) }, text),
-                    description && React__default["default"].createElement("span", { className: textStyles() }, description)))), document.body)
+                    description && React__default["default"].createElement("span", { className: textStyles() }, description)))), container)
         : null;
 };
 /**
@@ -7508,6 +7533,7 @@ var useContainerDesktop$1 = function (_a) {
 var ContainerDesktop$3 = function (_a) {
     var inputSearchProps = _a.inputSearchProps, selectedValues = _a.selectedValues, listOptions = _a.listOptions, removeValueToArray = _a.removeValueToArray, addValueToArray = _a.addValueToArray, numberOfSelectable = _a.numberOfSelectable, dropDownTitle = _a.dropDownTitle;
     var _b = useContainerDesktop$1({ numberOfSelectable: numberOfSelectable, selectedValues: selectedValues }), containerOptions = _b.containerOptions, menuPosition = _b.menuPosition, toggleDropdown = _b.toggleDropdown, limitOfSelectable = _b.limitOfSelectable, inputRef = _b.inputRef, isOpen = _b.isOpen, dropdownRef = _b.dropdownRef;
+    var container = React.useContext(ContainerContext).container;
     var hideComponent = React.useMemo(function () {
         return isOpen ? style$f['hide'] : '';
     }, [isOpen]);
@@ -7516,6 +7542,7 @@ var ContainerDesktop$3 = function (_a) {
             React__default["default"].createElement(DropDownButton$1, { title: dropDownTitle, onClick: toggleDropdown }))),
         React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options-tags-container")], " ").concat(hideComponent) }, selectedValues.map(function (itemSelected) { return (React__default["default"].createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#FFF", onClick: function () { return removeValueToArray(itemSelected); } })); })),
         React__default["default"].createElement("div", { ref: containerOptions, className: "".concat(style$f["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 60, "px "),
@@ -7525,7 +7552,7 @@ var ContainerDesktop$3 = function (_a) {
                 }, ref: dropdownRef, className: "".concat(style$f["".concat(classMUI, "-container-options__menu")]) },
                 inputSearchProps && React__default["default"].createElement(InputSearch, __assign({}, inputSearchProps)),
                 React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--tags")]) }, selectedValues.map(function (itemSelected) { return (React__default["default"].createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#F4F4FA", onClick: function () { return removeValueToArray(itemSelected); } })); })),
-                React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem$1, { disable: !limitOfSelectable || selectedValues.includes(value), key: value.id, onClick: function () { return addValueToArray(value); }, text: value.name })); }))), document.body))));
+                React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem$1, { disable: !limitOfSelectable || selectedValues.includes(value), key: value.id, onClick: function () { return addValueToArray(value); }, text: value.name })); }))), container))));
 };
 
 var style$e = {"magneto-ui-container-options":"mg_container_mobile_magneto-ui-container-options_1caxk","magneto-ui-container-options-tags-container":"mg_container_mobile_magneto-ui-container-options-tags-container_1caxk","magneto-ui-container-options__menu":"mg_container_mobile_magneto-ui-container-options_menu_1caxk","magneto-ui-container-options__menu--tags":"mg_container_mobile_magneto-ui-container-options_menu--tags_1caxk","magneto-ui-container-options__menu--list":"mg_container_mobile_magneto-ui-container-options_menu--list_1caxk"};
@@ -8097,10 +8124,12 @@ var useContainerDesktop = function (_a) {
 var ContainerDesktop$1 = function (_a) {
     var listOptions = _a.listOptions, addValue = _a.addValue, dropDownTitle = _a.dropDownTitle, selectedValue = _a.selectedValue;
     var _b = useContainerDesktop({ addValue: addValue }), containerOptions = _b.containerOptions, menuPosition = _b.menuPosition, toggleDropdown = _b.toggleDropdown, isOpen = _b.isOpen, dropdownRef = _b.dropdownRef, inputRef = _b.inputRef, selectValue = _b.selectValue;
+    var container = React.useContext(ContainerContext).container;
     return (React__default["default"].createElement("div", { style: { zIndex: 999999 } },
         React__default["default"].createElement("div", { ref: inputRef },
             React__default["default"].createElement(DropDownButton, { title: dropDownTitle, onClick: toggleDropdown })),
         React__default["default"].createElement("div", { ref: containerOptions, className: "".concat(style$b["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 8, "px "),
@@ -8108,7 +8137,7 @@ var ContainerDesktop$1 = function (_a) {
                     width: "".concat(menuPosition.width, "px"),
                     zIndex: 999999
                 }, ref: dropdownRef, className: "".concat(style$b["".concat(classMUI, "-container-options__menu")]) },
-                React__default["default"].createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem, { selected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, disable: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, key: value.id, onClick: function () { return selectValue(value.id); }, text: value.label })); }))), document.body))));
+                React__default["default"].createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem, { selected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, disable: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, key: value.id, onClick: function () { return selectValue(value.id); }, text: value.label })); }))), container))));
 };
 
 var style$a = {"magneto-ui-container-options":"mg_container_mobile_magneto-ui-container-options_16tb3","magneto-ui-container-options__menu":"mg_container_mobile_magneto-ui-container-options_menu_16tb3","magneto-ui-container-options__menu--list":"mg_container_mobile_magneto-ui-container-options_menu--list_16tb3"};