taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
411 lines (410 loc) • 12.1 kB
JavaScript
import { c as x, d as O } from "./index-dFotuATn.js";
import * as r from "react";
import e from "prop-types";
import { A as E, z as C, G as U, bc as h, H as A, I as k, bv as F, aH as q, bw as j, J as K, aO as Q, bg as W } from "./JBrowsePanel-uJIA-L6s.js";
import { jsx as g, jsxs as w } from "react/jsx-runtime";
function X(o) {
return E("MuiListItem", o);
}
C("MuiListItem", ["root", "container", "dense", "alignItemsFlexStart", "divider", "gutters", "padding", "secondaryAction"]);
const Z = C("MuiListItemButton", ["root", "focusVisible", "dense", "alignItemsFlexStart", "disabled", "divider", "gutters", "selected"]);
function tt(o) {
return E("MuiListItemSecondaryAction", o);
}
C("MuiListItemSecondaryAction", ["root", "disableGutters"]);
const et = (o) => {
const {
disableGutters: t,
classes: s
} = o;
return k({
root: ["root", t && "disableGutters"]
}, tt, s);
}, ot = A("div", {
name: "MuiListItemSecondaryAction",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: s
} = o;
return [t.root, s.disableGutters && t.disableGutters];
}
})({
position: "absolute",
right: 16,
top: "50%",
transform: "translateY(-50%)",
variants: [{
props: ({
ownerState: o
}) => o.disableGutters,
style: {
right: 0
}
}]
}), L = /* @__PURE__ */ r.forwardRef(function(t, s) {
const n = U({
props: t,
name: "MuiListItemSecondaryAction"
}), {
className: i,
...l
} = n, p = r.useContext(h), a = {
...n,
disableGutters: p.disableGutters
}, f = et(a);
return /* @__PURE__ */ g(ot, {
className: x(f.root, i),
ownerState: a,
ref: s,
...l
});
});
O.process.env.NODE_ENV !== "production" && (L.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, normally an `IconButton` or selection control.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* 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])
});
L.muiName = "ListItemSecondaryAction";
const st = (o, t) => {
const {
ownerState: s
} = o;
return [t.root, s.dense && t.dense, s.alignItems === "flex-start" && t.alignItemsFlexStart, s.divider && t.divider, !s.disableGutters && t.gutters, !s.disablePadding && t.padding, s.hasSecondaryAction && t.secondaryAction];
}, nt = (o) => {
const {
alignItems: t,
classes: s,
dense: n,
disableGutters: i,
disablePadding: l,
divider: p,
hasSecondaryAction: a
} = o;
return k({
root: ["root", n && "dense", !i && "gutters", !l && "padding", p && "divider", t === "flex-start" && "alignItemsFlexStart", a && "secondaryAction"],
container: ["container"]
}, X, s);
}, it = A("div", {
name: "MuiListItem",
slot: "Root",
overridesResolver: st
})(K(({
theme: o
}) => ({
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
position: "relative",
textDecoration: "none",
width: "100%",
boxSizing: "border-box",
textAlign: "left",
variants: [{
props: ({
ownerState: t
}) => !t.disablePadding,
style: {
paddingTop: 8,
paddingBottom: 8
}
}, {
props: ({
ownerState: t
}) => !t.disablePadding && t.dense,
style: {
paddingTop: 4,
paddingBottom: 4
}
}, {
props: ({
ownerState: t
}) => !t.disablePadding && !t.disableGutters,
style: {
paddingLeft: 16,
paddingRight: 16
}
}, {
props: ({
ownerState: t
}) => !t.disablePadding && !!t.secondaryAction,
style: {
// Add some space to avoid collision as `ListItemSecondaryAction`
// is absolutely positioned.
paddingRight: 48
}
}, {
props: ({
ownerState: t
}) => !!t.secondaryAction,
style: {
[`& > .${Z.root}`]: {
paddingRight: 48
}
}
}, {
props: {
alignItems: "flex-start"
},
style: {
alignItems: "flex-start"
}
}, {
props: ({
ownerState: t
}) => t.divider,
style: {
borderBottom: `1px solid ${(o.vars || o).palette.divider}`,
backgroundClip: "padding-box"
}
}, {
props: ({
ownerState: t
}) => t.button,
style: {
transition: o.transitions.create("background-color", {
duration: o.transitions.duration.shortest
}),
"&:hover": {
textDecoration: "none",
backgroundColor: (o.vars || o).palette.action.hover,
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: "transparent"
}
}
}
}, {
props: ({
ownerState: t
}) => t.hasSecondaryAction,
style: {
// Add some space to avoid collision as `ListItemSecondaryAction`
// is absolutely positioned.
paddingRight: 48
}
}]
}))), rt = A("li", {
name: "MuiListItem",
slot: "Container"
})({
position: "relative"
}), at = /* @__PURE__ */ r.forwardRef(function(t, s) {
const n = U({
props: t,
name: "MuiListItem"
}), {
alignItems: i = "center",
children: l,
className: p,
component: a,
components: f = {},
componentsProps: B = {},
ContainerComponent: S = "li",
ContainerProps: {
className: D,
...H
} = {},
dense: P = !1,
disableGutters: I = !1,
disablePadding: V = !1,
divider: $ = !1,
secondaryAction: R,
slotProps: z = {},
slots: Y = {},
..._
} = n, N = r.useContext(h), v = r.useMemo(() => ({
dense: P || N.dense || !1,
alignItems: i,
disableGutters: I
}), [i, N.dense, P, I]), J = r.useRef(null), d = r.Children.toArray(l), T = d.length && F(d[d.length - 1], ["ListItemSecondaryAction"]), b = {
...n,
alignItems: i,
dense: v.dense,
disableGutters: I,
disablePadding: V,
divider: $,
hasSecondaryAction: T
}, G = nt(b), M = q(J, s), y = Y.root || f.Root || it, m = z.root || B.root || {}, u = {
className: x(G.root, m.className, p),
..._
};
let c = a || "li";
return T ? (c = !u.component && !a ? "div" : c, S === "li" && (c === "li" ? c = "div" : u.component === "li" && (u.component = "div")), /* @__PURE__ */ g(h.Provider, {
value: v,
children: /* @__PURE__ */ w(rt, {
as: S,
className: x(G.container, D),
ref: M,
ownerState: b,
...H,
children: [/* @__PURE__ */ g(y, {
...m,
...!j(y) && {
as: c,
ownerState: {
...b,
...m.ownerState
}
},
...u,
children: d
}), d.pop()]
})
})) : /* @__PURE__ */ g(h.Provider, {
value: v,
children: /* @__PURE__ */ w(y, {
...m,
as: c,
ref: M,
...!j(y) && {
ownerState: {
...b,
...m.ownerState
}
},
...u,
children: [d, R && /* @__PURE__ */ g(L, {
children: R
})]
})
});
});
O.process.env.NODE_ENV !== "production" && (at.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Defines the `align-items` style property.
* @default 'center'
*/
alignItems: e.oneOf(["center", "flex-start"]),
/**
* The content of the component if a `ListItemSecondaryAction` is used it must
* be the last child.
*/
children: W(e.node, (o) => {
const t = r.Children.toArray(o.children);
let s = -1;
for (let n = t.length - 1; n >= 0; n -= 1) {
const i = t[n];
if (F(i, ["ListItemSecondaryAction"])) {
s = n;
break;
}
}
return s !== -1 && s !== t.length - 1 ? new Error("MUI: You used an element after ListItemSecondaryAction. For ListItem to detect that it has a secondary action you must pass it as the last child to ListItem.") : null;
}),
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* The components used for each slot inside.
*
* @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* @default {}
*/
components: e.shape({
Root: e.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* @default {}
*/
componentsProps: e.shape({
root: e.object
}),
/**
* The container component used when a `ListItemSecondaryAction` is the last child.
* @default 'li'
* @deprecated Use the `component` or `slots.root` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
ContainerComponent: Q,
/**
* Props applied to the container component if used.
* @default {}
* @deprecated Use the `slotProps.root` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
ContainerProps: e.object,
/**
* If `true`, compact vertical padding designed for keyboard and mouse input is used.
* The prop defaults to the value inherited from the parent List component.
* @default false
*/
dense: e.bool,
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters: e.bool,
/**
* If `true`, all padding is removed.
* @default false
*/
disablePadding: e.bool,
/**
* If `true`, a 1px light border is added to the bottom of the list item.
* @default false
*/
divider: e.bool,
/**
* The element to display at the end of ListItem.
*/
secondaryAction: e.node,
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @default {}
*/
slotProps: e.shape({
root: e.object
}),
/**
* The components used for each slot inside.
*
* @default {}
*/
slots: e.shape({
root: e.elementType
}),
/**
* 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])
});
export {
at as L
};
//# sourceMappingURL=ListItem-shOX3Ebz.js.map