@mantine/nprogress 5.0.0-alpha.1 → 5.0.0-alpha.5
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/cjs/NProgress.js +23 -24
- package/cjs/NProgress.js.map +1 -1
- package/esm/NProgress.js +23 -24
- package/esm/NProgress.js.map +1 -1
- package/lib/NProgress.d.ts.map +1 -1
- package/package.json +4 -4
package/cjs/NProgress.js
CHANGED
|
@@ -30,9 +30,9 @@ function NProgress({
|
|
|
30
30
|
const reducedMotion = hooks.useReducedMotion();
|
|
31
31
|
const [_progress, setProgress] = React.useState(defaultProgress);
|
|
32
32
|
const [mounted, setMounted] = React.useState(true);
|
|
33
|
+
const [unmountProgress, setUnmountProgress] = React.useState(false);
|
|
33
34
|
const resetRef = React.useRef();
|
|
34
35
|
const unmountRef = React.useRef();
|
|
35
|
-
const unmountProgressRef = React.useRef(false);
|
|
36
36
|
const interval = hooks.useInterval(() => {
|
|
37
37
|
setProgress((amount) => {
|
|
38
38
|
let next = 0;
|
|
@@ -48,17 +48,6 @@ function NProgress({
|
|
|
48
48
|
return amount + next;
|
|
49
49
|
});
|
|
50
50
|
}, stepIntervalTime);
|
|
51
|
-
const cancelUnmount = () => {
|
|
52
|
-
if (unmountRef.current) {
|
|
53
|
-
window.clearTimeout(unmountRef.current);
|
|
54
|
-
unmountRef.current = null;
|
|
55
|
-
}
|
|
56
|
-
if (resetRef.current) {
|
|
57
|
-
window.clearTimeout(resetRef.current);
|
|
58
|
-
resetRef.current = null;
|
|
59
|
-
}
|
|
60
|
-
setMounted(true);
|
|
61
|
-
};
|
|
62
51
|
const set = (value) => setProgress(value);
|
|
63
52
|
const add = (value) => setProgress((c) => Math.min(c + value, 100));
|
|
64
53
|
const decrease = (value) => setProgress((c) => Math.max(c - value, 0));
|
|
@@ -68,10 +57,10 @@ function NProgress({
|
|
|
68
57
|
};
|
|
69
58
|
const stop = () => interval.stop();
|
|
70
59
|
const reset = () => {
|
|
71
|
-
|
|
60
|
+
setUnmountProgress(true);
|
|
72
61
|
stop();
|
|
73
62
|
setProgress(0);
|
|
74
|
-
|
|
63
|
+
window.setTimeout(() => setUnmountProgress(false), 0);
|
|
75
64
|
};
|
|
76
65
|
const ctx = {
|
|
77
66
|
set,
|
|
@@ -81,21 +70,31 @@ function NProgress({
|
|
|
81
70
|
stop,
|
|
82
71
|
reset
|
|
83
72
|
};
|
|
84
|
-
const
|
|
85
|
-
unmountRef.current
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
resetRef.current = window.setTimeout(() => {
|
|
89
|
-
resetRef.current = null;
|
|
90
|
-
reset();
|
|
91
|
-
}, exitTransitionDuration);
|
|
73
|
+
const cancelUnmount = () => {
|
|
74
|
+
if (unmountRef.current) {
|
|
75
|
+
window.clearTimeout(unmountRef.current);
|
|
76
|
+
unmountRef.current = null;
|
|
92
77
|
}
|
|
78
|
+
if (resetRef.current) {
|
|
79
|
+
window.clearTimeout(resetRef.current);
|
|
80
|
+
resetRef.current = null;
|
|
81
|
+
}
|
|
82
|
+
setMounted(true);
|
|
93
83
|
};
|
|
94
84
|
hooks.useDidUpdate(() => {
|
|
95
85
|
if (_progress >= 100) {
|
|
96
86
|
stop();
|
|
97
87
|
onFinish && onFinish();
|
|
98
|
-
unmountRef.current = window.setTimeout(
|
|
88
|
+
unmountRef.current = window.setTimeout(() => {
|
|
89
|
+
unmountRef.current = null;
|
|
90
|
+
setMounted(false);
|
|
91
|
+
if (autoReset) {
|
|
92
|
+
resetRef.current = window.setTimeout(() => {
|
|
93
|
+
resetRef.current = null;
|
|
94
|
+
reset();
|
|
95
|
+
}, reducedMotion ? 0 : exitTransitionDuration);
|
|
96
|
+
}
|
|
97
|
+
}, exitTimeout);
|
|
99
98
|
} else if (!mounted) {
|
|
100
99
|
cancelUnmount();
|
|
101
100
|
}
|
|
@@ -104,7 +103,7 @@ function NProgress({
|
|
|
104
103
|
return /* @__PURE__ */ React__default.createElement(core.OptionalPortal, {
|
|
105
104
|
withinPortal,
|
|
106
105
|
zIndex
|
|
107
|
-
}, !
|
|
106
|
+
}, !unmountProgress && /* @__PURE__ */ React__default.createElement(core.Progress, {
|
|
108
107
|
radius: 0,
|
|
109
108
|
value: _progress,
|
|
110
109
|
size,
|
package/cjs/NProgress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n /** The default progress */\n defaultProgress?: number;\n\n /** The color of the progressbar */\n color?: MantineColor;\n\n /** The height of the progressbar */\n size?: number;\n\n /** Called when the progress is 100% */\n onFinish?: () => void;\n\n /** Automatically resets the progress when 100% is reached */\n autoReset?: boolean;\n\n /** Step delay in ms */\n stepIntervalTime?: number;\n\n /** Transition function (transition-timing-function) */\n progressTransition?: string;\n\n /** Transition duration in ms */\n progressTransitionDuration?: number;\n\n /** The time when the component should be unmounted after progress is 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Exit transition function (transition-timing-function)*/\n exitTransition?: string;\n\n /** Determines whether NProgress should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** NProgress container z-index */\n zIndex?: number;\n}\n\nexport function NProgress({\n defaultProgress = 0,\n color = 'blue',\n size = 2,\n stepIntervalTime = 500,\n progressTransition = 'ease',\n progressTransitionDuration = 600,\n exitTimeout = 700,\n exitTransitionDuration = 600,\n exitTransition = 'ease',\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('nprogress'),\n}: NProgressProps) {\n const reducedMotion = useReducedMotion();\n const [_progress, setProgress] = useState(defaultProgress);\n const [mounted, setMounted] = useState(true);\n const
|
|
1
|
+
{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n /** The default progress */\n defaultProgress?: number;\n\n /** The color of the progressbar */\n color?: MantineColor;\n\n /** The height of the progressbar */\n size?: number;\n\n /** Called when the progress is 100% */\n onFinish?: () => void;\n\n /** Automatically resets the progress when 100% is reached */\n autoReset?: boolean;\n\n /** Step delay in ms */\n stepIntervalTime?: number;\n\n /** Transition function (transition-timing-function) */\n progressTransition?: string;\n\n /** Transition duration in ms */\n progressTransitionDuration?: number;\n\n /** The time when the component should be unmounted after progress is 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Exit transition function (transition-timing-function)*/\n exitTransition?: string;\n\n /** Determines whether NProgress should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** NProgress container z-index */\n zIndex?: number;\n}\n\nexport function NProgress({\n defaultProgress = 0,\n color = 'blue',\n size = 2,\n stepIntervalTime = 500,\n progressTransition = 'ease',\n progressTransitionDuration = 600,\n exitTimeout = 700,\n exitTransitionDuration = 600,\n exitTransition = 'ease',\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('nprogress'),\n}: NProgressProps) {\n const reducedMotion = useReducedMotion();\n const [_progress, setProgress] = useState(defaultProgress);\n const [mounted, setMounted] = useState(true);\n const [unmountProgress, setUnmountProgress] = useState(false);\n const resetRef = useRef<number>();\n const unmountRef = useRef<number>();\n\n const interval = useInterval(() => {\n setProgress((amount) => {\n let next = 0;\n if (amount >= 0 && amount <= 20) {\n next = 10;\n } else if (amount >= 20 && amount <= 50) {\n next = 4;\n } else if (amount >= 50 && amount <= 80) {\n next = 2;\n } else if (amount >= 80 && amount <= 99) {\n next = 0.5;\n }\n\n return amount + next;\n });\n }, stepIntervalTime);\n\n const set = (value: React.SetStateAction<number>) => setProgress(value);\n const add = (value: number) => setProgress((c) => Math.min(c + value, 100));\n const decrease = (value: number) => setProgress((c) => Math.max(c - value, 0));\n const start = () => {\n interval.stop();\n interval.start();\n };\n const stop = () => interval.stop();\n const reset = () => {\n setUnmountProgress(true);\n stop();\n setProgress(0);\n window.setTimeout(() => setUnmountProgress(false), 0);\n };\n\n const ctx = {\n set,\n add,\n decrease,\n start,\n stop,\n reset,\n };\n\n const cancelUnmount = () => {\n if (unmountRef.current) {\n window.clearTimeout(unmountRef.current);\n unmountRef.current = null;\n }\n if (resetRef.current) {\n window.clearTimeout(resetRef.current);\n resetRef.current = null;\n }\n\n setMounted(true);\n };\n\n useDidUpdate(() => {\n if (_progress >= 100) {\n stop();\n onFinish && onFinish();\n unmountRef.current = window.setTimeout(() => {\n unmountRef.current = null;\n setMounted(false);\n\n if (autoReset) {\n resetRef.current = window.setTimeout(\n () => {\n resetRef.current = null;\n reset();\n },\n reducedMotion ? 0 : exitTransitionDuration\n );\n }\n }, exitTimeout);\n } else if (!mounted) {\n cancelUnmount();\n }\n }, [_progress]);\n\n useNProgressEvents(ctx);\n\n return (\n <OptionalPortal withinPortal={withinPortal} zIndex={zIndex}>\n {!unmountProgress && (\n <Progress\n radius={0}\n value={_progress}\n size={size}\n color={color}\n styles={{\n root: {\n top: 0,\n left: 0,\n position: 'fixed',\n width: '100vw',\n backgroundColor: 'transparent',\n transitionProperty: 'opacity',\n transitionTimingFunction: exitTransition,\n transitionDuration: `${\n reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n }ms`,\n opacity: mounted ? 1 : 0,\n },\n bar: {\n transitionProperty: 'width',\n transitionTimingFunction: progressTransition,\n transitionDuration: `${reducedMotion || !mounted ? 0 : progressTransitionDuration}ms`,\n },\n }}\n />\n )}\n </OptionalPortal>\n );\n}\n"],"names":["getDefaultZIndex","useReducedMotion","useState","useRef","useInterval","useDidUpdate","useNProgressEvents","React","OptionalPortal","Progress"],"mappings":"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"}
|
package/esm/NProgress.js
CHANGED
|
@@ -22,9 +22,9 @@ function NProgress({
|
|
|
22
22
|
const reducedMotion = useReducedMotion();
|
|
23
23
|
const [_progress, setProgress] = useState(defaultProgress);
|
|
24
24
|
const [mounted, setMounted] = useState(true);
|
|
25
|
+
const [unmountProgress, setUnmountProgress] = useState(false);
|
|
25
26
|
const resetRef = useRef();
|
|
26
27
|
const unmountRef = useRef();
|
|
27
|
-
const unmountProgressRef = useRef(false);
|
|
28
28
|
const interval = useInterval(() => {
|
|
29
29
|
setProgress((amount) => {
|
|
30
30
|
let next = 0;
|
|
@@ -40,17 +40,6 @@ function NProgress({
|
|
|
40
40
|
return amount + next;
|
|
41
41
|
});
|
|
42
42
|
}, stepIntervalTime);
|
|
43
|
-
const cancelUnmount = () => {
|
|
44
|
-
if (unmountRef.current) {
|
|
45
|
-
window.clearTimeout(unmountRef.current);
|
|
46
|
-
unmountRef.current = null;
|
|
47
|
-
}
|
|
48
|
-
if (resetRef.current) {
|
|
49
|
-
window.clearTimeout(resetRef.current);
|
|
50
|
-
resetRef.current = null;
|
|
51
|
-
}
|
|
52
|
-
setMounted(true);
|
|
53
|
-
};
|
|
54
43
|
const set = (value) => setProgress(value);
|
|
55
44
|
const add = (value) => setProgress((c) => Math.min(c + value, 100));
|
|
56
45
|
const decrease = (value) => setProgress((c) => Math.max(c - value, 0));
|
|
@@ -60,10 +49,10 @@ function NProgress({
|
|
|
60
49
|
};
|
|
61
50
|
const stop = () => interval.stop();
|
|
62
51
|
const reset = () => {
|
|
63
|
-
|
|
52
|
+
setUnmountProgress(true);
|
|
64
53
|
stop();
|
|
65
54
|
setProgress(0);
|
|
66
|
-
|
|
55
|
+
window.setTimeout(() => setUnmountProgress(false), 0);
|
|
67
56
|
};
|
|
68
57
|
const ctx = {
|
|
69
58
|
set,
|
|
@@ -73,21 +62,31 @@ function NProgress({
|
|
|
73
62
|
stop,
|
|
74
63
|
reset
|
|
75
64
|
};
|
|
76
|
-
const
|
|
77
|
-
unmountRef.current
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
resetRef.current = window.setTimeout(() => {
|
|
81
|
-
resetRef.current = null;
|
|
82
|
-
reset();
|
|
83
|
-
}, exitTransitionDuration);
|
|
65
|
+
const cancelUnmount = () => {
|
|
66
|
+
if (unmountRef.current) {
|
|
67
|
+
window.clearTimeout(unmountRef.current);
|
|
68
|
+
unmountRef.current = null;
|
|
84
69
|
}
|
|
70
|
+
if (resetRef.current) {
|
|
71
|
+
window.clearTimeout(resetRef.current);
|
|
72
|
+
resetRef.current = null;
|
|
73
|
+
}
|
|
74
|
+
setMounted(true);
|
|
85
75
|
};
|
|
86
76
|
useDidUpdate(() => {
|
|
87
77
|
if (_progress >= 100) {
|
|
88
78
|
stop();
|
|
89
79
|
onFinish && onFinish();
|
|
90
|
-
unmountRef.current = window.setTimeout(
|
|
80
|
+
unmountRef.current = window.setTimeout(() => {
|
|
81
|
+
unmountRef.current = null;
|
|
82
|
+
setMounted(false);
|
|
83
|
+
if (autoReset) {
|
|
84
|
+
resetRef.current = window.setTimeout(() => {
|
|
85
|
+
resetRef.current = null;
|
|
86
|
+
reset();
|
|
87
|
+
}, reducedMotion ? 0 : exitTransitionDuration);
|
|
88
|
+
}
|
|
89
|
+
}, exitTimeout);
|
|
91
90
|
} else if (!mounted) {
|
|
92
91
|
cancelUnmount();
|
|
93
92
|
}
|
|
@@ -96,7 +95,7 @@ function NProgress({
|
|
|
96
95
|
return /* @__PURE__ */ React.createElement(OptionalPortal, {
|
|
97
96
|
withinPortal,
|
|
98
97
|
zIndex
|
|
99
|
-
}, !
|
|
98
|
+
}, !unmountProgress && /* @__PURE__ */ React.createElement(Progress, {
|
|
100
99
|
radius: 0,
|
|
101
100
|
value: _progress,
|
|
102
101
|
size,
|
package/esm/NProgress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n /** The default progress */\n defaultProgress?: number;\n\n /** The color of the progressbar */\n color?: MantineColor;\n\n /** The height of the progressbar */\n size?: number;\n\n /** Called when the progress is 100% */\n onFinish?: () => void;\n\n /** Automatically resets the progress when 100% is reached */\n autoReset?: boolean;\n\n /** Step delay in ms */\n stepIntervalTime?: number;\n\n /** Transition function (transition-timing-function) */\n progressTransition?: string;\n\n /** Transition duration in ms */\n progressTransitionDuration?: number;\n\n /** The time when the component should be unmounted after progress is 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Exit transition function (transition-timing-function)*/\n exitTransition?: string;\n\n /** Determines whether NProgress should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** NProgress container z-index */\n zIndex?: number;\n}\n\nexport function NProgress({\n defaultProgress = 0,\n color = 'blue',\n size = 2,\n stepIntervalTime = 500,\n progressTransition = 'ease',\n progressTransitionDuration = 600,\n exitTimeout = 700,\n exitTransitionDuration = 600,\n exitTransition = 'ease',\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('nprogress'),\n}: NProgressProps) {\n const reducedMotion = useReducedMotion();\n const [_progress, setProgress] = useState(defaultProgress);\n const [mounted, setMounted] = useState(true);\n const
|
|
1
|
+
{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n /** The default progress */\n defaultProgress?: number;\n\n /** The color of the progressbar */\n color?: MantineColor;\n\n /** The height of the progressbar */\n size?: number;\n\n /** Called when the progress is 100% */\n onFinish?: () => void;\n\n /** Automatically resets the progress when 100% is reached */\n autoReset?: boolean;\n\n /** Step delay in ms */\n stepIntervalTime?: number;\n\n /** Transition function (transition-timing-function) */\n progressTransition?: string;\n\n /** Transition duration in ms */\n progressTransitionDuration?: number;\n\n /** The time when the component should be unmounted after progress is 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Exit transition function (transition-timing-function)*/\n exitTransition?: string;\n\n /** Determines whether NProgress should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** NProgress container z-index */\n zIndex?: number;\n}\n\nexport function NProgress({\n defaultProgress = 0,\n color = 'blue',\n size = 2,\n stepIntervalTime = 500,\n progressTransition = 'ease',\n progressTransitionDuration = 600,\n exitTimeout = 700,\n exitTransitionDuration = 600,\n exitTransition = 'ease',\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('nprogress'),\n}: NProgressProps) {\n const reducedMotion = useReducedMotion();\n const [_progress, setProgress] = useState(defaultProgress);\n const [mounted, setMounted] = useState(true);\n const [unmountProgress, setUnmountProgress] = useState(false);\n const resetRef = useRef<number>();\n const unmountRef = useRef<number>();\n\n const interval = useInterval(() => {\n setProgress((amount) => {\n let next = 0;\n if (amount >= 0 && amount <= 20) {\n next = 10;\n } else if (amount >= 20 && amount <= 50) {\n next = 4;\n } else if (amount >= 50 && amount <= 80) {\n next = 2;\n } else if (amount >= 80 && amount <= 99) {\n next = 0.5;\n }\n\n return amount + next;\n });\n }, stepIntervalTime);\n\n const set = (value: React.SetStateAction<number>) => setProgress(value);\n const add = (value: number) => setProgress((c) => Math.min(c + value, 100));\n const decrease = (value: number) => setProgress((c) => Math.max(c - value, 0));\n const start = () => {\n interval.stop();\n interval.start();\n };\n const stop = () => interval.stop();\n const reset = () => {\n setUnmountProgress(true);\n stop();\n setProgress(0);\n window.setTimeout(() => setUnmountProgress(false), 0);\n };\n\n const ctx = {\n set,\n add,\n decrease,\n start,\n stop,\n reset,\n };\n\n const cancelUnmount = () => {\n if (unmountRef.current) {\n window.clearTimeout(unmountRef.current);\n unmountRef.current = null;\n }\n if (resetRef.current) {\n window.clearTimeout(resetRef.current);\n resetRef.current = null;\n }\n\n setMounted(true);\n };\n\n useDidUpdate(() => {\n if (_progress >= 100) {\n stop();\n onFinish && onFinish();\n unmountRef.current = window.setTimeout(() => {\n unmountRef.current = null;\n setMounted(false);\n\n if (autoReset) {\n resetRef.current = window.setTimeout(\n () => {\n resetRef.current = null;\n reset();\n },\n reducedMotion ? 0 : exitTransitionDuration\n );\n }\n }, exitTimeout);\n } else if (!mounted) {\n cancelUnmount();\n }\n }, [_progress]);\n\n useNProgressEvents(ctx);\n\n return (\n <OptionalPortal withinPortal={withinPortal} zIndex={zIndex}>\n {!unmountProgress && (\n <Progress\n radius={0}\n value={_progress}\n size={size}\n color={color}\n styles={{\n root: {\n top: 0,\n left: 0,\n position: 'fixed',\n width: '100vw',\n backgroundColor: 'transparent',\n transitionProperty: 'opacity',\n transitionTimingFunction: exitTransition,\n transitionDuration: `${\n reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n }ms`,\n opacity: mounted ? 1 : 0,\n },\n bar: {\n transitionProperty: 'width',\n transitionTimingFunction: progressTransition,\n transitionDuration: `${reducedMotion || !mounted ? 0 : progressTransitionDuration}ms`,\n },\n }}\n />\n )}\n </OptionalPortal>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/lib/NProgress.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NProgress.d.ts","sourceRoot":"","sources":["../src/NProgress.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIjE,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,mCAAmC;IACnC,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,uDAAuD;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,gCAAgC;IAChC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,sFAAsF;IACtF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,eAAmB,EACnB,KAAc,EACd,IAAQ,EACR,gBAAsB,EACtB,kBAA2B,EAC3B,0BAAgC,EAChC,WAAiB,EACjB,sBAA4B,EAC5B,cAAuB,EACvB,QAAQ,EACR,SAAiB,EACjB,YAAmB,EACnB,MAAsC,GACvC,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"NProgress.d.ts","sourceRoot":"","sources":["../src/NProgress.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIjE,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,mCAAmC;IACnC,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,uDAAuD;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,gCAAgC;IAChC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,sFAAsF;IACtF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,eAAmB,EACnB,KAAc,EACd,IAAQ,EACR,gBAAsB,EACtB,kBAA2B,EAC3B,0BAAgC,EAChC,WAAiB,EACjB,sBAA4B,EAC5B,cAAuB,EACvB,QAAQ,EACR,SAAiB,EACjB,YAAmB,EACnB,MAAsC,GACvC,EAAE,cAAc,eAuHhB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/nprogress",
|
|
3
3
|
"description": "A navigation progress bar",
|
|
4
|
-
"version": "5.0.0-alpha.
|
|
4
|
+
"version": "5.0.0-alpha.5",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"directory": "src/mantine-nprogress"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@mantine/core": "5.0.0-alpha.
|
|
19
|
-
"@mantine/hooks": "5.0.0-alpha.
|
|
20
|
-
"@mantine/styles": "5.0.0-alpha.
|
|
18
|
+
"@mantine/core": "5.0.0-alpha.5",
|
|
19
|
+
"@mantine/hooks": "5.0.0-alpha.5",
|
|
20
|
+
"@mantine/styles": "5.0.0-alpha.5",
|
|
21
21
|
"react": ">=16.8.0",
|
|
22
22
|
"react-dom": ">=16.8.0"
|
|
23
23
|
},
|