From 100d2141dd3738190a394ec59fa24d5c4739f709 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Tue, 1 Oct 2024 12:21:35 +0200 Subject: [PATCH] [EuiDraggable] Add support for reparenting dragged items (#8048) --- ...play_EuiDragDropContext_Within_Flyouts.png | Bin 0 -> 20194 bytes ...splay_EuiDragDropContext_Within_Modals.png | Bin 0 -> 21864 bytes ...play_EuiDragDropContext_Within_Flyouts.png | Bin 0 -> 32729 bytes ...splay_EuiDragDropContext_Within_Modals.png | Bin 0 -> 30602 bytes packages/eui/changelogs/upcoming/8048.md | 7 + .../drag_and_drop/drag_and_drop_example.js | 98 ++++++--- .../drag_and_drop/drag_and_drop_portal.tsx | 173 +++++++++++++++ .../src/views/drag_and_drop/in_popover.tsx | 63 ------ .../column_selector.test.tsx.snap | 2 +- .../column_sorting.test.tsx.snap | 2 +- .../controls/column_selector.styles.ts | 8 +- .../datagrid/controls/column_selector.tsx | 2 +- .../controls/column_sorting.styles.ts | 3 +- .../datagrid/controls/column_sorting.test.tsx | 23 +- .../datagrid/controls/column_sorting.tsx | 1 - .../controls/column_sorting_draggable.tsx | 1 + .../drag_drop_context.stories.tsx | 130 ++++++++++- .../drag_and_drop/draggable.stories.tsx | 1 + .../components/drag_and_drop/draggable.tsx | 25 ++- .../eui/src/components/popover/popover.tsx | 2 + .../display/drag_and_drop/overview.mdx | 204 +++++++++++++++++- 21 files changed, 614 insertions(+), 131 deletions(-) create mode 100644 packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png create mode 100644 packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png create mode 100644 packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png create mode 100644 packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png create mode 100644 packages/eui/changelogs/upcoming/8048.md create mode 100644 packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx delete mode 100644 packages/eui/src-docs/src/views/drag_and_drop/in_popover.tsx diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png new file mode 100644 index 0000000000000000000000000000000000000000..3a19fa076333b5280badd2b4d18d63d48042b580 GIT binary patch literal 20194 zcmeHvcTiJb*KREQ5T&W0f>M-TM5RhEq8N%GRgfYgAYG|a0;mXzf*1v)_ZEcEdx(O9 zfDj=B1f+KeAVLBp1ny4ooq6x~-8*ydo%_vvf5;4EpL6!vXP>p#UTZziTH%Gk4K1d_ zoQEM02ovcQ(|>AclGWx##DEed&(eIdF8J;@y2P zV{sPJ<`b)F7SOM)tBQFt8drjHos-C*6DN+RmReMXr^Q@N>W8uU}lD;YRsws7!!PKp|*m1(~a)%Rr-e69l=Y;Z0gg^swkW>E$UM!S4`7u>9 zTYc)eL;Q_T9556+-UuakO%FgI;@gS*q&g9Flf9O2_*uGDcRB4|@F=(DX5 z3UctL&BSr9>$$Dtf`Qyh*EbnK$0_E0(%?h80pDcb->9${W+h~9w(qp`ZZv7YH5XfSGsUg5N4@v zcBEjiK|r)QFsWK|exwa6y_Gt&CjAfXv139SR6(!_F>&_x8+kb{6bEwm+MM34+SsjJ z^%$1&PfSfzGy)ef*i#3;gPy{dwi#li3WEiMsPlQ)n+@etR$h5H48s^xc3RU&Tk)gb zm?@_KVu87HPxj4JGD~}e{C;rbz6%%jNsdc_R%E%uNg15cn#00~2sRd;oOv=e?d^r} za!op#AWHC0>_yY4f`^}yWMezS-+b|Rk^bIN;HPCZX)CP;EqRD_(5v0G?Mza<0;fJQ zao2LkSlwtJRU?w8xnv!yPEf})NOm1KmJ^t#+b^ZxY1pBYSU4@vN%&?|?!7VPG*~7e zilH1=I{<`rt3&TT9;O?-Lplp?W4)f4RqfJ#;PqUsqr>8a!^uJN1$Wc8+%hEUpj4J#P6zHU@5?bX+y6!nRdCcih^ z{t#P|Tih6Uh}y&7eWx!tZUs+XV=8ldyQgoV<%izWlqY2Bw0(FVr7eaGa2)uFn&y|-VEcIzD%bn2Zets|$3kf!4a z&y>#tnM>0i2zdvCxSa~u#frz&etW+aW^J`;5l*qSwM9G}@pt}_|2UkPBfBGzVEo|0 zgU8?6MC$!kx_g~i7KcmP-ee(1_RTZ}A+g&(y^l-aLu_?{^XK-3tn(6nzX;t3*{m~%6$_u~Z>32XYh zcCm2yIp|=6{Yw(@bUu3r`uo;wzj(#gbl*hvD6Wx07J%v{O83QlI#9XOKUxvAb@
xA8SU2|C{<`dV5h?`(`4b_U#yK6dPw z_k?D$d;O$4tYZDCI2o#~ZK(TgpUHPL?rbs8xb*P&+_dVNr>YWNb#-{dBJ;5m48#wOR417MMPT>)}=5*OVMZKGv`@U5i{`>CLMiCxSbvegrE9x zrc;-V(}Ic5FspCj@b#(WJa60bIOn0_w}~~ds(5z#itxYpHwY+i^hCIrLG(sIo%(se=sGFOJtIIY~>`Wk6 z+(=VNaj;xbaa6vfby|*6WF2pl6IV1;=rg3_11%(~^cNAo)Fa6}?`OPrlRQvG`T0eh zm+!yllyfVtT2d_B5^!6ecoGlW2`ROky`fh}V3tA69jkQ4s>l1*=|&}5e%Lt>e*a7R zb#zO-A@YT}{I|>67T48WJ#95O zFL~Z_z0RsKHRY#e>j=q8`MQh?u7B1h$Y~|eXWWH2tL*>#UT$kw$f`iS6%Zb5CpT=VBbb1!-V;f~8r~7LpIp-0}~hN(pr_ zL_M);sLIU@T}VGasjs4Qyu>0d$0meq1q1~3I3FxDbm@FYPt9qextw?#lc1mmR0v_A zvd(v%pnU_{wf^HOlA@J$?KSST>Q1u5Zn0H8;m0fUx`*4H1L5CmQPFE1-!q;ri4uW8 zNH`Y`77-t&-|S-O(rP4!N^fvV{2~J+G&77Q+%MOH>AyTar4+dMvmlG2;Jj#><~9=&geOWnC1>qyzZvo(E_$FBOF7E%E}1a0Z$MB>R-$)@=CgUSH938 zh0mV-G!jhQ+VcH4QuB}xRldmtBYY96Tk5-wmzCm4OR*;)`BA%{B1ps`9Fh3tq#X7s zi*7f;4vFoXn`0a=Yh4L({r)OJ|2mwp`FmKBd++I8^XvpE?$Y?NTcwhQFRjV?ag(z% z3O80-P8avDJFz(YP=yUXO;lM@e-;+Dd07`(z`J+tWn&`+OIp`$2#nWSO=PzS$2zQ z!M4PzXI+~<-(H$#x2SB;~`h#S+(0=+G$v z=Z~s&e^*DCD{78l(a~n|9IA3k$-|sDb}Vz+28KwKG2$tHHH6E`32lP|`%lbin$Xd17E%FsYUj@OA7lk%i70sH~Ee z{tl<~{m{V*ry{x0fT0n;wa-b$mCmu21bT>?J1aF7gs8AR3mpuMPEh_76%Fa!-dFhBGEBUl@yP(Wsmzm@&J?Nw0-e1^J#z=Ror60A} zl`S-R>JP*z zdiJc3(>uNh%=uY^JYP4rpEXeU`u33vqADuZOGDL0YcG@L2XFFib7G`BrFCv(qXkLU zKK6-g6X$;?c`Wruamw_x=!Fao9nH}hLT)ULBCYCu^9oLF#9HjxdB%FEIj%5%jRd`=%rC}j~8y!HfI3GM~ zMFA_Q@aW8hl;Cnrlp_9WLkIY!3ImQ{%UylD3l9U$a^(aE+O? z`mquJPRvZAv�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 M{?fU!GcI@k4=WpvqyPW_ literal 0 HcmV?d00001 diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png new file mode 100644 index 0000000000000000000000000000000000000000..5e4cd5a805c8d0bbfe4cc6d221a37fb49e8d4dca GIT binary patch literal 32729 zcmbTebyQW|7cP7N0VM^L4haG2?vj-5E@|oR6eJ`?1f)w!N*bg^y1U`f-Q9N`-~0RS z|KAzI!P)z)z4nT^W<2wmepXVDLPsG)fj}VW((lAoAQ1Qi2n3PqDH6ETJH-zB1Lv$F zB?>7WB;E!WPn<=i)t-Wn&r{Pd2;>z+TKuh=N9x{!yN9Ye0@4xp_NN1tOtXY0vqSQ* zfPlTiSK&6oaELR3HqVvvUa7uSo*{aBK^nfNFZpqFbW{RaU%FXX#%gvxWrCweesSsa z?Bm8_s`qI6V&mo7yt8Rsb9y#B97K&S9{R{hmcs6x_qs?N_IU#NqT2vpBT8F9RGAhA zKD5ldup6%|Xz^|g?j>MtOwln&<~u^#*Y47@{{oOpmt9OvRH5O!l?eWcoO=XcVZYi5TF3-zoyg3 zYaX2h#iaWY)?XOI0J+zER6T+Elnp!D;lB|ux-G5R^`fyQ#}um3b(^wPPDQ|4cH_H| z&7ZS!Ojp+aH?W@4poZpOw*AGdd#?YzyJ8M%_wECC9@<464i*+xEGO^ZfkIvaq8(nf z5Lg$*15DoY10)r^MQGq>EbSD1BzOHt^rckwe?QxNTtIXe!_#5Q6Tpc7H$Cgh2B;mK zzH>dSJ6L-}cjt>5`uN^?jnIE%ve~1nONmhG-sExrH(Bb2X9pWQws>=i?dJa)B=1qz zrTqCu@b4m|${@+w}U(JB2GS~C=vgR?se$8&A=z-exyc!sWEi;uqT|7!qNThg+Vh9Bv z_2imUwu$k`&Dr^^i(D3pS)E>^a2fS@RJ~68r8H$PY z`V1EovU;#^`%X@-H;9l>(y49XtC%iFUu=)*o-b?=U-6UVLS9E~W_^f#^(k1etF?_X za>r9M^y1gAOA?CA~;t$ zJRQ#xq*y@=$9?u^ma|W(b!iBm6PG#(YPSt779thn2WuaDW*L0>w%s+vT^Dsf;8S2j zRzFF_e|_!+@iitgC=+90F^ji1n15i_&aRXH*Oc~8j=P&*99_02tILYF zdk+pbn@?b;Jlzj?64=1`hh0K*G`uN{>==nfERK2+aRe|l#~du%FN1ibyOOqS|3!iNPZoYUN$}*sn>Rl z&q@c2+wFICduuci6QNWg?kIp6BVsx(`wa}Y$WQNyu&|-ErecIV*jQD%_{maun3%=B zN`gV|;-#)K5a5;hC9#o}$o24$~;IdTil^MMTuPomWkpIt&$k zVbEX_`wi!oTj;fC!aES5S|F=^9Bdq0tS^Dy{ zjZ$5Ib;>&*%j=P?3^3 zdwS?D+P+otvf!R4*emxGl!H7ru1`dj!U#gJDO6d8Tx3fGo`tw^>Y^UHVa=mwVL(OS zrY@(#7E}o61vD~NT%)0O5!OxNoOV9U}30xiGDZQU;#5%YNFN zCk=wj0FS-%N=;2;(-hY)e+mbO80qH+o8tK@#S40kCrnICo=RfvJi7bcgg>5#sjD0VT?@8Mzp51NPS*?8X0dOo>Anbda14HZv+$4a|cY z(s0`*KiK6OzKwCDw}DEbn%>L!uvyPnuXFcujU-9{7 zU*u&h=FINyfU+`XIyKr*3W;#71}iE!0s?}qu}hp(A!n}La{Y$O6=<87R`m%oP^I*f zOozNTyR}lRtgPQTElAxC7bDizOxt|#?(Q7UPb5OzE41AfR?|~Z5xkoVp2mcUG~LKU zOfP8HsS+*7-mdTMpJ_r;C*l6(Bi7!!5!k+-h`CH5`zE1+xXu2ejP;$ z-(sOo!Ln)Rqd~@a8N^(bH~4uFQ(IO4+}vDpE-u^{ve1>S@>Q*74LXJEgr2B1f6J7Ds8qJdUzPa=W3<>%Z-YPiyDbWAr<>hMozBE z?YvmwMDRcq4-#VVVrwo253lojcNoiO`V!|yZmxC%9frlhJYx17JUqNoh3T`AloG!i z&!DYegt~v-%n1$-4yK!&>4hGbSk%fMaIGc_qDOL?TQ}re+Gb`-?PK6ur|g*z78+uH z{Ge*HwVkc{({Y+#?s|GSUF}R?YIu)KN=k}bN*?Q2>~s+;`f6|h@#DDb-muWz<(tC7 zuo(YfWK7bP^}a;D4DaKWC46o_Y+S!G-?*3SQMZ?34!6-4-*xTnnHdago-pb(qC>)> zqB;_DI#-65DQ7MsA|wB_JQ_&)qWX*XyP4k#2netk-Qml%;#+HW(80DPC=8ETyf%vX zLAb7=LHie%c)f-D0#Y<~>1pp&9QFI@;kVgyhfA1k8;rWgr#FTY`D3$AQUK2NtI=YL7%>NTG$jdjb%fmeDDcc`L?)LSDf^W~Z+2=8zeH6_S zSr!de%9Sw->h16DZmqO13X6&m^U)JHS$7W2$RLx6N8#EX4?I3Da}cI_BK=wV==}Wc zXY7vU%}tA%6Lc&b9C~o7CDE%$PtVT83su_c94T+loNBo2lu-8NvXr2XTR4r8;i66_ z)@wrZs}`kAZi=G=-B2+ui-WQmG!V^aY`$q$D{9#|vrco}-fs(fSIr z<^6rLgo?PYUymr*uvuBl-^s`Y*2Zw(`S>dTc=udSUw^;}&E#)q2RYRm+}F6TU|10= zufyAirnnVjlG4+o!S+&6bKw$f6C7P$ie-Vh7AUm|2$nvVO^XTM@)92EYf-hXoV@;g zlCFPV$L^r3Fp@1%ZZ;-abvTTONh&ZtOG~gMlY}V~!-t%nhI%{&(sh(I- zObh}^d}xX+RJDLE^=Ve@pI&yb(_+7%(#o%@;;>n$LAZSs2#COY#3G*BT3HGFsZO_g ze>sb>NT?pqfYNX~aA-p*alW@-+RIymEC z9(OiBq`p8wtg)F1Id8G~TWvj6X&cwK{$aj=Tr%bX-gS4J3pznSEhtDbSF_)GLDJx` zyt35Y-90=@!&66<+_Hd{;dk?__ZyR0jmf5I;i;oST=N5xaM@!=rf-pYSf(`Ev#fN9J|{6+2+uRq68wf!PTy;5A#*Q&>BqPt>Ej^jWD69(M=k$2MnERyHH*D zv3$4f(Pw=L4E;BY!%Mn-8n%_b_WeVX2GjRuiRDHHxhlu-ts({n23n0<{3H7S$@0i=Dy5xnW=OaCgk!XGU-%kEjOVNx0jSrRP0)(*JL%>Am*@{Cl)T%vmHO= z=Qw-D=du&REEP3^vM*wO%j^NhtFq?R_NA;N~dv*5Rdu6R^^_f zZ};*T5=kU1O<#qOWP4L4CN*3lWgmHGTs1II7Z;mOK&q-bHvBmD_R47-zXWKRhkd;| z2ds=UvQN^6{w7E0V}*s5-#Kq}IV@-4QSlf%z)U0_^Hfz-98T6O<-YR}M5S{*-l~QbVW{qNo}O==PP8q-DDD!OGcOJE>z7Q`7y(fFK8|>m?}tvKl`!& z{S{DpM{cL?$Lj^G*_*xdzs9ep6TUI2qqth34!v_en|2I(WO6^m%7Dw)EF;aHD|Ypx z=&MYD+C>Yy6{fQk7n(=yd{}Hug4UdFGUMOp9i6PpqLJ~+oXJad&)eg@-}*I#g+=a% z^YshxeEPrhB0my61iy7og4xlu-!5GfMN?>W{>NXWIA^0yqfl)cSdGQQ>6eNbLVXj*oZ34+HW6MIdrVgzGBPO9BvS|PuqwPS zh1$CMzP(}eGI~F7ildz_5#()vXo6(7yEB^`2VLFX-oCm$l$DIHc3beu>D0BqGNVjj z>RaeCZE)Lf`OH78vM7O_srjgOlp+Zt$~O8{p_6kYBgp+ zQuwm9O^k0d6W3|^kAz&Zz{Hlx`b&ur_&N8zzl*-NQC^D)C3B9@Rzto^0(Lj}Xfk0- zrv;$EsQuZ|{U1&AZn5INefy+{jK=yQSV2B6U#`6`u~SfLfAhTM{RYGFGS1C>gFD&1 z5W)L|TRjF>p&E4({wh3@n>zbPxTYchBWM;B%?L8A`=fRtd6T9BqhZ@|h%v-}jMJvT z7w5<9g7+mFlT@La@p-Z<(jgfxZV2$9o-Y_=iF%?D50kBS`37f+Aw6Tt%dYuwtdges zoJp@r%^|Xyx?V5(PcW((5&QSp*pD;L8{0nVygsZ>bPs-O8;u^NrOXv<>y9ZAB?I(G@YB3h-)fW^)G z<1X`5e*d-tllA!VDvr3&sDX6)hg#>&L4BL0a#e>EIck{4+!ndL^!~b{b zj+C1+P(JJb=v#Mk*`1Zxb+pdN=$Agd%!}DL?CYB9g0HS*baQp4)0T?OdfkW9gG=wSr`LoB(9>K}xt^K?18+0N>yk$pM*N(tz=PCskLq)=v z;D`ih!y%rvAPtDCfz14YzD202>FDe<-v6B;zN=UDLD@&pQed`uiV(zXz>>7aQg*Qb zl`P7pb+KL-G~AgRJ+)zxDD$dU)8x2HQb*gY_7M zjOn=ADX&(dBVj%FAdHD3Bn5)X%c$LvD$9#ZA&+6m-gG%CWivi{u1b>a+&;g%!|DcO z6Zh;kHW6O_sQ?IYS^v$r$_^0^FOmC_nz$2$Fvn{>s&Ub8CWRK}^;q2p8C(u0U(X?m z+So93Mm-V&i7Y%%-RE~RzS?Y8YWCrc+c7RYEf>P+jA{FH{5a6i;=bgEMsQOPZPsKq zdf3)0Scyo^N!kaoa*dXwR=&!OK8+)YXq79^o-D+`o(I;^~dff4-#EuJ|-~pUi0u zuc(MQ-#`}V?S4qU)`svSFK>BQdKJ-|#*~eq`Of%Bjm-knm89qWjeJR0K!40$#~)=N zOMCOp&m_X{+=B`#E7@nOEQ58bt+HjO(ml?u$_J;6m<*#H;JbigRPch1D;zE6%%4S^oEFh4_bFHhemoLCw~*|*aF?eb^4a`Tt-rkz@W5@|f0x_EB* zOQk{;i6^_fOIww`w+d;SpZDju%u))wfxostS1qxxQ$1WL>z>n@kI>qZSQb_@^ir5X zB897@iuCgIv^|DCAzP{p)A8X>qGTV$d4IEmSBhA6VLMx5J^BMH5FP=G6f3LR_VEEB zyX}53tsz@*vB}#SGp;-y*a_0m-Y?o~ICZ?(kgs1q;SFJ}Ztg~)?@n!_??Z-vI8sL9 zKL|7ERy_A7nGgNqUF&c&uIw|e>9Iri>U2PK&q`1fDvk<~iXp{gwD0{UJtNwX7l??! zVw>zK6v!<;-j^5_;h*cA0gelFIP3l^+J1o9+|0%PpLQ0=``Pg~*{2S$7;{N3o$6-Z zcFql7PZ1yq{VDviF1U3M(1O#Oz0TlZ_g+b|fXkr5mfOQQN8=j|!q09~2Ey zASkivofbw$e4$kR>AWPDhl{NbP5j3TclG!@nZktJR!L z)O`FH%<9@ZB}t}O?8{}pD92J&)U)p7BPe~Md zN;JJli_cZ2Y#+ptPvL4iY_VtC@+dQG!4=HcYjPXNbpAN3gaN7ZKNR|@R%)sw7-?KVx>X{B2kddt( zTrsH)SFP8vv#~jB^z#w}EC&{n0`x*0p_VnB9V{C3&O z`=@6~mEao%uAi{*Zh3b%ZJTe0hFLYPY&E++H>yVQ`{^iUV=)K_)BdzmDgk$($qawA z6KLJuMCMRbys9n+DM`tlvI0c>(P+IWG!*$14#@?+YFCBzE9f$%fXCHSf16o&2!J3( zfq5IQQx>TK5?xj z1M^?;=N|!VH^j#DV*~QM7{?sU;;8~piw-6YDYMlivgHWa&Pmj7SX>CKr6kG(a zJf|DrPktEwMIf|y%L=o-01{-MOZjU}vK|&i-rut%Y>&&0f{NO%X+jgmwEwUgZnibI ziO{xbw^)I`#H{!A{9ZWmQ@i3@guIQ47qT_%<;w&Rs5SJ=q?vCvwDd%tHz6bAsQhbO zF8_S%b9xO1382!0E;VUi)cM^b`RUaY?(@5}-IDzNZpQPy^fao}Ewksl#IV7-*8Ozq zC!u;)NrUv5+#e>Pmx#g(pToThIX}tUL|m>E3Ty=o$wr7YaNJTQWOznh-s3ED`)EmD2ByGG-S{&szH18qQDGM8uc zxVw4=LoQq{qG1?CGa)-^JiR8HC+Vfn^lPbM6yqps_WIJ}FKceVryM8A=x%{hb0UzyprPQ#6 zoDW?m2(k=<=_*WnM}$!PChQ}udU$OD56?4y44N& z_6v5&>C??@?)G&(wH|=2?D`u7DWo-64^+j15F^$w5|=@0>YG!7`L>&enrSC?>rqEK zsh}6bZ+RQ5)>Kjfk1){h?!w`N?|up&+}I&OY_@Sn_(~sh$SU{;!qu0xc1xWT^ivM! zvz&UrU9>mRS5SiC`w|$tfG3gUvKPqbHz>+IzhN%?%2^PB)!BSVq$HUWjj4|q#8nB& zdGbW4gWC@vc_8488v^UPpxd*=oq0b+Wx{6t?pu0#se8tirYCoCpEBK_ceFqwbhH>1V+j$>e%$WN7I~*!$aoTUB`_* z?ItpM3sY0*U+HDb2B+2az7Hd|4}PhDn5G${nL*qW`bgw~+qF;h@eBWaczjLqWWYvB(hKVzmq(z>`?`(d)9<~xQ-^ZNC2 z2kP=O#BP_bXa^doV;JMAnTj6bPrS|#=zq@|^?ZFjjC(t6{y#3jMH82&+g-k5up)jG z5$8C+>R({B%!`*Y)1j+7W}B|puB(S0$A9kFy|;FZn*9y0+*LqWa96QR6NH;=Ia;S& zn&8ikXI)cC9Tl8!+~~Q>_0Z%avFXfgaHm@}7$SFEP~$r1_IFoX%^HMJ615Yhw*0D| z8}R^4(Yv{1^SkxM0pOvuON&Zdo7O`+_IRPbtb@0WP4U|?+HkDhb-xP+GyuSkUeCkw zB+<^3xytP~fiZ^*%mSa7^25ULkT7XRyS{=o+J4QJf14|t=(tyR6sRfq+kLEIG9Y(Q zF`X|&7Kp6YrlZ@ztVs=*t212 zUZYof6U?y_KSJE4;lxF z=u=u2`k^M$Jvm)5BZsSS1yh-C=+wMWN%&pczn9}24U7|H_jMxt*4*jO5cV&{HMd&S zyR#6q?PM5Hl*rD>VYQuQ$cdRMO*>k#?}|=?L540ummnYE(I7$ptw`ym?W|jC!H7w@ z+rki!`$OQ{b~2}mwQDV_UI65HD7$Yj_3^mwL_(dt&ap9WlNnt7=*TOSa3Fj0)kGj+ zh&zvqeFCX8AA0Fq%EU(EA6jOxebDXj1cSSCVQtYXsh>RX7DR;(ry3WmGnR#xATit? z6pD#O&K6UXXCT;s$~0o5V61A8#_Np%(&SGxJA6noIG%jl%H~W40e}^7)~JHrCQs6EX;t$$z`hq$?;rXz8Fl{}Vs*dhw;|IO#>DKJ zcEpij<^pb3SZ5TP?kfq~xeJnaii+)1ah*9IM*5fXfvr6Bx9L11sFd)of@O?QUY^)# z&{(6Op#7;o#d~6*PROywZZmh%09E=*qnK{I^neg()_ksUFzZuWs?Tychp6*tLrT$JvX7rZt)0KyJ zgx&4_rF?;YgN8KZ?q_x0?iI5&1kq??<-0T5N=etww^StZ>T0}<1ZES$8 zk=Ah0s+rRwo)dDu40dI68S84dtX-?goY5f3Aty2=g&u^e%w9P8GP!@6@BNK4x~0ZJ zv?A|iGHI~|eVg59K*n=~he3RWYSx$VHY*Sj3lA?8&& zdQ86yxuV?ooPCB~v^?-d#?dI|xRoRWSNiYi=JM6$iCNmEpj^g7l(g$ilLgtu-a-s8 z7JvH2aAHV9cl5Cz`k1A@yD+?Q04a zE|(I2xz1sX@OF4#3@`N+$}ay29^PzUoIdK4Y}>y)Sdh9TC2L(;B9jPzvV47dq*p?? zv$q%76Gvk_Z2|W0H5C;!?jh)CQg>oF`+5%M>|0sUmFhQq^u2u)myrp7pLBnF8B|$$ zT;2+l)tjC1a)jn2K9a)1$MZn?7btCmugbGHd9_dO#>?Ap1L>_1l1M~l6CMIy%lbc` zFSU>5AP4vod14=;Fz;f8D?bLA5FliThWt<;Tr5EyOy#vc^BID<-Am16@4JVG zqP)_{0b&x!q|djF)=Ex}8JS!nYTMb*OKZ@GKU?j~%&p#!lVD>3i(oQ8X27t_z&RL{ zzfo+&%^8jV&|=e660$YYL=Qj}j8~^VKdn3D#M{>NU^rkHLzAInt4jZLq;CKA}`vK9-!otF5_R*wRr)jca6=YmV0R+%z zMaiq*;6^f4s?S|eJX>vLe3S_%Nn$uK3QPd-ApdyV>X;;UqZC>JHiH!KVhQw0ff2YD z-VQbNTljExSm=3bUhpufD~asR%*+e|IgzuFeE`${?KD%cu-w|SyZD!n+Z>a$||(+fMYOBNp31dm0)VA8vo9$r9~C_dSPQ4aRc!OSh3X4gDR! zuO#xnCx9L2n@#4p9u@}?|M}mJi0Fvs1@EM#J815amycJKoYkkOChaVCmTvnARHK^T z9~~XFHriX5O!iw+yF$9tQh%9GI0ac;Sxy!|J$A`f?kBli?<_j^ILtXbb#(y2gy1W{G|2AHa>4W9gZ+hMF&7T-y=qAp znQ7qZ;j^2+;3Ht|`+^UW8$*xWXy8b9&Q=SXTplz9a+mzPzP?%6-xxTW`9)4`c=ois z^ID5;&58H7+jitSy#|UMCI(Yd^-A>{Ak$Vr**)<6!iz{`Xm7qpuEK>oJ3f{iB3)p0 zTHDk<#LM#wM}YX=`UF_17rh_(YR2QX_vyX&$?8Xj{3y#`n-Otwj&a1J zQ(R&lp9{ViLt9I}Eo>QIqK}s;SlnxH*)|@dQ}kpaCx?5yJ7qR#^!QkJ<>BG!Ne+_9 z03!xs|0HF*c7m7leuI+Y|-sJ1e>&+qa41TwgwhO7AKEbz8P2t2y>nLB`HNt_LtNJqtjCf5GW|acJFbm zS7WGavdZ#QBa%>1!(pzjJjeOGM^<5jPx!MmNKAt?0~P@RVv=6SpJ0?Mn;ACG$x;;+ z701g1ePEtmQ3@g$EE+sTK@)dy=n>#eXY8vab@#4koiH#6r91)-O9ZaHZUdoCx&T&l z7R#$w_FhlHPXE*>w8258ovDN&V{(>#AtHEqcsX5-{Dj=xn&Tz9U9%J26p4NRM!36x zXA*T$*aI8p3v7ycWy-jo;hfM1)}zku-KCa@2vjLn3q7EOkiPWcFw!p03L zf)nvq0zgztx4%eMwfhtz)Ygc&vknyfZd*3Kk3RrbRmt_gd>q#Ehek>;NFvQ#)bT9S(&w zK3lbVcl#PBz*9%Do>fo-}<;}0Zq^Fox4kAf`Y$|^*|iy3L0c^Wit)c zO9bo9VsU}iICnzAJ{}$xW)sC%x6AH5>7rKD>7CZi;r(6u~wN~FeU^zX4& zvrTzV#M}#J1GJXM8n}C*9g~e@K)z)30O4Nk;nNs1%~N2jDqf?G)D9uz{(L!uBaIes z6h^H(QmBgDczeKqbssY@-RMbgx6qtZ>C4B@pY!(KYiqIu6`&s9i#lk#g?h}KMiBED znq(NT))ib_IAC@mrPhv|laq1R5u8stb-En+U5%@?)n*{?mBx(Hy(gw{)UphXrd#DM zC0;+R;i%7RiV>6QAUMz7y?fU>VLb%|{c~NN2i5D>Z36@7h$vS%rafN^baL51m|vnV z5172aKw$f~tE(MYKY$=KKBuYtA|BI_TOOK$w!Xd|OdUm}-9QM0%0xg=aCv*%a^LDp z+VVQtKl1I9X;%k}AsCSsYX-Fe;{e9w6uybx9n$~z>^~m&SIGZvumB>hnKhur`b+jAZt&jT{%re{Z3U10?o~@qb*@rt&`MKbF0zJ^p{c zQU$avh!FdU!A3s$_rD*h;Lr}<+w=V!kI?^K|7!+1XyEX#>&Iyuhkt|1eq{N_qsNkl z1i?7iSg}vOGuAoF{d-h-(J1Es-uz#y06?F|nE6MX_cnF^Z}#1!tpB%sFgRiK@}hYXu;SrX3@z1sL?a2p(_lv4Tk7J4G5~V zYD%= z>579*vpcK6dmfRL@)R&PbUx}aB|cuBPEJ!-+2bam$-I758zenUFi-MD<&8k8KEtn~ zcCVU!!beRrLDT8a5k`PZO%=hNpWHuuyuEX8I^2zBPpV4$LVIp~hblb>* zZ}J=lk~?zF3xX-87ro9%ZWc*s!3zsm-r|4T=&0%d{& z?d%G)Ga=rSV2iqU*4PMSJiW5(LXnxIq$ue)U(%U|To$KjOZ;gV#R%D%ZDa9eQy(nf zm=Wa5`@98ZaglcCAf2(jV9x_d0JNjRot>CNsr#M%yQPKmrzAL`rr&Ds?y;ad$&7u| z)*coP`3yUfq!^ztkrd`*xK2=0bI}p6tAcZZ^xKi%42TYebRcy+&L+!fI z?CQJ@nqlQIUs2*!ERQ(8sGwd038%IY(cJjn2h+FjesWYssz42d3QZhpRc}N+CS9b_ zc41=*MH}E#=@kXdWnK@D*1#D!)vrOv1oWnlYt4m@P~MrA+}j7(gUGTsUS zHo;NTAqFbpDyGGPU~Rh04z)wt(%5D^#b62>*{CZC zTxP1!mFOdaYl_P9DI2hCn`geJriWy2z#L*tD!S1ALJu;3OsT;ZHqt^d3A`m5-+P_5 zgC5vU3JS3qT`pq>ccnn|u}&g-*fR?7+MSc_b*w;Tg$Z)%!5W!J3!<{t@l(V~(w}$A zeTx${%BVznjup!?!eBx}&^0sr^3~jX*{u7EH1Dh141dRse#9!vF>I#6M^07XM0$98 z1E2j#_!C5(@`Q`S>0?z;Wh8pMBB7k)#aWbS5?NK{;&VMAes?-#=5jDjiqq+98M`|B zv*A+I;n3hIq;+86Wr=Q+$vPnrX%gLDj*U*}!TTS>-!aK}qtRRL;2;2(QXjboP(WZb z$!xaf5Yth2#*)f}Grll`VGzK%Mw<0^^$_ix<4qy~ytlm4AqxrE=f8kf8X-Ve_ibZM z=CA>^%Furept7UqI!P z*72&&-gG^lvxWTIc)Ivvb@>WbfCEbaI`VVe3*u^P_0ZZx&B+>2m|?PAp$-YS_pWW7 znCQ@%=vOT-cl^%h%QTqY@V&?hxbG~!8v-Ny3k`0fB{~z%u4oh#&Z?V4N!9em=0H~d zCLsL&4y@>(zTFmRsTv*Na7WNz+Ig7&IZ6P>BQ@IbVT&fK;|ZF$R2Kx|<#PB5xLE)vn%}Az z9bV_HwSqw{4JL(@8%BL9DgyM3 z`uh4TgQi&>Ly(l=Fe&*Q)-PvF(Di)Jkw$uVrimS}!;jm;IXwW^Kwj4^({O2V=Az!| zobPL#VGgK7`^KP6Y-zd8<9s2IF5roz$*t)#T$G|wub3{>4svhDYRQS zYNjIB@pe!UL>gv9d`<^<9mOKLK-2+MZph}mZ{`5d7aVuactH$G##GAmVLFrP=LY`b z`PDH_s-QdE$VfRX8eHu>2X$sYq{~`l;$^-IIN$IuqhOjJiLscD|!G!)4BDsa4f zHJ}J~aF9v2vyx9bJuVJs(RvJ4Hbqq)l*vNsQjYN|`vRn8aG*zbh%WEHrii+C!EHMLha=jtA@2D$p zALOpjVTFA{LW>?JX9S|6q${VfCL;|NnoVUr#OvQz&ml>hjnCrpR)MxTIy)07gnk7G zK}SxP;+L;q1A*H57>Y?|($<&+68{6b?#6BIvH-Yz1tRPkxi=o3-pku@7Ga<;Gmd6x z<>p*htJaGk9F$n8&G5dY*Lbm>ZQ>}r_IA?bwd{+b9Y=R(=f1d`Ccm^mkV@_X8!=vB zfKFEc*#5qNdk5&0hDt@9y3_UEWEdnu7-VGjfTo7=tPI=X(%|Vgnb$Rk(+GxS_Gm-e{R1th#)#NfPMRrwqG+(>5>2i%^RahMO? zlLCTz`!@S#xn-Z5&vZk>;8fl=&{9_iw`NL(Y6a?*eAJ4BaWDPU>0V+G3j`)rZc=h_ zVXV?9bTIE~Zu|^2o&O#S2^i3Id;j1r3kMP{S5SesH5 zUwir^)eLRf!`&7Oa%(;P5m1TmVb~>92o&m~wxmQ|?CV&d?kCL!v>^z;-Pf65H9MKM zA;*KjYLP7eY!x3WX7HA&KYTT#hl3!ZBE6qk@zgdV>fYl#oX%qG^x=em^X3hoVFaiL z?%GwBm6sQbIY?u%>CT_=%0&QLd5%|A`FKE1s7T`;W?R$Bi{R31A#gj(cw0?US z)R0<(YTlZ|rigMwvygq5q1_qh4eH}UcAj7s6ht`PQ0Rlz0vx)nq-6Mm+}O7_B#|RI zLPL{GvWY02c$C5jUuLZRPbY1iTf`|SLf`-ME8wP8gI=z#uBJ`QCEeXrLxm=meumfn zRL7d%*xvp~y1>8OwT^nM5Mds8`+@-Z&uME1prG(=-u-P-%=w_@g8s)rBuP#051yxas*USwsWDo z$D`m2S}5i#=i>U@@0EU_CMB??C1Y}Ry*FWyP)DuBfTZmfjZT9$@!bD>JX&1*oA*Cg z%#ETJT`76sQh0ltKwB80oaiJR7oDwq&jqmC&~$4KM16cV?v~0_D-4PCym3w-nU-;q z*=B%T$WdS@<V+EUL|k-f7vd)Je=UwC^w9XiP2?Tcc~Fn^B4TQP4= zsEctN)nwQ&87H!M2mTD7=zr?|34{sDP{jt-eB4SQe!x(B`JOMkqQd+&b=jlS|VlI(JO@MgI3}>27%!`>*Q^F_=!H;YwuN(AVDvf2Xe zNFL;4Kk8(49UovZsEHLbul3=c3Nh`&Z%epoc0Pe2Erf+kV89g8~j3!RU?ql_Z(Ck zJ8m60LPUaYT%qghmM#QyHHRUhSph%<{d5}8fIMN%D+C z+t|d~v+8vQiFAB_wG~cCx@= zAoB!xh?xcp{a;$ZUGeZpN`GJ|`P{Cb@AIAgy&&;MD=lLhBy`S=h?1=}2Qm=$m!&RF zp5OIGZ*rk<|ISIK-{Aj=MzMXk z)RsQYl~oGn*jRy5^0sT#$M^G}?2qltk`_X2hPJ zvf~|f_!lU_^5ZcevP0{tn}aKiQJz{)v2=E^1Gc-P>t5(@e#RLn6_4xbvYe{nblYEy zNvS=6)-Kh)@0(1cRiSzgOrggy1vW4tppqO=BK#>C_Uhjg0F4PN-zq%oRhPmfQ7zrW`YJ2#S6Z`gB7>gW)HJaI4%%}{G!9}e)Hfm1Rto9|v$ z3T%1sppz4wawGmm{|!vfYo8j$=PUp0gxH~{raO)wan|BUOd$t zNlut6;eNQ-b%Wkw;rsJ=6>}-aZJ$u13?Qu9870yF77jGhpzh;iSqvt?(1VfAcQg0B zOQ4tL)CuzrVD4WfmW)TfzMOvCB>$10Pswp+Ia$-}>t!??5HnJee}s~41?usk`PIVE zKOM3>o;zsi!Z87I)MDGCZCm5zBr-3ULkzj>Ms+jh6HH2{a=32#mL1%kyU0>%Dan^x zw9P@>xia?PJ5p%EAJp4ZXc-rB<+4?tWxer?%4R7Ez{{SiJ*0S0hxhSmRIZlEwV~JAm{i>5Hogw8{?fP3^MBg= z@^~oQ|KHo=X|1zRM(`FvMVtsi#QRHd{iGJtT}}n2~MBGTFC5 zOx9sEmKls0=bFCfch2kldtT@F*XbYga?gEV*XRE1*ZXsQu0c<~Xti1mPk?m}tN_KL zj`3U$wiWv~^6v~?+N6)K5-|b`oUtbAP1 zTVB@H;&wA=JtZ$MrIdVTMDvHbR`9{S06@)sKYQ(~{S;J%)KUla)wy>WN~!>JznSL} zWS(!WZSqZca$@3fca|pa@WAhhmA^dUZA>wf1i>S&qU;G;@-o9wnp{xwx^$E`e-4~R zq84(@FZe51UVZEF1^z)IS?jI@IPE3*TFVmyP8&E_0B3sRzs`>2$mUxV@`CElQ-hj1 z(AZmonvnv^)X>+rgQdNB*rbhvQ!_zyxpN|&Px4Xk8}lukyLg%=DtyQfFH8a(g1AfF zLSmG%o~)EffLp&P0DR}J45+fqw{3s8k&-Z2{Xkfrh1{XwsCzljydJEevi>!E56|2= z+gHj14hmVW`QMLOX8G!w=h+KfnqIF4`EcdEPyOz59Qs?de@&ZbXdZjr+I|4jVF5O0 z30xEYFR=Z;aP|L%zW+B}&^Qbr1rXPD?_8$8LUB+YqwLZ9VNx9A{MAKdyVie@tveMT zrTSF>>T~jg{+Yy5br8Z{J{&?Olq^|+=mDOVF*EFLLVQ#YW)+qN4qIJm6JLN6=3l416a%bZCbAZsj)!GrX6QSYu4=ld*j*ay3FxeB+{_&gv z+T~@A99hv(N}kv-Z~=6^Gs=XwLC3Ollxsk#pkkIp}9R(SRL$m_Pps-h>{oD)OMiLqK#{!5g-W1&UhL;&}iw%&PkeTQt7#NI5Wk#;3u4Ck_L?WuY# z`0GTk0RZmxuKZV*!(otW1D-vRG?PJ{B4&!Pg_jiiDWoCMZ_&J+bxD)Z$3$4MnpT44^%#Ur6p8LVUB$J^SD> z=Ha#OV?=59`WwNoNgpe2;8d3wl&}lxGi+*A2fcM}X^a0-;Yo%4<$!dOyVne zZrw=XI$YZ6o^^bwG~Z|{*!FTZQ#*{xOf2ehtafUpcQP1s`_?^-+u0TFDq(cV;flm& zBq3k1ZH)RQ(ukn?8H2I*>Q!<&_u$AFS4+XFSaHN`&81g3fAy*XLa3?lq1u%aS9$Bj zKizboU79r$;Z;B+TVF3 ziB5f1d!T}U2*lb~g4X5xpUTyeWfDZ;=%2F zBLuhBYln+xvj-T6D7u$MqNFN$XwCO2^PJ@cjK(y^pfys-^@^6v*juKfl4IkS4Qegv zMP3D&>(Pf#OcPA(srS70CIzhzhx!*$4(#nhK38cc!>7oY+=piwky7J}?Z_F?&2AI6 zS3&1P@lPzC!Z0n zL`5eKfxlUP{=4DKR|N!@N%G9jNA09X?mOOWASp^~StO;GLT6-cs?kJ~)D_qX(zCp7 z=cQ9)NF-YKjn>uio*O4^N7aQMiQT-wc%}ctd446^LMZL>lDi#)$H6lU6sd!8&gFh< ziLY4IM1KVbMy+g?)BEfe=taCbmD`FoZYC|9r@vbB%H*s=gl()(j@eM4LY1|@?uY$? z;$kj~;o;VWMe_QGq7*Ymgbf%xHcXjGu9lBXVj%{D!4akQ!Q%BFn#g@S^T0Ezxxe3< z)P11%f=bi7>}+e>O$GL7bMDl=xcyX>EWFtesS%IV1CBgho} zp2R83+&NciNaS>|29Kt_#WLdifVS2HY15OstOxSayrYLe)Q&eW& z$Q7~pu{)<$NQenz8_D!a4zVe4az;@*z57@3&%}Ry$yUC+&^hxeHUFlyLj$7~LOfxE z&a1OYO2H2`G0vCUy*zA>6V%MtD^hP4RVXCf(2t9iJYf{E=~6JmQ>^);oWNgL@V8jtw)#ieI^_ zPswPv3Gaf;>xt#;IpVk#y0gyY{=Ep%m>4ZSbDAH&t7ZI$D1U>P(@gdl&S%r_!*d}w z$a!64mdJi=loB-3@{(J-^UOPVu_?C}MH`0;y#%uihI^RAaXN4(&CKNaL>2QMFV`l!Rv6BIN~!N(vXwztS~z+%w_Wu=C6L zI|NyjN@o$Udk=@~((rs^y*Pxc`#3HK$Q+>7<4?rz2z4|~s z%Xc;ycpXv8d=Ep+s>_C6d_eqC5lDU0PH9 z^vtZxU^nA-9-by;8uTJ%gdZ~Zc&}Ki#Em{FNNq4jdv~7y?yfkE0exr|i_VVj!sRE9 zke-!1CfSs~T^Tkca6_}L`4^RSdI3pZhiPN9O8(Bb+)y7TqszgwOX>*exsXnjm!k&s zIU`?axLjmG@~K9u<+N~g66bY3RTlj=-G^q2>I%{R0DpbsE`azL(EsxthW|Y1)t5uA0IGu5^Tz zus6+In2Q+6RrqFRUY>faI=cWqj@sAAmfpA-GW8K=*}B4S0YC%z$ReWowTYHsaV%gk?ae?Ea%udi%;Ye|E8-}>&Y2U@ z()jCX$lR(qg^EV?akg=LiYmJ5f#8YgxYs6{7wN+*wFT@tXjat>biGCbe<`AaTfu_{ z%gzVIHA+Y2Szm={ttQfk;0(&-614#1CapD72ixqgRB7GRS zJ?Oc_0t^WH%ny&Rq*sei7UZM}tW0;r2^`gLEW%O`GDCcd2i*ya8AU}Roa@E!eD&?O zM|61UAO5<@OWi4!{U=Tyv}}Qx6a50e2D$l zukNKrOFJ*^2!pnpiUA8rm7DmYh(xC}0ka&hLD#vi=H})kRXl6K@9enYk9g7T2tOjz zOIP=P`P4Lgtb!O_E_)-ylPRY>`SdkTifDwq(78d^D{fGGLzLTRh@(xBdC8@y+ z2R(_5=B#lY9b+|iOKyQ&Gbm0?{wxkTDkd%tv_@1$KUP9C<^C7b-abB}x8Hyx;%Zr0 znXZF_Vy8NDbt)r-BfLdF<2aWR5yM3JnDJ2`@?ptSP`qz*YA?U0^R{)Fk7>wucN?r( z=WcV~fW2_K*3Z`t^q^lK3|zW0nn0nWx@01pVqj+GM}p6c(z*>53>sR(*LyEZJ9&{3 zv+)u@?7HpA8mjum7+WJpMCzay^MPEN;rQU-LG(70o3<>coKaqW_QKGe%-_tnKGR%K zI@4I@PSn$F)If}94Tzgsc)k-tX-P^Uw^{?YXgL{GRi{pvII0E=PDolLYm9Ywi|x}| z{l^GNud?nQ6cHS-l?xzENS1V7^cMe>Bq_}R{EWV#I;xfyxI7ogT2r0u#8MYYGey{? znDB6LdhB2*_5o~lwl6;*WK?JAZAuCmGqMyZn;vpvUVNUMid{M|a=+Fhkx=ui-Vi?H zz-S~@EegNDQ5>*M`ev#U-zn(H=Q%PmE-8iMQj{V)wpxx+vV`4zoVzCNXAf#(0#06e^@@MpVVaJY@O@H<{-d>Oy2w8gY_64?Mt>mAz;&o~@tA z@UEU~hL5ScHL~_;O1QlX0=h*)5pFn4FIpkrdDMV|O?U8&MZY#tuU+|<*saLF)yRf7 zCgRThP#!^J*J9V{LE|wt#hs2`BiQj;gLe<>ySU%hchTV6-*HHSs&cyYJxKJ@=wxV(xk{vb}n3>nM$e2#yA?L#I-9aD5<_k$9{b*B}#?dBH>m}MwW-85j&6MX6_dKK4znyYxtYxsZ znqwse#czzB1GY!r5O$0_ZkW&*Z^cqdLsG-kmPpD>$wd6-+S+eHf~@i6p{SC%6XH#k zz;SOHDiAnYUsy3F8mGAox}U#9!D`on_kG8Gsu+7Sc%Mq4wU@bRj8{zTq#)AZ((1lH zudCylq7oZT4bmk_9aAMoyel4*>Dg&+{8a8592BwITF)PZGZBqzc;;2oYNDM>{Zm>= z)1ee_UJuV?UQUjlr>Cbqa+I%R^C=C!p2$xbpcLN8N&>DaaC6RGKtR#Ifp1eq8!AZi z$vIKu88=FPrnBj;tIL_dwSk3D-9muPHy3d5;norcb6b6$GH#0x22EeIwH{(D=pt=S z>dGX0=A`XM;+C`=FzL(X%4E5~h7^3hQWRW$(%%qsHuc)ye#H*5`q_ODOfZrE;H_8&C1Gh)r?cbw%T%I zpg;ZHdQ%_%Igv&AS~BdBxpQl?ZDXo$fTM$8LKd>NA|J+m6VsU(;NBAAE=Hta zoOj$}PFmWbiqQb8CYaUL^4Q|4Aoq97!XAxGtqc~7+2@Mh=ETJt7t+KClFTXj^h9y* z^D430^AQn%s_j8?pTqL%oLgFqv;(^bT++a22_-|}niIx1lFr=@nHlQTixN&8b;Ba= z3oZ=?P`-?C>?~dF$5Gl7L-}Y1YX#dzRd(-gOgi_0b){XsbS7YkzN$#gJS|J9UVuOxtZoU4`lPWO0HN`ucel6@sm2p{T4B`c7Z-PUk5BYVXtO>8w;w z-#8J|(4B*CPEq)M7N$9_2HsJO9tmQ!HW^m4eSiJ>(h?Q1uCrZc5C;>AY8pgUq#{X< zh45grR?4aJsY5C8d_;cE+-`%~>pzYPNjB6nMx_N7-HH(7s6;7-9B?x|u_Fe$jW82U zo36pWn;m4zZl-VC*+U}=C#96Lx8}983P|RZyQVzg%;KYQ+Uj>Zf>q`z6mpFpUexnb zNw5WnU?oE8+h4<;#RzuL);ipkk#{HbAt&nlGiqsdPxcW&z$Wl0)QA*!ruEFk1W%vQ z5Vy6m8X$KgC4=7@I(EP>@~*DEnWqS+0c)Ck;BBXoZGt{Njk6rGnHVbWd>%ocGi0K- zevC0vM{!Hy-t7hV7CdsNX@zxVTlt>%??=MobX3xk>Gwh1ZN1rDR-xk9ap-Cya88;l zMg#Fzc24$>P@_vbwRNTwwhny1&GGfmBr#DM)EbSk5WflE5e@lYl({Q}TT_+_d2}@a zIePH*!VCFZ!_!&%3U>Q&#U&Tp)A8?Dh>{Z{iJ*dLQRbw=yG9m|NJ!{kpU?XpOb-eO z5Tuz?gG|=8W{bg&OX%GQkNUF}V^RW(J^O;+5~?*@-5^NXiSru)V=1y}As3A`Hz-}* z-3N{u#76I1VBt79j!VxC)#s;P4?I_d4bQw?!j3<7B|q$NHRC&U)>a}W=03&;9^@ajN@QtxkCPWbqDK)U>di6YBTI^* zev3;PSy{(9GMBZomq>X~eQk(!v0rz|Yx!qI_G`_p7FY?;_tka#IL$9x9WU~=IwNsu zw|df0MFWc~)5N%BWhaoVJb&Fk?^hEs>wA0A*0V@JP}Y)OY2nHt3pIn)iO?af&qPG5 zujXiX1zlEzs(44ubZ^yTFW2FKX#iNdt~fRQYU4 zdf<$Fs^NwMtH2W(k~ZTMs3;YZJHw+^pzb0^iK5^U=U{MpyPD_ z-tn~q&9WI#PkZCOTPwbw%*y=LFvMpnwto zoXU-2bQEW4ChYjoos*F*)fi5JBKhR9w385LfdK4F%Ic2#^z6~eF(ws=)~%^2(H_Li zm5veu727-rhfPi;x;1vFZlATawS$eL#-vr*j2l`~hQE`dxpS`HesYq-$&bY$TCv*8 zzpTA$Tf0Em-KVo`9YP^3HGZ;L?774F=8NY`#?MB<*k}{!<*+1G@6ZtT_oI`8Ft*m% z3Kh{5A#jwVmr}v&U1}6NVO>8zzjokQ@8dSIh2ln2@{S8DY;Oq=P0{>+w_ ze6-?p)l5w%C86sVtkJbkZGJ%=zHDU@2bRCqejO^49ED3rNQk)S)Vxv&W7m4L9rD7nFu!v=Gq8-;!7dA@ zZs*gUEIIAhSS(|4_+k%2xd!@FiWbsX0#Tob(w@%NaTG2nb{yK#41Ef&Pc;`4n}@CK z5p;Qd<3c3IL(n&VFbjNFk~mHqJFYH^TNyPZH*e!kaaKu9!Z`>pjh{cBOpfz22iDgg z*E;o9&_6z>y_UmCGe}GZ#|^nOM<<(}Jm^A>$!RvwuJOMAnH>!8BNkIv0xciD^QcYZ z2dTHTqQ}qN^{L{b7_c(2b-fEv3?NmVW7^9TC^@kl?DmSuQgk|d{Z-{8!K$ePU8@3c zk?J$}%Eb%baR5rVUuX9I+o?lQ@U9(h1e+QA{hWlvjikNW0&}QGeU2@*wPluA>OkrT zjn&u6@tkGZE=&XZiE(qIwMB?gHz{~MF_htZTAMxsFC?cIcax5p^yI?>R2Gm5tyqyqK4`#PZPUy&nK_9bu6~=P%9fWEa%mrOAp}9lKFRr zONoS2RJegw@7(O);mQzKzH9Vut-}oVIwq&67n~e5EJONm zeQ($m31mB-uuJ>1+t#KkJ_bL&?cDxWMZ?z44%VA%TGG|aH|c;}klH1=-sPA`D(L4> zDL}pHYKKR)4Q?*lfs8F*mxFC=zQXz!&2t9+F==l79E@z?g0&?>P|zL(1pRZVk{i18 zSG^6&v`?WY!K0T~YmCsgi)Es;ULEpWV6VHIJt>?g< z?d~3t{TR$wZC>b6WVs%)q4(m1v9KYi3Fx_vay`;@v@ScD!2d)ru0C~26MN6}jL6QF zM(EMjp)(F*M0wlugU?E???xo_4EG<3lec#M25JKz`6})TP~Vh0&vgfmy%B|+cZ++K z{;khT=lbj+l)?Hd_PQq4=k^)v>hl;;ReAk`d*xO>L(pkVS>ahJo6m>us$Q_%O0xY& zbV9owDC0c}K}WWBcu)j!L6u+$BQ$?}dDLq1B^R{%AOHr_q)n%kd`wrhKdsC56{a>A zm56i=6Om`mx<8271riC6cfvZt!;{Xr=zg-a63&cl$}I?Ua^iY)BrmJ*Y(g2Pc`_j( zX@DeAtfESwbaZfw6E!ajLWCQ{|s za~=q6T={TQ(2oReHn+0kPOpL>p?q;u@x`O0XCJN{ad{fJ3krWMa5PfI$HqfrLfc3v zDlAv7|67hCRJS}I8J3$x0zkaAgTs+|gY|j_vKzo~bRjj=*3d`dwAe&k|5?fhOqP9@;+06Lzw9us4Yc zVDFW&z5y|g4md+b@m#;b-~T77_ur$?e@6Yofj=Dh!+}2>_``ue9Qeb5KOFeOfj=Dh z!+}2>_``ue9Qeb5|6e)4Mk5iQQ`C5O+$>w&-cGjpkl`^L-hVA5)h}Vc-kyTC1~u@D z;v5ihHwR?g{~KBSjXeH_8zBzH$i=}R|9YzN=f?jA_V{f0;77f##sYv%%Rw99y6=B; zzs`5U%Z3MR)3lWb*PQi!iy%AV8GBpgx>ZJSyeSUkq0Z7+U*}pO_>D~6U#0feCwcnlh z(dkaG7G8y*cX}Kcy6(G=>dT$bBUDl)zFt@mf{b77W8jT8SXUtEk{*ZbAA6rN1qA~k z=vc{$jT8BrT`jT=6r<5Am|hLl%5O4r=#{jko}-*J*zL(b>RYdQ=^343;|PC zpL&{;@Dd>OxB%5{=gP|JsIMplb$&6dB%V)}qW$bM_)L801fDf?nGAipl(EGcCHxK5 zRVAG2e%a&m+8>ZoYE^LU|SGTfvIL2lokGM(y!D3&jZ?~8&-4Z!~bp~DAm)o?>T v38VF>{+7{Thd8oSn=6}f^8^H`ebX5`gp~-PnYsW(9lEAxtXp)&`QQHm1F$sgBqgLvN=mvLq)X{e=|gwjb>8>)`;T!y z-Vb+-d(Q`ApMCaTd#<_Wdge2qc|I#E%Ali=pgWtz-92r8(al}$9US5j?@oS1;-pyi zK8qKo7y^6(-3r9v=RG{ODe8c<?@6_s%!F4OPtSPoOh zDDd$k$70?y>#*024GjF}T%DqJNQptsbKYi|-uEk6m{^3F?_EU|ETbcR{K3iKE%>~r za44l|C}LPa;(`J&d&kNPdB=x+3KV&*?u-@?Fko~(&_l1AU%g#>fpGxQUHA-}35bx5 zN4XX?T15pWyZsUJc%s|lm_dd3H+^xzc7lKBM)>X9elWV{(1jL@i4$9*InB~55<0n? z`8>UUA6gQzyR(T=CYZWQ2LG)k64Ad`mK64k4>LN9{#82fhJ`~Gl$J);-SaX_)m@6& zuom*<3EhDX#eZi1StH9KB>a1xejsK64s7WCkU+tI9wF@ecT+TC9uzm|l7ziIKRi-W zS9;SWyXg%5b2_^D7NLDc379QSU+=G~L!@|e(Eex8s$F7{IS=6)# zb0;JJ+B1G@HCM8qW8q0y$Yp3W&VeeAYXUXQ55;XQDfzbHB&B-8LR|G5aXErR;OEUQ z)NAW;!FW_EEEFt}&UBY@b4=Ln$B=@T{(Hfm6kAJ7^k+PzbKLvnOSA7nV73is5yKig zETs+$YyR}}r*er_EmodfQspj@!|^ksSJrqrIXNmVI`}2G4rbZ$2`v9{poaR!EaTvx z-odU^b(=mtb*L(>-pC6J3nt{NL6@ncrTr~OduGtq3gNzTJ zkdQ9Js|?PwZLX>?!i=}){u~#(KUo|LKD!WA%(Q4?LS3)H5uc+1Gi#t(p9f@bdCD#V0enUF`ES>s7;h zT^`7|y4H^0=x|#Z&;0BNUUKa7d|}rHo%w*L^JFDj^s%#S(d(%5bQE8#Xuo%<+;69H z^BdXb z0lFHbdXMYT%*>3Mg9E$HZn*<0>{a1Bi_$!92icvp3rMc|yV4QJC)oBBCs(7m!hRgb zd2gKb@u5zRs~WC7p;+^HwUEQzZcG{YE}@Qx*67B;Ktl1g&KC3j{SEpf1=nMdI%8^P zM4xJu4x7ueA=;zK7V>ZVloeYh1_lPLiv!te+xaKO8h&iVV|^ljhwh&m4m}R6k?t=0 zJw|j$gb-e%&yY=3dR>6d}u+8vZ-sglKdjir41?}ha%8r0mpHtAY2IbU(crriI>vor(xLeavr2gttg7yW;$J?t_jleE&i&KdW2@Sb*T%*)A|%2XFiYDt)z`bH ziTEH6r}9?Gd2nlul4aJ_@xD+biug>VJ0Zn@^Y0zCE0Cd?@)=>PU5IjJ(cr4T6jG17 zQZi#QGFTgje<|o5{g%^D^PPAmu(Q!6@HDQ=h6RELP=^!QjTPj6d}3lkoL>8(KRW|B(?Y8g z;j`o8H%fj1ICRa*`PRfinkAN86L~C)ZIr=a$$c-#qh)7@O#XNmSWqC7onHR4yQgP; zBwg^0oLp#mCfkp9r6{7JhN)zNEG+1lYimc_Dm1@U|Ez2shWf|RVdLPSxw*Nergf2g ze)~4;OY^6*YG-)(cuB2bcKCQ^?ZU00k&$1Kq`b%U9N7G`{K#l%uV=wS*IFlw3zrjl zEk>U*y?lv8$Z8-iFOR0Dzo=X#?V?_YW$xMr9=qQ4fMg99XJuC_XhpVna>}~ z2GyeO7QtAEzgofQO4X?O%2{%i=X@HUFEVvUM~>ORz(D6;mieRJOuyBu~5^!Upc`Gp3jX-f}#W#vx;%35Tl8Jim$?|Vm< zf7;Arkcl|L6B8#(&%1kiW-07VZBJGS8u&I8&tgJUH{tzJw-jmE*|7qs-Y<@}y`S7Y z1Y1#2U1Vx1sX(<|Xto4mt`zFLkCpKcJ-^3u(%q>doAC=UqdiNDkCuK*^&e0Z%e8`w zHOqHw3Y6)`O0?C`D0zs;4c(V^Po#UhSGF?!I)GC;Tr7BuQ?CjM3y+s*<2rj(a2o8* zBT-QNre2zxwtJJOYV;?cMeB53AWhUy%r0HENODhug~NP^p3CO z`9j1`(sa3x@1us`C`xu;XT`hpxFX@~UWOY*DH>aTvO{6lJ`cy?+i99RhOsfV=2ASm_j~U~W#Z-2 zI8e&>4&l9RiR_jD|Lv zJP=Q*K*B5i8HesmV!6&aInLKO$i`C47T6${ecFCmHYGK>R(M@fSmC<}>$V!>gP4E| zw(p8vAzs@h@$#keb?~e@HJN4OCclg?Gg=62nmh)1&b;>YO-)TVZoO+0a|iCpqwnmw z9KjiXIM!Pwh3V8;sQ3L1{>LqlMZS2}*cF#A> zu!y0k55y(Xd&HHggZUSA3Q9`7KQCo0_ok|Ms+d~~DEZuxA4xd|av&f7Cnhpd5G~N1 z?at~ud$_vtD5mk5O;%|5)&2VMFlFVZ7uqA2sN;em(e}`YYskjq^93xuW>|ZJq@vNi^PHgB!k_Xobi+H@6W$biW1k^F8?a_S!$27OC+{g-`os7Uhl>G zcx|0mxI2q!<=cHmTvaO2$|{D%e*IPHc#w^>bm_9Z?Xjm^(6{Pirb%y<$w~ZZiHN3= z%4XqDmwDH_i(5*KgSro=8h7W@qA%)*1#M|Apo^J@mCpkF88Q{SK7XB>q-6N;;e)%~ zin5UR)!2{weEIZ{Ao#tD@hhX@=x_X1imew2{(IB3>?`S?csxdW3@+CL-YCfR)D3E` z-JByw)V6^c_ceG#jUpF}!e`Rdbt&_?#dzP6+~(!AV7RZ(wyBI+=>Fb5X{<8uSR#gG zy3DZditl3$36rLe#qouTiptel6>;32)kI;G7~FDC&@rXS%veXx*CI=RI%hVpf=~%q z2@Xt3<%-mE^cpHXeK4FH9ofA`gudR+b{1mFghjF3-%|SJD9mq3wkf`&$NMH~7d1?g z&uA^BGRkVuXk8ig$1&H}ZUx%y2!IrAt1 z{-1FRHj2GN2v~KDF9I9?ie%3}^0TlE|M1ETX}HnO7AI`n+G%5{0KQXX|-K5Cgv|W42Z06RUw`i#@Tf>OKC85`pT*Cw$BgK{d zkD!>9_wn>9;?6Uzsl26DHdAM#!!}aT@D~as)BwnQC@QLVdlZp%7e2tLG(Qj+f9t-m zxXAGs!S7z9snoIwU>JyCZNHKXSzgV(1b6_pgHQ(|k(A2G%XjY{ez!Zz&d$CvJ%IDFZH5QI3Y!?sH@O!WY%;gpRh+N2VfR?$n<&*q z0*3AHk3L?!wEF4Z&l{&N+4`*wqRYEg{@BJM?0tom64J`5FOd6~YL}%`!`L@6(g9}h zr~SBbKkHL~Ub}lDl9cOg$#Y%&?yl>$MZo3urc1@&5;SfgXN z2r>hQ__H zXh8t7F*UX@x)(2u?}C($fUl7pQ~{^>a`m3?hh}+VdF9NWuby&pvUcB)H@u&p=oiXM z4gnX>Cl9{9_0Bu5{`wr_V^H#ctd6$5jEjlElF#77DAlbCh={=18qsfG@HmZ>-u=zz z1{KQ5&BewszGIFPhO%9hB{>!$sSB~!r(%(*WAI9LsyS93ONjmj2@@)lCbL9OIKI5? zbeTTs)s_3Yr{wc8!=|V{Qr?*4 zWL~E>4vW31gBORmx^>oLq(yzh!{}@-2LZn#NwU30mo(0mko^BxjL1%nnk_R+Z;g;g zCL+PZugsf8jBnNOI-G4gucU;zlx_;yOclTtN>$0p!hv|Q@2 z)o!i(^VghP1VqHOI&xi=GCl2sN(}N0sZ^fQv4X?YIQ=r{Vv`--!hwrlg>`8$trFsj5=lo+cwmd-Z6(>;r}zNN{(XBEroBQR-aqxmc6yhveXZBEnfSE>-@x7F%P z(c$9e=7}51(Nz|Ty@Z*gwbxp=O|FNrdc0->&-;z60|N$DtBNw;kHxHNq$~aKt+iWL zRQES6MkIIzD>j@@8wHQU5YnaPz)aE*^RLPSnepclo~5DDWo7i5Kj~SV?ry z=qbh$;EqDK*1G*JF7nPvAE(qkXBGr%@-A^nH~V25#I&45lpbc^bw$r2e32+CCFL=% z2}3QJk`OiZ6Aq4wu+N`+7QHU*HwWI`ogT6Zd7kyHnFzUKy__o`fy`Cgeoz@yZ*sLk zaWPHK1l!Nmv#(N3azu^3!cPN3(R!6ceam^(7Qen!Vt*V&ke)|ELdtc>4dG$26Pqc{ z5cW8ctc+0Gn_^)Rkb$Kds~N}k9|0u_;&iQLetWHrPU<4?-Z_v=W07;-BqnqX;wKK6 z>)a>E(gg$tVi9|ES*EKGdIEfUba0Z8v*&s^8?orI%)@0f2Y5Nrofz&LaYfz=6Y(j6F@OT;R$QF<^wQyAW-Y zC%^MMZciRzD30!)Zra1cL)+WeYY~P^SXSS_oG7sA83&F@&CRXc@^*JT%h$G@dVnwN zx5u#WKso{3ConARO@F&hq&u!swPvx#WR8h?scK&PX3WW6xgdw_-Sc7!e_{7+_Fs{i zK?sIE+4=;8glvta6D1{5JqG7P6B63oR&SyMvg*>iEuS$apnxeMP$;r}ORh$bS7^{e z5=G7lts*0|xWo5R`T3oqL6?8i1B8b0>bE9eCHR->Jx~F9?qnn7c>>YX(^GD8WvRBE z#3^rHz(*&UsM}3bU0dsU^o3+eqYqMCl-RD`!~6F;Orr|0-qSL@K#x<^0_#f!ualQ` z>gPXe=XVS&tM^5N;^deZKYt_|uBj&OmsuV#^qmd6He`*r7Gn&1`NH;9;sq`y8gp8I zB%n`^j_W_isWq|bu~Q;pQs9tBS+D1_AfuvoZAVK#g(zm=V2bAJoXh|4LVVvi zso*ELb7Qo7b;fxf<>XAe$_H z*99D3s#t@i;--m`Iip8)_Y*&a;IbbewMt7tD^oMG)w<=#USmXmY)Ukl)4#)z4Oeun zi{a_*TOHAHB!ymYAqvP*K_6N|LT4BGkK!-Fd)m)%rx$+{yj7cCobMF5{`~o^Ii(`^ zyL=ov=0i6oO;Bi9AH2@A3XPv{a-$r{5M<*QsijVk4UXMI7Mi6 zbCvQV(`9c;ESUXt@#pu6A7&fCQ6*1y)4Qho1N>*S`#gu^HM58)hn+aHd2L!o0iBa<+OD?= zfG4T=8~P69yLIDlNcs8suk0s?#@D}*sE#b{>yOH#>znVGD%II8ChEQ9hEL5V<+aU` zO&Bn*iwI-)EyV46n=s(9kEq5b3o#B5aLh^fsJsIqXglf5i+dR%c|^ zuEbkr)r~86O5!;7BJf(NrJ8@za7z3pnbQlAgxmW4afNkNYDW_MhE90%$5$DA81e;@zr*LrC%9YP?zJAf=#UK~? z0>y9F ztB%jkUgw6OpFQ0#ov-7tTS}U#ICUHM!JrU`J3LKb(j+i2Fvz)lUgY`S`=N^c zd9n#OEzs$5{W>rEy6O8F?U_9oozU<3Ix56x!KJ(V*ILc=t=x#KR)sMF$P}Ei(;t_F zkBpp&P{T`;PfiXPOEX6s#net&v;rhd(=Xk1#$Ln*4tLy6~ z7gshqb&O+YhqbEl=OqeO$Js<|`mF%~sHH4iULE7cnbn$x$wUt8*3!%leb*^&yA^ZP zU;h=w8E;|q7H}0se=LqpZ_u@BbUZ&^%C4?z-3(7#{;rSRzUl6kj0jPQr@>D=T#oJp zti6>Z_%Rr{|Ad%~^SE<=GW0;f6P?o5 zE0hC4=g#D+t><;AA~ruZtfOmVXgGcZG$hK)*@lP6BXqI-^$T9~x(F{5v_HZ!A4)Ts zY+!zu=SbJTeAro@^ae2okeeox;d$oKkNq3Z5Eu=`_{D_*RHfTFRm==7VLtxQ&H3sT zhtDr-++LsAwO7wyivEf(`tzLfm9Y0lVLuYnyy*PMnp1y2Z2DFXK3PuXuzZ~GL|kla z3kNjY+MiK#DjFJ9N6}%lNMl)$9A zzXnPmzMZ#O!-y3+T?JB}!e|n16g%~T96U0-FQ82IIqC5 z>OQ(nGWvRm6QTID{9^Yr;Lt*4O}n!ItC{1r%*)|5ujT%C89E{sPLQtbWGYCt)h%J` zKaPq%8a+M)S}qh)!@wOmc_3KK-^dj0ZqAfW-zAa@`T-*T;q~=N_R;xq2dGyMDIz?m zED_z0^!@n*w`kz;Rs2#3_`)%D4WGPrNgHQ zMSu(1zWlqVb-OMwem-3;lLep!774tZSLlsG60I4&ks_ zkZ4p$4U>FMG-73i%GBI^?e01P%%^B9EEGmje$L(;*r#}Y$^+`6B8sG_VLovu}J)5@x z@XhsmueF0~0x`AFSjW7md#5+3&a;=gGQB}LejYd7ET73l3 zD9$J}%5D^$eWaxk!G-p-f5p;16iojx`wX%Rqd$L3A&#O{DJdLknqd8`U2h3!xv(}Q z3w;oJxVNj@*1QMh%eZNI`E_aZ@dCH;Fi?CyqxQW`0f zMp^ByH?a7#Cbz@!DQtg#H{H0 z^sm<9c_$7iu5|ZBOZNJ*F#>uH@_yhYZfPUbc**0Il>}~bV+(b8{V)SZ zZ@pbViN2pMR3RTs@`K~$t@A!G#DneJFame?zdJW5WDtp1vty9Y1Onc%rk^yE8$>bw zp>)naYvrzkNtiu1E>^1t>1`Zs`g(dtn}klsi$6BaZ!z36 z`nHcz2bMhCGvT42kzBE|8VW@u($J~{R(mbo4M|rh-P?#^*E7EX%4y+kevX7_XJ&;_6oR(Pb5Rt&js#RlL)I)n$Z8eQZ%3BiH)|NTB6_-oEl48_*!BVIu=*M|?v9pLO z=(iZ~J5O%DL_U&)r#&BiuX>dB+v$b>0}(&XqmTFE;$p?!Jl!`wBkR`I;N7Kr{QWx@ z)PTT%6Me+?hyOyCe+&?3Jpb-jPY=S<65Yz-VKn1A#$1hIlK)ix4L1JZU3#6mfPxcI zmAPM(&n;$HRM-mOqj?PuBPuAPLozej0JEx|<>U(3BTx(M4n`$(*gnEuXmla{u(NY? zdM*VjsP1JFUh3rr!#O6i#yBWIP9UHD>REZ)6cQjiLzf?~{%l|c06Z|B>&4qV`G|g? zaM$#XY3y{ewchhQWvMorLby{GZmBDZTo+5Z()82d$8g$dPKf(u`V;r-yfUo{NAB9k zMzyoO_mRNS03A;*f!Jm-K2(q&&-f0d&35^Vl%ZcBTH&aa@i%<8jAhNUml%g;vWA(*DeG>b68N$rCy`P|Z0w0*u!6!x(Ko zJ+ybElLBPvlX3w41N#aN0)*0za{+^mKT;iR#=M@Qqd0RDF@k7DKx#{c3x-^IVFgY@)7 zrqSLXKz@;&oD6dJ*F~zIkTJ_GCu=GYYIGut zr^{$*XmEBue4y8^d=8AAM3(ql0|0{HJ@5{z2*u8h(#qampuc}yp;iSASjgJj%X<8~ z_gbvhE`G7bSc#B4Q(?#lQeIxUI2BOM43n7c%vJ!w?P zU^Gu#4eroA&wa_QrXEaPDZvoHUV^KyS#G-;l>n3KsO#a+gR>WbFLKyDXoA{Y){?!p z#YmbIDE=R>MWjn!4)*tV6l4y!*H}$UO}oX;05L*X7)nS-%Qr^dTC|G;L4N=nTQ&jA z03;>RT&+!DQe$fvSQ%YSlFx*E?})b8^twYLQ>83=;QX_)9Jj}FQ-#BoU^m}quP0Ok zNcx+Q1DOZ~uZr{iCpaXBm3Fb>sO#$mZCCP$G;ps%J|oIY%N7D5j}Dhzh$hgLWC%BIddWIC8psB#ItDO!jpE2jN^UUo zMF|pvy}YC0ln{%MFcfIMfViTgs|zkq79q#DC%jO%fCuDT5slwq_v%6Uk2nnNNYDx< z+WLQ9J^25R&hh_fr1mVkPw^&}zK6b;E}nP_&rS8(KZ^ho+^I+hRv}G}I32PwJ-#wM zo-!jO@3-@am0@LkI*JCLDdj@mM&X2VF*?DkYM88!A2axA00cPz!VM{er%ynsZ{)N1 z>(scyiu|4`mq^oJLSw9n zHv|?vKk{@l;VBov)4y*$Y|`VCvezs|*eH}ovK{})S}BhOU)zZb)PJ-j3$tsAQg5=A z!~EQbijxvUuF}Z3_4E@Iv6s@H*QXlTIdlHL*0%Y{DFNh*_;SXP+EU7BH0WYjU!DRD zinorY%hYF^;ymTorHJv0?8uE@;oXjX4^%(t<4&DV?cM2)u~zOU_WT47T-hrERqtcI zN0g~be=0!CWS1Y)|1Ad z9HeYg$kP3|y2=Wu{!^Ydvq+3JfYcMJ3_ z<%8Uu^ouuNKXfb>@_zBPBy@fVq{{jdibRsg*pui2yMM9@BVOUgdLX-WkXsF|vyE$j?Tr%g1vlU+AU|$yaz5<*MmvB_`K!M_l(WEpg=>4L?R=*n z_~xC$z(hu}svArb4f|1NWE4WTG$r$3-bSNayt);ttfbU3^pfv5?2{t)LY{b&xjuuN z+XSEs!*gJ9OoiI>1t1a@7tbp*t3uogkfEwvge(iap;c|LxB00N{KG{=An);J(j)f+ zn~GRpeH8O=68}WSR!+l64m$816qwqtRE&0xM)9}7z-Cx~253ie1+)O~|{JIX6B8i)G$n+JL7NynX|Rf?%C z37;KZ9?}0chTTME6?MqU0V#`oUjI+b9fEXy(G*Nf94;(Zm7P|ZYaP(UAMi%5iPO6hHX@oq zWE!~mK8A0pw0kSI&eUmVG_V`Qnw`DM3iest6esA=hqjr*&UDms>`$pgh8lP4%p;_` zI5t3Fqc#<6dXMI#fb*Tre2Lz=8}F@nuR zpV3>hwt$VdGHXX2`d`R=D_~dJ__mQkXGXlhEr0)e(^Cv~9{pn)KjnZxJshGE#^9YX z%)GG&+vbuMeV;2aq4|7W2(W?C4DxwhI4!L}HwdF(pOWNrKy)5hVJ)1L(uaq=&qy

>MU>pYd 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

73sTcngKo+Vp*RU*Tzum{K3DLg8P_v8 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, }, { - title: 'Kitchen sink', + title: 'Portalled items', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropComplexSource, - }, - ], - text: ( - <> -

- EuiDraggables in EuiDroppables,{' '} - EuiDroppables in EuiDraggables, - custom drag handles, horizontal movement, vertical movement, - flexbox, panel inception, you name it. -

- - ), - demo: , - }, - { - title: 'Using drag and drop in popovers', - source: [ - { - type: GuideSectionTypes.TSX, - code: dragAndDropInPopoverSource, + code: dragAndDropPortalSource, }, ], text: ( @@ -385,18 +364,67 @@ export const DragAndDropExample = { .

- This behavior particularly affects{' '} - - EuiPopover - - . If using drag and drop UX within a popover, you{' '} - must include the{' '} - {''} prop for items to - properly render while being dragged. + To ensure dragging works as expected inside e.g.{' '} + EuiFlyout, EuiModal or{' '} + EuiPopover use the prop{' '} + usePortal on EuiDraggable{' '} + components. This will render the currently dragged element inside a + portal appended to the document body (or wherever{' '} + EuiPortal is configured to{' '} + insert to by default).

+ +

+ If the styling of the your draggable content is scoped to a parent + component, the styling won't be applied while dragging it when + using usePortal. This is due to the portalled + position in the DOM, which changes previous hierarchical relations + to other ancestor elements. To prevent this from happening, we + recommend applying styling from within the{' '} + EuiDraggable scope without any parent selectors. +

+
), - demo: , + snippet: ` + + + {(provided, state) => ( + + Item 1 + {state.isDragging && ' ✨'} + + )} + + + `, + demo: , + }, + { + title: 'Kitchen sink', + source: [ + { + type: GuideSectionTypes.JS, + code: dragAndDropComplexSource, + }, + ], + text: ( + <> +

+ EuiDraggables in EuiDroppables,{' '} + EuiDroppables in EuiDraggables, + custom drag handles, horizontal movement, vertical movement, + flexbox, panel inception, you name it. +

+ + ), + demo: , }, ], }; diff --git a/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx b/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx new file mode 100644 index 00000000000..eae3d20fc0d --- /dev/null +++ b/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx @@ -0,0 +1,173 @@ +import React, { FunctionComponent, ReactElement, useState } from 'react'; +import { + EuiButton, + EuiDragDropContext, + EuiDraggable, + EuiDroppable, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiModal, + EuiModalBody, + EuiModalHeader, + EuiPanel, + EuiPopover, + EuiSpacer, + EuiTitle, + euiDragDropReorder, +} from '../../../../src/components'; +import { htmlIdGenerator } from '../../../../src/services'; +import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd'; + +const makeId = htmlIdGenerator(); + +const makeList = (number: number, start = 1) => + Array.from({ length: number }, (v, k) => k + start).map((el) => { + return { + content: `Item ${el}`, + id: makeId(), + }; + }); + +const DragContainer: FunctionComponent<{ + children: ReactElement | ReactElement[] | DroppableProps['children']; + onDragEnd: OnDragEndResponder; +}> = ({ children, onDragEnd }) => ( + + + {children} + + +); + +export default () => { + const [isFlyoutOpen, setFlyoutOpen] = useState(false); + const [isModalOpen, setModalOpen] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const [list, setList] = useState(makeList(3)); + const onDragEnd: OnDragEndResponder = ({ source, destination }) => { + if (source && destination) { + const items = euiDragDropReorder(list, source.index, destination.index); + + setList(items); + } + }; + + return ( + <> + setFlyoutOpen(!isFlyoutOpen)}> + Toggle flyout + + + setModalOpen(!isModalOpen)}> + Toggle modal + + + {isFlyoutOpen && ( + setFlyoutOpen(false)}> + + +

