@hanzogui/animate-presence 8.3.0 → 8.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AnimatePresence.js +161 -0
- package/dist/cjs/AnimatePresence.js.map +1 -0
- package/dist/cjs/LayoutGroupContext.js +7 -0
- package/dist/cjs/LayoutGroupContext.js.map +1 -0
- package/dist/cjs/PresenceChild.js +60 -0
- package/dist/cjs/PresenceChild.js.map +1 -0
- package/dist/cjs/index.js +8 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/package.json +1 -0
- package/dist/cjs/types.js +3 -0
- package/dist/cjs/types.js.map +1 -0
- package/dist/esm/AnimatePresence.js +157 -0
- package/dist/esm/AnimatePresence.js.map +1 -0
- package/dist/esm/LayoutGroupContext.js +3 -0
- package/dist/esm/LayoutGroupContext.js.map +1 -0
- package/dist/esm/PresenceChild.js +56 -0
- package/dist/esm/PresenceChild.js.map +1 -0
- package/dist/esm/index.js +5 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.js +2 -0
- package/dist/esm/types.js.map +1 -0
- package/package.json +19 -19
- package/src/AnimatePresence.tsx +3 -3
- package/src/PresenceChild.tsx +1 -1
- package/src/index.ts +3 -3
- package/types/AnimatePresence.d.ts +1 -1
- package/types/AnimatePresence.d.ts.map +1 -1
- package/types/PresenceChild.d.ts +2 -2
- package/types/PresenceChild.d.ts.map +1 -1
- package/types/index.d.ts +3 -3
- package/types/index.d.ts.map +1 -1
- package/dist/cjs/AnimatePresence.cjs +0 -149
- package/dist/cjs/AnimatePresence.native.js +0 -166
- package/dist/cjs/AnimatePresence.native.js.map +0 -1
- package/dist/cjs/LayoutGroupContext.cjs +0 -40
- package/dist/cjs/LayoutGroupContext.native.js +0 -43
- package/dist/cjs/LayoutGroupContext.native.js.map +0 -1
- package/dist/cjs/PresenceChild.cjs +0 -101
- package/dist/cjs/PresenceChild.native.js +0 -128
- package/dist/cjs/PresenceChild.native.js.map +0 -1
- package/dist/cjs/index.cjs +0 -23
- package/dist/cjs/index.native.js +0 -26
- package/dist/cjs/index.native.js.map +0 -1
- package/dist/cjs/types.cjs +0 -18
- package/dist/cjs/types.native.js +0 -21
- package/dist/cjs/types.native.js.map +0 -1
- package/dist/esm/AnimatePresence.mjs +0 -124
- package/dist/esm/AnimatePresence.mjs.map +0 -1
- package/dist/esm/AnimatePresence.native.js +0 -138
- package/dist/esm/AnimatePresence.native.js.map +0 -1
- package/dist/esm/LayoutGroupContext.mjs +0 -4
- package/dist/esm/LayoutGroupContext.mjs.map +0 -1
- package/dist/esm/LayoutGroupContext.native.js +0 -4
- package/dist/esm/LayoutGroupContext.native.js.map +0 -1
- package/dist/esm/PresenceChild.mjs +0 -65
- package/dist/esm/PresenceChild.mjs.map +0 -1
- package/dist/esm/PresenceChild.native.js +0 -89
- package/dist/esm/PresenceChild.native.js.map +0 -1
- package/dist/esm/index.mjs +0 -5
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js +0 -5
- package/dist/esm/index.native.js.map +0 -1
- package/dist/esm/types.mjs +0 -2
- package/dist/esm/types.mjs.map +0 -1
- package/dist/esm/types.native.js +0 -2
- package/dist/esm/types.native.js.map +0 -1
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AnimatePresence = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const use_constant_1 = require("@hanzogui/use-constant");
|
|
7
|
+
const use_force_update_1 = require("@hanzogui/use-force-update");
|
|
8
|
+
const react_2 = require("react");
|
|
9
|
+
const LayoutGroupContext_tsx_1 = require("./LayoutGroupContext.js");
|
|
10
|
+
const PresenceChild_tsx_1 = require("./PresenceChild.js");
|
|
11
|
+
const getChildKey = (child) => {
|
|
12
|
+
return (child.key ||
|
|
13
|
+
(() => {
|
|
14
|
+
// we can help a bit by falling back to hanzogui name or component name
|
|
15
|
+
const ct = child.type;
|
|
16
|
+
const defaultName = ct['displayName'] || ct['name'] || '';
|
|
17
|
+
if (ct && typeof ct === 'object' && 'staticConfig' in ct) {
|
|
18
|
+
// @ts-expect-error
|
|
19
|
+
return ct.staticConfig.componentName || defaultName;
|
|
20
|
+
}
|
|
21
|
+
return defaultName;
|
|
22
|
+
})());
|
|
23
|
+
};
|
|
24
|
+
function onlyElements(children) {
|
|
25
|
+
const filtered = [];
|
|
26
|
+
// We use forEach here instead of map as map mutates the component key by preprending `.$`
|
|
27
|
+
react_2.Children.forEach(children, (child) => {
|
|
28
|
+
if ((0, react_2.isValidElement)(child))
|
|
29
|
+
filtered.push(child);
|
|
30
|
+
});
|
|
31
|
+
return filtered;
|
|
32
|
+
}
|
|
33
|
+
const AnimatePresence = ({ children, enterVariant, exitVariant, enterExitVariant, initial = true, onExitComplete, exitBeforeEnter, mode, presenceAffectsLayout = true, custom, passThrough, }) => {
|
|
34
|
+
// Determine effective mode: mode prop takes precedence, then exitBeforeEnter for backwards compatibility
|
|
35
|
+
const effectiveMode = mode ?? (exitBeforeEnter ? 'wait' : 'sync');
|
|
36
|
+
/**
|
|
37
|
+
* Filter any children that aren't ReactElements. We can only track components
|
|
38
|
+
* between renders with a props.key.
|
|
39
|
+
* IMPORTANT: useMemo ensures reference stability for the comparison below
|
|
40
|
+
*/
|
|
41
|
+
const presentChildren = (0, react_2.useMemo)(() => onlyElements(children), [children]);
|
|
42
|
+
/**
|
|
43
|
+
* Track the keys of the currently rendered children.
|
|
44
|
+
*/
|
|
45
|
+
const presentKeys = presentChildren.map(getChildKey);
|
|
46
|
+
/**
|
|
47
|
+
* If `initial={false}` we only want to pass this to components in the first render.
|
|
48
|
+
*/
|
|
49
|
+
const isInitialRender = (0, react_2.useRef)(true);
|
|
50
|
+
/**
|
|
51
|
+
* Freeze custom prop for exiting children so direction doesn't reverse mid-exit.
|
|
52
|
+
*/
|
|
53
|
+
const frozenCustomRef = (0, react_2.useRef)(new Map());
|
|
54
|
+
/**
|
|
55
|
+
* A ref containing the currently present children. When all exit animations
|
|
56
|
+
* are complete, we use this to re-render with the latest children *committed*
|
|
57
|
+
* rather than the latest children *rendered*.
|
|
58
|
+
*/
|
|
59
|
+
const pendingPresentChildren = (0, react_2.useRef)(presentChildren);
|
|
60
|
+
/**
|
|
61
|
+
* Track which exiting children have finished animating out.
|
|
62
|
+
*/
|
|
63
|
+
const exitComplete = (0, use_constant_1.useConstant)(() => new Map());
|
|
64
|
+
/**
|
|
65
|
+
* Save children to render as React state. To ensure this component is concurrent-safe,
|
|
66
|
+
* we check for exiting children via an effect.
|
|
67
|
+
*/
|
|
68
|
+
const [diffedChildren, setDiffedChildren] = (0, react_2.useState)(presentChildren);
|
|
69
|
+
const [renderedChildren, setRenderedChildren] = (0, react_2.useState)(presentChildren);
|
|
70
|
+
/**
|
|
71
|
+
* If we've been provided a forceRender function by the LayoutGroupContext,
|
|
72
|
+
* we can use it to force a re-render amongst all surrounding components once
|
|
73
|
+
* all components have finished animating out.
|
|
74
|
+
*/
|
|
75
|
+
const forceRender = (0, react_2.useContext)(LayoutGroupContext_tsx_1.LayoutGroupContext).forceRender ?? (0, use_force_update_1.useForceUpdate)();
|
|
76
|
+
if (passThrough) {
|
|
77
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
|
|
78
|
+
}
|
|
79
|
+
// useInsertionEffect runs before ALL useLayoutEffects (including children's)
|
|
80
|
+
// this ensures pendingPresentChildren and exitComplete are set before
|
|
81
|
+
// animation drivers call sendExitComplete() in their layout effects
|
|
82
|
+
// (critical for immediate completions like animateOnly=[])
|
|
83
|
+
(0, react_1.useInsertionEffect)(() => {
|
|
84
|
+
isInitialRender.current = false;
|
|
85
|
+
pendingPresentChildren.current = presentChildren;
|
|
86
|
+
/**
|
|
87
|
+
* Update complete status of exiting children.
|
|
88
|
+
*/
|
|
89
|
+
for (let i = 0; i < renderedChildren.length; i++) {
|
|
90
|
+
const key = getChildKey(renderedChildren[i]);
|
|
91
|
+
if (!presentKeys.includes(key)) {
|
|
92
|
+
if (exitComplete.get(key) !== true) {
|
|
93
|
+
exitComplete.set(key, false);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
else {
|
|
97
|
+
exitComplete.delete(key);
|
|
98
|
+
frozenCustomRef.current.delete(key);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}, [renderedChildren, presentKeys.length, presentKeys.join('-')]);
|
|
102
|
+
if (presentChildren !== diffedChildren) {
|
|
103
|
+
let nextChildren = [...presentChildren];
|
|
104
|
+
/**
|
|
105
|
+
* Loop through all the currently rendered components and decide which
|
|
106
|
+
* are exiting.
|
|
107
|
+
*/
|
|
108
|
+
for (let i = 0; i < renderedChildren.length; i++) {
|
|
109
|
+
const child = renderedChildren[i];
|
|
110
|
+
const key = getChildKey(child);
|
|
111
|
+
if (!presentKeys.includes(key)) {
|
|
112
|
+
nextChildren.splice(i, 0, child);
|
|
113
|
+
// freeze custom at the moment of exit so direction doesn't reverse
|
|
114
|
+
if (!frozenCustomRef.current.has(key)) {
|
|
115
|
+
frozenCustomRef.current.set(key, custom);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* If we're in "wait" mode, and we have exiting children, we want to
|
|
121
|
+
* only render these until they've all exited.
|
|
122
|
+
*/
|
|
123
|
+
const exitingChildren = renderedChildren.filter((child) => !presentKeys.includes(getChildKey(child)));
|
|
124
|
+
if (effectiveMode === 'wait' && exitingChildren.length) {
|
|
125
|
+
nextChildren = exitingChildren;
|
|
126
|
+
}
|
|
127
|
+
setRenderedChildren(onlyElements(nextChildren));
|
|
128
|
+
setDiffedChildren(presentChildren);
|
|
129
|
+
/**
|
|
130
|
+
* Early return to ensure once we've set state with the latest diffed
|
|
131
|
+
* children, we can immediately re-render.
|
|
132
|
+
*/
|
|
133
|
+
return null;
|
|
134
|
+
}
|
|
135
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedChildren.map((child) => {
|
|
136
|
+
const key = getChildKey(child);
|
|
137
|
+
const isPresent = presentChildren === renderedChildren || presentKeys.includes(key);
|
|
138
|
+
const onExit = () => {
|
|
139
|
+
if (exitComplete.has(key)) {
|
|
140
|
+
exitComplete.set(key, true);
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
let isEveryExitComplete = true;
|
|
146
|
+
exitComplete.forEach((isExitComplete) => {
|
|
147
|
+
if (!isExitComplete)
|
|
148
|
+
isEveryExitComplete = false;
|
|
149
|
+
});
|
|
150
|
+
if (isEveryExitComplete) {
|
|
151
|
+
forceRender?.();
|
|
152
|
+
setRenderedChildren(pendingPresentChildren.current);
|
|
153
|
+
onExitComplete?.();
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
return ((0, jsx_runtime_1.jsx)(PresenceChild_tsx_1.PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial ? undefined : false, custom: isPresent ? custom : (frozenCustomRef.current.get(key) ?? custom), presenceAffectsLayout: presenceAffectsLayout, enterExitVariant: enterExitVariant, enterVariant: enterVariant, exitVariant: exitVariant, onExitComplete: isPresent ? undefined : onExit, children: child }, key));
|
|
157
|
+
}) }));
|
|
158
|
+
};
|
|
159
|
+
exports.AnimatePresence = AnimatePresence;
|
|
160
|
+
exports.AnimatePresence.displayName = 'AnimatePresence';
|
|
161
|
+
//# sourceMappingURL=AnimatePresence.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatePresence.js","sourceRoot":"","sources":["../../src/AnimatePresence.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.LayoutGroupContext = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
+
exports.LayoutGroupContext = react_1.default.createContext({});
|
|
7
|
+
//# sourceMappingURL=LayoutGroupContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutGroupContext.js","sourceRoot":"","sources":["../../src/LayoutGroupContext.tsx"],"names":[],"mappings":";;;;AAAA,0DAAyB;AAOZ,QAAA,kBAAkB,GAAG,eAAK,CAAC,aAAa,CAA0B,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PresenceChild = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const use_constant_1 = require("@hanzogui/use-constant");
|
|
7
|
+
const use_presence_1 = require("@hanzogui/use-presence");
|
|
8
|
+
const React = tslib_1.__importStar(require("react"));
|
|
9
|
+
const react_1 = require("react");
|
|
10
|
+
// this memo seems to help PopoverContent from continuously re-rendering when open
|
|
11
|
+
exports.PresenceChild = React.memo(({ children, initial, isPresent, onExitComplete, exitVariant, enterVariant, enterExitVariant, presenceAffectsLayout, custom, }) => {
|
|
12
|
+
const presenceChildren = (0, use_constant_1.useConstant)(newChildrenMap);
|
|
13
|
+
const id = (0, react_1.useId)() || '';
|
|
14
|
+
const context = React.useMemo(() => {
|
|
15
|
+
return {
|
|
16
|
+
id,
|
|
17
|
+
initial,
|
|
18
|
+
isPresent,
|
|
19
|
+
custom,
|
|
20
|
+
exitVariant,
|
|
21
|
+
enterVariant,
|
|
22
|
+
enterExitVariant,
|
|
23
|
+
onExitComplete: () => {
|
|
24
|
+
presenceChildren.set(id, true);
|
|
25
|
+
for (const isComplete of presenceChildren.values()) {
|
|
26
|
+
if (!isComplete) {
|
|
27
|
+
return; // can stop searching when any is incomplete
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
onExitComplete?.();
|
|
31
|
+
},
|
|
32
|
+
register: () => {
|
|
33
|
+
presenceChildren.set(id, false);
|
|
34
|
+
return () => presenceChildren.delete(id);
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
},
|
|
38
|
+
/**
|
|
39
|
+
* If the presence of a child affects the layout of the components around it,
|
|
40
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
41
|
+
* so they can detect that layout change.
|
|
42
|
+
*/
|
|
43
|
+
// @ts-expect-error its ok
|
|
44
|
+
presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]);
|
|
45
|
+
React.useMemo(() => {
|
|
46
|
+
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
|
47
|
+
}, [isPresent]);
|
|
48
|
+
/**
|
|
49
|
+
* If there's no animated components to fire exit animations, we want to remove this
|
|
50
|
+
* component immediately.
|
|
51
|
+
*/
|
|
52
|
+
React.useEffect(() => {
|
|
53
|
+
!isPresent && !presenceChildren.size && onExitComplete?.();
|
|
54
|
+
}, [isPresent]);
|
|
55
|
+
return (0, jsx_runtime_1.jsx)(use_presence_1.PresenceContext.Provider, { value: context, children: children });
|
|
56
|
+
});
|
|
57
|
+
function newChildrenMap() {
|
|
58
|
+
return new Map();
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=PresenceChild.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresenceChild.js","sourceRoot":"","sources":["../../src/PresenceChild.tsx"],"names":[],"mappings":";;;;;AAAA,yDAAoD;AACpD,yDAAwD;AAExD,MAAY,KAAK,0CAAa;AAC9B,iCAA6B;AAgB7B,kFAAkF;AACrE,QAAA,aAAa,GAAG,KAAK,CAAC,IAAI,CACrC,CAAC,EACC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,MAAM,GACa,EAAE,EAAE;IACvB,MAAM,gBAAgB,GAAG,IAAA,0BAAW,EAAC,cAAc,CAAC,CAAA;IACpD,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,IAAI,EAAE,CAAA;IAExB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAyB,EAAE;QACzB,OAAO;YACL,EAAE;YACF,OAAO;YACP,SAAS;YACT,MAAM;YACN,WAAW;YACX,YAAY;YACZ,gBAAgB;YAChB,cAAc,EAAE,GAAG,EAAE;gBACnB,gBAAgB,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;gBAC9B,KAAK,MAAM,UAAU,IAAI,gBAAgB,CAAC,MAAM,EAAE,EAAE,CAAC;oBACnD,IAAI,CAAC,UAAU,EAAE,CAAC;wBAChB,OAAM,CAAC,4CAA4C;oBACrD,CAAC;gBACH,CAAC;gBACD,cAAc,EAAE,EAAE,CAAA;YACpB,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,gBAAgB,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;gBAC/B,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;YAC1C,CAAC;SACF,CAAA;IACH,CAAC;IACD;;;;OAIG;IAEH,0BAA0B;IAC1B,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,CAC3E,CAAA;IAED,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjB,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;IACxE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf;;;OAGG;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,CAAC,SAAS,IAAI,CAAC,gBAAgB,CAAC,IAAI,IAAI,cAAc,EAAE,EAAE,CAAA;IAC5D,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,uBAAC,8BAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA4B,CAAA;AACxF,CAAC,CACF,CAAA;AAED,SAAS,cAAc;IACrB,OAAO,IAAI,GAAG,EAAE,CAAA;AAClB,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./AnimatePresence.js"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("@hanzogui/use-presence"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./types.js"), exports);
|
|
7
|
+
tslib_1.__exportStar(require("./PresenceChild.js"), exports);
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,+DAAqC;AACrC,iEAAsC;AACtC,qDAA0B;AAC1B,6DAAmC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "commonjs" }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useInsertionEffect } from 'react';
|
|
3
|
+
import { useConstant } from '@hanzogui/use-constant';
|
|
4
|
+
import { useForceUpdate } from '@hanzogui/use-force-update';
|
|
5
|
+
import { Children, isValidElement, useContext, useMemo, useRef, useState } from 'react';
|
|
6
|
+
import { LayoutGroupContext } from './LayoutGroupContext.js';
|
|
7
|
+
import { PresenceChild } from './PresenceChild.js';
|
|
8
|
+
const getChildKey = (child) => {
|
|
9
|
+
return (child.key ||
|
|
10
|
+
(() => {
|
|
11
|
+
// we can help a bit by falling back to hanzogui name or component name
|
|
12
|
+
const ct = child.type;
|
|
13
|
+
const defaultName = ct['displayName'] || ct['name'] || '';
|
|
14
|
+
if (ct && typeof ct === 'object' && 'staticConfig' in ct) {
|
|
15
|
+
// @ts-expect-error
|
|
16
|
+
return ct.staticConfig.componentName || defaultName;
|
|
17
|
+
}
|
|
18
|
+
return defaultName;
|
|
19
|
+
})());
|
|
20
|
+
};
|
|
21
|
+
function onlyElements(children) {
|
|
22
|
+
const filtered = [];
|
|
23
|
+
// We use forEach here instead of map as map mutates the component key by preprending `.$`
|
|
24
|
+
Children.forEach(children, (child) => {
|
|
25
|
+
if (isValidElement(child))
|
|
26
|
+
filtered.push(child);
|
|
27
|
+
});
|
|
28
|
+
return filtered;
|
|
29
|
+
}
|
|
30
|
+
export const AnimatePresence = ({ children, enterVariant, exitVariant, enterExitVariant, initial = true, onExitComplete, exitBeforeEnter, mode, presenceAffectsLayout = true, custom, passThrough, }) => {
|
|
31
|
+
// Determine effective mode: mode prop takes precedence, then exitBeforeEnter for backwards compatibility
|
|
32
|
+
const effectiveMode = mode ?? (exitBeforeEnter ? 'wait' : 'sync');
|
|
33
|
+
/**
|
|
34
|
+
* Filter any children that aren't ReactElements. We can only track components
|
|
35
|
+
* between renders with a props.key.
|
|
36
|
+
* IMPORTANT: useMemo ensures reference stability for the comparison below
|
|
37
|
+
*/
|
|
38
|
+
const presentChildren = useMemo(() => onlyElements(children), [children]);
|
|
39
|
+
/**
|
|
40
|
+
* Track the keys of the currently rendered children.
|
|
41
|
+
*/
|
|
42
|
+
const presentKeys = presentChildren.map(getChildKey);
|
|
43
|
+
/**
|
|
44
|
+
* If `initial={false}` we only want to pass this to components in the first render.
|
|
45
|
+
*/
|
|
46
|
+
const isInitialRender = useRef(true);
|
|
47
|
+
/**
|
|
48
|
+
* Freeze custom prop for exiting children so direction doesn't reverse mid-exit.
|
|
49
|
+
*/
|
|
50
|
+
const frozenCustomRef = useRef(new Map());
|
|
51
|
+
/**
|
|
52
|
+
* A ref containing the currently present children. When all exit animations
|
|
53
|
+
* are complete, we use this to re-render with the latest children *committed*
|
|
54
|
+
* rather than the latest children *rendered*.
|
|
55
|
+
*/
|
|
56
|
+
const pendingPresentChildren = useRef(presentChildren);
|
|
57
|
+
/**
|
|
58
|
+
* Track which exiting children have finished animating out.
|
|
59
|
+
*/
|
|
60
|
+
const exitComplete = useConstant(() => new Map());
|
|
61
|
+
/**
|
|
62
|
+
* Save children to render as React state. To ensure this component is concurrent-safe,
|
|
63
|
+
* we check for exiting children via an effect.
|
|
64
|
+
*/
|
|
65
|
+
const [diffedChildren, setDiffedChildren] = useState(presentChildren);
|
|
66
|
+
const [renderedChildren, setRenderedChildren] = useState(presentChildren);
|
|
67
|
+
/**
|
|
68
|
+
* If we've been provided a forceRender function by the LayoutGroupContext,
|
|
69
|
+
* we can use it to force a re-render amongst all surrounding components once
|
|
70
|
+
* all components have finished animating out.
|
|
71
|
+
*/
|
|
72
|
+
const forceRender = useContext(LayoutGroupContext).forceRender ?? useForceUpdate();
|
|
73
|
+
if (passThrough) {
|
|
74
|
+
return _jsx(_Fragment, { children: children });
|
|
75
|
+
}
|
|
76
|
+
// useInsertionEffect runs before ALL useLayoutEffects (including children's)
|
|
77
|
+
// this ensures pendingPresentChildren and exitComplete are set before
|
|
78
|
+
// animation drivers call sendExitComplete() in their layout effects
|
|
79
|
+
// (critical for immediate completions like animateOnly=[])
|
|
80
|
+
useInsertionEffect(() => {
|
|
81
|
+
isInitialRender.current = false;
|
|
82
|
+
pendingPresentChildren.current = presentChildren;
|
|
83
|
+
/**
|
|
84
|
+
* Update complete status of exiting children.
|
|
85
|
+
*/
|
|
86
|
+
for (let i = 0; i < renderedChildren.length; i++) {
|
|
87
|
+
const key = getChildKey(renderedChildren[i]);
|
|
88
|
+
if (!presentKeys.includes(key)) {
|
|
89
|
+
if (exitComplete.get(key) !== true) {
|
|
90
|
+
exitComplete.set(key, false);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
exitComplete.delete(key);
|
|
95
|
+
frozenCustomRef.current.delete(key);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, [renderedChildren, presentKeys.length, presentKeys.join('-')]);
|
|
99
|
+
if (presentChildren !== diffedChildren) {
|
|
100
|
+
let nextChildren = [...presentChildren];
|
|
101
|
+
/**
|
|
102
|
+
* Loop through all the currently rendered components and decide which
|
|
103
|
+
* are exiting.
|
|
104
|
+
*/
|
|
105
|
+
for (let i = 0; i < renderedChildren.length; i++) {
|
|
106
|
+
const child = renderedChildren[i];
|
|
107
|
+
const key = getChildKey(child);
|
|
108
|
+
if (!presentKeys.includes(key)) {
|
|
109
|
+
nextChildren.splice(i, 0, child);
|
|
110
|
+
// freeze custom at the moment of exit so direction doesn't reverse
|
|
111
|
+
if (!frozenCustomRef.current.has(key)) {
|
|
112
|
+
frozenCustomRef.current.set(key, custom);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* If we're in "wait" mode, and we have exiting children, we want to
|
|
118
|
+
* only render these until they've all exited.
|
|
119
|
+
*/
|
|
120
|
+
const exitingChildren = renderedChildren.filter((child) => !presentKeys.includes(getChildKey(child)));
|
|
121
|
+
if (effectiveMode === 'wait' && exitingChildren.length) {
|
|
122
|
+
nextChildren = exitingChildren;
|
|
123
|
+
}
|
|
124
|
+
setRenderedChildren(onlyElements(nextChildren));
|
|
125
|
+
setDiffedChildren(presentChildren);
|
|
126
|
+
/**
|
|
127
|
+
* Early return to ensure once we've set state with the latest diffed
|
|
128
|
+
* children, we can immediately re-render.
|
|
129
|
+
*/
|
|
130
|
+
return null;
|
|
131
|
+
}
|
|
132
|
+
return (_jsx(_Fragment, { children: renderedChildren.map((child) => {
|
|
133
|
+
const key = getChildKey(child);
|
|
134
|
+
const isPresent = presentChildren === renderedChildren || presentKeys.includes(key);
|
|
135
|
+
const onExit = () => {
|
|
136
|
+
if (exitComplete.has(key)) {
|
|
137
|
+
exitComplete.set(key, true);
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
let isEveryExitComplete = true;
|
|
143
|
+
exitComplete.forEach((isExitComplete) => {
|
|
144
|
+
if (!isExitComplete)
|
|
145
|
+
isEveryExitComplete = false;
|
|
146
|
+
});
|
|
147
|
+
if (isEveryExitComplete) {
|
|
148
|
+
forceRender?.();
|
|
149
|
+
setRenderedChildren(pendingPresentChildren.current);
|
|
150
|
+
onExitComplete?.();
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
return (_jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial ? undefined : false, custom: isPresent ? custom : (frozenCustomRef.current.get(key) ?? custom), presenceAffectsLayout: presenceAffectsLayout, enterExitVariant: enterExitVariant, enterVariant: enterVariant, exitVariant: exitVariant, onExitComplete: isPresent ? undefined : onExit, children: child }, key));
|
|
154
|
+
}) }));
|
|
155
|
+
};
|
|
156
|
+
AnimatePresence.displayName = 'AnimatePresence';
|
|
157
|
+
//# sourceMappingURL=AnimatePresence.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatePresence.js","sourceRoot":"","sources":["../../src/AnimatePresence.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutGroupContext.js","sourceRoot":"","sources":["../../src/LayoutGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAA0B,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useConstant } from '@hanzogui/use-constant';
|
|
3
|
+
import { PresenceContext } from '@hanzogui/use-presence';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { useId } from 'react';
|
|
6
|
+
// this memo seems to help PopoverContent from continuously re-rendering when open
|
|
7
|
+
export const PresenceChild = React.memo(({ children, initial, isPresent, onExitComplete, exitVariant, enterVariant, enterExitVariant, presenceAffectsLayout, custom, }) => {
|
|
8
|
+
const presenceChildren = useConstant(newChildrenMap);
|
|
9
|
+
const id = useId() || '';
|
|
10
|
+
const context = React.useMemo(() => {
|
|
11
|
+
return {
|
|
12
|
+
id,
|
|
13
|
+
initial,
|
|
14
|
+
isPresent,
|
|
15
|
+
custom,
|
|
16
|
+
exitVariant,
|
|
17
|
+
enterVariant,
|
|
18
|
+
enterExitVariant,
|
|
19
|
+
onExitComplete: () => {
|
|
20
|
+
presenceChildren.set(id, true);
|
|
21
|
+
for (const isComplete of presenceChildren.values()) {
|
|
22
|
+
if (!isComplete) {
|
|
23
|
+
return; // can stop searching when any is incomplete
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
onExitComplete?.();
|
|
27
|
+
},
|
|
28
|
+
register: () => {
|
|
29
|
+
presenceChildren.set(id, false);
|
|
30
|
+
return () => presenceChildren.delete(id);
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
},
|
|
34
|
+
/**
|
|
35
|
+
* If the presence of a child affects the layout of the components around it,
|
|
36
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
37
|
+
* so they can detect that layout change.
|
|
38
|
+
*/
|
|
39
|
+
// @ts-expect-error its ok
|
|
40
|
+
presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]);
|
|
41
|
+
React.useMemo(() => {
|
|
42
|
+
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
|
43
|
+
}, [isPresent]);
|
|
44
|
+
/**
|
|
45
|
+
* If there's no animated components to fire exit animations, we want to remove this
|
|
46
|
+
* component immediately.
|
|
47
|
+
*/
|
|
48
|
+
React.useEffect(() => {
|
|
49
|
+
!isPresent && !presenceChildren.size && onExitComplete?.();
|
|
50
|
+
}, [isPresent]);
|
|
51
|
+
return _jsx(PresenceContext.Provider, { value: context, children: children });
|
|
52
|
+
});
|
|
53
|
+
function newChildrenMap() {
|
|
54
|
+
return new Map();
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=PresenceChild.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresenceChild.js","sourceRoot":"","sources":["../../src/PresenceChild.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAgB7B,kFAAkF;AAClF,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CACrC,CAAC,EACC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,MAAM,GACa,EAAE,EAAE;IACvB,MAAM,gBAAgB,GAAG,WAAW,CAAC,cAAc,CAAC,CAAA;IACpD,MAAM,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,CAAA;IAExB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAyB,EAAE;QACzB,OAAO;YACL,EAAE;YACF,OAAO;YACP,SAAS;YACT,MAAM;YACN,WAAW;YACX,YAAY;YACZ,gBAAgB;YAChB,cAAc,EAAE,GAAG,EAAE;gBACnB,gBAAgB,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;gBAC9B,KAAK,MAAM,UAAU,IAAI,gBAAgB,CAAC,MAAM,EAAE,EAAE,CAAC;oBACnD,IAAI,CAAC,UAAU,EAAE,CAAC;wBAChB,OAAM,CAAC,4CAA4C;oBACrD,CAAC;gBACH,CAAC;gBACD,cAAc,EAAE,EAAE,CAAA;YACpB,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,gBAAgB,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;gBAC/B,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;YAC1C,CAAC;SACF,CAAA;IACH,CAAC;IACD;;;;OAIG;IAEH,0BAA0B;IAC1B,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,CAC3E,CAAA;IAED,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjB,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;IACxE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf;;;OAGG;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,CAAC,SAAS,IAAI,CAAC,gBAAgB,CAAC,IAAI,IAAI,cAAc,EAAE,EAAE,CAAA;IAC5D,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA4B,CAAA;AACxF,CAAC,CACF,CAAA;AAED,SAAS,cAAc;IACrB,OAAO,IAAI,GAAG,EAAE,CAAA;AAClB,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export * from './AnimatePresence.js';
|
|
2
|
+
export * from '@hanzogui/use-presence';
|
|
3
|
+
export * from './types.js';
|
|
4
|
+
export * from './PresenceChild.js';
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAqB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzogui/animate-presence",
|
|
3
|
-
"version": "8.3.
|
|
3
|
+
"version": "8.3.2",
|
|
4
4
|
"gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -11,44 +11,44 @@
|
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"sideEffects": false,
|
|
14
|
-
"main": "dist/cjs",
|
|
15
|
-
"module": "dist/esm",
|
|
14
|
+
"main": "./dist/cjs/index.js",
|
|
15
|
+
"module": "./dist/esm/index.js",
|
|
16
16
|
"types": "./types/index.d.ts",
|
|
17
17
|
"exports": {
|
|
18
18
|
"./package.json": "./package.json",
|
|
19
19
|
".": {
|
|
20
20
|
"types": "./types/index.d.ts",
|
|
21
|
-
"react-native": "./dist/esm/index.
|
|
22
|
-
"browser": "./dist/esm/index.
|
|
23
|
-
"module": "./dist/esm/index.
|
|
24
|
-
"import": "./dist/esm/index.
|
|
25
|
-
"require": "./dist/cjs/index.
|
|
26
|
-
"default": "./dist/esm/index.
|
|
21
|
+
"react-native": "./dist/esm/index.js",
|
|
22
|
+
"browser": "./dist/esm/index.js",
|
|
23
|
+
"module": "./dist/esm/index.js",
|
|
24
|
+
"import": "./dist/esm/index.js",
|
|
25
|
+
"require": "./dist/cjs/index.js",
|
|
26
|
+
"default": "./dist/esm/index.js"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"publishConfig": {
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
|
-
"build": "hanzogui-build",
|
|
33
|
+
"build": "hanzogui-build --skip-native",
|
|
34
34
|
"watch": "hanzogui-build --watch",
|
|
35
35
|
"clean": "hanzogui-build clean",
|
|
36
36
|
"clean:build": "hanzogui-build clean:build"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@hanzogui/constants": "8.3.
|
|
40
|
-
"@hanzogui/helpers": "8.3.
|
|
41
|
-
"@hanzogui/use-constant": "8.3.
|
|
42
|
-
"@hanzogui/use-force-update": "8.3.
|
|
43
|
-
"@hanzogui/use-presence": "8.3.
|
|
44
|
-
"@hanzogui/web": "8.3.
|
|
39
|
+
"@hanzogui/constants": "8.3.2",
|
|
40
|
+
"@hanzogui/helpers": "8.3.2",
|
|
41
|
+
"@hanzogui/use-constant": "8.3.2",
|
|
42
|
+
"@hanzogui/use-force-update": "8.3.2",
|
|
43
|
+
"@hanzogui/use-presence": "8.3.2",
|
|
44
|
+
"@hanzogui/web": "8.3.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@hanzogui/build": "8.3.
|
|
48
|
-
"react": "
|
|
47
|
+
"@hanzogui/build": "8.3.2",
|
|
48
|
+
"react": "19.2.8"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"react": ">=19"
|
|
51
|
+
"react": ">=19.2.8"
|
|
52
52
|
},
|
|
53
53
|
"repository": {
|
|
54
54
|
"type": "git",
|
package/src/AnimatePresence.tsx
CHANGED
|
@@ -3,9 +3,9 @@ import { useConstant } from '@hanzogui/use-constant'
|
|
|
3
3
|
import { useForceUpdate } from '@hanzogui/use-force-update'
|
|
4
4
|
import type { FunctionComponent, PropsWithChildren, ReactElement, ReactNode } from 'react'
|
|
5
5
|
import { Children, isValidElement, useContext, useMemo, useRef, useState } from 'react'
|
|
6
|
-
import { LayoutGroupContext } from './LayoutGroupContext'
|
|
7
|
-
import { PresenceChild } from './PresenceChild'
|
|
8
|
-
import type { AnimatePresenceProps } from './types'
|
|
6
|
+
import { LayoutGroupContext } from './LayoutGroupContext.tsx'
|
|
7
|
+
import { PresenceChild } from './PresenceChild.tsx'
|
|
8
|
+
import type { AnimatePresenceProps } from './types.ts'
|
|
9
9
|
|
|
10
10
|
type ComponentKey = string | number
|
|
11
11
|
|
package/src/PresenceChild.tsx
CHANGED
|
@@ -4,7 +4,7 @@ import type { PresenceContextProps } from '@hanzogui/web'
|
|
|
4
4
|
import * as React from 'react'
|
|
5
5
|
import { useId } from 'react'
|
|
6
6
|
|
|
7
|
-
import type { VariantLabels } from './types'
|
|
7
|
+
import type { VariantLabels } from './types.ts'
|
|
8
8
|
|
|
9
9
|
interface PresenceChildProps {
|
|
10
10
|
children: React.ReactElement<any>
|