taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
265 lines (264 loc) • 8.21 kB
JavaScript
import { c as j, p as w } from "./index-CoM8QAjP.js";
import * as f from "react";
import e from "prop-types";
import { S as B } from "./FormControlLabel-CfHqydvH.js";
import { U as h, z as M, A as $, E as H, aU as U, bi as V, G as E, aQ as c, H as F, aJ as N, I as D, aR as P } from "./JBrowsePanel-BNE3gNW1.js";
import { jsx as n } from "react/jsx-runtime";
const L = h(/* @__PURE__ */ n("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"), q = h(/* @__PURE__ */ n("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"), A = h(/* @__PURE__ */ n("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 G(o) {
return $("MuiCheckbox", o);
}
const b = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), J = (o) => {
const {
classes: t,
indeterminate: s,
color: a,
size: i
} = o, l = {
root: ["root", s && "indeterminate", `color${c(a)}`, `size${c(i)}`]
}, p = F(l, G, t);
return {
...t,
// forward the disabled and checked classes to the SwitchBase
...p
};
}, Q = E(B, {
shouldForwardProp: (o) => N(o) || o === "classes",
name: "MuiCheckbox",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: s
} = o;
return [t.root, s.indeterminate && t.indeterminate, t[`size${c(s.size)}`], s.color !== "default" && t[`color${c(s.color)}`]];
}
})(D(({
theme: o
}) => ({
color: (o.vars || o).palette.text.secondary,
variants: [{
props: {
color: "default",
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.alpha((o.vars || o).palette.action.active, (o.vars || o).palette.action.hoverOpacity)
}
}
}, ...Object.entries(o.palette).filter(P()).map(([t]) => ({
props: {
color: t,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.alpha((o.vars || o).palette[t].main, (o.vars || o).palette.action.hoverOpacity)
}
}
})), ...Object.entries(o.palette).filter(P()).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"
}
}
}
}]
}))), _ = /* @__PURE__ */ n(q, {}), K = /* @__PURE__ */ n(L, {}), W = /* @__PURE__ */ n(A, {}), X = /* @__PURE__ */ f.forwardRef(function(t, s) {
const a = H({
props: t,
name: "MuiCheckbox"
}), {
checkedIcon: i = _,
color: l = "primary",
icon: p = K,
indeterminate: r = !1,
indeterminateIcon: k = W,
inputProps: S,
size: d = "medium",
disableRipple: y = !1,
className: O,
slots: C = {},
slotProps: v = {},
...g
} = a, x = r ? k : p, z = r ? k : i, u = {
...a,
disableRipple: y,
color: l,
indeterminate: r,
size: d
}, I = J(u), m = v.input ?? S, [R, T] = U("root", {
ref: s,
elementType: Q,
className: j(I.root, O),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: C,
slotProps: v,
...g
},
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: y,
slots: C,
slotProps: {
input: V(typeof m == "function" ? m(u) : m, {
"data-indeterminate": r
})
}
}
});
return /* @__PURE__ */ n(R, {
...T,
classes: I
});
});
w.env.NODE_ENV !== "production" && (X.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 {
X as C
};
//# sourceMappingURL=Checkbox-D7_LksK2.js.map