taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
267 lines (266 loc) • 7.78 kB
JavaScript
import { p as k, c as C } from "./index-CoM8QAjP.js";
import * as d from "react";
import s from "prop-types";
import { z as b, A as f, E as U, b2 as x, b3 as B, aw as E, G as F, H as G, a$ as P, aJ as j, I as D } from "./JBrowsePanel-BNE3gNW1.js";
import { jsx as M } from "react/jsx-runtime";
import { d as $ } from "./dividerClasses-C8EDcmuE.js";
function Y(e) {
return f("MuiListItemIcon", e);
}
const T = b("MuiListItemIcon", ["root", "alignItemsFlexStart"]);
function Z(e) {
return f("MuiListItemText", e);
}
const O = b("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
function H(e) {
return f("MuiMenuItem", e);
}
const r = b("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), z = (e, o) => {
const {
ownerState: t
} = e;
return [o.root, t.dense && o.dense, t.divider && o.divider, !t.disableGutters && o.gutters];
}, _ = (e) => {
const {
disabled: o,
dense: t,
divider: a,
disableGutters: l,
selected: c,
classes: n
} = e, i = G({
root: ["root", t && "dense", o && "disabled", !l && "gutters", a && "divider", c && "selected"]
}, H, n);
return {
...n,
...i
};
}, A = F(P, {
shouldForwardProp: (e) => j(e) || e === "classes",
name: "MuiMenuItem",
slot: "Root",
overridesResolver: z
})(D(({
theme: e
}) => ({
...e.typography.body1,
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
position: "relative",
textDecoration: "none",
minHeight: 48,
paddingTop: 6,
paddingBottom: 6,
boxSizing: "border-box",
whiteSpace: "nowrap",
"&:hover": {
textDecoration: "none",
backgroundColor: (e.vars || e).palette.action.hover,
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: "transparent"
}
},
[`&.${r.selected}`]: {
backgroundColor: e.alpha((e.vars || e).palette.primary.main, (e.vars || e).palette.action.selectedOpacity),
[`&.${r.focusVisible}`]: {
backgroundColor: e.alpha((e.vars || e).palette.primary.main, `${(e.vars || e).palette.action.selectedOpacity} + ${(e.vars || e).palette.action.focusOpacity}`)
}
},
[`&.${r.selected}:hover`]: {
backgroundColor: e.alpha((e.vars || e).palette.primary.main, `${(e.vars || e).palette.action.selectedOpacity} + ${(e.vars || e).palette.action.hoverOpacity}`),
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: e.alpha((e.vars || e).palette.primary.main, (e.vars || e).palette.action.selectedOpacity)
}
},
[`&.${r.focusVisible}`]: {
backgroundColor: (e.vars || e).palette.action.focus
},
[`&.${r.disabled}`]: {
opacity: (e.vars || e).palette.action.disabledOpacity
},
[`& + .${$.root}`]: {
marginTop: e.spacing(1),
marginBottom: e.spacing(1)
},
[`& + .${$.inset}`]: {
marginLeft: 52
},
[`& .${O.root}`]: {
marginTop: 0,
marginBottom: 0
},
[`& .${O.inset}`]: {
paddingLeft: 36
},
[`& .${T.root}`]: {
minWidth: 36
},
variants: [{
props: ({
ownerState: o
}) => !o.disableGutters,
style: {
paddingLeft: 16,
paddingRight: 16
}
}, {
props: ({
ownerState: o
}) => o.divider,
style: {
borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
backgroundClip: "padding-box"
}
}, {
props: ({
ownerState: o
}) => !o.dense,
style: {
[e.breakpoints.up("sm")]: {
minHeight: "auto"
}
}
}, {
props: ({
ownerState: o
}) => o.dense,
style: {
minHeight: 32,
// https://m2.material.io/components/menus#specs > Dense
paddingTop: 4,
paddingBottom: 4,
...e.typography.body2,
[`& .${T.root} svg`]: {
fontSize: "1.25rem"
}
}
}]
}))), J = /* @__PURE__ */ d.forwardRef(function(o, t) {
const a = U({
props: o,
name: "MuiMenuItem"
}), {
autoFocus: l = !1,
component: c = "li",
dense: n = !1,
divider: m = !1,
disableGutters: i = !1,
focusVisibleClassName: w,
role: L = "menuitem",
tabIndex: g,
className: N,
...R
} = a, v = d.useContext(x), y = d.useMemo(() => ({
dense: n || v.dense || !1,
disableGutters: i
}), [v.dense, n, i]), p = d.useRef(null);
B(() => {
l && (p.current ? p.current.focus() : k.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
}, [l]);
const V = {
...a,
dense: y.dense,
divider: m,
disableGutters: i
}, u = _(a), S = E(p, t);
let I;
return a.disabled || (I = g !== void 0 ? g : -1), /* @__PURE__ */ M(x.Provider, {
value: y,
children: /* @__PURE__ */ M(A, {
ref: S,
role: L,
tabIndex: I,
component: c,
focusVisibleClassName: C(u.focusVisible, w),
className: C(u.root, N),
...R,
ownerState: V,
classes: u
})
});
});
k.env.NODE_ENV !== "production" && (J.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* If `true`, the list item is focused during the first mount.
* Focus will also be triggered if the value changes from false to true.
* @default false
*/
autoFocus: s.bool,
/**
* The content of the component.
*/
children: s.node,
/**
* Override or extend the styles applied to the component.
*/
classes: s.object,
/**
* @ignore
*/
className: s.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: s.elementType,
/**
* If `true`, compact vertical padding designed for keyboard and mouse input is used.
* The prop defaults to the value inherited from the parent Menu component.
* @default false
*/
dense: s.bool,
/**
* @ignore
*/
disabled: s.bool,
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters: s.bool,
/**
* If `true`, a 1px light border is added to the bottom of the menu item.
* @default false
*/
divider: s.bool,
/**
* 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: s.string,
/**
* @ignore
*/
role: s.string,
/**
* If `true`, the component is selected.
* @default false
*/
selected: s.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: s.oneOfType([s.arrayOf(s.oneOfType([s.func, s.object, s.bool])), s.func, s.object]),
/**
* @default 0
*/
tabIndex: s.number
});
export {
J as M,
Z as a,
Y as g,
O as l
};
//# sourceMappingURL=MenuItem-DAMdxuDJ.js.map