magneto365.ui 2.67.0 → 2.68.0

package/dist/cjs/types/components/context/container/container.context.d.ts

@@ -0,0 +1,4 @@
+import React, { FC } from 'react';
+import { IContainerContext, IContainerContextProvider } from './container.interface';
+export declare const ContainerContext: React.Context<IContainerContext>;
+export declare const ContainerContextProvider: FC<IContainerContextProvider>;

package/dist/cjs/types/components/context/container/container.interface.d.ts

@@ -0,0 +1,6 @@
+export interface IContainerContext {
+    container: HTMLElement | ShadowRoot | null;
+}
+export interface IContainerContextProvider {
+    container?: HTMLElement;
+}

package/dist/cjs/types/components/context/context.interface.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface IContextAppProvider {
     children: React.ReactNode;
+    container?: HTMLElement;
     device?: DeviceType;
 }
 export declare type DeviceType = 'mobile' | 'desktop';

package/dist/cjs/types/constants/env.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const isClient: boolean;
+export declare const isServer: boolean;

package/dist/esm/index.js

@@ -212,10 +212,31 @@ var ResponsiveContextProvider = function (_a) {
     return React.createElement(ResponsiveContext.Provider, { value: { dim: dim } }, children);
 };
 
+var isClient = typeof window !== 'undefined';
+var isServer = !isClient;
+
+var ContainerContext = 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 = useMemo(function () {
+        var element = container;
+        if (!element && isClient) {
+            element = document.body;
+        }
+        return {
+            container: element
+        };
+    }, [container]);
+    return React.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.createElement(EventDispatcherContextProvider, null,
-        React.createElement(ResponsiveContextProvider, { device: device }, children)));
+        React.createElement(ContainerContextProvider, { container: container },
+            React.createElement(ResponsiveContextProvider, { device: device }, children))));
 };
 
 var screenList = Object.entries(screenSize).sort(function (a, b) { return a[1] - b[1]; });
@@ -3023,20 +3044,21 @@ var AlertJobModalButton = function (_a) {
 var DrawerPortal = function (_a) {
     var children = _a.children;
     var portalNode = useRef(null);
+    var container = useContext(ContainerContext).container;
     var _b = useState(false), mounted = _b[0], setMounted = _b[1];
     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.createPortal(children, portalNode.current) : null;
 };
 
@@ -3085,21 +3107,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 = useContext(ContainerContext).container;
     var portalNode = useRef(null);
     var _b = useState(false), mounted = _b[0], setMounted = _b[1];
     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.createPortal(children, portalNode.current) : null;
 };
 
@@ -3281,6 +3304,7 @@ var BrandsMenuMobile = function (_a) {
 
 var withClickOut = function (WrappedComponent) {
     var Component = function (props) {
+        var container = useContext(ContainerContext).container;
         var _a = useState(false), clickOut = _a[0], setClickOut = _a[1];
         var ref = useRef(null);
         var handleClick = useCallback(function (e) {
@@ -3291,11 +3315,11 @@ var withClickOut = function (WrappedComponent) {
             }
         }, [clickOut]);
         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.createElement("div", { ref: ref },
             React.createElement(WrappedComponent, __assign({ clickOut: clickOut, setClickOut: setClickOut }, props))));
     };
@@ -5205,6 +5229,7 @@ var Component$1B = function (_a) {
     var _g = useState(false), isAnimating = _g[0], setIsAnimating = _g[1];
     var removeTimeoutRef = useRef(null);
     var hideTimeoutRef = useRef(null);
+    var container = useContext(ContainerContext).container;
     var containerVar = useMemo(function () { return ({
         '--transition-duration': "".concat(transitionDuration / 1000, "s")
     }); }, []);
@@ -5249,13 +5274,13 @@ var Component$1B = function (_a) {
         setLocalVisible(visible);
         setIsAnimating(visible);
     }, [isAnimating, visible]);
-    return localVisible
+    return localVisible && container
         ? ReactDOM.createPortal(React.createElement("div", { style: containerVar, className: CNM.get({ styles: styles$1r, cls: [className] }) },
             React.createElement("div", { className: containerStyles },
                 React.createElement(IconItem, __assign({ alt: type, className: CNM.get({ styles: styles$1r, cls: ['message__icon'] }), icon: iconByType[type], showDefaultFallback: false, size: 20 }, iconProps)),
                 React.createElement("div", null,
                     text && React.createElement("span", { className: textStyles(!!description) }, text),
-                    description && React.createElement("span", { className: textStyles() }, description)))), document.body)
+                    description && React.createElement("span", { className: textStyles() }, description)))), container)
         : null;
 };
 /**
@@ -7499,6 +7524,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 = useContext(ContainerContext).container;
     var hideComponent = useMemo(function () {
         return isOpen ? style$f['hide'] : '';
     }, [isOpen]);
@@ -7507,6 +7533,7 @@ var ContainerDesktop$3 = function (_a) {
             React.createElement(DropDownButton$1, { title: dropDownTitle, onClick: toggleDropdown }))),
         React.createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options-tags-container")], " ").concat(hideComponent) }, selectedValues.map(function (itemSelected) { return (React.createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#FFF", onClick: function () { return removeValueToArray(itemSelected); } })); })),
         React.createElement("div", { ref: containerOptions, className: "".concat(style$f["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM.createPortal(React.createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 60, "px "),
@@ -7516,7 +7543,7 @@ var ContainerDesktop$3 = function (_a) {
                 }, ref: dropdownRef, className: "".concat(style$f["".concat(classMUI, "-container-options__menu")]) },
                 inputSearchProps && React.createElement(InputSearch, __assign({}, inputSearchProps)),
                 React.createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--tags")]) }, selectedValues.map(function (itemSelected) { return (React.createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#F4F4FA", onClick: function () { return removeValueToArray(itemSelected); } })); })),
-                React.createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React.createElement(SelectItem$1, { disable: !limitOfSelectable || selectedValues.includes(value), key: value.id, onClick: function () { return addValueToArray(value); }, text: value.name })); }))), document.body))));
+                React.createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React.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"};
@@ -8088,10 +8115,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 = useContext(ContainerContext).container;
     return (React.createElement("div", { style: { zIndex: 999999 } },
         React.createElement("div", { ref: inputRef },
             React.createElement(DropDownButton, { title: dropDownTitle, onClick: toggleDropdown })),
         React.createElement("div", { ref: containerOptions, className: "".concat(style$b["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM.createPortal(React.createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 8, "px "),
@@ -8099,7 +8128,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.createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React.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.createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React.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"};