taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
328 lines (327 loc) • 8.4 kB
JavaScript
import { c as Z, d as ee } from "./index-dFotuATn.js";
import * as w from "react";
import e from "prop-types";
import { A as te, z as ne, G as ie, aJ as oe, aK as re, aL as se, aM as ae, aH as le, H as R, I as pe, aN as j, J as ce, aO as de } from "./JBrowsePanel-uJIA-L6s.js";
import { jsx as z } from "react/jsx-runtime";
function ue(r) {
return te("MuiCollapse", r);
}
ne("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
const he = (r) => {
const {
orientation: n,
classes: s
} = r, f = {
root: ["root", `${n}`],
entered: ["entered"],
hidden: ["hidden"],
wrapper: ["wrapper", `${n}`],
wrapperInner: ["wrapperInner", `${n}`]
};
return pe(f, ue, s);
}, fe = R("div", {
name: "MuiCollapse",
slot: "Root",
overridesResolver: (r, n) => {
const {
ownerState: s
} = r;
return [n.root, n[s.orientation], s.state === "entered" && n.entered, s.state === "exited" && !s.in && s.collapsedSize === "0px" && n.hidden];
}
})(ce(({
theme: r
}) => ({
height: 0,
overflow: "hidden",
transition: r.transitions.create("height"),
variants: [{
props: {
orientation: "horizontal"
},
style: {
height: "auto",
width: 0,
transition: r.transitions.create("width")
}
}, {
props: {
state: "entered"
},
style: {
height: "auto",
overflow: "visible"
}
}, {
props: {
state: "entered",
orientation: "horizontal"
},
style: {
width: "auto"
}
}, {
props: ({
ownerState: n
}) => n.state === "exited" && !n.in && n.collapsedSize === "0px",
style: {
visibility: "hidden"
}
}]
}))), me = R("div", {
name: "MuiCollapse",
slot: "Wrapper"
})({
// Hack to get children with a negative margin to not falsify the height computation.
display: "flex",
width: "100%",
variants: [{
props: {
orientation: "horizontal"
},
style: {
width: "auto",
height: "100%"
}
}]
}), ge = R("div", {
name: "MuiCollapse",
slot: "WrapperInner"
})({
width: "100%",
variants: [{
props: {
orientation: "horizontal"
},
style: {
width: "auto",
height: "100%"
}
}]
}), S = /* @__PURE__ */ w.forwardRef(function(n, s) {
const f = ie({
props: n,
name: "MuiCollapse"
}), {
addEndListener: b,
children: F,
className: P,
collapsedSize: m = "0px",
component: U,
easing: D,
in: O,
onEnter: $,
onEntered: N,
onEntering: H,
onExit: M,
onExited: J,
onExiting: W,
orientation: A = "vertical",
style: C,
timeout: a = oe.standard,
// eslint-disable-next-line react/prop-types
TransitionComponent: G = re,
...K
} = f, g = {
...f,
orientation: A,
collapsedSize: m
}, c = he(g), I = se(), V = ae(), l = w.useRef(null), T = w.useRef(), y = typeof m == "number" ? `${m}px` : m, d = A === "horizontal", u = d ? "width" : "height", E = w.useRef(null), _ = le(s, E), p = (t) => (i) => {
if (t) {
const o = E.current;
i === void 0 ? t(o) : t(o, i);
}
}, v = () => l.current ? l.current[d ? "clientWidth" : "clientHeight"] : 0, k = p((t, i) => {
l.current && d && (l.current.style.position = "absolute"), t.style[u] = y, $ && $(t, i);
}), q = p((t, i) => {
const o = v();
l.current && d && (l.current.style.position = "");
const {
duration: h,
easing: x
} = j({
style: C,
timeout: a,
easing: D
}, {
mode: "enter"
});
if (a === "auto") {
const L = I.transitions.getAutoHeightDuration(o);
t.style.transitionDuration = `${L}ms`, T.current = L;
} else
t.style.transitionDuration = typeof h == "string" ? h : `${h}ms`;
t.style[u] = `${o}px`, t.style.transitionTimingFunction = x, H && H(t, i);
}), B = p((t, i) => {
t.style[u] = "auto", N && N(t, i);
}), Q = p((t) => {
t.style[u] = `${v()}px`, M && M(t);
}), X = p(J), Y = p((t) => {
const i = v(), {
duration: o,
easing: h
} = j({
style: C,
timeout: a,
easing: D
}, {
mode: "exit"
});
if (a === "auto") {
const x = I.transitions.getAutoHeightDuration(i);
t.style.transitionDuration = `${x}ms`, T.current = x;
} else
t.style.transitionDuration = typeof o == "string" ? o : `${o}ms`;
t.style[u] = y, t.style.transitionTimingFunction = h, W && W(t);
});
return /* @__PURE__ */ z(G, {
in: O,
onEnter: k,
onEntered: B,
onEntering: q,
onExit: Q,
onExited: X,
onExiting: Y,
addEndListener: (t) => {
a === "auto" && V.start(T.current || 0, t), b && b(E.current, t);
},
nodeRef: E,
timeout: a === "auto" ? null : a,
...K,
children: (t, {
ownerState: i,
...o
}) => /* @__PURE__ */ z(fe, {
as: U,
className: Z(c.root, P, {
entered: c.entered,
exited: !O && y === "0px" && c.hidden
}[t]),
style: {
[d ? "minWidth" : "minHeight"]: y,
...C
},
ref: _,
ownerState: {
...g,
state: t
},
...o,
children: /* @__PURE__ */ z(me, {
ownerState: {
...g,
state: t
},
className: c.wrapper,
ref: l,
children: /* @__PURE__ */ z(ge, {
ownerState: {
...g,
state: t
},
className: c.wrapperInner,
children: F
})
})
})
});
});
ee.process.env.NODE_ENV !== "production" && (S.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Add a custom transition end trigger. Called with the transitioning DOM
* node and a done callback. Allows for more fine grained transition end
* logic. Note: Timeouts are still used as a fallback if provided.
*/
addEndListener: e.func,
/**
* The content node to be collapsed.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The width (horizontal) or height (vertical) of the container when collapsed.
* @default '0px'
*/
collapsedSize: e.oneOfType([e.number, e.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: de,
/**
* The transition timing function.
* You may specify a single easing or a object containing enter and exit values.
*/
easing: e.oneOfType([e.shape({
enter: e.string,
exit: e.string
}), e.string]),
/**
* If `true`, the component will transition in.
*/
in: e.bool,
/**
* @ignore
*/
onEnter: e.func,
/**
* @ignore
*/
onEntered: e.func,
/**
* @ignore
*/
onEntering: e.func,
/**
* @ignore
*/
onExit: e.func,
/**
* @ignore
*/
onExited: e.func,
/**
* @ignore
*/
onExiting: e.func,
/**
* The transition orientation.
* @default 'vertical'
*/
orientation: e.oneOf(["horizontal", "vertical"]),
/**
* @ignore
*/
style: e.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*
* Set to 'auto' to automatically calculate transition time based on height.
* @default duration.standard
*/
timeout: e.oneOfType([e.oneOf(["auto"]), e.number, e.shape({
appear: e.number,
enter: e.number,
exit: e.number
})])
});
S && (S.muiSupportAuto = !0);
export {
S as C
};
//# sourceMappingURL=Collapse-BMgUH2t2.js.map