@infinityfx/lively 4.0.2 → 4.0.4

package/dist/animatable.js

@@ -1,3 +1,3 @@
 "use client";
-import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{createContext as r,useRef as t,use as i,useMemo as a,useCallback as o,useImperativeHandle as s,useEffect as u,useLayoutEffect as l,Children as c,isValidElement as d,cloneElement as m}from"react";import p from"./core/clip.js";import f from"./core/timeline.js";import{merge as h,pick as v,combineRefs as g}from"./core/utils.js";const y=r(null);function b(r){const b=t(null),j=t([]),x=i(y),w=r.inherit&&x?h({},r,v(x,["group","animations","triggers","animate","initial","stagger","staggerLimit","deform","disabled","paused"])):r,{id:O="",inherit:L,triggers:k=[],disabled:E,adaptive:z=!1,manual:A=!1,paused:C}=w,M=void 0!==r.order?r.order:(L&&(null==x?void 0:x.index)||0)+1,D=t([]),T=a((()=>{const e={animate:p.from(w.animate,w.initial)};for(const n in w.animations)e[n]=p.from(w.animations[n],w.initial);return e}),[]),V=t(new f(Object.assign(Object.assign({},w),{mountClips:k.reduce(((e,{name:n,on:r})=>("mount"===r&&e.push(T[n||"animate"]),e)),[])}))),q=o(((e,n={},t=1)=>{var i;const a=T[e];if(E||M>1&&t<2)return 0;h(n,{reverse:null==a?void 0:a.reverse});let o=0,s=n.delay||0,u=a?V.current.time(a):0;for(const r of j.current)(null===(i=r.current)||void 0===i?void 0:i.inherit)&&(o=Math.max(r.current.play(e,h({delay:s+u},n),t+1),o));const l=(n.reverse?o:s)*(M/t);return a&&V.current.add(a,h({delay:l},n)),r.onAnimationEnd&&setTimeout(r.onAnimationEnd.bind({},e),1e3*(u+l)),u+l}),[E,M]);function B(n,r={}){let t=0;for(let i of k){const{name:a,on:o}=i,s=e(i,["name","on"]);o===n&&(t=Math.max(q(a||"animate",h(s,r)),t))}return t}return s(g(b,r.ref),(()=>({play:q,trigger:B,timeline:V.current,children:j.current,inherit:L,adaptive:z,group:w.group,id:O})),[k]),u((()=>V.current.pause(!(!C&&!E))),[C,E]),u((()=>{for(let n=0;n<k.length;n++){let r=k[n],{name:t,on:i}=r,a=e(r,["name","on"]);if("string"==typeof i)continue;const o="boolean"==typeof i?i:i.called,s=D.current[n];void 0!==s&&o&&o!==s&&q(t||"animate",a),D.current[n]=o}}),[k]),l((()=>{const e=()=>V.current.cache();return V.current.link(w.animate),window.addEventListener("resize",e),null==x||x.add(b),document.fonts.ready.then((()=>{A||V.current.mounted||B("mount"),V.current.mounted=!0})),()=>{window.removeEventListener("resize",e),V.current.unlink(),null==x||x.remove(b)}}),[]),n(y,{value:Object.assign(Object.assign({},r.passthrough?x:Object.assign({index:M},w)),{add:e=>{r.passthrough&&(null==x||x.add(e)),j.current.includes(e)||j.current.push(e)},remove:e=>{r.passthrough&&(null==x||x.remove(e));const n=j.current.indexOf(e)||-1;n>=0&&j.current.splice(n,1)}}),children:c.map(r.children,(e=>d(e)?m(e,{ref:g((e=>V.current.insert(e)),e.props.ref),pathLength:1,style:h({backfaceVisibility:"hidden",willChange:"transform"},e.props.style,T.animate.initial,{strokeDasharray:1}),"data-lively-offset-boundary":!(!["x","y"].some((e=>{var n;return null===(n=r.cachable)||void 0===n?void 0:n.includes(e)}))&&void 0!==r.cachable)||void 0}):e))})}b.isLively=!0;export{y as AnimatableContext,b as default};
+import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{createContext as r,useRef as t,use as i,useMemo as a,useCallback as o,useImperativeHandle as s,useEffect as u,useLayoutEffect as l,Children as c,isValidElement as d,cloneElement as m}from"react";import p from"./core/clip.js";import f from"./core/timeline.js";import{merge as h,pick as v,combineRefs as g}from"./core/utils.js";const y=r(null);function b(r){const b=t(null),j=t([]),x=i(y),w=r.inherit&&x?h({},r,v(x,["group","animations","triggers","animate","initial","stagger","staggerLimit","deform","disabled","paused"])):r,{id:O="",inherit:L,triggers:k=[],disabled:E,adaptive:z=!1,manual:A=!1,paused:C}=w,M=void 0!==r.order?r.order:(L&&(null==x?void 0:x.index)||-1)+1,D=t([]),T=a((()=>{const e={animate:p.from(w.animate,w.initial)};for(const n in w.animations)e[n]=p.from(w.animations[n],w.initial);return e}),[]),V=t(new f(Object.assign(Object.assign({},w),{mountClips:k.reduce(((e,{name:n,on:r})=>("mount"===r&&e.push(T[n||"animate"]),e)),[])}))),q=o(((e,n={},t=1)=>{var i;const a=T[e];if(E||L&&t<2)return 0;h(n,{reverse:null==a?void 0:a.reverse});let o=0,s=n.delay||0,u=a?V.current.time(a):0;for(const r of j.current)(null===(i=r.current)||void 0===i?void 0:i.inherit)&&(o=Math.max(r.current.play(e,h({delay:s+u},n),t+1),o));const l=(n.reverse?o:s)*(M/t+1/t);return a&&V.current.add(a,h({delay:l},n)),r.onAnimationEnd&&setTimeout(r.onAnimationEnd.bind({},e),1e3*(u+l)),u+l}),[E,L,M]);function B(n,r={}){let t=0;for(let i of k){const{name:a,on:o}=i,s=e(i,["name","on"]);o===n&&(t=Math.max(q(a||"animate",h(s,r)),t))}return t}return s(g(b,r.ref),(()=>({play:q,trigger:B,timeline:V.current,children:j.current,inherit:L,adaptive:z,group:w.group,id:O})),[k]),u((()=>V.current.pause(!(!C&&!E))),[C,E]),u((()=>{for(let n=0;n<k.length;n++){let r=k[n],{name:t,on:i}=r,a=e(r,["name","on"]);if("string"==typeof i)continue;const o="boolean"==typeof i?i:i.called,s=D.current[n];void 0!==s&&o&&o!==s&&q(t||"animate",a),D.current[n]=o}}),[k]),l((()=>{const e=()=>V.current.cache();return V.current.link(w.animate),window.addEventListener("resize",e),null==x||x.add(b),document.fonts.ready.then((()=>{A||V.current.mounted||B("mount"),V.current.mounted=!0})),()=>{window.removeEventListener("resize",e),V.current.unlink(),null==x||x.remove(b)}}),[]),n(y,{value:Object.assign(Object.assign({},r.passthrough?x:Object.assign({index:M},w)),{add:e=>{r.passthrough&&(null==x||x.add(e)),j.current.includes(e)||j.current.push(e)},remove:e=>{r.passthrough&&(null==x||x.remove(e));const n=j.current.indexOf(e)||-1;n>=0&&j.current.splice(n,1)}}),children:c.map(r.children,(e=>d(e)?m(e,{ref:g((e=>V.current.insert(e)),e.props.ref),pathLength:1,style:h({backfaceVisibility:"hidden",willChange:"transform"},e.props.style,T.animate.initial,{strokeDasharray:1}),"data-lively-offset-boundary":!(!["x","y"].some((e=>{var n;return null===(n=r.cachable)||void 0===n?void 0:n.includes(e)}))&&void 0!==r.cachable)||void 0}):e))})}b.isLively=!0;export{y as AnimatableContext,b as default};
 //# sourceMappingURL=animatable.js.map

