diff --git a/iframe.html b/iframe.html index 66fa131..2ec2112 100644 --- a/iframe.html +++ b/iframe.html @@ -71,4 +71,4 @@ }

No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


\ No newline at end of file
+      }
No Preview
Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.

\ No newline at end of file
diff --git a/index.html b/index.html
index 13fe751..edb43f7 100644
--- a/index.html
+++ b/index.html
@@ -16,4 +16,4 @@
   }

\ No newline at end of file
+      }

\ No newline at end of file
diff --git a/main.17385882c42bf7995349.bundle.js b/main.17385882c42bf7995349.bundle.js
deleted file mode 100644
index 23fbe93..0000000
--- a/main.17385882c42bf7995349.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{3:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"c",(function(){return createHtmlPortalNode})),__webpack_require__.d(__webpack_exports__,"d",(function(){return createSvgPortalNode})),__webpack_require__.d(__webpack_exports__,"a",(function(){return InPortal})),__webpack_require__.d(__webpack_exports__,"b",(function(){return OutPortal}));__webpack_require__(23),__webpack_require__(24),__webpack_require__(25),__webpack_require__(19),__webpack_require__(21),__webpack_require__(65),__webpack_require__(117),__webpack_require__(66),__webpack_require__(220),__webpack_require__(91),__webpack_require__(221),__webpack_require__(16),__webpack_require__(28),__webpack_require__(20);var react__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(0),react_dom__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__(159);function _typeof(o){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o})(o)}var _extendStatics,__extends=(_extendStatics=function extendStatics(d,b){return(_extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)Object.prototype.hasOwnProperty.call(b,p)&&(d[p]=b[p])})(d,b)},function(d,b){if("function"!=typeof b&&null!==b)throw new TypeError("Class extends value "+b+" is not a constructor or null");function __(){this.constructor=d}_extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}),createPortalNode=function(elementType,options){var parent,lastPlaceholder,element,initialProps={};if("html"===elementType)element=document.createElement("div");else{if("svg"!==elementType)throw new Error('Invalid element type "'.concat(elementType,'" for createPortalNode: must be "html" or "svg".'));element=document.createElementNS("http://www.w3.org/2000/svg","g")}if(options&&"object"===_typeof(options))for(var _i=0,_a=Object.entries(options.attributes);_i<_a.length;_i++){var _b=_a[_i],key=_b[0],value=_b[1];element.setAttribute(key,value)}var portalNode={element:element,elementType:elementType,setPortalProps:function setPortalProps(props){initialProps=props},getInitialPortalProps:function getInitialPortalProps(){return initialProps},mount:function mount(newParent,newPlaceholder){if(newPlaceholder!==lastPlaceholder){if(portalNode.unmount(),newParent!==parent&&!function(domElement,elementType){if("html"===elementType)return domElement instanceof HTMLElement;if("svg"===elementType)return domElement instanceof SVGElement;throw new Error('Unrecognized element type "'.concat(elementType,'" for validateElementType.'))}(newParent,elementType))throw new Error('Invalid element type for portal: "'.concat(elementType,'" portalNodes must be used with ').concat(elementType," elements, but OutPortal is within <").concat(newParent.tagName,">."));newParent.replaceChild(portalNode.element,newPlaceholder),parent=newParent,lastPlaceholder=newPlaceholder}},unmount:function unmount(expectedPlaceholder){expectedPlaceholder&&expectedPlaceholder!==lastPlaceholder||parent&&lastPlaceholder&&(parent.replaceChild(lastPlaceholder,portalNode.element),parent=void 0,lastPlaceholder=void 0)}};return portalNode},InPortal=function(_super){function InPortal(props){var _this=_super.call(this,props)||this;return _this.addPropsChannel=function(){Object.assign(_this.props.node,{setPortalProps:function setPortalProps(props){_this.setState({nodeProps:props})}})},_this.state={nodeProps:_this.props.node.getInitialPortalProps()},_this}return __extends(InPortal,_super),InPortal.prototype.componentDidMount=function(){this.addPropsChannel()},InPortal.prototype.componentDidUpdate=function(){this.addPropsChannel()},InPortal.prototype.render=function(){var _this=this,_a=this.props,children=_a.children,node=_a.node;return react_dom__WEBPACK_IMPORTED_MODULE_15__.createPortal(react__WEBPACK_IMPORTED_MODULE_14__.Children.map(children,(function(child){return react__WEBPACK_IMPORTED_MODULE_14__.isValidElement(child)?react__WEBPACK_IMPORTED_MODULE_14__.cloneElement(child,_this.state.nodeProps):child})),node.element)},InPortal}(react__WEBPACK_IMPORTED_MODULE_14__.PureComponent),OutPortal=function(_super){function OutPortal(props){var _this=_super.call(this,props)||this;return _this.placeholderNode=react__WEBPACK_IMPORTED_MODULE_14__.createRef(),_this.passPropsThroughPortal(),_this}return __extends(OutPortal,_super),OutPortal.prototype.passPropsThroughPortal=function(){var propsForTarget=Object.assign({},this.props,{node:void 0});this.props.node.setPortalProps(propsForTarget)},OutPortal.prototype.componentDidMount=function(){var node=this.props.node;this.currentPortalNode=node;var placeholder=this.placeholderNode.current,parent=placeholder.parentNode;node.mount(parent,placeholder),this.passPropsThroughPortal()},OutPortal.prototype.componentDidUpdate=function(){var node=this.props.node;this.currentPortalNode&&node!==this.currentPortalNode&&(this.currentPortalNode.unmount(this.placeholderNode.current),this.currentPortalNode.setPortalProps({}),this.currentPortalNode=node);var placeholder=this.placeholderNode.current,parent=placeholder.parentNode;node.mount(parent,placeholder),this.passPropsThroughPortal()},OutPortal.prototype.componentWillUnmount=function(){var node=this.props.node;node.unmount(this.placeholderNode.current),node.setPortalProps({})},OutPortal.prototype.render=function(){return react__WEBPACK_IMPORTED_MODULE_14__.createElement("div",{ref:this.placeholderNode})},OutPortal}(react__WEBPACK_IMPORTED_MODULE_14__.PureComponent),createHtmlPortalNode=createPortalNode.bind(null,"html"),createSvgPortalNode=createPortalNode.bind(null,"svg")},344:function(module,exports,__webpack_require__){__webpack_require__(345),__webpack_require__(521),module.exports=__webpack_require__(522)},399:function(module,exports){},522:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(26),__webpack_require__(21),__webpack_require__(16),__webpack_require__(27),__webpack_require__(20);var _storybook_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(95),req=__webpack_require__(742);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_5__.configure)((function loadStories(){req.keys().forEach((function(filename){return req(filename)}))}),module)}.call(this,__webpack_require__(195)(module))},742:function(module,exports,__webpack_require__){var map={"./html.stories.js":743,"./svg.stories.js":753};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=742},743:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(23),__webpack_require__(24),__webpack_require__(25),__webpack_require__(42),__webpack_require__(21),__webpack_require__(55),__webpack_require__(67),__webpack_require__(28),__webpack_require__(20),__webpack_require__(35),__webpack_require__(65),__webpack_require__(744),__webpack_require__(74),__webpack_require__(36),__webpack_require__(16),__webpack_require__(37),__webpack_require__(222);var _video,_hr,_p,_p2,_hr2,_p3,_p4,_hr3,_p5,_p6,_hr4,_p7,_hr5,_br,_br2,_br3,react__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_17___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_17__),_storybook_react__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__(95),___WEBPACK_IMPORTED_MODULE_19__=__webpack_require__(3);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(o)throw n}}return a}}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i\n    
\n        { props.children }\n    
;\n\nstoriesOf('Portals', module)\n    .add('render things in different places', () => {\n        const portalNode = createHtmlPortalNode();\n\n        return 
\n            
\n                Portal defined here:\n                \n                    Hi!\n                \n            
\n\n            
\n                Portal renders here:\n                \n            
\n        
;\n    })\n    .add('persist DOM whilst moving', () => {\n        const portalNode = createHtmlPortalNode();\n\n        return React.createElement(() => {\n            const [useOuterDiv, setDivToUse] = React.useState(false);\n\n            return 
\n                \n                    \n\n                \n\n                
\n\n                
\n                    
Outer OutPortal:
\n                    { useOuterDiv === true &&  }\n                    \n                        \n                            \n                                
Inner OutPortal:
\n                                { useOuterDiv === false &&  }\n                            \n                        \n                    \n                
\n            
;\n        })\n    })\n    .add('persist component state whilst moving', () => {\n        const portalNode = createHtmlPortalNode();\n\n        const Counter = () => {\n            const [count, setCount] = React.useState(0);\n\n            return 
\n                Count is { count }\n                \n            
;\n        };\n\n        return React.createElement(() => {\n            const [useOuterDiv, setDivToUse] = React.useState(false);\n\n            return 
\n                \n                    \n                \n\n                \n\n                
\n\n                
Outer OutPortal:
\n                { useOuterDiv === true &&  }\n                \n                    \n                        \n                            
Inner OutPortal:
\n                            { useOuterDiv === false &&  }\n                        \n                    \n                \n            
\n        });\n    })\n    .add('can set props remotely whilst moving', () => {\n        const portalNode = createHtmlPortalNode();\n\n        const Counter = (props) => {\n            const [count, setCount] = React.useState(0);\n\n            return 
\n                Count is { count }\n                \n            
;\n        };\n\n        return React.createElement(() => {\n            const [useOuterDiv, setDivToUse] = React.useState(false);\n\n            return 
\n                \n                    \n                \n\n                \n\n                
\n\n                
Outer OutPortal:
\n                { useOuterDiv === true &&\n                    \n                }\n                \n                    \n                        \n                            
Inner OutPortal:
\n                            { useOuterDiv === false &&\n                                \n                            }\n                        \n                    \n                \n            
\n        });\n    })\n    .add('can switch between portals safely', () => {\n        const portalNode1 = createHtmlPortalNode();\n        const portalNode2 = createHtmlPortalNode();\n\n        const Counter = () => {\n            const [count, setCount] = React.useState(0);\n\n            return 
\n                Count is { count }\n                \n            
;\n        };\n\n        return React.createElement(() => {\n            const [isPortalSwitched, switchPortal] = React.useState(false);\n\n            let portalNode = isPortalSwitched ? portalNode2 : portalNode1;\n\n            return 
\n                \n                    \n                \n                \n                    \n                \n\n                \n\n                
\n\n                
Inner OutPortal:
\n                \n            
\n        });\n    })\n    .add('renders reliably, even with frequent changes and multiple portals', () => {\n        const portalNode = createHtmlPortalNode();\n\n        const Target = (p) => p.value.toString();\n\n        const Parent = () => {\n            const [state, setState] = React.useState(false);\n\n            // Change frequently, to hunt for race conditions. On leaving this story, this might\n            // complain about calling setState after unmount - that's totally fine, we don't care.\n            // There should be no other errors though.\n            setTimeout(() => {\n                setState(!state);\n            }, 100);\n\n            return 
\n                Portal flickers between 2 / 3 / nothing here:\n                { state\n                    // What happens if you render the same portal twice?\n                    ? <>\n                        \n                        \n                    \n                    // What happens if you switch from 2 portals to 1, to 2 to zero, at random?\n                    : Math.random() > 0.5\n                        ? \n                        : null\n                }\n            
;\n        }\n\n        return 
\n            
\n                Portal defined here:\n                \n                    \n                \n            
\n\n            \n        
;\n    })\n    .add(\"swap nodes between different locations\", () => {\n        const numberOfNodes = 5;\n        const initialOrder = [];\n        for (let i = 0; i < numberOfNodes; i++) {\n          initialOrder[i] = i;\n        }\n    \n        const ExampleContent = ({ content }) => String(content);\n    \n        const ChangeLayoutWithoutUnmounting = () => {\n          const nodes = React.useMemo(\n            () => initialOrder.map(createHtmlPortalNode),\n            []\n          );\n          const [order, setOrder] = React.useState(initialOrder);\n          return (\n            
\n              \n              {nodes.map((node, index) => (\n                \n                  \n                \n              ))}\n              {order.map((position) => (\n                \n              ))}\n            
\n          );\n        };\n    \n        return ;\n    })\n    .add('can pass attributes option to createHtmlPortalNode', () => {\n        return React.createElement(() => {\n            const [hasAttrOption, setHasAttrOption] = React.useState(false);\n\n            const portalNode = createHtmlPortalNode( hasAttrOption ? {\n                attributes: { id: \"div-id-1\", style: \"background-color: #aaf; width: 204px;\" }\n            } : null);\n\n            return 
\n                \n\n                
\n\n                \n                    
\n                \n\n                \n\n                
\n                
\n                
\n\n                {!hasAttrOption ? `const portalNode = createHtmlPortalNode();` : `const portalNode = createHtmlPortalNode({ attributes: { id: \"div-id-1\", style: \"background-color: #aaf; width: 204px;\" } });`}\n            
\n        });\n    })\n    .add('Example from README', () => {\n        const MyExpensiveComponent = () => 'expensive!';\n\n        const MyComponent = (props) => {\n            const portalNode = React.useMemo(() => createHtmlPortalNode(), []);\n\n            return 
\n                {/*\n                    Create the content that you want to move around.\n                    InPortals render as normal, but to detached DOM.\n                    Until this is used MyExpensiveComponent will not\n                    appear anywhere in the page.\n                */}\n                \n                    \n                \n\n                {/* ... The rest of your UI ... */}\n\n                {/* Pass the node to whoever might want to show it: */}\n                { props.componentToShow === 'component-a'\n                    ? \n                    :  }\n            
;\n        }\n\n        const ComponentA = (props) => {\n            return 
\n                {/* ... Some more UI ... */}\n\n                A:\n\n                \n            
;\n        }\n\n        const ComponentB = (props) => {\n            return 
\n                {/* ... Some more UI ... */}\n\n                B:\n\n                \n            
;\n        }\n\n        return \n    });\n"),__ADDS_MAP__={"portals--example-from-readme":{startLoc:{col:9,line:292},endLoc:{col:5,line:353},startBody:{col:32,line:292},endBody:{col:5,line:353}},"portals--can-pass-attributes-option-to-createhtmlportalnode":{startLoc:{col:9,line:263},endLoc:{col:5,line:291},startBody:{col:63,line:263},endBody:{col:5,line:291}},"portals--swap-nodes-between-different-locations":{startLoc:{col:9,line:229},endLoc:{col:5,line:262},startBody:{col:51,line:229},endBody:{col:5,line:262}},"portals--renders-reliably-even-with-frequent-changes-and-multiple-portals":{startLoc:{col:9,line:187},endLoc:{col:5,line:228},startBody:{col:78,line:187},endBody:{col:5,line:228}},"portals--can-switch-between-portals-safely":{startLoc:{col:9,line:148},endLoc:{col:5,line:186},startBody:{col:46,line:148},endBody:{col:5,line:186}},"portals--can-set-props-remotely-whilst-moving":{startLoc:{col:9,line:103},endLoc:{col:5,line:147},startBody:{col:49,line:103},endBody:{col:5,line:147}},"portals--persist-component-state-whilst-moving":{startLoc:{col:9,line:62},endLoc:{col:5,line:102},startBody:{col:50,line:62},endBody:{col:5,line:102}},"portals--persist-dom-whilst-moving":{startLoc:{col:9,line:30},endLoc:{col:5,line:61},startBody:{col:38,line:30},endBody:{col:5,line:61}},"portals--render-things-in-different-places":{startLoc:{col:9,line:13},endLoc:{col:5,line:29},startBody:{col:46,line:13},endBody:{col:5,line:29}}},Container=function(props){return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",{style:{border:"1px solid #222",padding:"10px"}},props.children)};Container.displayName="Container",Object(_storybook_react__WEBPACK_IMPORTED_MODULE_18__.storiesOf)("Portals",module).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/html.stories.js",[],{},"/home/runner/work/react-reverse-portal/react-reverse-portal/stories",{})).add("render things in different places",(function(){var portalNode=Object(___WEBPACK_IMPORTED_MODULE_19__.c)();return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,"Portal defined here:",react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.a,{node:portalNode},"Hi!")),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,"Portal renders here:",react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode})))})).add("persist DOM whilst moving",(function(){var _InPortal,_OutPortal,_OutPortal2,portalNode=Object(___WEBPACK_IMPORTED_MODULE_19__.c)();return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement((function(){var _React$useState2=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(!1),2),useOuterDiv=_React$useState2[0],setDivToUse=_React$useState2[1];return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,_InPortal||(_InPortal=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.a,{node:portalNode},_video||(_video=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("video",{src:"https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4",controls:!0,loop:!0})))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("button",{onClick:function onClick(){return setDivToUse(!useOuterDiv)}},"Click to move the OutPortal"),_hr||(_hr=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("hr",null)),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,_p||(_p=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("p",null,"Outer OutPortal:")),!0===useOuterDiv&&(_OutPortal||(_OutPortal=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode}))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,_p2||(_p2=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("p",null,"Inner OutPortal:")),!1===useOuterDiv&&(_OutPortal2||(_OutPortal2=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode}))))))))}))})).add("persist component state whilst moving",(function(){var _InPortal2,_OutPortal3,_OutPortal4,portalNode=Object(___WEBPACK_IMPORTED_MODULE_19__.c)(),Counter=function(){var _React$useState4=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(0),2),count=_React$useState4[0],setCount=_React$useState4[1];return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,"Count is ",count,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("button",{onClick:function onClick(){return setCount(count+1)}},"+1"))};return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement((function(){var _React$useState6=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(!1),2),useOuterDiv=_React$useState6[0],setDivToUse=_React$useState6[1];return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,_InPortal2||(_InPortal2=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.a,{node:portalNode},react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Counter,null))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("button",{onClick:function onClick(){return setDivToUse(!useOuterDiv)}},"Click to move the OutPortal"),_hr2||(_hr2=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("hr",null)),_p3||(_p3=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("p",null,"Outer OutPortal:")),!0===useOuterDiv&&(_OutPortal3||(_OutPortal3=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode}))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,_p4||(_p4=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("p",null,"Inner OutPortal:")),!1===useOuterDiv&&(_OutPortal4||(_OutPortal4=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode})))))))}))})).add("can set props remotely whilst moving",(function(){var _InPortal3,_OutPortal5,_OutPortal6,portalNode=Object(___WEBPACK_IMPORTED_MODULE_19__.c)(),Counter=function(props){var _React$useState8=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(0),2),count=_React$useState8[0],setCount=_React$useState8[1];return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",{style:{"background-color":props.bgColor}},"Count is ",count,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("button",{onClick:function onClick(){return setCount(count+1)}},"+1"))};return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement((function(){var _React$useState10=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(!1),2),useOuterDiv=_React$useState10[0],setDivToUse=_React$useState10[1];return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,_InPortal3||(_InPortal3=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.a,{node:portalNode},react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Counter,{bgColor:"#faa"}))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("button",{onClick:function onClick(){return setDivToUse(!useOuterDiv)}},"Click to move the OutPortal"),_hr3||(_hr3=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("hr",null)),_p5||(_p5=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("p",null,"Outer OutPortal:")),!0===useOuterDiv&&(_OutPortal5||(_OutPortal5=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode,bgColor:"#aaf"}))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Container,null,_p6||(_p6=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("p",null,"Inner OutPortal:")),!1===useOuterDiv&&(_OutPortal6||(_OutPortal6=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode,bgColor:"#afa"})))))))}))})).add("can switch between portals safely",(function(){var _InPortal4,_InPortal5,portalNode1=Object(___WEBPACK_IMPORTED_MODULE_19__.c)(),portalNode2=Object(___WEBPACK_IMPORTED_MODULE_19__.c)(),Counter=function(){var _React$useState12=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(0),2),count=_React$useState12[0],setCount=_React$useState12[1];return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,"Count is ",count,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("button",{onClick:function onClick(){return setCount(count+1)}},"+1"))};return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement((function(){var _React$useState14=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(!1),2),isPortalSwitched=_React$useState14[0],switchPortal=_React$useState14[1],portalNode=isPortalSwitched?portalNode2:portalNode1;return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,_InPortal4||(_InPortal4=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.a,{node:portalNode1},react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Counter,null))),_InPortal5||(_InPortal5=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.a,{node:portalNode2},react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(Counter,null))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("button",{onClick:function onClick(){return switchPortal(!isPortalSwitched)}},"Click to swap the portal shown"),_hr4||(_hr4=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("hr",null)),_p7||(_p7=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("p",null,"Inner OutPortal:")),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode}))}))})).add("renders reliably, even with frequent changes and multiple portals",(function(){var _OutPortal7,_OutPortal8,_OutPortal9,portalNode=Object(___WEBPACK_IMPORTED_MODULE_19__.c)();return react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,"Portal defined here:",react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.a,{node:portalNode},react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement((function Target(p){return p.value.toString()}),{value:"unmounted"}))),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement((function Parent(){var _React$useState16=_slicedToArray(react__WEBPACK_IMPORTED_MODULE_17___default.a.useState(!1),2),state=_React$useState16[0],setState=_React$useState16[1];return setTimeout((function(){setState(!state)}),100),react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div",null,"Portal flickers between 2 / 3 / nothing here:",state?react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_17___default.a.Fragment,null,_OutPortal7||(_OutPortal7=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode,value:1})),_OutPortal8||(_OutPortal8=react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(___WEBPACK_IMPORTED_MODULE_19__.b,{node:portalNode,value:2}))):.5arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i {\n        const portalNode = createSvgPortalNode();\n\n        // From https://github.com/httptoolkit/react-reverse-portal/issues/2\n        return 
\n            \n                \n                \n                \n                    \n                        \n                            test\n                        \n                    \n                \n                \n                    \n                \n            \n        
\n\n    })\n    .add(\'can move content around within SVGs\', () => {\n        const portalNode = createSvgPortalNode();\n\n        return React.createElement(() => {\n            const [inFirstSvg, setSvgToUse] = React.useState(false);\n\n            return 
\n                \n\n                
\n\n                \n                    \n                        \n                            test\n                        \n                    \n\n                    \n                    \n\n                    \n                        { inFirstSvg &&  }\n                    \n                    \n                        { !inFirstSvg &&  }\n                    \n                \n            
\n        });\n    })\n    .add(\'persist DOM while moving within SVGs\', () => {\n        const portalNode = createSvgPortalNode();\n\n        return React.createElement(() => {\n            const [inFirstSvg, setSvgToUse] = React.useState(false);\n\n            return 
\n                \n\n                
\n\n                \n                    \n                        \n