taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
353 lines (352 loc) • 10.2 kB
JavaScript
import { d as R, c as K } from "./index-dFotuATn.js";
import * as l from "react";
import e from "prop-types";
import { S as X } from "./FormControlLabel-CwjOxa71.js";
import { X as j, H as u, aY as B, J as E, z as Y, A as Z, G as L, b8 as Q, bP as W, b5 as oo, aC as d, I as eo, K as x, b2 as T, ba as to } from "./JBrowsePanel-uJIA-L6s.js";
import { jsx as r, jsxs as ao } from "react/jsx-runtime";
const so = j(/* @__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"), no = j(/* @__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"), ro = u("span", {
shouldForwardProp: B
})({
position: "relative",
display: "flex"
}), io = u(so)({
// Scale applied to prevent dot misalignment in Safari
transform: "scale(1)"
}), co = u(no)(E(({
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 v(o) {
const {
checked: t = !1,
classes: a = {},
fontSize: s
} = o, n = {
...o,
checked: t
};
return /* @__PURE__ */ ao(ro, {
className: a.root,
ownerState: n,
children: [/* @__PURE__ */ r(io, {
fontSize: s,
className: a.background,
ownerState: n
}), /* @__PURE__ */ r(co, {
fontSize: s,
className: a.dot,
ownerState: n
})]
});
}
R.process.env.NODE_ENV !== "production" && (v.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 $ = /* @__PURE__ */ l.createContext(void 0);
R.process.env.NODE_ENV !== "production" && ($.displayName = "RadioGroupContext");
function lo() {
return l.useContext($);
}
function po(o) {
return Z("MuiRadio", o);
}
const N = Y("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"]), uo = (o) => {
const {
classes: t,
color: a,
size: s
} = o, n = {
root: ["root", `color${d(a)}`, s !== "medium" && `size${d(s)}`]
};
return {
...t,
...eo(n, po, t)
};
}, fo = u(X, {
shouldForwardProp: (o) => B(o) || o === "classes",
name: "MuiRadio",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: a
} = o;
return [t.root, a.size !== "medium" && t[`size${d(a.size)}`], t[`color${d(a.color)}`]];
}
})(E(({
theme: o
}) => ({
color: (o.vars || o).palette.text.secondary,
[`&.${N.disabled}`]: {
color: (o.vars || o).palette.action.disabled
},
variants: [{
props: {
color: "default",
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : x(o.palette.action.active, o.palette.action.hoverOpacity)
}
}
}, ...Object.entries(o.palette).filter(T()).map(([t]) => ({
props: {
color: t,
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette[t].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : x(o.palette[t].main, o.palette.action.hoverOpacity)
}
}
})), ...Object.entries(o.palette).filter(T()).map(([t]) => ({
props: {
color: t,
disabled: !1
},
style: {
[`&.${N.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 mo(o, t) {
return typeof t == "object" && t !== null ? o === t : String(o) === String(t);
}
const bo = /* @__PURE__ */ r(v, {
checked: !0
}), yo = /* @__PURE__ */ r(v, {}), Co = /* @__PURE__ */ l.forwardRef(function(t, a) {
const s = L({
props: t,
name: "MuiRadio"
}), {
checked: n,
checkedIcon: g = bo,
color: F = "primary",
icon: S = yo,
name: M,
onChange: U,
size: f = "medium",
className: D,
disabled: G,
disableRipple: V = !1,
slots: h = {},
slotProps: k = {},
inputProps: _,
...q
} = s, P = Q();
let i = G;
P && typeof i > "u" && (i = P.disabled), i ?? (i = !1);
const m = {
...s,
disabled: i,
disableRipple: V,
color: F,
size: f
}, z = uo(m), c = lo();
let b = n;
const A = W(U, c && c.onChange);
let y = M;
c && (typeof b > "u" && (b = mo(c.value, s.value)), typeof y > "u" && (y = c.name));
const C = k.input ?? _, [H, J] = oo("root", {
ref: a,
elementType: fo,
className: K(z.root, D),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: h,
slotProps: k,
...q
},
getSlotProps: (p) => ({
...p,
onChange: (O, ...I) => {
var w;
(w = p.onChange) == null || w.call(p, O, ...I), A(O, ...I);
}
}),
ownerState: m,
additionalProps: {
type: "radio",
icon: /* @__PURE__ */ l.cloneElement(S, {
fontSize: S.props.fontSize ?? f
}),
checkedIcon: /* @__PURE__ */ l.cloneElement(g, {
fontSize: g.props.fontSize ?? f
}),
disabled: i,
name: y,
checked: b,
slots: h,
slotProps: {
// Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.
input: typeof C == "function" ? C(m) : C
}
}
});
return /* @__PURE__ */ r(H, {
...J,
classes: z
});
});
R.process.env.NODE_ENV !== "production" && (Co.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: to,
/**
* 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 {
Co as R,
$ as a
};
//# sourceMappingURL=Radio-D7as17u0.js.map