+ Portalled EuiDraggable items +

+
+
+ + + {list.map(({ content, id }, idx) => ( + + {(provided, state) => ( + + {content} + {state.isDragging && ' ✨'} + + )} + + ))} + + +
+ )} + + {isModalOpen && ( + setModalOpen(false)}> + + +

+ Portalled EuiDraggable items +

+
+
+ + + {list.map(({ content, id }, idx) => ( + + {(provided, state) => ( + + {content} + {state.isDragging && ' ✨'} + + )} + + ))} + + +
+ )} + + + + setIsPopoverOpen(false)} + button={ + setIsPopoverOpen(!isPopoverOpen)}> + Toggle popover + + } + panelPaddingSize="none" + panelProps={{ css: { inlineSize: 200 } }} + > + { + if (source && destination) { + const items = euiDragDropReorder( + list, + source.index, + destination.index + ); + setList(items); + } + }} + > + {list.map(({ content, id }, idx) => ( + + {(provided, state) => ( + {content} + )} + + ))} + + + + ); +}; diff --git a/packages/eui/src-docs/src/views/drag_and_drop/in_popover.tsx b/packages/eui/src-docs/src/views/drag_and_drop/in_popover.tsx deleted file mode 100644 index 948808e24d0..00000000000 --- a/packages/eui/src-docs/src/views/drag_and_drop/in_popover.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { useState } from 'react'; -import { - EuiPopover, - EuiButton, - EuiPanel, - EuiDragDropContext, - EuiDraggable, - EuiDroppable, - euiDragDropReorder, -} from '../../../../src/components'; -import { htmlIdGenerator } from '../../../../src/services'; - -const makeId = htmlIdGenerator(); -const makeList = (number: number, start = 1) => - Array.from({ length: number }, (v, k) => k + start).map((el) => { - return { - content: `Item ${el}`, - id: makeId(), - }; - }); - -export default () => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const [list, setList] = useState(makeList(3)); - - return ( - setIsPopoverOpen(false)} - button={ - setIsPopoverOpen(!isPopoverOpen)}> - Toggle popover with drag and drop content - - } - panelPaddingSize="none" - panelProps={{ css: { inlineSize: 200 } }} - > - { - if (source && destination) { - const items = euiDragDropReorder( - list, - source.index, - destination.index - ); - setList(items); - } - }} - > - - {list.map(({ content, id }, idx) => ( - - {(provided, state) => ( - {content} - )} - - ))} - - - - ); -}; diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index f16b338e5ec..dbe3c0d14f1 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -50,7 +50,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-hasDragDrop-bottom" + class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-hasTransform" data-autofocus="true" data-popover-panel="true" role="dialog" diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index edd981362f8..a0f9485c137 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -50,7 +50,7 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasDragDrop-bottom" + class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasTransform" data-autofocus="true" data-popover-panel="true" role="dialog" diff --git a/packages/eui/src/components/datagrid/controls/column_selector.styles.ts b/packages/eui/src/components/datagrid/controls/column_selector.styles.ts index 99f4c070905..762f5adfc2c 100644 --- a/packages/eui/src/components/datagrid/controls/column_selector.styles.ts +++ b/packages/eui/src/components/datagrid/controls/column_selector.styles.ts @@ -9,7 +9,11 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../../services'; -import { euiYScroll, logicalCSS, mathWithUnits } from '../../../global_styling'; +import { + euiYScrollWithShadows, + logicalCSS, + mathWithUnits, +} from '../../../global_styling'; import { euiShadowLarge } from '../../../themes'; export const euiDataGridColumnSelectorStyles = ( @@ -22,7 +26,7 @@ export const euiDataGridColumnSelectorStyles = ( return { euiDataGridColumnSelector: css` - ${euiYScroll(euiThemeContext)} + ${euiYScrollWithShadows(euiThemeContext)} ${logicalCSS('max-height', maxResponsiveHeight)} padding: ${euiTheme.size.s}; `, diff --git a/packages/eui/src/components/datagrid/controls/column_selector.tsx b/packages/eui/src/components/datagrid/controls/column_selector.tsx index b8a8cce4e26..3299f7574ea 100644 --- a/packages/eui/src/components/datagrid/controls/column_selector.tsx +++ b/packages/eui/src/components/datagrid/controls/column_selector.tsx @@ -144,7 +144,6 @@ export const useDataGridColumnSelector = ( closePopover={() => setIsOpen(false)} anchorPosition="downLeft" panelPaddingSize="none" - hasDragDrop button={ {(provided, state) => (
{ }); describe('sort order', () => { - const mockDrag = (handle: HTMLElement, moveEvent: Partial) => { - fireEvent.mouseDown(handle); - fireEvent.mouseMove(handle, moveEvent); - fireEvent.mouseUp(handle); - }; - it('reorders sort on drag', () => { const { getByLabelText } = render(); openPopover(); - mockDrag(getByLabelText('Drag handle'), { clientX: 0, clientY: 5 }); + // we need to re-query the handle, otherwise the handle would not + // be available because the draggable item is portalled on drag + fireEvent.mouseDown(getByLabelText('Drag handle')); + fireEvent.mouseMove(getByLabelText('Drag handle'), { + clientX: 0, + clientY: 5, + }); + fireEvent.mouseUp(getByLabelText('Drag handle')); + expect(onSort).toHaveBeenCalledWith(defaultSort); }); @@ -134,7 +136,12 @@ describe('DataGridSortingControl', () => { const { getByLabelText } = render(); openPopover(); - mockDrag(getByLabelText('Drag handle'), {}); + const draggableItem = getByLabelText('Drag handle'); + + fireEvent.mouseDown(draggableItem); + fireEvent.mouseMove(draggableItem, {}); + fireEvent.mouseUp(draggableItem); + expect(onSort).not.toHaveBeenCalled(); }); }); diff --git a/packages/eui/src/components/datagrid/controls/column_sorting.tsx b/packages/eui/src/components/datagrid/controls/column_sorting.tsx index 5d2ce573b3b..ae821ae2a27 100644 --- a/packages/eui/src/components/datagrid/controls/column_sorting.tsx +++ b/packages/eui/src/components/datagrid/controls/column_sorting.tsx @@ -179,7 +179,6 @@ export const DataGridSortingControl: FunctionComponent = closePopover={() => setIsOpen(false)} anchorPosition="downLeft" panelPaddingSize="s" - hasDragDrop button={ {(provided, state) => ( diff --git a/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx b/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx index f9e0f09918f..943fdbf5723 100644 --- a/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx +++ b/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx @@ -7,15 +7,22 @@ */ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj, ReactRenderer } from '@storybook/react'; +import type { PlayFunctionContext } from '@storybook/csf'; +import { expect, fireEvent, waitFor } from '@storybook/test'; import type { DragDropContextProps } from '@hello-pangea/dnd'; import { enableFunctionToggleControls } from '../../../.storybook/utils'; +import { within } from '../../../.storybook/test'; +import { LOKI_SELECTORS } from '../../../.storybook/loki'; import { EuiPanel } from '../panel'; import { EuiDroppable } from './droppable'; import { EuiDraggable } from './draggable'; import { EuiDragDropContext } from './drag_drop_context'; +import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '../flyout'; +import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal'; +import { EuiTitle } from '../title'; const meta: Meta = { title: 'Display/EuiDragDropContext', @@ -25,10 +32,9 @@ const meta: Meta = { // EuiDragDropContext doesn't do anything visual, we're testing the // visual parts with the Drag and Drop components separately skip: true, - }, - codeSnippet: { - // TODO: enable once render functions are supported - skip: true, + codeSnippet: { + resolveStoryElementOnly: true, + }, }, }, }; @@ -64,3 +70,117 @@ export const Playground: Story = { ), }, }; + +export const WithinFlyouts: Story = { + tags: ['vrt-only'], + parameters: { + loki: { + skip: false, + chromeSelector: LOKI_SELECTORS.portal, + }, + }, + args: { + children: ( + + + {(_, state) => ( + + Draggable item 1 {state.isDragging && '✨'} + + )} + + + {(_, state) => ( + + Draggable item 2 {state.isDragging && '✨'} + + )} + + + ), + }, + render: (args) => , + play: async ({ canvasElement }: PlayFunctionContext) => { + const canvas = within(canvasElement); + + await waitFor(async () => { + expect(canvas.getByRole('dialog')).toBeInTheDocument(); + expect(canvas.getByRole('dialog')).toBeVisible(); + }); + + await setTimeout(async () => { + await waitFor(async () => { + await fireEvent.mouseDown(canvas.getByTestSubject('draggable-item-1')); + await fireEvent.mouseMove(canvas.getByTestSubject('draggable-item-1'), { + clientX: 0, + clientY: 5, + }); + + expect( + [...canvas.getByTestSubject('draggable-item-1').classList] + .join('') + .includes('isDragging') + ).toBe(true); + }); + }, 150); // add a timeout to prevent differences due to animation + }, +}; + +export const WithinModals: Story = { + tags: ['vrt-only'], + ...WithinFlyouts, + render: (args) => , +}; + +const VRTStory = ({ + type, + ...args +}: DragDropContextProps & { type: 'flyout' | 'modal' }) => { + if (type === 'flyout') { + return ( + {}} data-test-subj="flyoutDragDrop"> + + +

Drag & Drop inside a flyout

+
+
+ + + + + +
+ ); + } + + if (type === 'modal') { + return ( + {}}> + + +

Drag & Drop inside a modal

+
+
+ + + + + +
+ ); + } + + return null; +}; diff --git a/packages/eui/src/components/drag_and_drop/draggable.stories.tsx b/packages/eui/src/components/drag_and_drop/draggable.stories.tsx index b8a08fca957..b2457e3435f 100644 --- a/packages/eui/src/components/drag_and_drop/draggable.stories.tsx +++ b/packages/eui/src/components/drag_and_drop/draggable.stories.tsx @@ -52,6 +52,7 @@ const meta: Meta = { hasInteractiveChildren: false, isRemovable: false, spacing: 'none', + usePortal: false, }, }; hideStorybookControls(meta, ['style']); diff --git a/packages/eui/src/components/drag_and_drop/draggable.tsx b/packages/eui/src/components/drag_and_drop/draggable.tsx index a9fb66dacc5..1a45309cd3c 100644 --- a/packages/eui/src/components/drag_and_drop/draggable.tsx +++ b/packages/eui/src/components/drag_and_drop/draggable.tsx @@ -20,6 +20,7 @@ import { CommonProps } from '../common'; import { EuiDroppableContext, SPACINGS } from './droppable'; import { euiDraggableStyles, euiDraggableItemStyles } from './draggable.styles'; +import { EuiPortal } from '../portal'; export interface EuiDraggableProps extends CommonProps, @@ -42,6 +43,15 @@ export interface EuiDraggableProps * Whether the item is currently in a position to be removed */ isRemovable?: boolean; + /** + * Whether the currently dragged item is cloned into a portal in the body. This settings will + * ensure that drag & drop still works as expected within stacking contexts (e.g. within `EuiFlyout`, + * `EuiModal` and `EuiPopover`). + * + * Make sure to apply styles directly to the Draggable content as relative styling from an outside + * scope might not be applied when the content is placed in a portal as the DOM structure changes. + */ + usePortal?: boolean; /** * Adds padding to the draggable item */ @@ -55,6 +65,7 @@ export const EuiDraggable: FunctionComponent = ({ isDragDisabled = false, hasInteractiveChildren = false, isRemovable = false, + usePortal = false, index, children, className, @@ -94,7 +105,8 @@ export const EuiDraggable: FunctionComponent = ({ typeof children === 'function' ? (children(provided, snapshot, rubric) as ReactElement) : children; - return ( + + const content = ( <>
= ({ data-test-subj={dataTestSubj} className={classes} css={cssStyles} - style={{ ...style, ...provided.draggableProps.style }} + style={{ + ...style, + ...provided.draggableProps.style, + }} // We use [role="group"] instead of [role="button"] when we expect a nested // interactive element. Screen readers will cue users that this is a container // and has one or more elements inside that are part of a related group. @@ -141,6 +156,12 @@ export const EuiDraggable: FunctionComponent = ({ )} ); + + return isDragging && usePortal ? ( + {content} + ) : ( + content + ); }} ); diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx index 78c13b94226..d78b25eb1dd 100644 --- a/packages/eui/src/components/popover/popover.tsx +++ b/packages/eui/src/components/popover/popover.tsx @@ -177,6 +177,8 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps { /** * Must be set to true if using `EuiDragDropContext` within a popover, * otherwise your nested drag & drop will have incorrect positioning + * + * @deprecated - use `usePortal` prop on children `EuiDraggable` components instead. */ hasDragDrop?: boolean; /** diff --git a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx b/packages/website/docs/02_components/display/drag_and_drop/overview.mdx index 38f1890e25b..33597d24723 100644 --- a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx +++ b/packages/website/docs/02_components/display/drag_and_drop/overview.mdx @@ -126,20 +126,202 @@ the visual changes with drop-to-remove interactions. -## Kitchen sink - -**EuiDraggables** in **EuiDroppables**, **EuiDroppables** in **EuiDraggables**, custom drag handles, horizontal -movement, vertical movement, flexbox, panel inception, you name it. - - - -## Using drag and drop in popovers +## Portalled items **EuiDraggables** use fixed positioning to render and animate the item being dragged. This positioning logic does not work as expected when used inside of containers that have their own [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). -This behavior particularly affects [**EuiPopover**](#/layout/popover). If using drag and drop UX within a popover, -you **must** include the `` prop for items to properly render while being dragged. +To ensure dragging works as expected inside e.g. **EuiFlyout** or **EuiModal** use the prop `usePortal` on **EuiDraggable** components. +This will render the currently dragged element inside a portal appended to the document body (or wherever +**EuiPortal** is configured to `insert` to by default). + +:::warning +If the styling of the your draggable content is scoped to a parent component, the styling won't be applied +while dragging it when using `usePortal`. This is due to the portalled position in the DOM, which changes +previous hierarchical relations to other ancestor elements. To prevent this from happening, we recommend +applying styling from within the **EuiDraggable** scope without any parent selectors. +::: + +```tsx interactive +import React, { FunctionComponent, ReactElement, useState } from 'react'; +import { + EuiButton, + EuiCode, + EuiDragDropContext, + EuiDraggable, + EuiDroppable, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiModal, + EuiModalBody, + EuiModalHeader, + EuiPanel, + EuiSpacer, + EuiTitle, + euiDragDropReorder, + htmlIdGenerator +} from '@elastic/eui'; +import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd'; + +const makeId = htmlIdGenerator(); + +const makeList = (number, start = 1) => + Array.from({ length: number }, (v, k) => k + start).map((el) => { + return { + content: `Item ${el}`, + id: makeId(), + }; + }); + +const DragContainer: FunctionComponent<{ + children: ReactElement | ReactElement[] | DroppableProps['children']; + onDragEnd: OnDragEndResponder; +}> = ({ children, onDragEnd }) => ( + + + {children} + + +); + +export default () => { + const [isFlyoutOpen, setFlyoutOpen] = useState(false); + const [isModalOpen, setModalOpen] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const [list, setList] = useState(makeList(3)); + const onDragEnd = ({ source, destination }) => { + if (source && destination) { + const items = euiDragDropReorder(list, source.index, destination.index); + + setList(items); + } + }; + + return ( + <> + setFlyoutOpen(!isFlyoutOpen)}> + Toggle flyout + + + setModalOpen(!isModalOpen)}> + Toggle modal + + + {isFlyoutOpen && ( + setFlyoutOpen(false)}> + + +

+ Portalled EuiDraggable items +

+
+
+ + + {list.map(({ content, id }, idx) => ( + + {(provided, state) => ( + + {content} + {state.isDragging && ' ✨'} + + )} + + ))} + + +
+ )} + + {isModalOpen && ( + setModalOpen(false)}> + + +

+ Portalled EuiDraggable items +

+
+
+ + + {list.map(({ content, id }, idx) => ( + + {(provided, state) => ( + + {content} + {state.isDragging && ' ✨'} + + )} + + ))} + + +
+ )} + + + + setIsPopoverOpen(false)} + button={ + setIsPopoverOpen(!isPopoverOpen)}> + Toggle popover + + } + panelPaddingSize="none" + panelProps={{ css: { inlineSize: 200 } }} + > + { + if (source && destination) { + const items = euiDragDropReorder( + list, + source.index, + destination.index + ); + setList(items); + } + }} + > + {list.map(({ content, id }, idx) => ( + + {(provided, state) => ( + {content} + )} + + ))} + + + + ); +}; +``` + +## Kitchen sink - +**EuiDraggables** in **EuiDroppables**, **EuiDroppables** in **EuiDraggables**, custom drag handles, horizontal +movement, vertical movement, flexbox, panel inception, you name it. + +