@xanui/core 1.2.71 → 1.3.0

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.
Files changed (46) hide show
  1. package/Iframe/index.cjs +1 -2
  2. package/Iframe/index.cjs.map +1 -1
  3. package/Iframe/index.d.ts +2 -1
  4. package/Iframe/index.js +1 -2
  5. package/Iframe/index.js.map +1 -1
  6. package/Transition/index.cjs +40 -97
  7. package/Transition/index.cjs.map +1 -1
  8. package/Transition/index.d.ts +13 -18
  9. package/Transition/index.js +41 -98
  10. package/Transition/index.js.map +1 -1
  11. package/Transition/variants.cjs +92 -171
  12. package/Transition/variants.cjs.map +1 -1
  13. package/Transition/variants.d.ts +65 -83
  14. package/Transition/variants.js +93 -170
  15. package/Transition/variants.js.map +1 -1
  16. package/animate/easing.cjs +59 -0
  17. package/animate/easing.cjs.map +1 -0
  18. package/animate/easing.d.ts +13 -0
  19. package/animate/easing.js +57 -0
  20. package/animate/easing.js.map +1 -0
  21. package/animate/index.cjs +104 -0
  22. package/animate/index.cjs.map +1 -0
  23. package/animate/index.d.ts +19 -0
  24. package/animate/index.js +99 -0
  25. package/animate/index.js.map +1 -0
  26. package/hooks/useTransition.cjs +98 -0
  27. package/hooks/useTransition.cjs.map +1 -0
  28. package/hooks/useTransition.d.ts +23 -0
  29. package/hooks/useTransition.js +96 -0
  30. package/hooks/useTransition.js.map +1 -0
  31. package/hooks/useTransitionGroup.cjs +95 -0
  32. package/hooks/useTransitionGroup.cjs.map +1 -0
  33. package/hooks/useTransitionGroup.d.ts +32 -0
  34. package/hooks/useTransitionGroup.js +93 -0
  35. package/hooks/useTransitionGroup.js.map +1 -0
  36. package/index.cjs +16 -11
  37. package/index.cjs.map +1 -1
  38. package/index.d.ts +5 -2
  39. package/index.js +4 -1
  40. package/index.js.map +1 -1
  41. package/package.json +1 -1
  42. package/hooks/useAnimation.cjs +0 -44
  43. package/hooks/useAnimation.cjs.map +0 -1
  44. package/hooks/useAnimation.d.ts +0 -20
  45. package/hooks/useAnimation.js +0 -39
  46. package/hooks/useAnimation.js.map +0 -1
