taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
265 lines (264 loc) • 8.36 kB
JavaScript
import { c as j, d as w } from "./index-dFotuATn.js";
import * as f from "react";
import e from "prop-types";
import { S as B } from "./FormControlLabel-CwjOxa71.js";
import { X as h, z as M, A as H, G as V, b5 as E, bq as F, H as N, aC as c, I as U, aY as q, J as D, K as P, b2 as O } from "./JBrowsePanel-uJIA-L6s.js";
import { jsx as s } from "react/jsx-runtime";
const L = h(/* @__PURE__ */ s("path", {
d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
}), "CheckBoxOutlineBlank"), A = h(/* @__PURE__ */ s("path", {
d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
}), "CheckBox"), G = h(/* @__PURE__ */ s("path", {
d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
}), "IndeterminateCheckBox");
function J(o) {
return H("MuiCheckbox", o);
}
const b = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), K = (o) => {
const {
classes: t,
indeterminate: a,
color: n,
size: i
} = o, l = {
root: ["root", a && "indeterminate", `color${c(n)}`, `size${c(i)}`]
}, p = U(l, J, t);
return {
...t,
// forward the disabled and checked classes to the SwitchBase
...p
};
}, X = N(B, {
shouldForwardProp: (o) => q(o) || o === "classes",
name: "MuiCheckbox",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: a
} = o;
return [t.root, a.indeterminate && t.indeterminate, t[`size${c(a.size)}`], a.color !== "default" && t[`color${c(a.color)}`]];
}
})(D(({
theme: o
}) => ({
color: (o.vars || o).palette.text.secondary,
variants: [{
props: {
color: "default",
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : P(o.palette.action.active, o.palette.action.hoverOpacity)
}
}
}, ...Object.entries(o.palette).filter(O()).map(([t]) => ({
props: {
color: t,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette[t].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : P(o.palette[t].main, o.palette.action.hoverOpacity)
}
}
})), ...Object.entries(o.palette).filter(O()).map(([t]) => ({
props: {
color: t
},
style: {
[`&.${b.checked}, &.${b.indeterminate}`]: {
color: (o.vars || o).palette[t].main
},
[`&.${b.disabled}`]: {
color: (o.vars || o).palette.action.disabled
}
}
})), {
// 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"
}
}
}
}]
}))), Y = /* @__PURE__ */ s(A, {}), _ = /* @__PURE__ */ s(L, {}), Q = /* @__PURE__ */ s(G, {}), W = /* @__PURE__ */ f.forwardRef(function(t, a) {
const n = V({
props: t,
name: "MuiCheckbox"
}), {
checkedIcon: i = Y,
color: l = "primary",
icon: p = _,
indeterminate: r = !1,
indeterminateIcon: v = Q,
inputProps: S,
size: d = "medium",
disableRipple: C = !1,
className: g,
slots: y = {},
slotProps: k = {},
...T
} = n, x = r ? v : p, z = r ? v : i, u = {
...n,
disableRipple: C,
color: l,
indeterminate: r,
size: d
}, I = K(u), m = k.input ?? S, [R, $] = E("root", {
ref: a,
elementType: X,
className: j(I.root, g),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: y,
slotProps: k,
...T
},
ownerState: u,
additionalProps: {
type: "checkbox",
icon: /* @__PURE__ */ f.cloneElement(x, {
fontSize: x.props.fontSize ?? d
}),
checkedIcon: /* @__PURE__ */ f.cloneElement(z, {
fontSize: z.props.fontSize ?? d
}),
disableRipple: C,
slots: y,
slotProps: {
input: F(typeof m == "function" ? m(u) : m, {
"data-indeterminate": r
})
}
}
});
return /* @__PURE__ */ s(R, {
...$,
classes: I
});
});
w.process.env.NODE_ENV !== "production" && (W.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 <CheckBoxIcon />
*/
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]),
/**
* The default checked state. Use when the component is not controlled.
*/
defaultChecked: e.bool,
/**
* If `true`, the component is disabled.
* @default false
*/
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 <CheckBoxOutlineBlankIcon />
*/
icon: e.node,
/**
* The id of the `input` element.
*/
id: e.string,
/**
* If `true`, the component appears indeterminate.
* This does not set the native input element to indeterminate due
* to inconsistent behavior across browsers.
* However, we set a `data-indeterminate` attribute on the `input`.
* @default false
*/
indeterminate: e.bool,
/**
* The icon to display when the component is indeterminate.
* @default <IndeterminateCheckBoxIcon />
*/
indeterminateIcon: e.node,
/**
* [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,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* 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 checkbox 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.
* The browser uses "on" as the default value.
*/
value: e.any
});
export {
W as C
};
//# sourceMappingURL=Checkbox-BG4jcGUl.js.map