taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
559 lines (558 loc) • 13.2 kB
JavaScript
import { d as W, c as _ } from "./index-dFotuATn.js";
import * as $ from "react";
import e from "prop-types";
import { A as Y, z as K, aG as le, b8 as Q, b5 as z, H as v, aC as D, I as X, b9 as ie, aY as ce, ba as Z, G as pe, bb as de, T as J, J as ee } from "./JBrowsePanel-uJIA-L6s.js";
import { jsxs as B, jsx as oe } from "react/jsx-runtime";
function ue(t) {
return Y("PrivateSwitchBase", t);
}
K("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
const be = (t) => {
const {
classes: s,
checked: n,
disabled: r,
edge: i
} = t, d = {
root: ["root", n && "checked", r && "disabled", i && `edge${D(i)}`],
input: ["input"]
};
return X(d, ue, s);
}, me = v(ie)({
padding: 9,
borderRadius: "50%",
variants: [{
props: {
edge: "start",
size: "small"
},
style: {
marginLeft: -3
}
}, {
props: ({
edge: t,
ownerState: s
}) => t === "start" && s.size !== "small",
style: {
marginLeft: -12
}
}, {
props: {
edge: "end",
size: "small"
},
style: {
marginRight: -3
}
}, {
props: ({
edge: t,
ownerState: s
}) => t === "end" && s.size !== "small",
style: {
marginRight: -12
}
}]
}), fe = v("input", {
shouldForwardProp: ce
})({
cursor: "inherit",
position: "absolute",
opacity: 0,
width: "100%",
height: "100%",
top: 0,
left: 0,
margin: 0,
padding: 0,
zIndex: 1
}), he = /* @__PURE__ */ $.forwardRef(function(s, n) {
const {
autoFocus: r,
checked: i,
checkedIcon: d,
defaultChecked: b,
disabled: m,
disableFocusRipple: S = !1,
edge: L = !1,
icon: U,
id: q,
inputProps: N,
inputRef: M,
name: A,
onBlur: k,
onChange: w,
onFocus: T,
readOnly: G,
required: O = !1,
tabIndex: f,
type: u,
value: h,
slots: x = {},
slotProps: j = {},
...g
} = s, [y, I] = le({
controlled: i,
default: !!b,
name: "SwitchBase",
state: "checked"
}), l = Q(), P = (o) => {
T && T(o), l && l.onFocus && l.onFocus(o);
}, c = (o) => {
k && k(o), l && l.onBlur && l.onBlur(o);
}, C = (o) => {
if (o.nativeEvent.defaultPrevented)
return;
const a = o.target.checked;
I(a), w && w(o, a);
};
let F = m;
l && typeof F > "u" && (F = l.disabled);
const te = u === "checkbox" || u === "radio", E = {
...s,
checked: y,
disabled: F,
disableFocusRipple: S,
edge: L
}, H = be(E), V = {
slots: x,
slotProps: {
input: N,
...j
}
}, [se, re] = z("root", {
ref: n,
elementType: me,
className: H.root,
shouldForwardComponentProp: !0,
externalForwardedProps: {
...V,
component: "span",
...g
},
getSlotProps: (o) => ({
...o,
onFocus: (a) => {
var p;
(p = o.onFocus) == null || p.call(o, a), P(a);
},
onBlur: (a) => {
var p;
(p = o.onBlur) == null || p.call(o, a), c(a);
}
}),
ownerState: E,
additionalProps: {
centerRipple: !0,
focusRipple: !S,
disabled: F,
role: void 0,
tabIndex: null
}
}), [ae, ne] = z("input", {
ref: M,
elementType: fe,
className: H.input,
externalForwardedProps: V,
getSlotProps: (o) => ({
...o,
onChange: (a) => {
var p;
(p = o.onChange) == null || p.call(o, a), C(a);
}
}),
ownerState: E,
additionalProps: {
autoFocus: r,
checked: i,
defaultChecked: b,
disabled: F,
id: te ? q : void 0,
name: A,
readOnly: G,
required: O,
tabIndex: f,
type: u,
...u === "checkbox" && h === void 0 ? {} : {
value: h
}
}
});
return /* @__PURE__ */ B(se, {
...re,
children: [/* @__PURE__ */ oe(ae, {
...ne
}), y ? d : U]
});
});
W.process.env.NODE_ENV !== "production" && (he.propTypes = {
/**
* If `true`, the `input` element is focused during the first mount.
*/
autoFocus: e.bool,
/**
* If `true`, the component is checked.
*/
checked: e.bool,
/**
* The icon to display when the component is checked.
*/
checkedIcon: e.node.isRequired,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* @ignore
*/
defaultChecked: e.bool,
/**
* If `true`, the component is disabled.
*/
disabled: e.bool,
/**
* If `true`, the keyboard focus ripple is disabled.
* @default false
*/
disableFocusRipple: e.bool,
/**
* If given, uses a negative margin to counteract the padding on one
* side (this is often helpful for aligning the left or right
* side of the icon with content above or below, without ruining the border
* size and shape).
* @default false
*/
edge: e.oneOf(["end", "start", !1]),
/**
* The icon to display when the component is unchecked.
*/
icon: e.node.isRequired,
/**
* 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.
*/
inputProps: e.object,
/**
* Pass a ref to the `input` element.
*/
inputRef: Z,
/*
* @ignore
*/
name: e.string,
/**
* @ignore
*/
onBlur: e.func,
/**
* Callback fired when the state is changed.
*
* @param {object} event The event source of the callback.
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: e.func,
/**
* @ignore
*/
onFocus: e.func,
/**
* It prevents the user from changing the value of the field
* (not from interacting with the field).
*/
readOnly: e.bool,
/**
* If `true`, the `input` element is required.
*/
required: e.bool,
/**
* 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.object,
/**
* @ignore
*/
tabIndex: e.oneOfType([e.number, e.string]),
/**
* The input component prop `type`.
*/
type: e.string.isRequired,
/**
* The value of the component.
*/
value: e.any
});
function ge(t) {
return Y("MuiFormControlLabel", t);
}
const R = K("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlacementTop", "labelPlacementBottom", "disabled", "label", "error", "required", "asterisk"]), ye = (t) => {
const {
classes: s,
disabled: n,
labelPlacement: r,
error: i,
required: d
} = t, b = {
root: ["root", n && "disabled", `labelPlacement${D(r)}`, i && "error", d && "required"],
label: ["label", n && "disabled"],
asterisk: ["asterisk", i && "error"]
};
return X(b, ge, s);
}, Pe = v("label", {
name: "MuiFormControlLabel",
slot: "Root",
overridesResolver: (t, s) => {
const {
ownerState: n
} = t;
return [{
[`& .${R.label}`]: s.label
}, s.root, s[`labelPlacement${D(n.labelPlacement)}`]];
}
})(ee(({
theme: t
}) => ({
display: "inline-flex",
alignItems: "center",
cursor: "pointer",
// For correct alignment with the text.
verticalAlign: "middle",
WebkitTapHighlightColor: "transparent",
marginLeft: -11,
marginRight: 16,
// used for row presentation of radio/checkbox
[`&.${R.disabled}`]: {
cursor: "default"
},
[`& .${R.label}`]: {
[`&.${R.disabled}`]: {
color: (t.vars || t).palette.text.disabled
}
},
variants: [{
props: {
labelPlacement: "start"
},
style: {
flexDirection: "row-reverse",
marginRight: -11
}
}, {
props: {
labelPlacement: "top"
},
style: {
flexDirection: "column-reverse"
}
}, {
props: {
labelPlacement: "bottom"
},
style: {
flexDirection: "column"
}
}, {
props: ({
labelPlacement: s
}) => s === "start" || s === "top" || s === "bottom",
style: {
marginLeft: 16
// used for row presentation of radio/checkbox
}
}]
}))), Ce = v("span", {
name: "MuiFormControlLabel",
slot: "Asterisk"
})(ee(({
theme: t
}) => ({
[`&.${R.error}`]: {
color: (t.vars || t).palette.error.main
}
}))), Fe = /* @__PURE__ */ $.forwardRef(function(s, n) {
const r = pe({
props: s,
name: "MuiFormControlLabel"
}), {
checked: i,
className: d,
componentsProps: b = {},
control: m,
disabled: S,
disableTypography: L,
inputRef: U,
label: q,
labelPlacement: N = "end",
name: M,
onChange: A,
required: k,
slots: w = {},
slotProps: T = {},
value: G,
...O
} = r, f = Q(), u = S ?? m.props.disabled ?? (f == null ? void 0 : f.disabled), h = k ?? m.props.required, x = {
disabled: u,
required: h
};
["checked", "name", "onChange", "value", "inputRef"].forEach((C) => {
typeof m.props[C] > "u" && typeof r[C] < "u" && (x[C] = r[C]);
});
const j = de({
props: r,
muiFormControl: f,
states: ["error"]
}), g = {
...r,
disabled: u,
labelPlacement: N,
required: h,
error: j.error
}, y = ye(g), I = {
slots: w,
slotProps: {
...b,
...T
}
}, [l, P] = z("typography", {
elementType: J,
externalForwardedProps: I,
ownerState: g
});
let c = q;
return c != null && c.type !== J && !L && (c = /* @__PURE__ */ oe(l, {
component: "span",
...P,
className: _(y.label, P == null ? void 0 : P.className),
children: c
})), /* @__PURE__ */ B(Pe, {
className: _(y.root, d),
ownerState: g,
ref: n,
...O,
children: [/* @__PURE__ */ $.cloneElement(m, x), h ? /* @__PURE__ */ B("div", {
children: [c, /* @__PURE__ */ B(Ce, {
ownerState: g,
"aria-hidden": !0,
className: y.asterisk,
children: [" ", "*"]
})]
}) : c]
});
});
W.process.env.NODE_ENV !== "production" && (Fe.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 appears selected.
*/
checked: e.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The props used for each slot inside.
* @default {}
* @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
componentsProps: e.shape({
typography: e.object
}),
/**
* A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
*/
control: e.element.isRequired,
/**
* If `true`, the control is disabled.
*/
disabled: e.bool,
/**
* If `true`, the label is rendered as it is passed without an additional typography node.
*/
disableTypography: e.bool,
/**
* Pass a ref to the `input` element.
*/
inputRef: Z,
/**
* A text or an element to be used in an enclosing label element.
*/
label: e.node,
/**
* The position of the label.
* @default 'end'
*/
labelPlacement: e.oneOf(["bottom", "end", "start", "top"]),
/**
* @ignore
*/
name: e.string,
/**
* Callback fired when the state is changed.
*
* @param {React.SyntheticEvent} 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 label will indicate that the `input` is required.
*/
required: e.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
typography: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
typography: 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.
*/
value: e.any
});
export {
Fe as F,
he as S,
R as f
};
//# sourceMappingURL=FormControlLabel-CwjOxa71.js.map