package/Iframe/index.cjs CHANGED
@@ -24,7 +24,6 @@ const Iframe = (_a, ref) => {
24
24
  const iframeRef = React.useRef(null);
25
25
  const _ref = useMergeRefs(iframeRef, ref);
26
26
  const parentTheme = core.useTheme();
27
- theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
28
27
  React.useEffect(() => {
29
28
  if (!iframeRef.current)
30
29
  return;
@@ -37,7 +36,7 @@ const Iframe = (_a, ref) => {
37
36
  reactDom.createPortal(jsxRuntime.jsx(IframeContext.Provider, { value: {
38
37
  document: doc,
39
38
  window: doc.defaultView,
40
- }, children: jsxRuntime.jsx(index$2, { disableRenderar: true, theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
39
+ }, children: jsxRuntime.jsx(index$2, { disableRenderar: true, theme: parentTheme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
41
40
  };
42
41
  var index = React.forwardRef(Iframe);
43
42
 
package/Iframe/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: string;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n theme ??= parentTheme.name\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\nimport { ThemeOptions } from \"../theme/types\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: ThemeOptions;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={parentTheme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
package/Iframe/index.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import React__default from 'react';
2
2
  import { TagPropsRoot } from '../Tag/types.js';
3
+ import { ThemeOptions } from '../theme/types.js';
3
4
 
4
5
  type IframeProps = Omit<TagPropsRoot<"iframe">, "component"> & {
5
- theme?: string;
6
+ theme?: ThemeOptions;
6
7
  CSSCacheId?: string;
7
8
  };
8
9
  declare const _default: React__default.ForwardRefExoticComponent<Omit<IframeProps, "ref"> & React__default.RefAttributes<HTMLIFrameElement>>;
package/Iframe/index.js CHANGED
@@ -22,7 +22,6 @@ const Iframe = (_a, ref) => {
22
22
  const iframeRef = useRef(null);
23
23
  const _ref = useMergeRefs(iframeRef, ref);
24
24
  const parentTheme = useTheme();
25
- theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
26
25
  useEffect(() => {
27
26
  if (!iframeRef.current)
28
27
  return;
@@ -35,7 +34,7 @@ const Iframe = (_a, ref) => {
35
34
  createPortal(jsx(IframeContext.Provider, { value: {
36
35
  document: doc,
37
36
  window: doc.defaultView,
38
- }, children: jsx(AppRoot, { disableRenderar: true, theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
37
+ }, children: jsx(AppRoot, { disableRenderar: true, theme: parentTheme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
39
38
  };
40
39
  var index = React__default.forwardRef(Iframe);
41
40
 
package/Iframe/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: string;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n theme ??= parentTheme.name\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\nimport { ThemeOptions } from \"../theme/types\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: ThemeOptions;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={parentTheme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AAUA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
package/Transition/index.cjs CHANGED
@@ -4,109 +4,53 @@
4
4
  var tslib = require('tslib');
5
5
  var React = require('react');
6
6
  var variants = require('./variants.cjs');
7
- var index$1 = require('../css/index.cjs');
8
- var index = require('../Document/index.cjs');
9
- var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
10
- var useAnimation = require('../hooks/useAnimation.cjs');
11
- var oncss = require('oncss');
7
+ var useTransition = require('../hooks/useTransition.cjs');
8
+ var easing = require('../animate/easing.cjs');
12
9
 
13
- const getVariant = (rect, variant) => {
14
- let fn = typeof variant === 'string' ? variants[variant] : variant;
15
- if (!fn)
16
- throw new Error(`Transition variant "${variant}" not found.`);
17
- return fn(rect);
18
- };
19
10
  function Transition(_a) {
20
11
  var { children } = _a, options = tslib.__rest(_a, ["children"]);
21
- let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
22
- const endTimer = React.useRef(null);
23
- const animId = React.useRef(0);
24
- const [rect, setRect] = React.useState();
25
- const [isDisableInitial, setIsDisableInitial] = React.useState(disableInitialTransition);
12
+ let { open, variant = "fade", duration = 450, delay, easing: easing$1, exitOnUnmount = false, initialTransition = false, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
13
+ easing$1 !== null && easing$1 !== void 0 ? easing$1 : (easing$1 = "default");
14
+ const variantCb = variants[variant];
26
15
  const ref = React.useRef(null);
27
- const doc = index.useDocument();
28
- const cacheId = CSSCacheProvider.useCSSCacheId();
29
- let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
30
- const style = (obj = {}) => {
31
- return index$1.css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
32
- };
33
- let [cls, setCls] = React.useState(() => {
34
- let props = {};
35
- if (!isDisableInitial || (isDisableInitial && !open)) {
36
- props.opacity = 0;
37
- props.pointerEvents = 'none';
38
- props.transition = 'none';
16
+ const init = React.useRef(false);
17
+ const trans = useTransition({
18
+ delay,
19
+ duration,
20
+ easing: easing[easing$1],
21
+ onEnter,
22
+ onEntered,
23
+ onExit,
24
+ onExited,
25
+ onDone,
26
+ from: () => {
27
+ const v = variantCb(ref.current);
28
+ return v.from;
29
+ },
30
+ to: () => {
31
+ const v = variantCb(ref.current);
32
+ return v.to;
33
+ },
34
+ onUpdate: (val, prograss) => {
35
+ if (!ref.current)
36
+ throw new Error("Invalid Transition Element");
37
+ const vc = variantCb(ref.current);
38
+ onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(val, prograss);
39
+ return vc.onUpdate(val);
39
40
  }
40
- return style(props);
41
41
  });
42
- React.useEffect(() => {
43
- let frame;
44
- const measure = () => {
45
- const node = ref.current;
46
- if (!node) {
47
- frame = requestAnimationFrame(measure); // ⬅️ retry next frame
48
- return;
49
- }
50
- const rect = node.getBoundingClientRect();
51
- const v = getVariant(rect, variant);
52
- const initial = isDisableInitial
53
- ? (open ? v.to : v.from)
54
- : (open ? v.from : v.to);
55
- setCls(style(Object.assign(Object.assign({}, initial), { transition: 'none' })));
56
- setRect(rect);
57
- };
58
- frame = requestAnimationFrame(measure);
59
- return () => {
60
- if (endTimer.current) {
61
- clearTimeout(endTimer.current);
62
- }
63
- cancelAnimationFrame(frame);
64
- };
65
- }, []);
66
- React.useEffect(() => {
67
- if (rect) {
68
- let _duration = isDisableInitial ? 0 : duration;
69
- let _delay = isDisableInitial ? 0 : (delay || 0);
70
- if (isDisableInitial) {
71
- setIsDisableInitial(false);
72
- }
73
- const v = getVariant(rect, variant);
74
- let _css = open ? v.to : v.from;
75
- let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
76
- .map(k => `${oncss.formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
77
- .join(", "), willChange: Object.keys(_css || {})
78
- .map(oncss.formatCSSProp)
79
- .join(", ") });
80
- if (open) {
81
- onOpen === null || onOpen === void 0 ? void 0 : onOpen();
82
- onState === null || onState === void 0 ? void 0 : onState("open");
83
- }
84
- else {
85
- onClose === null || onClose === void 0 ? void 0 : onClose();
86
- onState === null || onState === void 0 ? void 0 : onState("close");
87
- }
88
- setTimeout(() => {
89
- setCls(style(_));
90
- if (endTimer.current) {
91
- clearTimeout(endTimer.current);
92
- }
93
- animId.current++;
94
- const id = animId.current;
95
- endTimer.current = setTimeout(() => {
96
- if (id !== animId.current)
97
- return;
98
- if (open) {
99
- onOpened === null || onOpened === void 0 ? void 0 : onOpened();
100
- onState === null || onState === void 0 ? void 0 : onState("opened");
101
- }
102
- else {
103
- onClosed === null || onClosed === void 0 ? void 0 : onClosed();
104
- onState === null || onState === void 0 ? void 0 : onState("closed");
105
- }
106
- }, _duration + _delay);
107
- }, 50);
42
+ React.useLayoutEffect(() => {
43
+ const isnot = !init.current && !initialTransition;
44
+ init.current = true;
45
+ if (open) {
46
+ trans.enter(isnot ? false : true);
47
+ }
48
+ else {
49
+ trans.exit(isnot ? false : true);
108
50
  }
109
- }, [rect, open, variant]);
51
+ }, [open]);
52
+ if (exitOnUnmount && trans.status === "exited")
53
+ return;
110
54
  const childs = React.Children.toArray(children);
111
55
  if (childs.length !== 1) {
112
56
  throw new Error("Transition expects exactly one child.");
@@ -116,7 +60,6 @@ function Transition(_a) {
116
60
  throw new Error("Transition expects a valid React element.");
117
61
  }
118
62
  return React.cloneElement(child, {
119
- className: cls,
120
63
  ref: (node) => {
121
64
  ref.current = node;
122
65
  const childRef = child.ref;
package/Transition/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef, isValidElement } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariant\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n let fn = typeof variant === 'string' ? variants[variant] : variant\n if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n disableInitialTransition = false,\n variant = \"fade\",\n duration = 400,\n delay,\n ease,\n easing,\n open,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n onState\n } = options\n\n const endTimer = useRef<any>(null)\n const animId = useRef(0)\n const [rect, setRect] = useState<DOMRect>()\n const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n const ref = useRef<HTMLElement>(null)\n const doc = useDocument();\n const cacheId = useCSSCacheId()\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n const style = (obj = {}) => {\n return css(obj, { container: doc?.document, cacheId }).classname;\n }\n\n let [cls, setCls] = useState(() => {\n let props: any = {}\n if (!isDisableInitial || (isDisableInitial && !open)) {\n props.opacity = 0\n props.pointerEvents = 'none'\n props.transition = 'none'\n }\n return style(props)\n })\n\n\n useEffect(() => {\n let frame: any\n const measure = () => {\n const node = ref.current\n if (!node) {\n frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n return\n }\n\n const rect = node.getBoundingClientRect()\n const v = getVariant(rect, variant)\n const initial = isDisableInitial\n ? (open ? v.to : v.from)\n : (open ? v.from : v.to)\n\n setCls(style({\n ...initial,\n transition: 'none'\n }))\n setRect(rect)\n }\n\n frame = requestAnimationFrame(measure)\n\n return () => {\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n cancelAnimationFrame(frame)\n }\n\n }, [])\n\n useEffect(() => {\n if (rect) {\n let _duration = isDisableInitial ? 0 : duration\n let _delay = isDisableInitial ? 0 : (delay || 0)\n\n if (isDisableInitial) {\n setIsDisableInitial(false)\n }\n const v = getVariant(rect, variant)\n let _css: any = open ? v.to : v.from\n\n let _ = {\n ..._css,\n transition: Object.keys(_css || {})\n .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n .join(\", \"),\n willChange: Object.keys(_css || {})\n .map(formatCSSProp)\n .join(\", \"),\n }\n\n if (open) {\n onOpen?.();\n onState?.(\"open\");\n } else {\n onClose?.();\n onState?.(\"close\");\n }\n\n setTimeout(() => {\n setCls(style(_))\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n animId.current++\n const id = animId.current\n endTimer.current = setTimeout(() => {\n if (id !== animId.current) return\n if (open) {\n onOpened?.();\n onState?.(\"opened\");\n } else {\n onClosed?.();\n onState?.(\"closed\");\n }\n }, _duration + _delay)\n }, 50);\n }\n }, [rect, open, variant])\n\n\n\n const childs = Children.toArray(children)\n if (childs.length !== 1) {\n throw new Error(\"Transition expects exactly one child.\");\n }\n const child = childs[0]\n if (!isValidElement(child)) {\n throw new Error(\"Transition expects a valid React element.\");\n }\n\n return cloneElement(child, {\n className: cls,\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (child as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAQZ;AACI;;AAEJ;AACA;AACI;;;AAIA;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport useTransition from '../hooks/useTransition';\nimport { Easing } from '../animate';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariantTypes\n easing?: keyof typeof Easing\n duration?: number;\n delay?: number;\n initialTransition?: boolean;\n\n exitOnUnmount?: boolean;\n\n onEnter?: () => void\n onEntered?: () => void\n onExit?: () => void\n onExited?: () => void\n onUpdate?: (value: Record<string, number>, progress: number) => void;\n onDone?: () => void;\n}\n\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n open,\n variant = \"fade\",\n duration = 450,\n delay,\n easing,\n exitOnUnmount = false,\n initialTransition = false,\n onEnter,\n onEntered,\n onExit,\n onExited,\n onUpdate,\n onDone,\n\n } = options\n\n easing ??= \"default\"\n\n const variantCb = variants[variant]\n const ref = useRef<HTMLElement>(null)\n const init = useRef(false)\n\n const trans = useTransition({\n delay,\n duration,\n easing: Easing[easing],\n onEnter,\n onEntered,\n onExit,\n onExited,\n onDone,\n from: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.from\n },\n to: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.to\n },\n onUpdate: (val, prograss) => {\n if (!ref.current) throw new Error(\"Invalid Transition Element\");\n const vc = variantCb(ref.current)\n onUpdate?.(val, prograss)\n return vc.onUpdate(val)\n }\n })\n\n\n useLayoutEffect(() => {\n const isnot = !init.current && !initialTransition\n init.current = true\n if (open) {\n trans.enter(isnot ? false : true)\n } else {\n trans.exit(isnot ? false : true)\n }\n }, [open])\n\n if (exitOnUnmount && trans.status === \"exited\") return\n\n const childs = Children.toArray(children)\n if (childs.length !== 1) {\n throw new Error(\"Transition expects exactly one child.\");\n }\n const child = childs[0]\n if (!isValidElement(child)) {\n throw new Error(\"Transition expects a valid React element.\");\n }\n\n return cloneElement(child, {\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (child as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;AA2BA;AAAoB;AAChB;;AAmBA;AACA;AACA;;;;AAKI;;;;;;;;;;;;;;AAcA;;AACsB;;;AAGlB;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}
package/Transition/index.d.ts CHANGED
@@ -1,30 +1,25 @@
1
1
  import React__default from 'react';
2
2
  import * as variants from './variants.js';
3
- import { animationEases } from '../hooks/useAnimation.js';
4
- import { CSSProps } from '../css/types.js';
3
+ import Easing from '../animate/easing.js';
5
4
 
6
5
  type TransitionVariantTypes = keyof typeof variants;
7
- type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({
8
- from: CSSProps;
9
- to: CSSProps;
10
- }));
11
- type TransitionState = "open" | "opened" | "close" | "closed";
12
6
  type TransitionProps = {
13
7
  children: React__default.ReactElement;
14
8
  open: boolean;
15
- variant: TransitionVariant;
16
- ease?: string;
17
- easing?: keyof typeof animationEases;
9
+ variant: TransitionVariantTypes;
10
+ easing?: keyof typeof Easing;
18
11
  duration?: number;
19
12
  delay?: number;
20
- disableInitialTransition?: boolean;
21
- onOpen?: () => void;
22
- onOpened?: () => void;
23
- onClose?: () => void;
24
- onClosed?: () => void;
25
- onState?: (state: TransitionState) => void;
13
+ initialTransition?: boolean;
14
+ exitOnUnmount?: boolean;
15
+ onEnter?: () => void;
16
+ onEntered?: () => void;
17
+ onExit?: () => void;
18
+ onExited?: () => void;
19
+ onUpdate?: (value: Record<string, number>, progress: number) => void;
20
+ onDone?: () => void;
26
21
  };
27
- declare function Transition({ children, ...options }: TransitionProps): React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>>;
22
+ declare function Transition({ children, ...options }: TransitionProps): React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | undefined;
28
23
 
29
24
  export { Transition as default };
30
- export type { TransitionProps, TransitionState, TransitionVariant, TransitionVariantTypes };
25
+ export type { TransitionProps, TransitionVariantTypes };
package/Transition/index.js CHANGED
@@ -1,110 +1,54 @@
1
1
  "use client";
2
2
  import { __rest } from 'tslib';
3
- import { useRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
3
+ import { useRef, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
4
4
  import * as variants from './variants.js';
5
- import { css } from '../css/index.js';
6
- import { useDocument } from '../Document/index.js';
7
- import { useCSSCacheId } from '../css/CSSCacheProvider.js';
8
- import { animationEases } from '../hooks/useAnimation.js';
9
- import { formatCSSProp } from 'oncss';
5
+ import useTransition from '../hooks/useTransition.js';
6
+ import Easing from '../animate/easing.js';
10
7
 
11
- const getVariant = (rect, variant) => {
12
- let fn = typeof variant === 'string' ? variants[variant] : variant;
13
- if (!fn)
14
- throw new Error(`Transition variant "${variant}" not found.`);
15
- return fn(rect);
16
- };
17
8
  function Transition(_a) {
18
9
  var { children } = _a, options = __rest(_a, ["children"]);
19
- let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
20
- const endTimer = useRef(null);
21
- const animId = useRef(0);
22
- const [rect, setRect] = useState();
23
- const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition);
10
+ let { open, variant = "fade", duration = 450, delay, easing, exitOnUnmount = false, initialTransition = false, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
11
+ easing !== null && easing !== void 0 ? easing : (easing = "default");
12
+ const variantCb = variants[variant];
24
13
  const ref = useRef(null);
25
- const doc = useDocument();
26
- const cacheId = useCSSCacheId();
27
- let _ease = ease || animationEases[easing] || animationEases.bounce;
28
- const style = (obj = {}) => {
29
- return css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
30
- };
31
- let [cls, setCls] = useState(() => {
32
- let props = {};
33
- if (!isDisableInitial || (isDisableInitial && !open)) {
34
- props.opacity = 0;
35
- props.pointerEvents = 'none';
36
- props.transition = 'none';
14
+ const init = useRef(false);
15
+ const trans = useTransition({
16
+ delay,
17
+ duration,
18
+ easing: Easing[easing],
19
+ onEnter,
20
+ onEntered,
21
+ onExit,
22
+ onExited,
23
+ onDone,
24
+ from: () => {
25
+ const v = variantCb(ref.current);
26
+ return v.from;
27
+ },
28
+ to: () => {
29
+ const v = variantCb(ref.current);
30
+ return v.to;
31
+ },
32
+ onUpdate: (val, prograss) => {
33
+ if (!ref.current)
34
+ throw new Error("Invalid Transition Element");
35
+ const vc = variantCb(ref.current);
36
+ onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(val, prograss);
37
+ return vc.onUpdate(val);
37
38
  }
38
- return style(props);
39
39
  });
40
- useEffect(() => {
41
- let frame;
42
- const measure = () => {
43
- const node = ref.current;
44
- if (!node) {
45
- frame = requestAnimationFrame(measure); // ⬅️ retry next frame
46
- return;
47
- }
48
- const rect = node.getBoundingClientRect();
49
- const v = getVariant(rect, variant);
50
- const initial = isDisableInitial
51
- ? (open ? v.to : v.from)
52
- : (open ? v.from : v.to);
53
- setCls(style(Object.assign(Object.assign({}, initial), { transition: 'none' })));
54
- setRect(rect);
55
- };
56
- frame = requestAnimationFrame(measure);
57
- return () => {
58
- if (endTimer.current) {
59
- clearTimeout(endTimer.current);
60
- }
61
- cancelAnimationFrame(frame);
62
- };
63
- }, []);
64
- useEffect(() => {
65
- if (rect) {
66
- let _duration = isDisableInitial ? 0 : duration;
67
- let _delay = isDisableInitial ? 0 : (delay || 0);
68
- if (isDisableInitial) {
69
- setIsDisableInitial(false);
70
- }
71
- const v = getVariant(rect, variant);
72
- let _css = open ? v.to : v.from;
73
- let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
74
- .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
75
- .join(", "), willChange: Object.keys(_css || {})
76
- .map(formatCSSProp)
77
- .join(", ") });
78
- if (open) {
79
- onOpen === null || onOpen === void 0 ? void 0 : onOpen();
80
- onState === null || onState === void 0 ? void 0 : onState("open");
81
- }
82
- else {
83
- onClose === null || onClose === void 0 ? void 0 : onClose();
84
- onState === null || onState === void 0 ? void 0 : onState("close");
85
- }
86
- setTimeout(() => {
87
- setCls(style(_));
88
- if (endTimer.current) {
89
- clearTimeout(endTimer.current);
90
- }
91
- animId.current++;
92
- const id = animId.current;
93
- endTimer.current = setTimeout(() => {
94
- if (id !== animId.current)
95
- return;
96
- if (open) {
97
- onOpened === null || onOpened === void 0 ? void 0 : onOpened();
98
- onState === null || onState === void 0 ? void 0 : onState("opened");
99
- }
100
- else {
101
- onClosed === null || onClosed === void 0 ? void 0 : onClosed();
102
- onState === null || onState === void 0 ? void 0 : onState("closed");
103
- }
104
- }, _duration + _delay);
105
- }, 50);
40
+ useLayoutEffect(() => {
41
+ const isnot = !init.current && !initialTransition;
42
+ init.current = true;
43
+ if (open) {
44
+ trans.enter(isnot ? false : true);
45
+ }
46
+ else {
47
+ trans.exit(isnot ? false : true);
106
48
  }
107
- }, [rect, open, variant]);
49
+ }, [open]);
50
+ if (exitOnUnmount && trans.status === "exited")
51
+ return;
108
52
  const childs = Children.toArray(children);
109
53
  if (childs.length !== 1) {
110
54
  throw new Error("Transition expects exactly one child.");
@@ -114,7 +58,6 @@ function Transition(_a) {
114
58
  throw new Error("Transition expects a valid React element.");
115
59
  }
116
60
  return cloneElement(child, {
117
- className: cls,
118
61
  ref: (node) => {
119
62
  ref.current = node;
120
63
  const childRef = child.ref;
package/Transition/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef, isValidElement } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariant\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n let fn = typeof variant === 'string' ? variants[variant] : variant\n if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n disableInitialTransition = false,\n variant = \"fade\",\n duration = 400,\n delay,\n ease,\n easing,\n open,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n onState\n } = options\n\n const endTimer = useRef<any>(null)\n const animId = useRef(0)\n const [rect, setRect] = useState<DOMRect>()\n const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n const ref = useRef<HTMLElement>(null)\n const doc = useDocument();\n const cacheId = useCSSCacheId()\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n const style = (obj = {}) => {\n return css(obj, { container: doc?.document, cacheId }).classname;\n }\n\n let [cls, setCls] = useState(() => {\n let props: any = {}\n if (!isDisableInitial || (isDisableInitial && !open)) {\n props.opacity = 0\n props.pointerEvents = 'none'\n props.transition = 'none'\n }\n return style(props)\n })\n\n\n useEffect(() => {\n let frame: any\n const measure = () => {\n const node = ref.current\n if (!node) {\n frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n return\n }\n\n const rect = node.getBoundingClientRect()\n const v = getVariant(rect, variant)\n const initial = isDisableInitial\n ? (open ? v.to : v.from)\n : (open ? v.from : v.to)\n\n setCls(style({\n ...initial,\n transition: 'none'\n }))\n setRect(rect)\n }\n\n frame = requestAnimationFrame(measure)\n\n return () => {\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n cancelAnimationFrame(frame)\n }\n\n }, [])\n\n useEffect(() => {\n if (rect) {\n let _duration = isDisableInitial ? 0 : duration\n let _delay = isDisableInitial ? 0 : (delay || 0)\n\n if (isDisableInitial) {\n setIsDisableInitial(false)\n }\n const v = getVariant(rect, variant)\n let _css: any = open ? v.to : v.from\n\n let _ = {\n ..._css,\n transition: Object.keys(_css || {})\n .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n .join(\", \"),\n willChange: Object.keys(_css || {})\n .map(formatCSSProp)\n .join(\", \"),\n }\n\n if (open) {\n onOpen?.();\n onState?.(\"open\");\n } else {\n onClose?.();\n onState?.(\"close\");\n }\n\n setTimeout(() => {\n setCls(style(_))\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n animId.current++\n const id = animId.current\n endTimer.current = setTimeout(() => {\n if (id !== animId.current) return\n if (open) {\n onOpened?.();\n onState?.(\"opened\");\n } else {\n onClosed?.();\n onState?.(\"closed\");\n }\n }, _duration + _delay)\n }, 50);\n }\n }, [rect, open, variant])\n\n\n\n const childs = Children.toArray(children)\n if (childs.length !== 1) {\n throw new Error(\"Transition expects exactly one child.\");\n }\n const child = childs[0]\n if (!isValidElement(child)) {\n throw new Error(\"Transition expects a valid React element.\");\n }\n\n return cloneElement(child, {\n className: cls,\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (child as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAQZ;AACI;;AAEJ;AACA;AACI;;;AAIA;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport useTransition from '../hooks/useTransition';\nimport { Easing } from '../animate';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariantTypes\n easing?: keyof typeof Easing\n duration?: number;\n delay?: number;\n initialTransition?: boolean;\n\n exitOnUnmount?: boolean;\n\n onEnter?: () => void\n onEntered?: () => void\n onExit?: () => void\n onExited?: () => void\n onUpdate?: (value: Record<string, number>, progress: number) => void;\n onDone?: () => void;\n}\n\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n open,\n variant = \"fade\",\n duration = 450,\n delay,\n easing,\n exitOnUnmount = false,\n initialTransition = false,\n onEnter,\n onEntered,\n onExit,\n onExited,\n onUpdate,\n onDone,\n\n } = options\n\n easing ??= \"default\"\n\n const variantCb = variants[variant]\n const ref = useRef<HTMLElement>(null)\n const init = useRef(false)\n\n const trans = useTransition({\n delay,\n duration,\n easing: Easing[easing],\n onEnter,\n onEntered,\n onExit,\n onExited,\n onDone,\n from: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.from\n },\n to: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.to\n },\n onUpdate: (val, prograss) => {\n if (!ref.current) throw new Error(\"Invalid Transition Element\");\n const vc = variantCb(ref.current)\n onUpdate?.(val, prograss)\n return vc.onUpdate(val)\n }\n })\n\n\n useLayoutEffect(() => {\n const isnot = !init.current && !initialTransition\n init.current = true\n if (open) {\n trans.enter(isnot ? false : true)\n } else {\n trans.exit(isnot ? false : true)\n }\n }, [open])\n\n if (exitOnUnmount && trans.status === \"exited\") return\n\n const childs = Children.toArray(children)\n if (childs.length !== 1) {\n throw new Error(\"Transition expects exactly one child.\");\n }\n const child = childs[0]\n if (!isValidElement(child)) {\n throw new Error(\"Transition expects a valid React element.\");\n }\n\n return cloneElement(child, {\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (child as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;AA2BA;AAAoB;AAChB;;AAmBA;AACA;AACA;;;;AAKI;;;;;;;;;;;;;;AAcA;;AACsB;;;AAGlB;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}