taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
409 lines (408 loc) • 13.2 kB
JavaScript
import { d as w, c as Y } from "./index-dFotuATn.js";
import e from "prop-types";
import { E as J, bC as Q, bv as X, I as Z, A as ee, aD as ne, H as re, G as oe, aL as te } from "./JBrowsePanel-uJIA-L6s.js";
import * as h from "react";
import { jsx as se } from "react/jsx-runtime";
import { s as ie } from "./getThemeProps-D6FTZoZe.js";
import { u as ce } from "./useThemeProps-CA5tYvzL.js";
const ae = (n, r) => n.filter((o) => r.includes(o)), T = (n, r, o) => {
const t = n.keys[0];
Array.isArray(r) ? r.forEach((i, s) => {
o((c, d) => {
s <= n.keys.length - 1 && (s === 0 ? Object.assign(c, d) : c[n.up(n.keys[s])] = d);
}, i);
}) : r && typeof r == "object" ? (Object.keys(r).length > n.keys.length ? n.keys : ae(n.keys, Object.keys(r))).forEach((s) => {
if (n.keys.includes(s)) {
const c = r[s];
c !== void 0 && o((d, y) => {
t === s ? Object.assign(d, y) : d[n.up(s)] = y;
}, c);
}
}) : (typeof r == "number" || typeof r == "string") && o((i, s) => {
Object.assign(i, s);
}, r);
};
function S(n) {
return `--Grid-${n}Spacing`;
}
function $(n) {
return `--Grid-parent-${n}Spacing`;
}
const P = "--Grid-columns", O = "--Grid-parent-columns", fe = ({
theme: n,
ownerState: r
}) => {
const o = {};
return T(n.breakpoints, r.size, (t, i) => {
let s = {};
i === "grow" && (s = {
flexBasis: 0,
flexGrow: 1,
maxWidth: "100%"
}), i === "auto" && (s = {
flexBasis: "auto",
flexGrow: 0,
flexShrink: 0,
maxWidth: "none",
width: "auto"
}), typeof i == "number" && (s = {
flexGrow: 0,
flexBasis: "auto",
width: `calc(100% * ${i} / var(${O}) - (var(${O}) - ${i}) * (var(${$("column")}) / var(${O})))`
}), t(o, s);
}), o;
}, ue = ({
theme: n,
ownerState: r
}) => {
const o = {};
return T(n.breakpoints, r.offset, (t, i) => {
let s = {};
i === "auto" && (s = {
marginLeft: "auto"
}), typeof i == "number" && (s = {
marginLeft: i === 0 ? "0px" : `calc(100% * ${i} / var(${O}) + var(${$("column")}) * ${i} / var(${O}))`
}), t(o, s);
}), o;
}, pe = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {
[P]: 12
};
return T(n.breakpoints, r.columns, (t, i) => {
const s = i ?? 12;
t(o, {
[P]: s,
"> *": {
[O]: s
}
});
}), o;
}, le = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.rowSpacing, (t, i) => {
var c;
const s = typeof i == "string" ? i : (c = n.spacing) == null ? void 0 : c.call(n, i);
t(o, {
[S("row")]: s,
"> *": {
[$("row")]: s
}
});
}), o;
}, me = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.columnSpacing, (t, i) => {
var c;
const s = typeof i == "string" ? i : (c = n.spacing) == null ? void 0 : c.call(n, i);
t(o, {
[S("column")]: s,
"> *": {
[$("column")]: s
}
});
}), o;
}, de = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.direction, (t, i) => {
t(o, {
flexDirection: i
});
}), o;
}, ye = ({
ownerState: n
}) => ({
minWidth: 0,
boxSizing: "border-box",
...n.container && {
display: "flex",
flexWrap: "wrap",
...n.wrap && n.wrap !== "wrap" && {
flexWrap: n.wrap
},
gap: `var(${S("row")}) var(${S("column")})`
}
}), ge = (n) => {
const r = [];
return Object.entries(n).forEach(([o, t]) => {
t !== !1 && t !== void 0 && r.push(`grid-${o}-${String(t)}`);
}), r;
}, be = (n, r = "xs") => {
function o(t) {
return t === void 0 ? !1 : typeof t == "string" && !Number.isNaN(Number(t)) || typeof t == "number" && t > 0;
}
if (o(n))
return [`spacing-${r}-${String(n)}`];
if (typeof n == "object" && !Array.isArray(n)) {
const t = [];
return Object.entries(n).forEach(([i, s]) => {
o(s) && t.push(`spacing-${i}-${String(s)}`);
}), t;
}
return [];
}, Oe = (n) => n === void 0 ? [] : typeof n == "object" ? Object.entries(n).map(([r, o]) => `direction-${r}-${o}`) : [`direction-xs-${String(n)}`], Te = (n) => ["item", "zeroMinWidth"].includes(n) ? `The \`${n}\` prop has been removed and is no longer necessary. You can safely remove it.` : `The \`${n}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`, z = [];
function we(n, r) {
const o = [];
n.item !== void 0 && (delete n.item, o.push("item")), n.zeroMinWidth !== void 0 && (delete n.zeroMinWidth, o.push("zeroMinWidth")), r.keys.forEach((t) => {
n[t] !== void 0 && (o.push(t), delete n[t]);
}), w.process.env.NODE_ENV !== "production" && o.forEach((t) => {
z.includes(t) || (z.push(t), console.warn(`MUI Grid: ${Te(t)}
`));
});
}
const he = ne(), Se = ie("div", {
name: "MuiGrid",
slot: "Root"
});
function $e(n) {
return ce({
props: n,
name: "MuiGrid",
defaultTheme: he
});
}
function Ge(n = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent: r = Se,
useThemeProps: o = $e,
useTheme: t = J,
componentName: i = "MuiGrid"
} = n, s = (p, a) => {
const {
container: m,
direction: f,
spacing: l,
wrap: u,
size: G
} = p, j = {
root: ["root", m && "container", u !== "wrap" && `wrap-xs-${String(u)}`, ...Oe(f), ...ge(G), ...m ? be(l, a.breakpoints.keys[0]) : []]
};
return Z(j, (x) => ee(i, x), {});
};
function c(p, a, m = () => !0) {
const f = {};
return p === null || (Array.isArray(p) ? p.forEach((l, u) => {
l !== null && m(l) && a.keys[u] && (f[a.keys[u]] = l);
}) : typeof p == "object" ? Object.keys(p).forEach((l) => {
const u = p[l];
u != null && m(u) && (f[l] = u);
}) : f[a.keys[0]] = p), f;
}
const d = r(pe, me, le, fe, de, ye, ue), y = /* @__PURE__ */ h.forwardRef(function(a, m) {
const f = t(), l = o(a), u = Q(l);
we(u, f.breakpoints);
const {
className: G,
children: j,
columns: x = 12,
container: N = !1,
component: v = "div",
direction: D = "row",
wrap: W = "wrap",
size: R = {},
offset: _ = {},
spacing: E = 0,
rowSpacing: A = E,
columnSpacing: B = E,
unstable_level: b = 0,
...L
} = u, V = c(R, f.breakpoints, (g) => g !== !1), q = c(_, f.breakpoints), I = a.columns ?? (b ? void 0 : x), U = a.spacing ?? (b ? void 0 : E), F = a.rowSpacing ?? a.spacing ?? (b ? void 0 : A), H = a.columnSpacing ?? a.spacing ?? (b ? void 0 : B), k = {
...u,
level: b,
columns: I,
container: N,
direction: D,
wrap: W,
spacing: U,
rowSpacing: F,
columnSpacing: H,
size: V,
offset: q
}, K = s(k, f);
return /* @__PURE__ */ se(d, {
ref: m,
as: v,
ownerState: k,
className: Y(K.root, G),
...L,
children: h.Children.map(j, (g) => {
var C;
return /* @__PURE__ */ h.isValidElement(g) && X(g, ["Grid"]) && N && g.props.container ? /* @__PURE__ */ h.cloneElement(g, {
unstable_level: ((C = g.props) == null ? void 0 : C.unstable_level) ?? b + 1
}) : g;
})
});
});
return w.process.env.NODE_ENV !== "production" && (y.propTypes = {
children: e.node,
className: e.string,
columns: e.oneOfType([e.arrayOf(e.number), e.number, e.object]),
columnSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
component: e.elementType,
container: e.bool,
direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
offset: e.oneOfType([e.string, e.number, e.arrayOf(e.oneOfType([e.string, e.number])), e.object]),
rowSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
size: e.oneOfType([e.string, e.bool, e.number, e.arrayOf(e.oneOfType([e.string, e.bool, e.number])), e.object]),
spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
wrap: e.oneOf(["nowrap", "wrap-reverse", "wrap"])
}), y.muiName = "Grid", y;
}
function je(n, r) {
if (w.process.env.NODE_ENV === "production")
return () => () => null;
const o = r ? {
...r.propTypes
} : null;
return (i) => (s, c, d, y, p, ...a) => {
const m = p || c, f = o == null ? void 0 : o[m];
if (f) {
const l = f(s, c, d, y, p, ...a);
if (l)
return l;
}
return typeof s[c] < "u" && !s[i] ? new Error(`The prop \`${m}\` of \`${n}\` can only be used together with the \`${i}\` prop.`) : null;
};
}
const M = Ge({
createStyledComponent: re("div", {
name: "MuiGrid",
slot: "Root",
overridesResolver: (n, r) => {
const {
ownerState: o
} = n;
return [r.root, o.container && r.container];
}
}),
componentName: "MuiGrid",
useThemeProps: (n) => oe({
props: n,
name: "MuiGrid"
}),
useTheme: te
});
w.process.env.NODE_ENV !== "production" && (M.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: e.node,
/**
* The number of columns.
* @default 12
*/
columns: e.oneOfType([e.arrayOf(e.number), e.number, e.object]),
/**
* Defines the horizontal space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
columnSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
* @default false
*/
container: e.bool,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'row'
*/
direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
/**
* Defines the offset value for the type `item` components.
*/
offset: e.oneOfType([e.string, e.number, e.arrayOf(e.oneOfType([e.string, e.number])), e.object]),
/**
* Defines the vertical space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
rowSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
/**
* Defines the size of the the type `item` components.
*/
size: e.oneOfType([e.string, e.bool, e.number, e.arrayOf(e.oneOfType([e.string, e.bool, e.number])), e.object]),
/**
* Defines the space between the type `item` components.
* It can only be used on a type `container` component.
* @default 0
*/
spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
/**
* @ignore
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* @internal
* The level of the grid starts from `0` and increases when the grid nests
* inside another grid. Nesting is defined as a container Grid being a direct
* child of a container Grid.
*
* ```js
* <Grid container> // level 0
* <Grid container> // level 1
* <Grid container> // level 2
* ```
*
* Only consecutive grid is considered nesting. A grid container will start at
* `0` if there are non-Grid container element above it.
*
* ```js
* <Grid container> // level 0
* <div>
* <Grid container> // level 0
* ```
*
* ```js
* <Grid container> // level 0
* <Grid>
* <Grid container> // level 0
* ```
*/
unstable_level: e.number,
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
*/
wrap: e.oneOf(["nowrap", "wrap-reverse", "wrap"])
});
if (w.process.env.NODE_ENV !== "production") {
const n = M, r = je("Grid", n);
n.propTypes = {
// eslint-disable-next-line react/forbid-foreign-prop-types
...n.propTypes,
direction: r("container"),
spacing: r("container"),
wrap: r("container")
};
}
export {
M as G
};
//# sourceMappingURL=Grid-IFK_B2cC.js.map