taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
503 lines (502 loc) • 22.9 kB
JavaScript
import { g as Ye } from "./index-dFotuATn.js";
import Ue from "react/jsx-runtime";
import he from "react";
import { br as We, bs as Ge, bt as Je, bu as Qe, a_ as Ze } from "./JBrowsePanel-uJIA-L6s.js";
var y = {}, c = {}, fe;
function er() {
if (fe) return c;
fe = 1;
var E = c && c.__createBinding || (Object.create ? function(e, r, t, o) {
o === void 0 && (o = t);
var a = Object.getOwnPropertyDescriptor(r, t);
(!a || ("get" in a ? !r.__esModule : a.writable || a.configurable)) && (a = { enumerable: !0, get: function() {
return r[t];
} }), Object.defineProperty(e, o, a);
} : function(e, r, t, o) {
o === void 0 && (o = t), e[o] = r[t];
}), ee = c && c.__setModuleDefault || (Object.create ? function(e, r) {
Object.defineProperty(e, "default", { enumerable: !0, value: r });
} : function(e, r) {
e.default = r;
}), re = c && c.__importStar || /* @__PURE__ */ function() {
var e = function(r) {
return e = Object.getOwnPropertyNames || function(t) {
var o = [];
for (var a in t) Object.prototype.hasOwnProperty.call(t, a) && (o[o.length] = a);
return o;
}, e(r);
};
return function(r) {
if (r && r.__esModule) return r;
var t = {};
if (r != null) for (var o = e(r), a = 0; a < o.length; a++) o[a] !== "default" && E(t, r, o[a]);
return ee(t, r), t;
};
}();
Object.defineProperty(c, "__esModule", { value: !0 }), c.setNonce = c.RgbaStringColorPicker = c.RgbaColorPicker = c.RgbStringColorPicker = c.RgbColorPicker = c.HsvaStringColorPicker = c.HsvaColorPicker = c.HsvStringColorPicker = c.HsvColorPicker = c.HslaStringColorPicker = c.HslaColorPicker = c.HslStringColorPicker = c.HslColorPicker = c.HexColorPicker = c.HexColorInput = void 0;
const l = re(he);
function s() {
return (s = Object.assign || function(e) {
for (var r = 1; r < arguments.length; r++) {
var t = arguments[r];
for (var o in t)
Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
}
return e;
}).apply(this, arguments);
}
function M(e, r) {
if (e == null)
return {};
var t, o, a = {}, n = Object.keys(e);
for (o = 0; o < n.length; o++)
r.indexOf(t = n[o]) >= 0 || (a[t] = e[t]);
return a;
}
function k(e) {
const r = (0, l.useRef)(e), t = (0, l.useRef)((o) => {
r.current && r.current(o);
});
return r.current = e, t.current;
}
const P = (e, r = 0, t = 1) => e > t ? t : e < r ? r : e, N = (e) => "touches" in e, R = (e) => e && e.ownerDocument.defaultView || self, V = (e, r, t) => {
const o = e.getBoundingClientRect(), a = N(r) ? ((n, u) => {
for (let d = 0; d < n.length; d++)
if (n[d].identifier === u)
return n[d];
return n[0];
})(r.touches, t) : r;
return {
left: P((a.pageX - (o.left + R(e).pageXOffset)) / o.width),
top: P((a.pageY - (o.top + R(e).pageYOffset)) / o.height)
};
}, W = (e) => {
!N(e) && e.preventDefault();
}, D = l.default.memo((e) => {
let { onMove: r, onKey: t } = e, o = M(e, ["onMove", "onKey"]);
const a = (0, l.useRef)(null), n = k(r), u = k(t), d = (0, l.useRef)(null), f = (0, l.useRef)(!1), [x, H, U] = (0, l.useMemo)(() => {
const Q = (p) => {
W(p), (N(p) ? p.touches.length > 0 : p.buttons > 0) && a.current ? n(V(a.current, p, d.current)) : F(!1);
}, oe = () => F(!1);
function F(p) {
const _ = f.current, q = R(a.current), Z = p ? q.addEventListener : q.removeEventListener;
Z(_ ? "touchmove" : "mousemove", Q), Z(_ ? "touchend" : "mouseup", oe);
}
return [
({ nativeEvent: p }) => {
const _ = a.current;
if (_ && (W(p), !((q, Z) => Z && !N(q))(p, f.current) && _)) {
if (N(p)) {
f.current = !0;
const q = p.changedTouches || [];
q.length && (d.current = q[0].identifier);
}
_.focus(), n(V(_, p, d.current)), F(!0);
}
},
(p) => {
const _ = p.which || p.keyCode;
_ < 37 || _ > 40 || (p.preventDefault(), u({
left: _ === 39 ? 0.05 : _ === 37 ? -0.05 : 0,
top: _ === 40 ? 0.05 : _ === 38 ? -0.05 : 0
}));
},
F
];
}, [u, n]);
return (0, l.useEffect)(() => U, [U]), l.default.createElement("div", s({}, o, {
onTouchStart: x,
onMouseDown: x,
className: "react-colorful__interactive",
ref: a,
onKeyDown: H,
tabIndex: 0,
role: "slider"
}));
}), j = (e) => e.filter(Boolean).join(" "), I = ({ className: e, color: r, left: t, top: o = 0.5 }) => {
const a = j(["react-colorful__pointer", e]);
return l.default.createElement("div", { className: a, style: { top: 100 * o + "%", left: 100 * t + "%" } }, l.default.createElement("div", {
className: "react-colorful__pointer-fill",
style: { backgroundColor: r }
}));
}, g = (e, r = 0, t = Math.pow(10, r)) => Math.round(t * e) / t, m = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, i = (e) => (e[0] === "#" && (e = e.substr(1)), e.length < 6 ? {
r: parseInt(e[0] + e[0], 16),
g: parseInt(e[1] + e[1], 16),
b: parseInt(e[2] + e[2], 16),
a: 1
} : {
r: parseInt(e.substr(0, 2), 16),
g: parseInt(e.substr(2, 2), 16),
b: parseInt(e.substr(4, 2), 16),
a: 1
}), v = (e, r = "deg") => Number(e) * (m[r] || 1), h = (e) => {
const r = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
return r ? $({
h: v(r[1], r[2]),
s: Number(r[3]),
l: Number(r[4]),
a: r[5] === void 0 ? 1 : Number(r[5]) / (r[6] ? 100 : 1)
}) : { h: 0, s: 0, v: 0, a: 1 };
}, b = h, $ = ({ h: e, s: r, l: t, a: o }) => ({
h: e,
s: (r *= (t < 50 ? t : 100 - t) / 100) > 0 ? 2 * r / (t + r) * 100 : 0,
v: t + r,
a: o
}), B = ({ h: e, s: r, v: t, a: o }) => {
const a = (200 - r) * t / 100;
return {
h: g(e),
s: g(a > 0 && a < 200 ? r * t / 100 / (a <= 100 ? a : 200 - a) * 100 : 0),
l: g(a / 2),
a: g(o, 2)
};
}, K = (e) => {
const { h: r, s: t, l: o } = B(e);
return `hsl(${r}, ${t}%, ${o}%)`;
}, z = (e) => {
const { h: r, s: t, l: o, a } = B(e);
return `hsla(${r}, ${t}%, ${o}%, ${a})`;
}, O = ({ h: e, s: r, v: t, a: o }) => {
e = e / 360 * 6, r /= 100, t /= 100;
const a = Math.floor(e), n = t * (1 - r), u = t * (1 - (e - a) * r), d = t * (1 - (1 - e + a) * r), f = a % 6;
return {
r: g(255 * [t, u, n, n, d, t][f]),
g: g(255 * [d, t, t, u, n, n][f]),
b: g(255 * [n, n, d, t, t, u][f]),
a: g(o, 2)
};
}, G = (e) => {
const r = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
return r ? Y({
h: v(r[1], r[2]),
s: Number(r[3]),
v: Number(r[4]),
a: r[5] === void 0 ? 1 : Number(r[5]) / (r[6] ? 100 : 1)
}) : { h: 0, s: 0, v: 0, a: 1 };
}, X = G, C = (e) => {
const r = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
return r ? J({
r: Number(r[1]) / (r[2] ? 100 / 255 : 1),
g: Number(r[3]) / (r[4] ? 100 / 255 : 1),
b: Number(r[5]) / (r[6] ? 100 / 255 : 1),
a: r[7] === void 0 ? 1 : Number(r[7]) / (r[8] ? 100 : 1)
}) : { h: 0, s: 0, v: 0, a: 1 };
}, L = C, te = (e) => {
const r = e.toString(16);
return r.length < 2 ? "0" + r : r;
}, J = ({ r: e, g: r, b: t, a: o }) => {
const a = Math.max(e, r, t), n = a - Math.min(e, r, t), u = n ? a === e ? (r - t) / n : a === r ? 2 + (t - e) / n : 4 + (e - r) / n : 0;
return {
h: g(60 * (u < 0 ? u + 6 : u)),
s: g(a ? n / a * 100 : 0),
v: g(a / 255 * 100),
a: o
};
}, Y = (e) => ({ h: g(e.h), s: g(e.s), v: g(e.v), a: g(e.a, 2) }), ae = l.default.memo(({ className: e, hue: r, onChange: t }) => {
const o = j(["react-colorful__hue", e]);
return l.default.createElement("div", { className: o }, l.default.createElement(D, {
onMove: (a) => {
t({ h: 360 * a.left });
},
onKey: (a) => {
t({ h: P(r + 360 * a.left, 0, 360) });
},
"aria-label": "Hue",
"aria-valuetext": g(r)
}, l.default.createElement(I, {
className: "react-colorful__hue-pointer",
left: r / 360,
color: K({ h: r, s: 100, v: 100, a: 1 })
})));
}), le = l.default.memo(({ hsva: e, onChange: r }) => {
const t = { backgroundColor: K({ h: e.h, s: 100, v: 100, a: 1 }) };
return l.default.createElement("div", { className: "react-colorful__saturation", style: t }, l.default.createElement(D, {
onMove: (o) => {
r({ s: 100 * o.left, v: 100 - 100 * o.top });
},
onKey: (o) => {
r({
s: P(e.s + 100 * o.left, 0, 100),
v: P(e.v - 100 * o.top, 0, 100)
});
},
"aria-label": "Color",
"aria-valuetext": `Saturation ${g(e.s)}%, Brightness ${g(e.v)}%`
}, l.default.createElement(I, {
className: "react-colorful__saturation-pointer",
top: 1 - e.v / 100,
left: e.s / 100,
color: K(e)
})));
}), w = (e, r) => {
if (e === r)
return !0;
for (const t in e)
if (e[t] !== r[t])
return !1;
return !0;
}, T = (e, r) => e.replace(/\s/g, "") === r.replace(/\s/g, "");
function ne(e, r, t) {
const o = k(t), [a, n] = (0, l.useState)(() => e.toHsva(r)), u = (0, l.useRef)({ color: r, hsva: a });
(0, l.useEffect)(() => {
if (!e.equal(r, u.current.color)) {
const f = e.toHsva(r);
u.current = { hsva: f, color: r }, n(f);
}
}, [r, e]), (0, l.useEffect)(() => {
let f;
w(a, u.current.hsva) || e.equal(f = e.fromHsva(a), u.current.color) || (u.current = { hsva: a, color: f }, o(f));
}, [a, e, o]);
const d = (0, l.useCallback)((f) => {
n((x) => Object.assign({}, x, f));
}, []);
return [a, d];
}
const ve = typeof window < "u" ? l.useLayoutEffect : l.useEffect;
let ce;
const ge = () => ce || (typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0), pe = (e) => {
ce = e;
}, se = /* @__PURE__ */ new Map(), ue = (e) => {
ve(() => {
const r = e.current ? e.current.ownerDocument : document;
if (r !== void 0 && !se.has(r)) {
const t = r.createElement("style");
t.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, se.set(r, t);
const o = ge();
o && t.setAttribute("nonce", o), r.head.appendChild(t);
}
}, []);
}, S = (e) => {
let { className: r, colorModel: t, color: o = t.defaultColor, onChange: a } = e, n = M(e, ["className", "colorModel", "color", "onChange"]);
const u = (0, l.useRef)(null);
ue(u);
const [d, f] = ne(t, o, a), x = j(["react-colorful", r]);
return l.default.createElement("div", s({}, n, { ref: u, className: x }), l.default.createElement(le, { hsva: d, onChange: f }), l.default.createElement(ae, {
hue: d.h,
onChange: f,
className: "react-colorful__last-control"
}));
}, me = {
defaultColor: "000",
toHsva: (e) => J(i(e)),
fromHsva: (e) => (({ r, g: t, b: o }) => "#" + te(r) + te(t) + te(o))(O(e)),
equal: (e, r) => e.toLowerCase() === r.toLowerCase() || w(i(e), i(r))
}, be = (e) => l.default.createElement(S, s({}, e, { colorModel: me })), _e = ({ className: e, hsva: r, onChange: t }) => {
const o = {
backgroundImage: `linear-gradient(90deg, ${z(Object.assign({}, r, { a: 0 }))}, ${z(Object.assign({}, r, { a: 1 }))})`
}, a = j(["react-colorful__alpha", e]);
return l.default.createElement("div", { className: a }, l.default.createElement("div", {
className: "react-colorful__alpha-gradient",
style: o
}), l.default.createElement(D, {
onMove: (n) => {
t({ a: n.left });
},
onKey: (n) => {
t({ a: P(r.a + n.left) });
},
"aria-label": "Alpha",
"aria-valuetext": `${g(100 * r.a)}%`
}, l.default.createElement(I, {
className: "react-colorful__alpha-pointer",
left: r.a,
color: z(r)
})));
}, A = (e) => {
let { className: r, colorModel: t, color: o = t.defaultColor, onChange: a } = e, n = M(e, ["className", "colorModel", "color", "onChange"]);
const u = (0, l.useRef)(null);
ue(u);
const [d, f] = ne(t, o, a), x = j(["react-colorful", r]);
return l.default.createElement("div", s({}, n, { ref: u, className: x }), l.default.createElement(le, { hsva: d, onChange: f }), l.default.createElement(ae, { hue: d.h, onChange: f }), l.default.createElement(_e, {
hsva: d,
onChange: f,
className: "react-colorful__last-control"
}));
}, Ce = {
defaultColor: { h: 0, s: 0, l: 0, a: 1 },
toHsva: $,
fromHsva: B,
equal: w
}, xe = (e) => l.default.createElement(A, s({}, e, { colorModel: Ce })), Pe = { defaultColor: "hsla(0, 0%, 0%, 1)", toHsva: h, fromHsva: z, equal: T }, He = (e) => l.default.createElement(A, s({}, e, { colorModel: Pe })), Ee = {
defaultColor: { h: 0, s: 0, l: 0 },
toHsva: ({ h: e, s: r, l: t }) => $({ h: e, s: r, l: t, a: 1 }),
fromHsva: (e) => (({ h: r, s: t, l: o }) => ({ h: r, s: t, l: o }))(B(e)),
equal: w
}, ye = (e) => l.default.createElement(S, s({}, e, { colorModel: Ee })), Me = { defaultColor: "hsl(0, 0%, 0%)", toHsva: b, fromHsva: K, equal: T }, ke = (e) => l.default.createElement(S, s({}, e, { colorModel: Me })), we = {
defaultColor: { h: 0, s: 0, v: 0, a: 1 },
toHsva: (e) => e,
fromHsva: Y,
equal: w
}, Ne = (e) => l.default.createElement(A, s({}, e, { colorModel: we })), je = {
defaultColor: "hsva(0, 0%, 0%, 1)",
toHsva: G,
fromHsva: (e) => {
const { h: r, s: t, v: o, a } = Y(e);
return `hsva(${r}, ${t}%, ${o}%, ${a})`;
},
equal: T
}, $e = (e) => l.default.createElement(A, s({}, e, { colorModel: je })), Oe = {
defaultColor: { h: 0, s: 0, v: 0 },
toHsva: ({ h: e, s: r, v: t }) => ({ h: e, s: r, v: t, a: 1 }),
fromHsva: (e) => {
const { h: r, s: t, v: o } = Y(e);
return { h: r, s: t, v: o };
},
equal: w
}, Se = (e) => l.default.createElement(S, s({}, e, { colorModel: Oe })), qe = {
defaultColor: "hsv(0, 0%, 0%)",
toHsva: X,
fromHsva: (e) => {
const { h: r, s: t, v: o } = Y(e);
return `hsv(${r}, ${t}%, ${o}%)`;
},
equal: T
}, Re = (e) => l.default.createElement(S, s({}, e, { colorModel: qe })), De = {
defaultColor: { r: 0, g: 0, b: 0, a: 1 },
toHsva: J,
fromHsva: O,
equal: w
}, Ie = (e) => l.default.createElement(A, s({}, e, { colorModel: De })), Be = {
defaultColor: "rgba(0, 0, 0, 1)",
toHsva: C,
fromHsva: (e) => {
const { r, g: t, b: o, a } = O(e);
return `rgba(${r}, ${t}, ${o}, ${a})`;
},
equal: T
}, Ke = (e) => l.default.createElement(A, s({}, e, { colorModel: Be })), ze = {
defaultColor: { r: 0, g: 0, b: 0 },
toHsva: ({ r: e, g: r, b: t }) => J({ r: e, g: r, b: t, a: 1 }),
fromHsva: (e) => (({ r, g: t, b: o }) => ({ r, g: t, b: o }))(O(e)),
equal: w
}, Le = (e) => l.default.createElement(S, s({}, e, { colorModel: ze })), Te = {
defaultColor: "rgb(0, 0, 0)",
toHsva: L,
fromHsva: (e) => {
const { r, g: t, b: o } = O(e);
return `rgb(${r}, ${t}, ${o})`;
},
equal: T
}, Ae = (e) => l.default.createElement(S, s({}, e, { colorModel: Te })), Fe = /^#?([0-9A-F]{3,8})$/i, Ve = (e) => {
const { color: r = "", onChange: t, onBlur: o, escape: a, validate: n, format: u, process: d } = e, f = M(e, [
"color",
"onChange",
"onBlur",
"escape",
"validate",
"format",
"process"
]), [x, H] = (0, l.useState)(() => a(r)), U = k(t), Q = k(o), oe = (0, l.useCallback)((p) => {
const _ = a(p.target.value);
H(_), n(_) && U(d ? d(_) : _);
}, [a, d, n, U]), F = (0, l.useCallback)((p) => {
n(p.target.value) || H(a(r)), Q(p);
}, [r, a, n, Q]);
return (0, l.useEffect)(() => {
H(a(r));
}, [r, a]), l.default.createElement("input", s({}, f, {
value: u ? u(x) : x,
spellCheck: "false",
onChange: oe,
onBlur: F
}));
}, ie = (e) => "#" + e, Xe = (e) => {
const { prefixed: r, alpha: t } = e, o = M(e, ["prefixed", "alpha"]), a = (0, l.useCallback)((u) => u.replace(/([^0-9A-F]+)/gi, "").substr(0, t ? 8 : 6), [t]), n = (0, l.useCallback)((u) => ((d, f) => {
const x = Fe.exec(d), H = x ? x[1].length : 0;
return H === 3 || H === 6 || !!f && H === 4 || !!f && H === 8;
})(u, t), [t]);
return l.default.createElement(Ve, s({}, o, {
escape: a,
format: r ? ie : void 0,
process: ie,
validate: n
}));
};
return c.setNonce = pe, c.HexColorPicker = be, c.HslaColorPicker = xe, c.HslaStringColorPicker = He, c.HslColorPicker = ye, c.HslStringColorPicker = ke, c.HsvaColorPicker = Ne, c.HsvaStringColorPicker = $e, c.HsvColorPicker = Se, c.HsvStringColorPicker = Re, c.RgbaColorPicker = Ie, c.RgbaStringColorPicker = Ke, c.RgbColorPicker = Le, c.RgbStringColorPicker = Ae, c.HexColorInput = Xe, c;
}
var de;
function rr() {
return de || (de = 1, function(E) {
var ee = y && y.__createBinding || (Object.create ? function(m, i, v, h) {
h === void 0 && (h = v);
var b = Object.getOwnPropertyDescriptor(i, v);
(!b || ("get" in b ? !i.__esModule : b.writable || b.configurable)) && (b = { enumerable: !0, get: function() {
return i[v];
} }), Object.defineProperty(m, h, b);
} : function(m, i, v, h) {
h === void 0 && (h = v), m[h] = i[v];
}), re = y && y.__setModuleDefault || (Object.create ? function(m, i) {
Object.defineProperty(m, "default", { enumerable: !0, value: i });
} : function(m, i) {
m.default = i;
}), l = y && y.__importStar || /* @__PURE__ */ function() {
var m = function(i) {
return m = Object.getOwnPropertyNames || function(v) {
var h = [];
for (var b in v) Object.prototype.hasOwnProperty.call(v, b) && (h[h.length] = b);
return h;
}, m(i);
};
return function(i) {
if (i && i.__esModule) return i;
var v = {};
if (i != null) for (var h = m(i), b = 0; b < h.length; b++) h[b] !== "default" && ee(v, i, h[b]);
return re(v, i), v;
};
}();
Object.defineProperty(E, "__esModule", { value: !0 }), E.PopoverPicker = void 0, E.ColorPopover = I, E.ColorPicker = g;
const s = Ue, M = he, k = We(), P = /* @__PURE__ */ Ze(), N = Qe, R = l(Ge()), V = Je(), W = er(), D = (0, N.makeStyles)()({
picker: { position: "relative" },
swatches: {
display: "flex",
padding: 12,
flexWrap: "wrap"
},
swatch: {
width: 24,
height: 24,
margin: 4,
border: "none",
padding: 0,
cursor: "pointer",
outline: "none"
}
}), j = ({ color: m, onChange: i }) => {
const [v, h] = (0, M.useState)(null), { classes: b } = D();
return (0, s.jsxs)("div", { className: b.picker, children: [(0, s.jsx)("div", { className: b.swatch, style: { backgroundColor: m }, onClick: ($) => {
h($.currentTarget);
} }), (0, s.jsx)(I, { anchorEl: v, onClose: () => {
h(null);
}, color: m, onChange: i })] });
};
E.PopoverPicker = j;
function I({ anchorEl: m, onChange: i, onClose: v, color: h }) {
return (0, s.jsx)(P.Popover, { open: !!m, anchorEl: m, onClose: v, children: (0, s.jsx)(g, { color: h, onChange: i }) });
}
function g({ onChange: m, color: i }) {
const { classes: v } = D(), [h, b] = (0, V.useLocalStorage)("colorPickerPalette", "set1"), $ = R[h], B = Object.keys(R), [K, z] = (0, M.useState)(i), O = (0, k.colord)(i).toRgbString(), G = (0, V.useDebounce)(O, 1e3), X = (C) => {
z(C);
try {
m((0, k.colord)(C).toRgbString());
} catch {
}
};
return (0, s.jsxs)("div", { style: { display: "flex", padding: 10 }, children: [(0, s.jsx)("div", { style: { width: 200, margin: 5 }, children: (0, s.jsx)(W.RgbaStringColorPicker, { color: G, onChange: X }) }), (0, s.jsxs)("div", { style: { width: 200, margin: 5 }, children: [(0, s.jsx)(P.Select, { value: h, onChange: (C) => {
const L = C.target.value;
b(L);
}, children: B.map((C) => (0, s.jsx)(P.MenuItem, { value: C, children: C }, C)) }), (0, s.jsx)("div", { className: v.swatches, children: $.map((C, L) => (0, s.jsx)("button", { type: "button", className: v.swatch, style: { background: C }, onClick: () => {
X(C);
} }, `${C}-${L}`)) }), (0, s.jsx)(P.TextField, { helperText: "Manually set color (hex, rgb, or css color name)", value: K, onChange: (C) => {
X(C.target.value);
} })] })] });
}
E.default = E.PopoverPicker;
}(y)), y;
}
var tr = rr();
const cr = /* @__PURE__ */ Ye(tr);
export {
tr as C,
cr as a
};
//# sourceMappingURL=ColorPicker-BkeYpg1W.js.map