taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
274 lines (273 loc) • 7.13 kB
JavaScript
import { c as O, p as $ } from "./index-CoM8QAjP.js";
import * as m from "react";
import o from "prop-types";
import { z as V, A, aO as l, aP as P, E as R, aB as j, G as F, aQ as h, H as N, T as B, I as M, aR as z, aS as v, aE as E } from "./JBrowsePanel-BNE3gNW1.js";
import { jsx as U } from "react/jsx-runtime";
function H(e) {
return A("MuiLink", e);
}
const W = V("MuiLink", ["root", "underlineNone", "underlineHover", "underlineAlways", "button", "focusVisible"]), G = ({
theme: e,
ownerState: r
}) => {
const n = r.color;
if ("colorSpace" in e && e.colorSpace) {
const i = l(e, `palette.${n}.main`) || l(e, `palette.${n}`) || r.color;
return e.alpha(i, 0.4);
}
const t = l(e, `palette.${n}.main`, !1) || l(e, `palette.${n}`, !1) || r.color, s = l(e, `palette.${n}.mainChannel`) || l(e, `palette.${n}Channel`);
return "vars" in e && s ? `rgba(${s} / 0.4)` : P(t, 0.4);
}, k = {
primary: !0,
secondary: !0,
error: !0,
info: !0,
success: !0,
warning: !0,
textPrimary: !0,
textSecondary: !0,
textDisabled: !0
}, I = (e) => {
const {
classes: r,
component: n,
focusVisible: t,
underline: s
} = e, i = {
root: ["root", `underline${h(s)}`, n === "button" && "button", t && "focusVisible"]
};
return N(i, H, r);
}, Q = F(B, {
name: "MuiLink",
slot: "Root",
overridesResolver: (e, r) => {
const {
ownerState: n
} = e;
return [r.root, r[`underline${h(n.underline)}`], n.component === "button" && r.button];
}
})(M(({
theme: e
}) => ({
variants: [{
props: {
underline: "none"
},
style: {
textDecoration: "none"
}
}, {
props: {
underline: "hover"
},
style: {
textDecoration: "none",
"&:hover": {
textDecoration: "underline"
}
}
}, {
props: {
underline: "always"
},
style: {
textDecoration: "underline",
"&:hover": {
textDecorationColor: "inherit"
}
}
}, {
props: ({
underline: r,
ownerState: n
}) => r === "always" && n.color !== "inherit",
style: {
textDecorationColor: "var(--Link-underlineColor)"
}
}, {
props: ({
underline: r,
ownerState: n
}) => r === "always" && n.color === "inherit",
style: e.colorSpace ? {
textDecorationColor: e.alpha("currentColor", 0.4)
} : null
}, ...Object.entries(e.palette).filter(z()).map(([r]) => ({
props: {
underline: "always",
color: r
},
style: {
"--Link-underlineColor": e.alpha((e.vars || e).palette[r].main, 0.4)
}
})), {
props: {
underline: "always",
color: "textPrimary"
},
style: {
"--Link-underlineColor": e.alpha((e.vars || e).palette.text.primary, 0.4)
}
}, {
props: {
underline: "always",
color: "textSecondary"
},
style: {
"--Link-underlineColor": e.alpha((e.vars || e).palette.text.secondary, 0.4)
}
}, {
props: {
underline: "always",
color: "textDisabled"
},
style: {
"--Link-underlineColor": (e.vars || e).palette.text.disabled
}
}, {
props: {
component: "button"
},
style: {
position: "relative",
WebkitTapHighlightColor: "transparent",
backgroundColor: "transparent",
// Reset default value
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
border: 0,
margin: 0,
// Remove the margin in Safari
borderRadius: 0,
padding: 0,
// Remove the padding in Firefox
cursor: "pointer",
userSelect: "none",
verticalAlign: "middle",
MozAppearance: "none",
// Reset
WebkitAppearance: "none",
// Reset
"&::-moz-focus-inner": {
borderStyle: "none"
// Remove Firefox dotted outline.
},
[`&.${W.focusVisible}`]: {
outline: "auto"
}
}
}]
}))), _ = /* @__PURE__ */ m.forwardRef(function(r, n) {
const t = R({
props: r,
name: "MuiLink"
}), s = j(), {
className: i,
color: a = "primary",
component: y = "a",
onBlur: d,
onFocus: f,
TypographyClasses: w,
underline: b = "always",
variant: x = "inherit",
sx: p,
...C
} = t, [L, g] = m.useState(!1), T = (c) => {
v(c.target) || g(!1), d && d(c);
}, D = (c) => {
v(c.target) && g(!0), f && f(c);
}, u = {
...t,
color: a,
component: y,
focusVisible: L,
underline: b,
variant: x
}, S = I(u);
return /* @__PURE__ */ U(Q, {
color: a,
className: O(S.root, i),
classes: w,
component: y,
onBlur: T,
onFocus: D,
ref: n,
ownerState: u,
variant: x,
...C,
sx: [...k[a] === void 0 ? [{
color: a
}] : [], ...Array.isArray(p) ? p : [p]],
style: {
...C.style,
...b === "always" && a !== "inherit" && !k[a] && {
"--Link-underlineColor": G({
theme: s,
ownerState: u
})
}
}
});
});
$.env.NODE_ENV !== "production" && (_.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 color of the link.
* @default 'primary'
*/
color: o.oneOfType([o.oneOf(["primary", "secondary", "success", "error", "info", "warning", "textPrimary", "textSecondary", "textDisabled"]), o.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: E,
/**
* @ignore
*/
onBlur: o.func,
/**
* @ignore
*/
onFocus: o.func,
/**
* @ignore
*/
style: o.object,
/**
* 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]),
/**
* `classes` prop applied to the [`Typography`](https://mui.com/material-ui/api/typography/) element.
*/
TypographyClasses: o.object,
/**
* Controls when the link should have an underline.
* @default 'always'
*/
underline: o.oneOf(["always", "hover", "none"]),
/**
* Applies the theme typography styles.
* @default 'inherit'
*/
variant: o.oneOfType([o.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), o.string])
});
export {
_ as L
};
//# sourceMappingURL=Link-M04Fp4z_.js.map