taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
531 lines (530 loc) • 14.9 kB
JavaScript
import { p as W, c as $ } from "./index-CoM8QAjP.js";
import * as i from "react";
import { z as B, A as F, E as q, av as Z, aU as u, G as x, H, P as oo, I as S, b4 as eo, bv as no, a$ as to, U as ro } from "./JBrowsePanel-BNE3gNW1.js";
import o from "prop-types";
import { jsxs as D, jsx as m } from "react/jsx-runtime";
import { C as so } from "./Collapse-DhaMDwX6.js";
const U = /* @__PURE__ */ i.createContext({});
W.env.NODE_ENV !== "production" && (U.displayName = "AccordionContext");
function ao(e) {
return F("MuiAccordion", e);
}
const w = B("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]), io = (e) => {
const {
classes: n,
square: t,
expanded: s,
disabled: c,
disableGutters: f
} = e;
return H({
root: ["root", !t && "rounded", s && "expanded", c && "disabled", !f && "gutters"],
heading: ["heading"],
region: ["region"]
}, ao, n);
}, co = x(oo, {
name: "MuiAccordion",
slot: "Root",
overridesResolver: (e, n) => {
const {
ownerState: t
} = e;
return [{
[`& .${w.region}`]: n.region
}, n.root, !t.square && n.rounded, !t.disableGutters && n.gutters];
}
})(S(({
theme: e
}) => {
const n = {
duration: e.transitions.duration.shortest
};
return {
position: "relative",
transition: e.transitions.create(["margin"], n),
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"], n)
},
"&: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
}
};
}), S(({
theme: e
}) => ({
variants: [{
props: (n) => !n.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: (n) => !n.disableGutters,
style: {
[`&.${w.expanded}`]: {
margin: "16px 0"
}
}
}]
}))), lo = x("h3", {
name: "MuiAccordion",
slot: "Heading"
})({
all: "unset"
}), po = x("div", {
name: "MuiAccordion",
slot: "Region"
})({}), uo = /* @__PURE__ */ i.forwardRef(function(n, t) {
const s = q({
props: n,
name: "MuiAccordion"
}), {
children: c,
className: f,
defaultExpanded: C = !1,
disabled: T = !1,
disableGutters: b = !1,
expanded: M,
onChange: h,
square: R = !1,
slots: v = {},
slotProps: O = {},
TransitionComponent: E,
TransitionProps: N,
...j
} = s, [r, d] = Z({
controlled: M,
default: C,
name: "Accordion",
state: "expanded"
}), g = i.useCallback((Y) => {
d(!r), h && h(Y, !r);
}, [r, h, d]), [A, ...k] = i.Children.toArray(c), G = i.useMemo(() => ({
expanded: r,
disabled: T,
disableGutters: b,
toggle: g
}), [r, T, b, g]), l = {
...s,
square: R,
disabled: T,
disableGutters: b,
expanded: r
}, P = io(l), V = {
transition: E,
...v
}, a = {
transition: N,
...O
}, p = {
slots: V,
slotProps: a
}, [I, L] = u("root", {
elementType: co,
externalForwardedProps: {
...p,
...j
},
className: $(P.root, f),
shouldForwardComponentProp: !0,
ownerState: l,
ref: t,
additionalProps: {
square: R
}
}), [_, z] = u("heading", {
elementType: lo,
externalForwardedProps: p,
className: P.heading,
ownerState: l
}), [J, K] = u("transition", {
elementType: so,
externalForwardedProps: p,
ownerState: l
}), [Q, X] = u("region", {
elementType: po,
externalForwardedProps: p,
ownerState: l,
className: P.region,
additionalProps: {
"aria-labelledby": A.props.id,
id: A.props["aria-controls"],
role: "region"
}
});
return /* @__PURE__ */ D(I, {
...L,
children: [/* @__PURE__ */ m(_, {
...z,
children: /* @__PURE__ */ m(U.Provider, {
value: G,
children: A
})
}), /* @__PURE__ */ m(J, {
in: r,
timeout: "auto",
...K,
children: /* @__PURE__ */ m(Q, {
...X,
children: k
})
})]
});
});
W.env.NODE_ENV !== "production" && (uo.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: eo(o.node.isRequired, (e) => {
const n = i.Children.toArray(e.children)[0];
return no.isFragment(n) ? new Error("MUI: The Accordion doesn't accept a Fragment as a child. Consider providing an array instead.") : /* @__PURE__ */ i.isValidElement(n) ? 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]),
region: 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,
region: 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 mo(e) {
return F("MuiAccordionSummary", e);
}
const y = B("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]), fo = (e) => {
const {
classes: n,
expanded: t,
disabled: s,
disableGutters: c
} = e;
return H({
root: ["root", t && "expanded", s && "disabled", !c && "gutters"],
focusVisible: ["focusVisible"],
content: ["content", t && "expanded", !c && "contentGutters"],
expandIconWrapper: ["expandIconWrapper", t && "expanded"]
}, mo, n);
}, bo = x(to, {
name: "MuiAccordionSummary",
slot: "Root"
})(S(({
theme: e
}) => {
const n = {
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"], n),
[`&.${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: (t) => !t.disableGutters,
style: {
[`&.${y.expanded}`]: {
minHeight: 64
}
}
}]
};
})), go = x("span", {
name: "MuiAccordionSummary",
slot: "Content"
})(S(({
theme: e
}) => ({
display: "flex",
textAlign: "start",
flexGrow: 1,
margin: "12px 0",
variants: [{
props: (n) => !n.disableGutters,
style: {
transition: e.transitions.create(["margin"], {
duration: e.transitions.duration.shortest
}),
[`&.${y.expanded}`]: {
margin: "20px 0"
}
}
}]
}))), yo = x("span", {
name: "MuiAccordionSummary",
slot: "ExpandIconWrapper"
})(S(({
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)"
}
}))), xo = /* @__PURE__ */ i.forwardRef(function(n, t) {
const s = q({
props: n,
name: "MuiAccordionSummary"
}), {
children: c,
className: f,
expandIcon: C,
focusVisibleClassName: T,
onClick: b,
slots: M,
slotProps: h,
...R
} = s, {
disabled: v = !1,
disableGutters: O,
expanded: E,
toggle: N
} = i.useContext(U), j = (a) => {
N && N(a), b && b(a);
}, r = {
...s,
expanded: E,
disabled: v,
disableGutters: O
}, d = fo(r), g = {
slots: M,
slotProps: h
}, [A, k] = u("root", {
ref: t,
shouldForwardComponentProp: !0,
className: $(d.root, f),
elementType: bo,
externalForwardedProps: {
...g,
...R
},
ownerState: r,
additionalProps: {
focusRipple: !1,
disableRipple: !0,
disabled: v,
"aria-expanded": E,
focusVisibleClassName: $(d.focusVisible, T)
},
getSlotProps: (a) => ({
...a,
onClick: (p) => {
var I;
(I = a.onClick) == null || I.call(a, p), j(p);
}
})
}), [G, l] = u("content", {
className: d.content,
elementType: go,
externalForwardedProps: g,
ownerState: r
}), [P, V] = u("expandIconWrapper", {
className: d.expandIconWrapper,
elementType: yo,
externalForwardedProps: g,
ownerState: r
});
return /* @__PURE__ */ D(A, {
...k,
children: [/* @__PURE__ */ m(G, {
...l,
children: c
}), C && /* @__PURE__ */ m(P, {
...V,
children: C
})]
});
});
W.env.NODE_ENV !== "production" && (xo.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 So = ro(/* @__PURE__ */ m("path", {
d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
}), "ExpandMore");
export {
uo as A,
So as E,
xo as a
};
//# sourceMappingURL=ExpandMore-BPp-WDGi.js.map