@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
71 lines (70 loc) • 3 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
const require_MantineThemeProvider = require("../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_get_style_object = require("../../core/Box/get-style-object/get-style-object.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Collapse/Collapse.tsx
const defaultProps = {
transitionDuration: 200,
transitionTimingFunction: "ease",
animateOpacity: true,
orientation: "vertical"
};
const Collapse = require_factory.factory((props) => {
const { children, expanded, transitionDuration, transitionTimingFunction, style, onTransitionEnd, onTransitionStart, animateOpacity, keepMounted, ref, orientation, ...others } = require_use_props.useProps("Collapse", defaultProps, props);
const env = require_Mantine_context.useMantineEnv();
const theme = require_MantineThemeProvider.useMantineTheme();
const shouldReduceMotion = (0, _mantine_hooks.useReducedMotion)();
const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? 0 : transitionDuration;
const collapse = (orientation === "horizontal" ? _mantine_hooks.useHorizontalCollapse : _mantine_hooks.useCollapse)({
expanded,
transitionDuration: duration,
transitionTimingFunction,
onTransitionEnd,
onTransitionStart,
keepMounted: false
});
if (duration === 0) {
if (keepMounted === true && env !== "test") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
mode: expanded ? "visible" : "hidden",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
...others,
children
})
});
return expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
...others,
children
}) : null;
}
const isExited = collapse.state === "exited";
let content;
if (keepMounted === false) content = isExited ? null : children;
else if (keepMounted === true) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
mode: isExited ? "hidden" : "visible",
children
});
else content = children;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
...others,
...collapse.getCollapseProps({
style: {
opacity: expanded || !animateOpacity ? 1 : 0,
transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : "none",
...require_get_style_object.getStyleObject(style, theme)
},
ref
}),
children: content
});
});
Collapse.displayName = "@mantine/core/Collapse";
//#endregion
exports.Collapse = Collapse;
//# sourceMappingURL=Collapse.cjs.map