taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
519 lines (518 loc) • 14.6 kB
JavaScript
import { d as $, c as W } from "./index-dFotuATn.js";
import * as i from "react";
import { z as F, A as U, G as q, aG as Q, b5 as g, H as S, I as H, P as Y, J as P, bg as Z, bB as oo, b9 as eo, X as to } from "./JBrowsePanel-uJIA-L6s.js";
import o from "prop-types";
import { jsxs as D, jsx as p } from "react/jsx-runtime";
import { C as no } from "./Collapse-BMgUH2t2.js";
const B = /* @__PURE__ */ i.createContext({});
$.process.env.NODE_ENV !== "production" && (B.displayName = "AccordionContext");
function ro(e) {
return U("MuiAccordion", e);
}
const w = F("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]), so = (e) => {
const {
classes: t,
square: n,
expanded: s,
disabled: d,
disableGutters: l
} = e;
return H({
root: ["root", !n && "rounded", s && "expanded", d && "disabled", !l && "gutters"],
heading: ["heading"],
region: ["region"]
}, ro, t);
}, ao = S(Y, {
name: "MuiAccordion",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [{
[`& .${w.region}`]: t.region
}, t.root, !n.square && t.rounded, !n.disableGutters && t.gutters];
}
})(P(({
theme: e
}) => {
const t = {
duration: e.transitions.duration.shortest
};
return {
position: "relative",
transition: e.transitions.create(["margin"], t),
overflowAnchor: "none",
// Keep the same scrolling position
"&::before": {
position: "absolute",
left: 0,
top: -1,
right: 0,
height: 1,
content: '""',
opacity: 1,
backgroundColor: (e.vars || e).palette.divider,
transition: e.transitions.create(["opacity", "background-color"], t)
},
"&:first-of-type": {
"&::before": {
display: "none"
}
},
[`&.${w.expanded}`]: {
"&::before": {
opacity: 0
},
"&:first-of-type": {
marginTop: 0
},
"&:last-of-type": {
marginBottom: 0
},
"& + &": {
"&::before": {
display: "none"
}
}
},
[`&.${w.disabled}`]: {
backgroundColor: (e.vars || e).palette.action.disabledBackground
}
};
}), P(({
theme: e
}) => ({
variants: [{
props: (t) => !t.square,
style: {
borderRadius: 0,
"&:first-of-type": {
borderTopLeftRadius: (e.vars || e).shape.borderRadius,
borderTopRightRadius: (e.vars || e).shape.borderRadius
},
"&:last-of-type": {
borderBottomLeftRadius: (e.vars || e).shape.borderRadius,
borderBottomRightRadius: (e.vars || e).shape.borderRadius,
// Fix a rendering issue on Edge
"@supports (-ms-ime-align: auto)": {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
}
}, {
props: (t) => !t.disableGutters,
style: {
[`&.${w.expanded}`]: {
margin: "16px 0"
}
}
}]
}))), io = S("h3", {
name: "MuiAccordion",
slot: "Heading"
})({
all: "unset"
}), co = /* @__PURE__ */ i.forwardRef(function(t, n) {
const s = q({
props: t,
name: "MuiAccordion"
}), {
children: d,
className: l,
defaultExpanded: x = !1,
disabled: C = !1,
disableGutters: u = !1,
expanded: M,
onChange: h,
square: v = !1,
slots: R = {},
slotProps: O = {},
TransitionComponent: E,
TransitionProps: N,
...j
} = s, [r, c] = Q({
controlled: M,
default: x,
name: "Accordion",
state: "expanded"
}), m = i.useCallback((K) => {
c(!r), h && h(K, !r);
}, [r, h, c]), [T, ...G] = i.Children.toArray(d), k = i.useMemo(() => ({
expanded: r,
disabled: C,
disableGutters: u,
toggle: m
}), [r, C, u, m]), f = {
...s,
square: v,
disabled: C,
disableGutters: u,
expanded: r
}, A = so(f), V = {
transition: E,
...R
}, a = {
transition: N,
...O
}, b = {
slots: V,
slotProps: a
}, [I, L] = g("root", {
elementType: ao,
externalForwardedProps: {
...b,
...j
},
className: W(A.root, l),
shouldForwardComponentProp: !0,
ownerState: f,
ref: n,
additionalProps: {
square: v
}
}), [_, z] = g("heading", {
elementType: io,
externalForwardedProps: b,
className: A.heading,
ownerState: f
}), [J, X] = g("transition", {
elementType: no,
externalForwardedProps: b,
ownerState: f
});
return /* @__PURE__ */ D(I, {
...L,
children: [/* @__PURE__ */ p(_, {
...z,
children: /* @__PURE__ */ p(B.Provider, {
value: k,
children: T
})
}), /* @__PURE__ */ p(J, {
in: r,
timeout: "auto",
...X,
children: /* @__PURE__ */ p("div", {
"aria-labelledby": T.props.id,
id: T.props["aria-controls"],
role: "region",
className: A.region,
children: G
})
})]
});
});
$.process.env.NODE_ENV !== "production" && (co.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: Z(o.node.isRequired, (e) => {
const t = i.Children.toArray(e.children)[0];
return oo.isFragment(t) ? new Error("MUI: The Accordion doesn't accept a Fragment as a child. Consider providing an array instead.") : /* @__PURE__ */ i.isValidElement(t) ? null : new Error("MUI: Expected the first child of Accordion to be a valid element.");
}),
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.string,
/**
* If `true`, expands the accordion by default.
* @default false
*/
defaultExpanded: o.bool,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: o.bool,
/**
* If `true`, it removes the margin between two expanded accordion items and the increase of height.
* @default false
*/
disableGutters: o.bool,
/**
* If `true`, expands the accordion, otherwise collapse it.
* Setting this prop enables control over the accordion.
*/
expanded: o.bool,
/**
* Callback fired when the expand/collapse state is changed.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {boolean} expanded The `expanded` state of the accordion.
*/
onChange: o.func,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
heading: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object]),
transition: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
heading: o.elementType,
root: o.elementType,
transition: o.elementType
}),
/**
* If `true`, rounded corners are disabled.
* @default false
*/
square: o.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
/**
* The component used for the transition.
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionComponent: o.elementType,
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionProps: o.object
});
function po(e) {
return U("MuiAccordionSummary", e);
}
const y = F("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]), lo = (e) => {
const {
classes: t,
expanded: n,
disabled: s,
disableGutters: d
} = e;
return H({
root: ["root", n && "expanded", s && "disabled", !d && "gutters"],
focusVisible: ["focusVisible"],
content: ["content", n && "expanded", !d && "contentGutters"],
expandIconWrapper: ["expandIconWrapper", n && "expanded"]
}, po, t);
}, uo = S(eo, {
name: "MuiAccordionSummary",
slot: "Root"
})(P(({
theme: e
}) => {
const t = {
duration: e.transitions.duration.shortest
};
return {
display: "flex",
width: "100%",
minHeight: 48,
padding: e.spacing(0, 2),
transition: e.transitions.create(["min-height", "background-color"], t),
[`&.${y.focusVisible}`]: {
backgroundColor: (e.vars || e).palette.action.focus
},
[`&.${y.disabled}`]: {
opacity: (e.vars || e).palette.action.disabledOpacity
},
[`&:hover:not(.${y.disabled})`]: {
cursor: "pointer"
},
variants: [{
props: (n) => !n.disableGutters,
style: {
[`&.${y.expanded}`]: {
minHeight: 64
}
}
}]
};
})), mo = S("span", {
name: "MuiAccordionSummary",
slot: "Content"
})(P(({
theme: e
}) => ({
display: "flex",
textAlign: "start",
flexGrow: 1,
margin: "12px 0",
variants: [{
props: (t) => !t.disableGutters,
style: {
transition: e.transitions.create(["margin"], {
duration: e.transitions.duration.shortest
}),
[`&.${y.expanded}`]: {
margin: "20px 0"
}
}
}]
}))), fo = S("span", {
name: "MuiAccordionSummary",
slot: "ExpandIconWrapper"
})(P(({
theme: e
}) => ({
display: "flex",
color: (e.vars || e).palette.action.active,
transform: "rotate(0deg)",
transition: e.transitions.create("transform", {
duration: e.transitions.duration.shortest
}),
[`&.${y.expanded}`]: {
transform: "rotate(180deg)"
}
}))), bo = /* @__PURE__ */ i.forwardRef(function(t, n) {
const s = q({
props: t,
name: "MuiAccordionSummary"
}), {
children: d,
className: l,
expandIcon: x,
focusVisibleClassName: C,
onClick: u,
slots: M,
slotProps: h,
...v
} = s, {
disabled: R = !1,
disableGutters: O,
expanded: E,
toggle: N
} = i.useContext(B), j = (a) => {
N && N(a), u && u(a);
}, r = {
...s,
expanded: E,
disabled: R,
disableGutters: O
}, c = lo(r), m = {
slots: M,
slotProps: h
}, [T, G] = g("root", {
ref: n,
shouldForwardComponentProp: !0,
className: W(c.root, l),
elementType: uo,
externalForwardedProps: {
...m,
...v
},
ownerState: r,
additionalProps: {
focusRipple: !1,
disableRipple: !0,
disabled: R,
"aria-expanded": E,
focusVisibleClassName: W(c.focusVisible, C)
},
getSlotProps: (a) => ({
...a,
onClick: (b) => {
var I;
(I = a.onClick) == null || I.call(a, b), j(b);
}
})
}), [k, f] = g("content", {
className: c.content,
elementType: mo,
externalForwardedProps: m,
ownerState: r
}), [A, V] = g("expandIconWrapper", {
className: c.expandIconWrapper,
elementType: fo,
externalForwardedProps: m,
ownerState: r
});
return /* @__PURE__ */ D(T, {
...G,
children: [/* @__PURE__ */ p(k, {
...f,
children: d
}), x && /* @__PURE__ */ p(A, {
...V,
children: x
})]
});
});
$.process.env.NODE_ENV !== "production" && (bo.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: o.node,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.string,
/**
* The icon to display as the expand indicator.
*/
expandIcon: o.node,
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName: o.string,
/**
* @ignore
*/
onClick: o.func,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
content: o.oneOfType([o.func, o.object]),
expandIconWrapper: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
content: o.elementType,
expandIconWrapper: o.elementType,
root: o.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
});
const To = to(/* @__PURE__ */ p("path", {
d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
}), "ExpandMore");
export {
co as A,
To as E,
bo as a
};
//# sourceMappingURL=ExpandMore-DnyR9BQr.js.map