taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
358 lines (357 loc) • 10.2 kB
JavaScript
import { p as C, c as J } from "./index-CoM8QAjP.js";
import * as l from "react";
import e from "prop-types";
import { S as Q } from "./FormControlLabel-CfHqydvH.js";
import { U as B, G as u, aJ as N, I as j, z as Z, A as K, E as L, a_ as W, bI as X, aU as Y, aQ as p, H as oo, aR as T, b0 as eo } from "./JBrowsePanel-BNE3gNW1.js";
import { jsx as r, jsxs as to } from "react/jsx-runtime";
const ao = B(/* @__PURE__ */ r("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}), "RadioButtonUnchecked"), so = B(/* @__PURE__ */ r("path", {
d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
}), "RadioButtonChecked"), no = u("span", {
name: "MuiRadioButtonIcon",
shouldForwardProp: N
})({
position: "relative",
display: "flex"
}), ro = u(ao, {
name: "MuiRadioButtonIcon"
})({
// Scale applied to prevent dot misalignment in Safari
transform: "scale(1)"
}), io = u(so, {
name: "MuiRadioButtonIcon"
})(j(({
theme: o
}) => ({
left: 0,
position: "absolute",
transform: "scale(0)",
transition: o.transitions.create("transform", {
easing: o.transitions.easing.easeIn,
duration: o.transitions.duration.shortest
}),
variants: [{
props: {
checked: !0
},
style: {
transform: "scale(1)",
transition: o.transitions.create("transform", {
easing: o.transitions.easing.easeOut,
duration: o.transitions.duration.shortest
})
}
}]
})));
function g(o) {
const {
checked: t = !1,
classes: a = {},
fontSize: s
} = o, n = {
...o,
checked: t
};
return /* @__PURE__ */ to(no, {
className: a.root,
ownerState: n,
children: [/* @__PURE__ */ r(ro, {
fontSize: s,
className: a.background,
ownerState: n
}), /* @__PURE__ */ r(io, {
fontSize: s,
className: a.dot,
ownerState: n
})]
});
}
C.env.NODE_ENV !== "production" && (g.propTypes = {
/**
* If `true`, the component is checked.
*/
checked: e.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* The size of the component.
* `small` is equivalent to the dense radio styling.
*/
fontSize: e.oneOf(["small", "medium"])
});
const E = /* @__PURE__ */ l.createContext(void 0);
C.env.NODE_ENV !== "production" && (E.displayName = "RadioGroupContext");
function co() {
return l.useContext(E);
}
function lo(o) {
return K("MuiRadio", o);
}
const x = Z("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"]), po = (o) => {
const {
classes: t,
color: a,
size: s
} = o, n = {
root: ["root", `color${p(a)}`, s !== "medium" && `size${p(s)}`]
};
return {
...t,
...oo(n, lo, t)
};
}, uo = u(Q, {
shouldForwardProp: (o) => N(o) || o === "classes",
name: "MuiRadio",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: a
} = o;
return [t.root, a.size !== "medium" && t[`size${p(a.size)}`], t[`color${p(a.color)}`]];
}
})(j(({
theme: o
}) => ({
color: (o.vars || o).palette.text.secondary,
[`&.${x.disabled}`]: {
color: (o.vars || o).palette.action.disabled
},
variants: [{
props: {
color: "default",
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.alpha((o.vars || o).palette.action.active, (o.vars || o).palette.action.hoverOpacity)
}
}
}, ...Object.entries(o.palette).filter(T()).map(([t]) => ({
props: {
color: t,
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.alpha((o.vars || o).palette[t].main, (o.vars || o).palette.action.hoverOpacity)
}
}
})), ...Object.entries(o.palette).filter(T()).map(([t]) => ({
props: {
color: t,
disabled: !1
},
style: {
[`&.${x.checked}`]: {
color: (o.vars || o).palette[t].main
}
}
})), {
// Should be last to override other colors
props: {
disableRipple: !1
},
style: {
// Reset on touch devices, it doesn't add specificity
"&:hover": {
"@media (hover: none)": {
backgroundColor: "transparent"
}
}
}
}]
})));
function fo(o, t) {
return typeof t == "object" && t !== null ? o === t : String(o) === String(t);
}
const mo = /* @__PURE__ */ r(g, {
checked: !0
}), yo = /* @__PURE__ */ r(g, {}), Ro = /* @__PURE__ */ l.forwardRef(function(t, a) {
const s = L({
props: t,
name: "MuiRadio"
}), {
checked: n,
checkedIcon: S = mo,
color: F = "primary",
icon: v = yo,
name: M,
onChange: U,
size: f = "medium",
className: $,
disabled: D,
disableRipple: G = !1,
slots: k = {},
slotProps: P = {},
inputProps: V,
..._
} = s, h = W();
let i = D;
h && typeof i > "u" && (i = h.disabled), i ?? (i = !1);
const m = {
...s,
disabled: i,
disableRipple: G,
color: F,
size: f
}, z = po(m), c = co();
let y = n;
const q = X(U, c && c.onChange);
let R = M;
c && (typeof y > "u" && (y = fo(c.value, s.value)), typeof R > "u" && (R = c.name));
const b = P.input ?? V, [A, H] = Y("root", {
ref: a,
elementType: uo,
className: J(z.root, $),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: k,
slotProps: P,
..._
},
getSlotProps: (d) => ({
...d,
onChange: (I, ...O) => {
var w;
(w = d.onChange) == null || w.call(d, I, ...O), q(I, ...O);
}
}),
ownerState: m,
additionalProps: {
type: "radio",
icon: /* @__PURE__ */ l.cloneElement(v, {
fontSize: v.props.fontSize ?? f
}),
checkedIcon: /* @__PURE__ */ l.cloneElement(S, {
fontSize: S.props.fontSize ?? f
}),
disabled: i,
name: R,
checked: y,
slots: k,
slotProps: {
// Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.
input: typeof b == "function" ? b(m) : b
}
}
});
return /* @__PURE__ */ r(A, {
...H,
classes: z
});
});
C.env.NODE_ENV !== "production" && (Ro.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 component is checked.
*/
checked: e.bool,
/**
* The icon to display when the component is checked.
* @default <RadioButtonIcon checked />
*/
checkedIcon: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color: e.oneOfType([e.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
/**
* If `true`, the component is disabled.
*/
disabled: e.bool,
/**
* If `true`, the ripple effect is disabled.
* @default false
*/
disableRipple: e.bool,
/**
* The icon to display when the component is unchecked.
* @default <RadioButtonIcon />
*/
icon: e.node,
/**
* The id of the `input` element.
*/
id: e.string,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
* @deprecated Use `slotProps.input` 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.
*/
inputProps: e.object,
/**
* Pass a ref to the `input` element.
* @deprecated Use `slotProps.input.ref` 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.
*/
inputRef: eo,
/**
* Name attribute of the `input` element.
*/
name: e.string,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: e.func,
/**
* If `true`, the `input` element is required.
* @default false
*/
required: e.bool,
/**
* The size of the component.
* `small` is equivalent to the dense radio styling.
* @default 'medium'
*/
size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
input: e.oneOfType([e.func, e.object]),
root: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
input: e.elementType,
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]),
/**
* The value of the component. The DOM API casts this to a string.
*/
value: e.any
});
export {
Ro as R,
E as a
};
//# sourceMappingURL=Radio-Bf0n3fp_.js.map