From 6ba68fab9e5482a3ab2a92410ebb1b422db9ff9e Mon Sep 17 00:00:00 2001
From: Zach Plata <plata.zach@gmail.com>
Date: Tue, 12 Sep 2023 23:06:36 -0500
Subject: [PATCH] feature: Bump WASM dependency to support Rive Events

---
 examples/stories/StateMachineDocs.stories.mdx |  40 +++++++++++++++++-
 examples/stories/assets/rating_animation.riv  | Bin 0 -> 16099 bytes
 package.json                                  |   4 +-
 src/components/Rive.tsx                       |  14 ++++++
 4 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 examples/stories/assets/rating_animation.riv

diff --git a/examples/stories/StateMachineDocs.stories.mdx b/examples/stories/StateMachineDocs.stories.mdx
index b48d504..ab480eb 100644
--- a/examples/stories/StateMachineDocs.stories.mdx
+++ b/examples/stories/StateMachineDocs.stories.mdx
@@ -1,10 +1,14 @@
 <!-- RiveTestHook.stories.mdx -->
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-import RiveComponent, { useRive, useStateMachineInput } from '../../src';
+import RiveComponent, {
+  EventType,
+  useRive,
+  useStateMachineInput,
+} from '../../src';
 import { Button } from './components/Button';
 import './rive-overview.css';
 
@@ -160,3 +164,35 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg
     }}
   </Story>
 </Canvas>
