@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
62 lines (58 loc) • 1.99 kB
JavaScript
'use client';
;
var jsxRuntime = require('react/jsx-runtime');
require('react');
require('@mantine/hooks');
require('clsx');
var Mantine_context = require('../../core/MantineProvider/Mantine.context.cjs');
require('../../core/MantineProvider/default-theme.cjs');
require('../../core/MantineProvider/MantineProvider.cjs');
require('../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs');
require('../../core/MantineProvider/MantineCssVariables/MantineCssVariables.cjs');
require('../../core/Box/Box.cjs');
require('../../core/DirectionProvider/DirectionProvider.cjs');
var getTransitionStyles = require('./get-transition-styles/get-transition-styles.cjs');
var useTransition = require('./use-transition.cjs');
function Transition({
keepMounted,
transition = "fade",
duration = 250,
exitDuration = duration,
mounted,
children,
timingFunction = "ease",
onExit,
onEntered,
onEnter,
onExited,
enterDelay,
exitDelay
}) {
const env = Mantine_context.useMantineEnv();
const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition.useTransition({
mounted,
exitDuration,
duration,
timingFunction,
onExit,
onEntered,
onEnter,
onExited,
enterDelay,
exitDelay
});
if (transitionDuration === 0 || env === "test") {
return mounted ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({}) }) : keepMounted ? children({ display: "none" }) : null;
}
return transitionStatus === "exited" ? keepMounted ? children({ display: "none" }) : null : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(
getTransitionStyles.getTransitionStyles({
transition,
duration: transitionDuration,
state: transitionStatus,
timingFunction: transitionTimingFunction
})
) });
}
Transition.displayName = "@mantine/core/Transition";
exports.Transition = Transition;
//# sourceMappingURL=Transition.cjs.map