Deploying to gh-pages from @ af1d4dc 🚀

Author: pimterry

assets/Color-AVL7NMMY-KaWYWVZa.js assets/Color-AVL7NMMY-ByZoKNzz.jsassets/Color-AVL7NMMY-KaWYWVZa.js renamed to assets/Color-AVL7NMMY-ByZoKNzz.js

@@ -1,4 +1,4 @@
-import{j as e}from"./index-Bs_DxCk_.js";import{r as s}from"./iframe-DTvousao.js";import{c as d,I as i,O as a}from"./index-DWgeUaR6.js";import"./index-D60OzxDW.js";import"./preload-helper-PPVm8Dsz.js";const k={title:"Portals"},c=t=>s.createElement("div",{style:{border:"1px solid #222",padding:"10px"}},t.children),h=()=>{const t=d();return e.jsxs("div",{children:[e.jsxs("div",{children:["Portal defined here:",e.jsx(i,{node:t,children:"Hi!"})]}),e.jsxs("div",{children:["Portal renders here:",e.jsx(a,{node:t})]})]})},m=()=>{const t=d();return s.createElement(()=>{const[r,o]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx("video",{src:"https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4",controls:!0,loop:!0})}),e.jsx("button",{onClick:()=>o(!r),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsxs("div",{children:[e.jsx("p",{children:"Outer OutPortal:"}),r===!0&&e.jsx(a,{node:t}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),r===!1&&e.jsx(a,{node:t})]})})})]})]})})},x=()=>{const t=d(),r=()=>{const[o,n]=s.useState(0);return e.jsxs("div",{children:["Count is ",o,e.jsx("button",{onClick:()=>n(o+1),children:"+1"})]})};return s.createElement(()=>{const[o,n]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(r,{})}),e.jsx("button",{onClick:()=>n(!o),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsx("p",{children:"Outer OutPortal:"}),o===!0&&e.jsx(a,{node:t}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),o===!1&&e.jsx(a,{node:t})]})})})]})})},v=()=>{const t=d(),r=o=>{const[n,l]=s.useState(0);return e.jsxs("div",{style:{backgroundColor:o.bgColor},children:["Count is ",n,e.jsx("button",{onClick:()=>l(n+1),children:"+1"})]})};return s.createElement(()=>{const[o,n]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(r,{bgColor:"#faa"})}),e.jsx("button",{onClick:()=>n(!o),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsx("p",{children:"Outer OutPortal:"}),o===!0&&e.jsx(a,{node:t,bgColor:"#aaf"}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),o===!1&&e.jsx(a,{node:t,bgColor:"#afa"})]})})})]})})},P=()=>{const t=d(),r=d(),o=()=>{const[n,l]=s.useState(0);return e.jsxs("div",{children:["Count is ",n,e.jsx("button",{onClick:()=>l(n+1),children:"+1"})]})};return s.createElement(()=>{const[n,l]=s.useState(!1);let u=n?r:t;return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(o,{})}),e.jsx(i,{node:r,children:e.jsx(o,{})}),e.jsx("button",{onClick:()=>l(!n),children:"Click to swap the portal shown"}),e.jsx("hr",{}),e.jsx("p",{children:"Inner OutPortal:"}),e.jsx(a,{node:u})]})})},C=()=>{const t=d(),r=n=>e.jsx(e.Fragment,{children:n.value.toString()}),o=()=>{const[n,l]=s.useState(!1);return setTimeout(()=>{l(!n)},100),e.jsxs("div",{children:["Portal flickers between 2 / 3 / nothing here:",n?e.jsxs(e.Fragment,{children:[e.jsx(a,{node:t,value:1}),e.jsx(a,{node:t,value:2})]}):Math.random()>.5?e.jsx(a,{node:t,value:3}):null]})};return e.jsxs("div",{children:[e.jsxs("div",{children:["Portal defined here:",e.jsx(i,{node:t,children:e.jsx(r,{value:"unmounted"})})]}),e.jsx(o,{})]})},j=()=>{const r=[];for(let n=0;n<5;n++)r[n]=n;const o=()=>{const n=s.useMemo(()=>r.map(()=>d()),[]),[l,u]=s.useState(r);return e.jsxs("div",{children:[e.jsx("button",{onClick:()=>u(l.slice().reverse()),children:"Click to reverse the order"}),n.map((p,f)=>e.jsx(i,{node:p,children:e.jsx("span",{children:f})},f)),l.map(p=>e.jsx(a,{node:n[p]},p))]})};return e.jsx(o,{})},b=()=>s.createElement(()=>{const[t,r]=s.useState(!1),o=d(t?{attributes:{id:"div-id-1",style:"background-color: #aaf; width: 204px;"}}:void 0);return e.jsxs("div",{children:[e.jsx("button",{onClick:()=>r(!t),children:"Click to pass attributes option to the intermediary div"}),e.jsx("hr",{}),e.jsx(i,{node:o,children:e.jsx("div",{style:{width:"200px",height:"50px",border:"2px solid purple"}})}),e.jsx(a,{node:o}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("text",{children:t?'const portalNode = createHtmlPortalNode({ attributes: { id: "div-id-1", style: "background-color: #aaf; width: 204px;" } });':"const portalNode = createHtmlPortalNode();"})]})}),O=()=>{const t=d({containerElement:"span"});return e.jsxs("div",{children:[e.jsxs("p",{children:["Portal defined here:",e.jsx(i,{node:t,children:"Hi!"})]}),e.jsxs("p",{children:["Portal renders here:",e.jsx(a,{node:t})]})]})},N=()=>{const t=d({containerElement:"tr"});return s.createElement(()=>{const[r,o]=s.useState(!0);return e.jsxs("div",{children:[e.jsxs(i,{node:t,children:[e.jsx("td",{children:"Cell 1"}),e.jsx("td",{children:"Cell 2"}),e.jsx("td",{children:"Cell 3"})]}),e.jsxs("button",{onClick:()=>o(!r),children:["Move row to ",r?"second":"first"," table"]}),e.jsxs("div",{style:{display:"flex",gap:"20px",marginTop:"20px"},children:[e.jsxs("table",{border:1,children:[e.jsx("thead",{children:e.jsx("tr",{children:e.jsx("th",{colSpan:3,children:"First Table"})})}),e.jsx("tbody",{children:r&&e.jsx(a,{node:t})})]}),e.jsxs("table",{border:1,children:[e.jsx("thead",{children:e.jsx("tr",{children:e.jsx("th",{colSpan:3,children:"Second Table"})})}),e.jsx("tbody",{children:!r&&e.jsx(a,{node:t})})]})]})]})})},g=()=>{const t=l=>"expensive!",r=l=>{const u=s.useMemo(()=>d(),[]);return e.jsxs("div",{children:[e.jsx(i,{node:u,children:e.jsx(t,{myProp:"defaultValue"})}),l.componentToShow==="component-a"?e.jsx(o,{portalNode:u}):e.jsx(n,{portalNode:u})]})},o=l=>e.jsxs("div",{children:["A:",e.jsx(a,{node:l.portalNode})]}),n=l=>e.jsxs("div",{children:["B:",e.jsx(a,{node:l.portalNode,myProp:"newValue",myOtherProp:123})]});return e.jsx(r,{componentToShow:"component-a"})};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
+import{j as e}from"./index-CnoKS_tV.js";import{r as s}from"./iframe-CdqLD_Ol.js";import{c as d,I as i,O as a}from"./index-BclH8SrV.js";import"./index-BdGV8CkY.js";import"./preload-helper-PPVm8Dsz.js";const k={title:"Portals"},c=t=>s.createElement("div",{style:{border:"1px solid #222",padding:"10px"}},t.children),h=()=>{const t=d();return e.jsxs("div",{children:[e.jsxs("div",{children:["Portal defined here:",e.jsx(i,{node:t,children:"Hi!"})]}),e.jsxs("div",{children:["Portal renders here:",e.jsx(a,{node:t})]})]})},m=()=>{const t=d();return s.createElement(()=>{const[r,o]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx("video",{src:"https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4",controls:!0,loop:!0})}),e.jsx("button",{onClick:()=>o(!r),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsxs("div",{children:[e.jsx("p",{children:"Outer OutPortal:"}),r===!0&&e.jsx(a,{node:t}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),r===!1&&e.jsx(a,{node:t})]})})})]})]})})},x=()=>{const t=d(),r=()=>{const[o,n]=s.useState(0);return e.jsxs("div",{children:["Count is ",o,e.jsx("button",{onClick:()=>n(o+1),children:"+1"})]})};return s.createElement(()=>{const[o,n]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(r,{})}),e.jsx("button",{onClick:()=>n(!o),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsx("p",{children:"Outer OutPortal:"}),o===!0&&e.jsx(a,{node:t}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),o===!1&&e.jsx(a,{node:t})]})})})]})})},v=()=>{const t=d(),r=o=>{const[n,l]=s.useState(0);return e.jsxs("div",{style:{backgroundColor:o.bgColor},children:["Count is ",n,e.jsx("button",{onClick:()=>l(n+1),children:"+1"})]})};return s.createElement(()=>{const[o,n]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(r,{bgColor:"#faa"})}),e.jsx("button",{onClick:()=>n(!o),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsx("p",{children:"Outer OutPortal:"}),o===!0&&e.jsx(a,{node:t,bgColor:"#aaf"}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),o===!1&&e.jsx(a,{node:t,bgColor:"#afa"})]})})})]})})},P=()=>{const t=d(),r=d(),o=()=>{const[n,l]=s.useState(0);return e.jsxs("div",{children:["Count is ",n,e.jsx("button",{onClick:()=>l(n+1),children:"+1"})]})};return s.createElement(()=>{const[n,l]=s.useState(!1);let u=n?r:t;return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(o,{})}),e.jsx(i,{node:r,children:e.jsx(o,{})}),e.jsx("button",{onClick:()=>l(!n),children:"Click to swap the portal shown"}),e.jsx("hr",{}),e.jsx("p",{children:"Inner OutPortal:"}),e.jsx(a,{node:u})]})})},C=()=>{const t=d(),r=n=>e.jsx(e.Fragment,{children:n.value.toString()}),o=()=>{const[n,l]=s.useState(!1);return setTimeout(()=>{l(!n)},10),e.jsxs("div",{children:["Portal flickers between 2 / 3 / nothing here:",n?e.jsxs(e.Fragment,{children:[e.jsx(a,{node:t,value:1}),e.jsx(a,{node:t,value:2})]}):Math.random()>.5?e.jsx(a,{node:t,value:3}):null]})};return e.jsxs("div",{children:[e.jsxs("div",{children:["Portal defined here:",e.jsx(i,{node:t,children:e.jsx(r,{value:"unmounted"})})]}),e.jsx(o,{})]})},j=()=>{const r=[];for(let n=0;n<5;n++)r[n]=n;const o=()=>{const n=s.useMemo(()=>r.map(()=>d()),[]),[l,u]=s.useState(r);return e.jsxs("div",{children:[e.jsx("button",{onClick:()=>u(l.slice().reverse()),children:"Click to reverse the order"}),n.map((f,p)=>e.jsx(i,{node:f,children:e.jsx("span",{children:p})},p)),l.map((f,p)=>e.jsx(a,{node:n[f]},p))]})};return e.jsx(o,{})},b=()=>s.createElement(()=>{const[t,r]=s.useState(!1),o=d(t?{attributes:{id:"div-id-1",style:"background-color: #aaf; width: 204px;"}}:void 0);return e.jsxs("div",{children:[e.jsx("button",{onClick:()=>r(!t),children:"Click to pass attributes option to the intermediary div"}),e.jsx("hr",{}),e.jsx(i,{node:o,children:e.jsx("div",{style:{width:"200px",height:"50px",border:"2px solid purple"}})}),e.jsx(a,{node:o}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("pre",{children:t?'const portalNode = createHtmlPortalNode({ attributes: { id: "div-id-1", style: "background-color: #aaf; width: 204px;" } });':"const portalNode = createHtmlPortalNode();"})]})}),O=()=>{const t=d({containerElement:"span"});return e.jsxs("div",{children:[e.jsxs("p",{children:["Portal defined here:",e.jsx(i,{node:t,children:"Hi!"})]}),e.jsxs("p",{children:["Portal renders here:",e.jsx(a,{node:t})]})]})},N=()=>{const t=d({containerElement:"tr"});return s.createElement(()=>{const[r,o]=s.useState(!0);return e.jsxs("div",{children:[e.jsxs(i,{node:t,children:[e.jsx("td",{children:"Cell 1"}),e.jsx("td",{children:"Cell 2"}),e.jsx("td",{children:"Cell 3"})]}),e.jsxs("button",{onClick:()=>o(!r),children:["Move row to ",r?"second":"first"," table"]}),e.jsxs("div",{style:{display:"flex",gap:"20px",marginTop:"20px"},children:[e.jsxs("table",{border:1,children:[e.jsx("thead",{children:e.jsx("tr",{children:e.jsx("th",{colSpan:3,children:"First Table"})})}),e.jsx("tbody",{children:r&&e.jsx(a,{node:t})})]}),e.jsxs("table",{border:1,children:[e.jsx("thead",{children:e.jsx("tr",{children:e.jsx("th",{colSpan:3,children:"Second Table"})})}),e.jsx("tbody",{children:!r&&e.jsx(a,{node:t})})]})]})]})})},g=()=>{const t=l=>"expensive!",r=l=>{const u=s.useMemo(()=>d(),[]);return e.jsxs("div",{children:[e.jsx(i,{node:u,children:e.jsx(t,{myProp:"defaultValue"})}),l.componentToShow==="component-a"?e.jsx(o,{portalNode:u}):e.jsx(n,{portalNode:u})]})},o=l=>e.jsxs("div",{children:["A:",e.jsx(a,{node:l.portalNode})]}),n=l=>e.jsxs("div",{children:["B:",e.jsx(a,{node:l.portalNode,myProp:"newValue",myOtherProp:123})]});return e.jsx(r,{componentToShow:"component-a"})};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
   const portalNode = createHtmlPortalNode();
   return <div>
         <div>
@@ -164,7 +164,7 @@ import{j as e}from"./index-Bs_DxCk_.js";import{r as s}from"./iframe-DTvousao.js"
     // There should be no other errors though.
     setTimeout(() => {
       setState(!state);
-    }, 100);
+    }, 10);
     return <div>
             Portal flickers between 2 / 3 / nothing here:
             {state
@@ -203,7 +203,7 @@ import{j as e}from"./index-Bs_DxCk_.js";import{r as s}from"./iframe-DTvousao.js"
           {nodes.map((node, index) => <InPortal node={node} key={index}>
                 <span>{index}</span>
             </InPortal>)}
-          {order.map(position => <OutPortal node={nodes[position]} key={position} />)}
+          {order.map((position, index) => <OutPortal node={nodes[position]} key={index} />)}
         </div>;
   };
   return <ChangeLayoutWithoutUnmounting />;
@@ -237,7 +237,7 @@ import{j as e}from"./index-Bs_DxCk_.js";import{r as s}from"./iframe-DTvousao.js"
             <br />
             <br />
 
-            <text>{!hasAttrOption ? \`const portalNode = createHtmlPortalNode();\` : \`const portalNode = createHtmlPortalNode({ attributes: { id: "div-id-1", style: "background-color: #aaf; width: 204px;" } });\`}</text>
+            <pre>{!hasAttrOption ? \`const portalNode = createHtmlPortalNode();\` : \`const portalNode = createHtmlPortalNode({ attributes: { id: "div-id-1", style: "background-color: #aaf; width: 204px;" } });\`}</pre>
         </div>;
   });
 }`,...b.parameters?.docs?.source}}};O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`() => {