+
+## Rive Events
+
+To listen for Rive Events reported during state machine play, use the `on` API to add an event listener.
+
+<Canvas withSource="open">
+  <Story name="Rive Events">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const { rive, RiveComponent } = useRive({
+        src: 'rating_animation.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        autoplay: true,
+        automaticallyHandleEvents: true,
+      });
+      useEffect(() => {
+        if (rive) {
+          rive.on(EventType.RiveEvent, onRiveEventReceived);
+        }
+      }, [rive]);
+      const onRiveEventReceived = (riveEvent) => {
+        console.log('Rive Event Fired', riveEvent);
+      };
+      return (
+        <div className="center">
+          <RiveComponent className="base-canvas-size" />
+          <p>Click on the 5 star!</p>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
diff --git a/examples/stories/assets/rating_animation.riv b/examples/stories/assets/rating_animation.riv
new file mode 100644
index 0000000000000000000000000000000000000000..36ac38020475c86bf7132d1b1eaf30c866c61457
GIT binary patch
literal 16099
zcmeHOdyJIT6~Eu?4(kgR(9#`3ml1>5vVbsbET}uPtRSSeO{8G@%4T2(*t+iG&LCi;
zZZTCtz^E1L0}cPQm1^2rO>9k!3nV@&v|3-SwiXK7{?SAeAF=*Xdd~0Od(Qp7nO&Dk
zEk!q(Z|?6t&b_~L&OP_>&0e}>`N9VC<I;iXV00*YJ$gHOFM2=PTxSN1F%#(XSrgTt
z_Lb85Y<quYMPISMtHGELI!@w;N!6#9R*L=Qv>9#8)g5D&-?6^K)YYHLnVqejt9$y^
zr=zjo`dVFn96zYiX&q*4I+cw~I$hWF;FQly%M9ci_DnP;+m5USZ#B1Pw(t4IZlG(o
zn+2Ka&C_;kg=@DDv{Tkk3a<LST>X`Ht?=NK?PrtF8@;@HcPA>4gxxBEy4aKGg2upY
zXbj`iFGf?3&>xW+?MRi^7W*$R6Rm;hm-%u0@U$8mS2g`;kj6EZKTQKq9B9uBK6zj_
zF>Y+U^ug&|bUJ?$MXxqK{WxV$;7`1Wax(l0a>u7%il%<>0S##urPifH-E*teU2nE7
zpw642?#b2ap4=3wdva5ix;abL&D9g?W}&KXREVn^5=7nTBCc+XLDc=SQ+KL<6x2OC
z9kF)z5=);kee9}LtMcRcLEKuvZALY>88L1%s=0BNa^va=ZY)%}p+cM+BnUTj5$A?6
z2)ExjyZQOCqF63<&Q4D!7W2Sjel?5vF&6WyS#XxJ;OYq$EL2&bLYxI82n%!(XMr&Y
zi)W&#=cIa%(A4-tH1!(u$Po$x)--cqtF3#)R&&x9$85D2ESFTXToPlsq?#pXDNC-N
zV97$2B`U;OLV~bF7jc#tgRtCJ%T~mPY_$w5mRGY_9%He*ngwSm3$C7E!9tY<D#Tep
zg0MgraTXYZu-GrQ`eVXYxpX9E%B5Gv%+v*frD}qu7{O9CLC#WwTs=XMg(^W*h!cba
zA&4&G1Th97_}f}$B0glME5V|_nniz%MSnF5&Qca!J;8#7DhpJIvw#F)fiB`KFa}}q
zJ2BHM2{X;LQ)+?OYHs?vn5_mP(EMIh&6D!N=uWUIydzJkqD6u$<%MKzl{i}~Md$)1
z)>JgpMfKTQW+Q53wr!TsO*IHnUPy>w6(Qs)A+$&kqP&ohtr90>r3fLw1R*q2LeGf>
zUrkuB)h=MXE3#3tHGOv!GvN-)_?{Y!DKBJ9u!=GAlrdT)7*k%z*j9-%wo-&KV1hB4
zDdXSQG9hy#8}71<ep-VO<%Nt0Rxv`JGD3?4BgzXI*(z~HR*EnJOfW(-W%Rt*@K4T$
z15tfLf3ectyLxuonCt3CS&)8&Hp#{e<jp3ka7C$HF0L+7=6liSXJ^Z_^UY^3Efsru
zHs-TSD$~l@)qTCa#q5ewwx|2@Qns?DSjp#&%AOOG{U~IcLQM9fB)ek{WS8^V#eKb{
za;0ZuOZGeK%9ZTu?yE}Kb!8G<%2Ekx&CFg#-B919t4h5nS=-m$TM2s2#d>`Vy%yrV
zK1RLH%Gq99vTN3@nVDTwD)o>$vfaI1rIp=f?zz&}RivR5`%BsNrI6R$SPz3%XYn2e
znb%y~!<pGjoO*gMFSle@tgBShYZYEhc18E<Y!@jyrp?w^uY1w!&UmkTsn;>Bw%3{2
zr9H)sXPWDy`jb}oRr>mgQrf&9jayTxtS!%<HH$N57T2zwWhSIwh^FwV=PVq3PES7>
zo&CbOv=2urZ;l+92B$b9-D1v2&!f*``YfYQ7k#dz&p<?vZT#55k6rvQrYW78MaQfH
zB^oI)P&hZDWV6qkhdjzz<`Y-?#J0$%cDdA~eD1qvU0B$&sWWdT8A6AawiPP#mlDe7
z?*Hb6g*Tp`kZ<4K)YoPvwQsp^DShS5Gretv`PV<o>D>MmZH2c_ewWj$#$4Z4D1QGr
z)akvft#I47-{kaN>o&F(I{y)o%=UHnz1C(XpVzQ(L-C5WJ*9bnPn{o`OfF?6wvIK;
z9S@~0N-g|zw204s1Yby96fGL}&$<E?j~l*tylK8DqAC~QxdG3IBYeGOzmC|i`%_fw
zfz%?>Aa{WtUyD5C9%(#{)FDai_&LMoj$iONV5{bir-Jm;w)W?!cE7EbTKE@kpp_=J
zma9t^AG|tGy)--4ZwcXdBjSHR;2qr8Enj^i@A!|X;xL+clgCCv92N9-P$2h4qnb{g
zjb?39H9AMJN>dB}D(Fjupf8kdh@opdI)&Ta$YfA;48vOlq9qw86!dF>XuDS++U^&4
zDvNqqAViUYLs9PtMCE@89L;Svvx{L=D7{r6L_H9PzY>VHdjz8LzBqg-4iAKIV(S=j
zP}U|5#43^!R)>^u3Zs<M6{Vb-DCJZ_DW?reIYm&)>3~v>FQpt+N;#I4as(;mxKYZ{
zqLgDqDMyA<j)(PCod@C-w5&CEv|FX#b?4U^IUm`-Z!4o^wk($`GwSr}M?3K!AoUnP
z^%y|)7(jIqKy?v7brC>y5kU0`K=lbg^$9@r2|)D;K=lbg^$9@r2|)D;f{1CKD%3lo
zk4pc!LNmD*QmT)C=aaKt;DyqH;FAeAN_a-h*qPkLK`^9?3al?A2ub$cLo60Z#R6(P
z+r-V(S#M{k&bpbQIxE`hkO1G20CodcR^Ppqq53XFsqdn#(gFOL#3WQ!SH77=spe6t
zu8g+o%7E(11jF#gvCXQ65>6|WI_|=kIE2^{Q`D_tE|U3(l*|2qgO`s;E|%RbmO)c>
z0YJ4mpxPWzZ4Rh52UH^is*wTJ$bf2OK(#8MS`|>O3aC~ERI3uK3Q(V_jGbUOm1S~^
zgAimlqwA^7h9LTg785p)nK6@F=|c}S_q$r&xe%0nmKh}EeH3Q`@lh&(KOVMwKCHTw
zr@@2{IbkpvWKrs81um_%ZO{;cDuJ`H0ChH$2F~_4mDbi=&FBH1LvDx?q&~JSkC^VL
z_brE|sb3lP@4JM($w!I1?!1$sj}mxWp)13xRX1?y!Fa$)IMDw=(7?tUkw(21&_`Bx
zG;yx$XUz$&vrMk5Dr(px>_a?z9~R#sgG)LQF0S+8f^@cZ0kxu-;gfdvgWPM7yM-%|
z1-QmdoF?^4ZC%FD!t36cO<dFatLw%4t1+9oR97{$g@e8>l6A-^)lhOfw+%uGLk%Uj
zG1O3kjx?0q%%!?+k>pytk>TSBN*xuF=2%e55ulVCJEhz>DdmPpDK|Pwxq(s2jfsXs
zR~t|-Jl)y_$)k=UI(<~{kfeGCRJ{ZGpzlJC#)+LARD95PA;)hnT*%oWTSkad69NV{
zV^L}|l&Z}D)n<TdGlIkKHI(-V!iH8p(Ug?Q(T$*<aQv>o#t6T{CoXwn2Fv8=zCF0!
z=^&d~f25yT@V1?&Dv}xm05u4l!WA_Lpj7pIDwnD=q7=>uqX2qmG^T+ot22&g=$+A+
zlNowvbfW^9H{2krr+HivL(XT+_7UtE-e6q~J$HE+aAegLplSn9wE?Kw095*bN*_?^
z11fz$A3xo+*10$s&P8{U@pI8#%J{kHPBJ5&izh7UOpfl@hn!n(6U|?GflNlo<X+@f
zvnXG0lCkx5H_0#gV!A_i_l~BWYCmN!TVM9YxQqQ8YZtA_(h=X2w|4UTp)&R3ugDun
zjNXu+Lo+tGARn?2mm(zGuxD^B%ts&+LE`<5cO9YTj(T0L&d}r})bzLA^&|zC-IQ%-
zg1zgG<p($2_FhKsm)#g}lX{vT5w2M$c!aWS41FPn<_5@y19w8Q0*Q&0MF}g05>^5w
zY-2aY-Dt?9%^fltAQ=sij0Q+X10<s%WY@D}Emd#0RI*-DxjbCYh_`Lt6Eea*k1#@+
zFhV<F1SE_IeKPdxkME&={YjkjNSUHq%v5z2KL3hpQ6{P#c$~^awSlvILbU3SH=$Pj
zfyH|*Z{tO^I1s36xlB}x<AA7kGna{KaTrjq^=AQRxf3=j$hI(4ux#~G3*%cR#uD~W
z1dnvece@Eu{vd}$r+l}UaLRXE38#FwlMv+xLGZuXN4Rd=WhhvaWu?P(v@4yg$h=V5
zWsnzSUfgKGof}(l{kw$5aE(OTy}PBQ&%LWolQeyE%j>efxE(<)zd*whEKA?Z+F|?G
zvTn>+8ifH~WsdQDu!uH!gt93fQM*_mw~dIutxpMCRs2IwQz9Q@6!}0RKd}1Iw;cKM
zCd~0lL`H@;A~G^8Z!)sv5_X(1AHl*Sq<8Y=tdJh$g-1xk)5V7T*4YKW<BYFg65QS~
zlhgIUUl@5ueO;p!ir{fh87^9hGInyba>{TQ8qNdUeMXC)34x~`TdBb*eTZ<3nSsNw
zm=tGWVS%Htm=q^r@ndS|6@%@_ac0-x6qU)z@rEOso^I&Mfn#m1My!>Sh(y`p&J8RU
z%EXUG8a={qMlv2D0G{PhG632}<TSQEC2Z9i0Z`<_0YyHL$Pe5~1K>zojywPgbG%*_
z`FOi5BSQd`ktGA*amL&SKnV!C?LN!_z=kp;`A#Oa@UW}d+~JhrVu4eJd!gc#;bMVP
zhKmI=yi){5JGN4Tn|;4I(KrYH*vk7?wI(C6Cd$;BT&C7c>}_o|sZqmyMbHQwcIdi^
z=tfru!9G(1n=rzCp)f+w6XCcm6h_Iw_VF<aVitv^Imxhu*RK+oC{XZ)32y)?G`X@`
zyE9e6-q5J=;PheP$X-C|IudvX%qY4HTzDjLM<b2QH~(7~{Z)&fbcb{S#t&Z5v!myZ
z1kS?lcM@(??nodO4#xOV<peL<{lwCEfpt;TZ+L$s9%y*)<Xp@1Lw#E#EVN-}B-*UL
z?UDYftQ3R<aw8uN*a|Kba1t-*=+r?;yq_bVvlaeFLzV+3yS_|#9+S*k?<1TkhISx4
zq|wShYBr`AiQ-#LzredI$Z&Qct#eC%g(~U|<_~^V>8$9d4O$HCuI>c;;qLlT<qR|3
zU|4^>HoOvLi6qT=Z}&^%@GWJxUF~w#qlRyOY|VellCGXoXX%Qym5oQ~0&uv!ZZk0a
zkoBj4dO`Y0Q+4Zkjr32kl~VT0#g%Ki>0do&n=fvO+<&E*d0V1}ONtvy{gi#-_9)Gd
z6op6nsxxh-{fE&gvxw$8r;OP}|Kj~fgp7OaKeJGF8rhF(HZ`a0I%Gel*>otS><HO|
znmvH*laRgFmOi1SJ28}c9?vL~x8tF7Wcm+8EeC0+SJApeXG4xQl(jg_qH$1GSC~a(
TpsWG<ul1lM@^-}XsM~)75F<Oi

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index 754983a..a0ce473 100644
--- a/package.json
+++ b/package.json
@@ -36,8 +36,8 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.3.1",
-    "@rive-app/webgl": "2.3.1"
+    "@rive-app/canvas": "2.4.0",
+    "@rive-app/webgl": "2.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
diff --git a/src/components/Rive.tsx b/src/components/Rive.tsx
index d6408ab..3211ad4 100644
--- a/src/components/Rive.tsx
+++ b/src/components/Rive.tsx
@@ -36,6 +36,18 @@ export interface RiveProps {
    * Specify whether to resize the canvas to its container automatically
    */
   shouldResizeCanvasToContainer?: boolean;
+  /**
+   * Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
+   * functionality that can be invoked implicitly when detected.
+   *
+   * For example, if during the render loop an OpenUrlEvent is detected, the
+   * browser may try to open the specified URL in the payload.
+   *
+   * This flag is false by default to prevent any unwanted behaviors from taking place.
+   * This means any special Rive Event will have to be handled manually by subscribing to
+   * EventType.RiveEvent
+   */
+  automaticallyHandleEvents?: boolean;
 }
 
 const Rive = ({
@@ -47,6 +59,7 @@ const Rive = ({
   useOffscreenRenderer = true,
   shouldDisableRiveListeners = false,
   shouldResizeCanvasToContainer = true,
+  automaticallyHandleEvents = false,
   children,
   ...rest
 }: RiveProps & ComponentProps<'canvas'>) => {
@@ -58,6 +71,7 @@ const Rive = ({
     stateMachines,
     autoplay: true,
     shouldDisableRiveListeners,
+    automaticallyHandleEvents,
   };
 
   const options = {