taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
261 lines (260 loc) • 6.91 kB
JavaScript
import { c as S, d as V } from "./index-dFotuATn.js";
import * as v from "react";
import o from "prop-types";
import { z as A, A as j, b1 as l, K as c, G as F, aL as P, H as R, aC as L, I as N, T as M, J as z, b2 as B, b3 as h, aO as U } from "./JBrowsePanel-uJIA-L6s.js";
import { jsx as E } from "react/jsx-runtime";
function H(e) {
return j("MuiLink", e);
}
const W = A("MuiLink", ["root", "underlineNone", "underlineHover", "underlineAlways", "button", "focusVisible"]), G = ({
theme: e,
ownerState: n
}) => {
const r = n.color, t = l(e, `palette.${r}.main`, !1) || l(e, `palette.${r}`, !1) || n.color, s = l(e, `palette.${r}.mainChannel`) || l(e, `palette.${r}Channel`);
return "vars" in e && s ? `rgba(${s} / 0.4)` : c(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: n,
component: r,
focusVisible: t,
underline: s
} = e, u = {
root: ["root", `underline${L(s)}`, r === "button" && "button", t && "focusVisible"]
};
return N(u, H, n);
}, J = R(M, {
name: "MuiLink",
slot: "Root",
overridesResolver: (e, n) => {
const {
ownerState: r
} = e;
return [n.root, n[`underline${L(r.underline)}`], r.component === "button" && n.button];
}
})(z(({
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: n,
ownerState: r
}) => n === "always" && r.color !== "inherit",
style: {
textDecorationColor: "var(--Link-underlineColor)"
}
}, ...Object.entries(e.palette).filter(B()).map(([n]) => ({
props: {
underline: "always",
color: n
},
style: {
"--Link-underlineColor": e.vars ? `rgba(${e.vars.palette[n].mainChannel} / 0.4)` : c(e.palette[n].main, 0.4)
}
})), {
props: {
underline: "always",
color: "textPrimary"
},
style: {
"--Link-underlineColor": e.vars ? `rgba(${e.vars.palette.text.primaryChannel} / 0.4)` : c(e.palette.text.primary, 0.4)
}
}, {
props: {
underline: "always",
color: "textSecondary"
},
style: {
"--Link-underlineColor": e.vars ? `rgba(${e.vars.palette.text.secondaryChannel} / 0.4)` : c(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"
}
}
}]
}))), K = /* @__PURE__ */ v.forwardRef(function(n, r) {
const t = F({
props: n,
name: "MuiLink"
}), s = P(), {
className: u,
color: a = "primary",
component: y = "a",
onBlur: f,
onFocus: b,
TypographyClasses: w,
underline: m = "always",
variant: x = "inherit",
sx: p,
...C
} = t, [T, g] = v.useState(!1), D = (i) => {
h(i.target) || g(!1), f && f(i);
}, O = (i) => {
h(i.target) && g(!0), b && b(i);
}, d = {
...t,
color: a,
component: y,
focusVisible: T,
underline: m,
variant: x
}, $ = I(d);
return /* @__PURE__ */ E(J, {
color: a,
className: S($.root, u),
classes: w,
component: y,
onBlur: D,
onFocus: O,
ref: r,
ownerState: d,
variant: x,
...C,
sx: [...k[a] === void 0 ? [{
color: a
}] : [], ...Array.isArray(p) ? p : [p]],
style: {
...C.style,
...m === "always" && a !== "inherit" && !k[a] && {
"--Link-underlineColor": G({
theme: s,
ownerState: d
})
}
}
});
});
V.process.env.NODE_ENV !== "production" && (K.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: U,
/**
* @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 {
K as L
};
//# sourceMappingURL=Link-CZ78-213.js.map