package/dist/layout/layout-group.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as n,useLayoutEffect as t,Children as i,isValidElement as o,cloneElement as c}from"react";import u from"../animatable.js";import{Groups as d}from"./morph.js";function s(e,r,n=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const i=[...n,e];let o=r(t[e],i);if(o||(o=s(t[e].nodes,r,i)),o)return o}}function l(e,r){return s(e,((e,n)=>{if(e.key===r)return n}))||null}function a(e,r){let n=e[r[0]];for(let e=1;e<r.length&&n;e++)n=n.nodes[r[e]];return n}function m(e,r,n,t){var i;const o=r[r.length-1],c=r.length>1?null===(i=a(e,r.slice(0,-1)))||void 0===i?void 0:i.nodes:e;c&&(t?c.splice(o,n,t):c.splice(o,n))}function p({tree:e,nodes:r,mounting:n,partialIndex:t=[],keys:u=new Set,parent:d=["",0]}){return i.forEach(r,((r,i)=>{const s=o(r),m=s&&(Array.isArray(r.props.children)||o(r.props.children)),h=s&&r.type.isLively&&"id"in r.props,f=(s&&r.props.cachable||[0]).length,g=[...t,i],v=m&&!r.type.isLively?c(r,void 0,[]):r,[y,k]=d,x=h?r.props.id:`$l.${y?y+".":""}${g.slice(-k).join("")}`,w=l(e,x),j=w?a(e,w):void 0;j&&(h||j.key.startsWith("$l."))?j.node=v:n.set(x,{node:v,index:g}),m&&f&&p({tree:e,nodes:r.props.children,mounting:n,partialIndex:g,keys:u,parent:h?[x,1]:k?[y,k+1]:void 0}),u.add(x)})),u}function h(e){const r=e.map((e=>o(e.node)?e.nodes.length?c(e.node,{key:e.key},h(e.nodes)):c(e.node,{key:e.key}):e.node));return r.length>1?r:r[0]}function f({children:i,transition:o,initialMount:c=!0}){var a;const f=r(!c),g=r(null),[v,y]=n({}),k=r([]),x=r(new Map),w=r(void 0),j=r(0),E=r(new Set),$=p({tree:k.current,nodes:i,mounting:x.current});if(x.current.forEach(((e,r)=>{$.has(r)||x.current.delete(r)})),s(k.current,(e=>{$.has(e.key)||E.current.add(e.key)})),E.current.size&&g.current){for(const e of g.current.children){const r=null===(a=e.current)||void 0===a?void 0:a.id,n=E.current.has(r);if(e.current)if(n&&$.has(r))E.current.delete(r),e.current.trigger("mount",{immediate:!0}),e.current.timeline.mounted=!0;else if(n&&e.current.timeline.mounted){const r=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(j.current=Math.max(j.current,r),e.current.group){const r=d[e.current.group].get(e.current.timeline);r&&(r.state="unmounted")}e.current.timeline.mounted=!1}}const e=j.current-Date.now();clearTimeout(w.current);const r=(e=!0)=>{E.current.forEach((e=>{const r=l(k.current,e);r&&m(k.current,r,1)})),E.current.clear(),e&&y({})};e>0?w.current=setTimeout(r,e):r(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:r},n)=>{m(k.current,r,0,{key:n,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(!g.current)return;let r,n=g.current.children.slice();for(;r=n.pop();)f.current&&r.current&&(r.current.timeline.mounted=!0),(null===(e=r.current)||void 0===e?void 0:e.id)&&r.current.timeline.mounted&&r.current.adaptive&&null!==l(k.current,r.current.id)&&(r.current.timeline.transition(void 0,o),n.push(...r.current.children));f.current=!1})),e(u,{ref:g,passthrough:!0,cachable:[],children:h(k.current)})}export{f as default};
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as n,useLayoutEffect as t,Children as i,isValidElement as o,cloneElement as c}from"react";import u from"../animatable.js";import{Groups as s}from"./morph.js";function d(e,r,n=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const i=[...n,e];let o=r(t[e],i);if(o||(o=d(t[e].nodes,r,i)),o)return o}}function l(e,r){return d(e,((e,n)=>{if(e.key===r)return n}))||null}function a(e,r){let n=e[r[0]];for(let e=1;e<r.length&&n;e++)n=n.nodes[r[e]];return n}function m(e,r,n,t){var i;const o=r[r.length-1],c=r.length>1?null===(i=a(e,r.slice(0,-1)))||void 0===i?void 0:i.nodes:e;c&&(t?c.splice(o,n,t):c.splice(o,n))}function p({tree:e,nodes:r,mounting:n,partialIndex:t=[],keys:u=new Set,parent:s=["",0]}){return i.forEach(r,((r,i)=>{const d=o(r),f=d&&(Array.isArray(r.props.children)||o(r.props.children)),h=d&&r.type.isLively&&"id"in r.props,y=d&&(!r.type.isLively||r.props.traverseLayout),v=[...t,i],g=f&&!r.type.isLively?c(r,void 0,[]):r,[k,x]=s,j=h?r.props.id:`$l.${k?k+".":""}${v.slice(-x).join("")}`,w=l(e,j),E=w?a(e,w):void 0;E&&(h||E.key.startsWith("$l."))?(w&&w.join("")!==v.join("")&&(m(e,w,1),m(e,v,0,E)),E.node=g):n.set(j,{node:g,index:v}),f&&y&&p({tree:e,nodes:r.props.children,mounting:n,partialIndex:v,keys:u,parent:h?[j,1]:x?[k,x+1]:void 0}),u.add(j)})),u}function f(e){const r=e.map((e=>o(e.node)?e.nodes.length?c(e.node,{key:e.key},f(e.nodes)):c(e.node,{key:e.key}):e.node));return r.length>1?r:r[0]}function h({children:i,transition:o,initialMount:c=!0}){var a;const h=r(!c),y=r(null),[v,g]=n({}),k=r([]),x=r(new Map),j=r(void 0),w=r(0),E=r(new Set),L=p({tree:k.current,nodes:i,mounting:x.current});if(x.current.forEach(((e,r)=>{L.has(r)||x.current.delete(r)})),d(k.current,(e=>{L.has(e.key)||E.current.add(e.key)})),E.current.size&&y.current){for(const e of y.current.children){const r=null===(a=e.current)||void 0===a?void 0:a.id,n=E.current.has(r);if(e.current)if(n&&L.has(r))E.current.delete(r),e.current.trigger("mount",{immediate:!0}),e.current.timeline.mounted=!0;else if(n&&e.current.timeline.mounted){const r=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(w.current=Math.max(w.current,r),e.current.group){const r=s[e.current.group].get(e.current.timeline);r&&(r.state="unmounted")}e.current.timeline.mounted=!1}}const e=w.current-Date.now();clearTimeout(j.current);const r=(e=!0)=>{E.current.forEach((e=>{const r=l(k.current,e);r&&m(k.current,r,1)})),E.current.clear(),e&&g({})};e>0?j.current=setTimeout(r,e):r(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:r},n)=>{m(k.current,r,0,{key:n,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(!y.current)return;let r,n=y.current.children.slice();for(;r=n.pop();)h.current&&r.current&&(r.current.timeline.mounted=!0),(null===(e=r.current)||void 0===e?void 0:e.id)&&r.current.timeline.mounted&&r.current.adaptive&&null!==l(k.current,r.current.id)&&(r.current.timeline.transition(void 0,o),n.push(...r.current.children));h.current=!1})),e(u,{ref:y,passthrough:!0,cachable:[],children:f(k.current)})}export{h as default};
 //# sourceMappingURL=layout-group.js.map

package/dist/types/animatable.d.ts

@@ -87,6 +87,12 @@ export type AnimatableProps<T extends string = any> = {
      */
     manual?: boolean;
     onAnimationEnd?: (animation: T | 'animate') => void;
+    /**
+     * Whether to observe layout changes within children, when this component is a child of a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group).
+     *
+     * @default false
+     */
+    traverseLayout?: boolean;
 } & SharedProps<T>;
 type AnimatableContext = {
     index?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/lively",
-	"version": "4.0.2",
+	"version": "4.0.4",
 	"type": "module",
 	"description": "Feature complete, lightweight react animation library.",
 	"main": "dist/index.js",