@activecollab/components 2.0.439 → 2.0.441
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/components/Dialog/Dialog.js +8 -1
- package/dist/cjs/components/Dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/Menu/Menu.js +45 -19
- package/dist/cjs/components/Menu/Menu.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.js +16 -4
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/Transitions/Fade/Fade.js +3 -2
- package/dist/cjs/components/Transitions/Fade/Fade.js.map +1 -1
- package/dist/cjs/components/Transitions/Grow/Grow.js +110 -0
- package/dist/cjs/components/Transitions/Grow/Grow.js.map +1 -0
- package/dist/cjs/components/Transitions/Grow/index.js +17 -0
- package/dist/cjs/components/Transitions/Grow/index.js.map +1 -0
- package/dist/cjs/components/Transitions/SlideFromTop/SlideFromTop.js +7 -5
- package/dist/cjs/components/Transitions/SlideFromTop/SlideFromTop.js.map +1 -1
- package/dist/cjs/components/Transitions/index.js +11 -0
- package/dist/cjs/components/Transitions/index.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +10 -3
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
- package/dist/esm/components/Menu/Menu.js +43 -19
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Modal/Modal.d.ts +5 -0
- package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
- package/dist/esm/components/Modal/Modal.js +16 -4
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Transitions/Fade/Fade.d.ts +1 -0
- package/dist/esm/components/Transitions/Fade/Fade.d.ts.map +1 -1
- package/dist/esm/components/Transitions/Fade/Fade.js +2 -1
- package/dist/esm/components/Transitions/Fade/Fade.js.map +1 -1
- package/dist/esm/components/Transitions/Grow/Grow.d.ts +14 -0
- package/dist/esm/components/Transitions/Grow/Grow.d.ts.map +1 -0
- package/dist/esm/components/Transitions/Grow/Grow.js +88 -0
- package/dist/esm/components/Transitions/Grow/Grow.js.map +1 -0
- package/dist/esm/components/Transitions/Grow/index.d.ts +2 -0
- package/dist/esm/components/Transitions/Grow/index.d.ts.map +1 -0
- package/dist/esm/components/Transitions/Grow/index.js +2 -0
- package/dist/esm/components/Transitions/Grow/index.js.map +1 -0
- package/dist/esm/components/Transitions/SlideFromTop/SlideFromTop.d.ts +2 -0
- package/dist/esm/components/Transitions/SlideFromTop/SlideFromTop.d.ts.map +1 -1
- package/dist/esm/components/Transitions/SlideFromTop/SlideFromTop.js +6 -4
- package/dist/esm/components/Transitions/SlideFromTop/SlideFromTop.js.map +1 -1
- package/dist/esm/components/Transitions/index.d.ts +1 -0
- package/dist/esm/components/Transitions/index.d.ts.map +1 -1
- package/dist/esm/components/Transitions/index.js +1 -0
- package/dist/esm/components/Transitions/index.js.map +1 -1
- package/dist/index.js +917 -775
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import React, { cloneElement } from "react";
|
|
3
|
+
import { Transition } from "react-transition-group";
|
|
4
|
+
export const GROW_ENTER = 140;
|
|
5
|
+
export const GROW_EXIT = 100;
|
|
6
|
+
const START_SCALE = 0.96;
|
|
7
|
+
|
|
8
|
+
// jsdom and SSR have no matchMedia, and a reader who asks for less motion gets none.
|
|
9
|
+
const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
10
|
+
const originFor = placement => {
|
|
11
|
+
const _split = (placement || "bottom-start").split("-"),
|
|
12
|
+
side = _split[0],
|
|
13
|
+
alignment = _split[1];
|
|
14
|
+
const vertical = side === "top" ? "bottom" : "top";
|
|
15
|
+
const horizontal = alignment === "end" ? "right" : "left";
|
|
16
|
+
if (side === "left" || side === "right") {
|
|
17
|
+
return "center " + (side === "left" ? "right" : "left");
|
|
18
|
+
}
|
|
19
|
+
return horizontal + " " + vertical;
|
|
20
|
+
};
|
|
21
|
+
const buildStyles = (origin, enter, exit) => {
|
|
22
|
+
const away = "scale(" + START_SCALE + ")";
|
|
23
|
+
return {
|
|
24
|
+
base: {
|
|
25
|
+
transformOrigin: origin,
|
|
26
|
+
transitionProperty: "opacity, transform",
|
|
27
|
+
transitionTimingFunction: "ease-out",
|
|
28
|
+
transform: away,
|
|
29
|
+
opacity: 0
|
|
30
|
+
},
|
|
31
|
+
entering: {
|
|
32
|
+
opacity: 1,
|
|
33
|
+
transform: "scale(1)",
|
|
34
|
+
transitionDuration: enter + "ms"
|
|
35
|
+
},
|
|
36
|
+
entered: {
|
|
37
|
+
opacity: 1,
|
|
38
|
+
transform: "scale(1)"
|
|
39
|
+
},
|
|
40
|
+
exiting: {
|
|
41
|
+
opacity: 0,
|
|
42
|
+
transform: away,
|
|
43
|
+
transitionDuration: exit + "ms"
|
|
44
|
+
},
|
|
45
|
+
exited: {
|
|
46
|
+
opacity: 0,
|
|
47
|
+
transform: away
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
export const Grow = _ref => {
|
|
52
|
+
let _ref$in = _ref.in,
|
|
53
|
+
inProp = _ref$in === void 0 ? false : _ref$in,
|
|
54
|
+
onEnter = _ref.onEnter,
|
|
55
|
+
onExited = _ref.onExited,
|
|
56
|
+
children = _ref.children,
|
|
57
|
+
style = _ref.style,
|
|
58
|
+
placement = _ref.placement,
|
|
59
|
+
_ref$timeout = _ref.timeout,
|
|
60
|
+
timeout = _ref$timeout === void 0 ? GROW_ENTER : _ref$timeout;
|
|
61
|
+
const still = prefersReducedMotion();
|
|
62
|
+
const enter = still ? 0 : timeout;
|
|
63
|
+
const exit = still ? 0 : GROW_EXIT;
|
|
64
|
+
const styles = buildStyles(originFor(placement), enter, exit);
|
|
65
|
+
|
|
66
|
+
// React flushes the state change that follows onEnter before the browser paints, so without a
|
|
67
|
+
// forced layout here the element never holds its starting style and the transition is skipped.
|
|
68
|
+
const handleEnter = (node, isAppearing) => {
|
|
69
|
+
if (node) {
|
|
70
|
+
void node.offsetHeight;
|
|
71
|
+
}
|
|
72
|
+
onEnter == null || onEnter(node, isAppearing);
|
|
73
|
+
};
|
|
74
|
+
return /*#__PURE__*/React.createElement(Transition, {
|
|
75
|
+
appear: true,
|
|
76
|
+
in: inProp,
|
|
77
|
+
timeout: {
|
|
78
|
+
enter,
|
|
79
|
+
exit
|
|
80
|
+
},
|
|
81
|
+
onEnter: handleEnter,
|
|
82
|
+
onExited: onExited
|
|
83
|
+
}, state => /*#__PURE__*/cloneElement(children, {
|
|
84
|
+
style: _extends({}, styles.base, styles[state], style, children.props.style)
|
|
85
|
+
}));
|
|
86
|
+
};
|
|
87
|
+
Grow.displayName = "Grow";
|
|
88
|
+
//# sourceMappingURL=Grow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Grow.js","names":["React","cloneElement","Transition","GROW_ENTER","GROW_EXIT","START_SCALE","prefersReducedMotion","window","matchMedia","matches","originFor","placement","_split","split","side","alignment","vertical","horizontal","buildStyles","origin","enter","exit","away","base","transformOrigin","transitionProperty","transitionTimingFunction","transform","opacity","entering","transitionDuration","entered","exiting","exited","Grow","_ref","_ref$in","in","inProp","onEnter","onExited","children","style","_ref$timeout","timeout","still","styles","handleEnter","node","isAppearing","offsetHeight","createElement","appear","state","_extends","props","displayName"],"sources":["../../../../../src/components/Transitions/Grow/Grow.tsx"],"sourcesContent":["import React, { FC, ReactElement, cloneElement } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { Placement } from \"@popperjs/core\";\n\nimport { TransitionProps } from \"../types\";\n\ninterface IGrow extends Omit<TransitionProps, \"timeout\"> {\n children: ReactElement;\n timeout?: number;\n /** Where the element sits against its anchor, so it grows out of the anchor and not out of its own middle */\n placement?: Placement;\n}\n\nexport const GROW_ENTER = 140;\nexport const GROW_EXIT = 100;\n\nconst START_SCALE = 0.96;\n\n// jsdom and SSR have no matchMedia, and a reader who asks for less motion gets none.\nconst prefersReducedMotion = (): boolean =>\n typeof window !== \"undefined\" &&\n typeof window.matchMedia === \"function\" &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst originFor = (placement?: Placement): string => {\n const [side, alignment] = (placement || \"bottom-start\").split(\"-\");\n const vertical = side === \"top\" ? \"bottom\" : \"top\";\n const horizontal = alignment === \"end\" ? \"right\" : \"left\";\n\n if (side === \"left\" || side === \"right\") {\n return `center ${side === \"left\" ? \"right\" : \"left\"}`;\n }\n\n return `${horizontal} ${vertical}`;\n};\n\nconst buildStyles = (origin: string, enter: number, exit: number) => {\n const away = `scale(${START_SCALE})`;\n\n return {\n base: {\n transformOrigin: origin,\n transitionProperty: \"opacity, transform\",\n transitionTimingFunction: \"ease-out\",\n transform: away,\n opacity: 0,\n },\n entering: {\n opacity: 1,\n transform: \"scale(1)\",\n transitionDuration: `${enter}ms`,\n },\n entered: { opacity: 1, transform: \"scale(1)\" },\n exiting: {\n opacity: 0,\n transform: away,\n transitionDuration: `${exit}ms`,\n },\n exited: { opacity: 0, transform: away },\n };\n};\n\nexport const Grow: FC<IGrow> = ({\n in: inProp = false,\n onEnter,\n onExited,\n children,\n style,\n placement,\n timeout = GROW_ENTER,\n}) => {\n const still = prefersReducedMotion();\n const enter = still ? 0 : timeout;\n const exit = still ? 0 : GROW_EXIT;\n const styles = buildStyles(originFor(placement), enter, exit);\n\n // React flushes the state change that follows onEnter before the browser paints, so without a\n // forced layout here the element never holds its starting style and the transition is skipped.\n const handleEnter = (node: HTMLElement, isAppearing: boolean) => {\n if (node) {\n void node.offsetHeight;\n }\n onEnter?.(node, isAppearing);\n };\n\n return (\n <Transition\n appear\n in={inProp}\n timeout={{ enter, exit }}\n onEnter={handleEnter}\n onExited={onExited}\n >\n {(state): ReactElement =>\n cloneElement(children, {\n style: {\n ...styles.base,\n ...styles[state],\n ...style,\n ...children.props.style,\n },\n })\n }\n </Transition>\n );\n};\n\nGrow.displayName = \"Grow\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/Grow/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Transitions/Grow/index.ts"],"sourcesContent":["export * from \"./Grow\";\n"],"mappings":"AAAA,cAAc,QAAQ","ignoreList":[]}
|
|
@@ -6,6 +6,8 @@ interface ISlideFromTop extends Omit<TransitionProps, "timeout"> {
|
|
|
6
6
|
/** How far above its resting place the element starts. A fixed travel, not a share of its height. */
|
|
7
7
|
distance?: number;
|
|
8
8
|
}
|
|
9
|
+
export declare const SLIDE_FROM_TOP_ENTER = 300;
|
|
10
|
+
export declare const SLIDE_FROM_TOP_EXIT = 200;
|
|
9
11
|
export declare const SlideFromTop: FC<ISlideFromTop>;
|
|
10
12
|
export {};
|
|
11
13
|
//# sourceMappingURL=SlideFromTop.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideFromTop.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IAC9D,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;
|
|
1
|
+
{"version":3,"file":"SlideFromTop.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IAC9D,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAmCvC,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAyC1C,CAAC"}
|
|
@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import React, { cloneElement } from "react";
|
|
3
3
|
import { Transition } from "react-transition-group";
|
|
4
4
|
const DEFAULT_DISTANCE = 25;
|
|
5
|
+
export const SLIDE_FROM_TOP_ENTER = 300;
|
|
6
|
+
export const SLIDE_FROM_TOP_EXIT = 200;
|
|
5
7
|
const buildStyles = distance => {
|
|
6
8
|
const away = "translateY(-" + distance + "px)";
|
|
7
9
|
return {
|
|
@@ -14,22 +16,22 @@ const buildStyles = distance => {
|
|
|
14
16
|
entering: {
|
|
15
17
|
opacity: 1,
|
|
16
18
|
transform: "translateY(0)",
|
|
17
|
-
transitionDuration: "
|
|
19
|
+
transitionDuration: SLIDE_FROM_TOP_ENTER + "ms"
|
|
18
20
|
},
|
|
19
21
|
entered: {
|
|
20
22
|
opacity: 1,
|
|
21
23
|
transform: "translateY(0)",
|
|
22
|
-
transitionDuration: "
|
|
24
|
+
transitionDuration: SLIDE_FROM_TOP_ENTER + "ms"
|
|
23
25
|
},
|
|
24
26
|
exiting: {
|
|
25
27
|
opacity: 0,
|
|
26
28
|
transform: away,
|
|
27
|
-
transitionDuration: "
|
|
29
|
+
transitionDuration: SLIDE_FROM_TOP_EXIT + "ms"
|
|
28
30
|
},
|
|
29
31
|
exited: {
|
|
30
32
|
opacity: 0,
|
|
31
33
|
transform: away,
|
|
32
|
-
transitionDuration: "
|
|
34
|
+
transitionDuration: SLIDE_FROM_TOP_EXIT + "ms"
|
|
33
35
|
}
|
|
34
36
|
};
|
|
35
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideFromTop.js","names":["React","cloneElement","Transition","DEFAULT_DISTANCE","buildStyles","distance","away","base","transitionProperty","transitionTimingFunction","transform","opacity","entering","transitionDuration","entered","exiting","exited","SlideFromTop","_ref","_ref$in","in","inProp","onEnter","onExited","children","style","_ref$timeout","timeout","_ref$distance","styles","handleEnter","node","isAppearing","offsetHeight","createElement","appear","state","_extends","visibility","undefined","props","displayName"],"sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"sourcesContent":["import React, { FC, ReactElement, cloneElement } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { TransitionProps } from \"../types\";\n\ninterface ISlideFromTop extends Omit<TransitionProps, \"timeout\"> {\n children: ReactElement;\n timeout?: number;\n /** How far above its resting place the element starts. A fixed travel, not a share of its height. */\n distance?: number;\n}\n\nconst DEFAULT_DISTANCE = 25;\n\nconst buildStyles = (distance: number) => {\n const away = `translateY(-${distance}px)`;\n\n return {\n base: {\n transitionProperty: \"opacity, transform\",\n transitionTimingFunction: \"ease-out\",\n transform: away,\n opacity: 0,\n },\n entering: {\n opacity: 1,\n transform: \"translateY(0)\",\n transitionDuration:
|
|
1
|
+
{"version":3,"file":"SlideFromTop.js","names":["React","cloneElement","Transition","DEFAULT_DISTANCE","SLIDE_FROM_TOP_ENTER","SLIDE_FROM_TOP_EXIT","buildStyles","distance","away","base","transitionProperty","transitionTimingFunction","transform","opacity","entering","transitionDuration","entered","exiting","exited","SlideFromTop","_ref","_ref$in","in","inProp","onEnter","onExited","children","style","_ref$timeout","timeout","_ref$distance","styles","handleEnter","node","isAppearing","offsetHeight","createElement","appear","state","_extends","visibility","undefined","props","displayName"],"sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"sourcesContent":["import React, { FC, ReactElement, cloneElement } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { TransitionProps } from \"../types\";\n\ninterface ISlideFromTop extends Omit<TransitionProps, \"timeout\"> {\n children: ReactElement;\n timeout?: number;\n /** How far above its resting place the element starts. A fixed travel, not a share of its height. */\n distance?: number;\n}\n\nconst DEFAULT_DISTANCE = 25;\n\nexport const SLIDE_FROM_TOP_ENTER = 300;\nexport const SLIDE_FROM_TOP_EXIT = 200;\n\nconst buildStyles = (distance: number) => {\n const away = `translateY(-${distance}px)`;\n\n return {\n base: {\n transitionProperty: \"opacity, transform\",\n transitionTimingFunction: \"ease-out\",\n transform: away,\n opacity: 0,\n },\n entering: {\n opacity: 1,\n transform: \"translateY(0)\",\n transitionDuration: `${SLIDE_FROM_TOP_ENTER}ms`,\n },\n entered: {\n opacity: 1,\n transform: \"translateY(0)\",\n transitionDuration: `${SLIDE_FROM_TOP_ENTER}ms`,\n },\n exiting: {\n opacity: 0,\n transform: away,\n transitionDuration: `${SLIDE_FROM_TOP_EXIT}ms`,\n },\n exited: {\n opacity: 0,\n transform: away,\n transitionDuration: `${SLIDE_FROM_TOP_EXIT}ms`,\n },\n };\n};\n\nexport const SlideFromTop: FC<ISlideFromTop> = ({\n in: inProp = false,\n onEnter,\n onExited,\n children,\n style,\n timeout = 400,\n distance = DEFAULT_DISTANCE,\n}) => {\n const styles = buildStyles(distance);\n\n // React flushes the state change that follows onEnter before the browser paints, so without a\n // forced layout here the element never holds its starting style and the transition is skipped.\n const handleEnter = (node: HTMLElement, isAppearing: boolean) => {\n if (node) {\n void node.offsetHeight;\n }\n onEnter?.(node, isAppearing);\n };\n\n return (\n <Transition\n appear\n in={inProp}\n timeout={timeout}\n onEnter={handleEnter}\n onExited={onExited}\n >\n {(state): ReactElement => {\n return cloneElement(children, {\n style: {\n visibility: state === \"exited\" && !inProp ? \"hidden\" : undefined,\n ...styles.base,\n ...styles[state],\n ...style,\n ...children.props.style,\n },\n });\n }}\n </Transition>\n );\n};\n\nSlideFromTop.displayName = \"SlideFromTop\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAsBC,YAAY,QAAQ,OAAO;AAC7D,SAASC,UAAU,QAAQ,wBAAwB;AAWnD,MAAMC,gBAAgB,GAAG,EAAE;AAE3B,OAAO,MAAMC,oBAAoB,GAAG,GAAG;AACvC,OAAO,MAAMC,mBAAmB,GAAG,GAAG;AAEtC,MAAMC,WAAW,GAAIC,QAAgB,IAAK;EACxC,MAAMC,IAAI,oBAAkBD,QAAQ,QAAK;EAEzC,OAAO;IACLE,IAAI,EAAE;MACJC,kBAAkB,EAAE,oBAAoB;MACxCC,wBAAwB,EAAE,UAAU;MACpCC,SAAS,EAAEJ,IAAI;MACfK,OAAO,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACRD,OAAO,EAAE,CAAC;MACVD,SAAS,EAAE,eAAe;MAC1BG,kBAAkB,EAAKX,oBAAoB;IAC7C,CAAC;IACDY,OAAO,EAAE;MACPH,OAAO,EAAE,CAAC;MACVD,SAAS,EAAE,eAAe;MAC1BG,kBAAkB,EAAKX,oBAAoB;IAC7C,CAAC;IACDa,OAAO,EAAE;MACPJ,OAAO,EAAE,CAAC;MACVD,SAAS,EAAEJ,IAAI;MACfO,kBAAkB,EAAKV,mBAAmB;IAC5C,CAAC;IACDa,MAAM,EAAE;MACNL,OAAO,EAAE,CAAC;MACVD,SAAS,EAAEJ,IAAI;MACfO,kBAAkB,EAAKV,mBAAmB;IAC5C;EACF,CAAC;AACH,CAAC;AAED,OAAO,MAAMc,YAA+B,GAAGC,IAAA,IAQzC;EAAA,IAAAC,OAAA,GAAAD,IAAA,CAPJE,EAAE;IAAEC,MAAM,GAAAF,OAAA,cAAG,KAAK,GAAAA,OAAA;IAClBG,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,KAAK,GAAAP,IAAA,CAALO,KAAK;IAAAC,YAAA,GAAAR,IAAA,CACLS,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,GAAG,GAAAA,YAAA;IAAAE,aAAA,GAAAV,IAAA,CACbb,QAAQ;IAARA,QAAQ,GAAAuB,aAAA,cAAG3B,gBAAgB,GAAA2B,aAAA;EAE3B,MAAMC,MAAM,GAAGzB,WAAW,CAACC,QAAQ,CAAC;;EAEpC;EACA;EACA,MAAMyB,WAAW,GAAGA,CAACC,IAAiB,EAAEC,WAAoB,KAAK;IAC/D,IAAID,IAAI,EAAE;MACR,KAAKA,IAAI,CAACE,YAAY;IACxB;IACAX,OAAO,YAAPA,OAAO,CAAGS,IAAI,EAAEC,WAAW,CAAC;EAC9B,CAAC;EAED,oBACElC,KAAA,CAAAoC,aAAA,CAAClC,UAAU;IACTmC,MAAM;IACNf,EAAE,EAAEC,MAAO;IACXM,OAAO,EAAEA,OAAQ;IACjBL,OAAO,EAAEQ,WAAY;IACrBP,QAAQ,EAAEA;EAAS,GAEjBa,KAAK,IAAmB;IACxB,oBAAOrC,YAAY,CAACyB,QAAQ,EAAE;MAC5BC,KAAK,EAAAY,QAAA;QACHC,UAAU,EAAEF,KAAK,KAAK,QAAQ,IAAI,CAACf,MAAM,GAAG,QAAQ,GAAGkB;MAAS,GAC7DV,MAAM,CAACtB,IAAI,EACXsB,MAAM,CAACO,KAAK,CAAC,EACbX,KAAK,EACLD,QAAQ,CAACgB,KAAK,CAACf,KAAK;IAE3B,CAAC,CAAC;EACJ,CACU,CAAC;AAEjB,CAAC;AAEDR,YAAY,CAACwB,WAAW,GAAG,cAAc","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Transitions/index.ts"],"sourcesContent":["export * from \"./Fade\";\nexport * from \"./Slide\";\nexport * from \"./FromElement\";\nexport * from \"./SlideFromTop\";\nexport * from \"./SlideLeftRightTransition\";\nexport * from \"./ResizeTransition\";\nexport * from \"./Reveal\";\nexport * from \"./Scale\";\nexport * from \"./types\";\n"],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,oBAAoB;AAClC,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,SAAS","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Transitions/index.ts"],"sourcesContent":["export * from \"./Fade\";\nexport * from \"./Slide\";\nexport * from \"./FromElement\";\nexport * from \"./SlideFromTop\";\nexport * from \"./SlideLeftRightTransition\";\nexport * from \"./ResizeTransition\";\nexport * from \"./Reveal\";\nexport * from \"./Scale\";\nexport * from \"./Grow\";\nexport * from \"./types\";\n"],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,oBAAoB;AAClC,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS","ignoreList":[]}
|