@undp/design-system-react
Version:
React based design system for UNDP
344 lines (343 loc) • 9.65 kB
JavaScript
import { i as e } from "./dist-DxuGUd9a.js";
import { t } from "./dist-jqIPNHDe.js";
import { n, t as r } from "./dist-BKfyhBSH.js";
import { t as i } from "./dist-C8FJXTu6.js";
import { t as a } from "./dist-UHnBR-XH.js";
import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m } from "./floating-ui.dom-8fMDtxNU.js";
import * as h from "react";
import { useLayoutEffect as g } from "react";
import { jsx as _ } from "react/jsx-runtime";
import * as v from "react-dom";
//#region node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
var y = typeof document < "u" ? g : function() {};
function b(e, t) {
if (e === t) return !0;
if (typeof e != typeof t) return !1;
if (typeof e == "function" && e.toString() === t.toString()) return !0;
let n, r, i;
if (e && t && typeof e == "object") {
if (Array.isArray(e)) {
if (n = e.length, n !== t.length) return !1;
for (r = n; r-- !== 0;) if (!b(e[r], t[r])) return !1;
return !0;
}
if (i = Object.keys(e), n = i.length, n !== Object.keys(t).length) return !1;
for (r = n; r-- !== 0;) if (!{}.hasOwnProperty.call(t, i[r])) return !1;
for (r = n; r-- !== 0;) {
let n = i[r];
if (!(n === "_owner" && e.$$typeof) && !b(e[n], t[n])) return !1;
}
return !0;
}
return e !== e && t !== t;
}
function x(e) {
return typeof window > "u" ? 1 : (e.ownerDocument.defaultView || window).devicePixelRatio || 1;
}
function S(e, t) {
let n = x(e);
return Math.round(t * n) / n;
}
function C(e) {
let t = h.useRef(e);
return y(() => {
t.current = e;
}), t;
}
function ee(e) {
e === void 0 && (e = {});
let { placement: t = "bottom", strategy: n = "absolute", middleware: r = [], platform: i, elements: { reference: a, floating: o } = {}, transform: s = !0, whileElementsMounted: c, open: l } = e, [u, d] = h.useState({
x: 0,
y: 0,
strategy: n,
placement: t,
middlewareData: {},
isPositioned: !1
}), [p, m] = h.useState(r);
b(p, r) || m(r);
let [g, _] = h.useState(null), [ee, w] = h.useState(null), T = h.useCallback((e) => {
e !== k.current && (k.current = e, _(e));
}, []), E = h.useCallback((e) => {
e !== A.current && (A.current = e, w(e));
}, []), D = a || g, O = o || ee, k = h.useRef(null), A = h.useRef(null), j = h.useRef(u), M = c != null, N = C(c), P = C(i), F = C(l), I = h.useCallback(() => {
if (!k.current || !A.current) return;
let e = {
placement: t,
strategy: n,
middleware: p
};
P.current && (e.platform = P.current), f(k.current, A.current, e).then((e) => {
let t = {
...e,
isPositioned: F.current !== !1
};
L.current && !b(j.current, t) && (j.current = t, v.flushSync(() => {
d(t);
}));
});
}, [
p,
t,
n,
P,
F
]);
y(() => {
l === !1 && j.current.isPositioned && (j.current.isPositioned = !1, d((e) => ({
...e,
isPositioned: !1
})));
}, [l]);
let L = h.useRef(!1);
y(() => (L.current = !0, () => {
L.current = !1;
}), []), y(() => {
if (D && (k.current = D), O && (A.current = O), D && O) {
if (N.current) return N.current(D, O, I);
I();
}
}, [
D,
O,
I,
N,
M
]);
let R = h.useMemo(() => ({
reference: k,
floating: A,
setReference: T,
setFloating: E
}), [T, E]), z = h.useMemo(() => ({
reference: D,
floating: O
}), [D, O]), B = h.useMemo(() => {
let e = {
position: n,
left: 0,
top: 0
};
if (!z.floating) return e;
let t = S(z.floating, u.x), r = S(z.floating, u.y);
return s ? {
...e,
transform: "translate(" + t + "px, " + r + "px)",
...x(z.floating) >= 1.5 && { willChange: "transform" }
} : {
position: n,
left: t,
top: r
};
}, [
n,
s,
z.floating,
u.x,
u.y
]);
return h.useMemo(() => ({
...u,
update: I,
refs: R,
elements: z,
floatingStyles: B
}), [
u,
I,
R,
z,
B
]);
}
var w = (e) => {
function t(e) {
return {}.hasOwnProperty.call(e, "current");
}
return {
name: "arrow",
options: e,
fn(n) {
let { element: r, padding: i } = typeof e == "function" ? e(n) : e;
return r && t(r) ? r.current == null ? {} : m({
element: r.current,
padding: i
}).fn(n) : r ? m({
element: r,
padding: i
}).fn(n) : {};
}
};
}, T = (e, t) => ({
...p(e),
options: [e, t]
}), E = (e, t) => ({
...s(e),
options: [e, t]
}), D = (e, t) => ({
...d(e),
options: [e, t]
}), O = (e, t) => ({
...c(e),
options: [e, t]
}), k = (e, t) => ({
...l(e),
options: [e, t]
}), A = (e, t) => ({
...o(e),
options: [e, t]
}), j = (e, t) => ({
...w(e),
options: [e, t]
}), M = Object.defineProperty, N = (e, t) => M(e, "name", {
value: t,
configurable: !0
}), P = "Popper", [F, I] = n(P), [L, R] = F(P), z = /* @__PURE__ */ N((e) => {
let { __scopePopper: t, children: n } = e, [r, i] = h.useState(null), [a, o] = h.useState(void 0);
return /* @__PURE__ */ _(L, {
scope: t,
anchor: r,
onAnchorChange: i,
placementState: a,
setPlacementState: o,
children: n
});
}, "Popper"), B = "PopperAnchor", V = /* @__PURE__ */ h.forwardRef(/* @__PURE__ */ N(function(n, r) {
let { __scopePopper: i, virtualRef: a, ...o } = n, s = R(B, i), c = h.useRef(null), l = s.onAnchorChange, u = e(r, h.useCallback((e) => {
c.current = e, e && l(e);
}, [l])), d = h.useRef(null);
h.useEffect(() => {
if (!a) return;
let e = d.current;
d.current = a.current, e !== d.current && l(d.current);
});
let f = s.placementState && G(s.placementState), p = f?.[0], m = f?.[1];
return a ? null : /* @__PURE__ */ _(t.div, {
"data-radix-popper-side": p,
"data-radix-popper-align": m,
...o,
ref: u
});
}, "PopperAnchor")), H = "PopperContent", [te, ne] = F(H), U = /* @__PURE__ */ h.forwardRef(/* @__PURE__ */ N(function(n, o) {
let { __scopePopper: s, side: c = "bottom", sideOffset: l = 0, align: d = "center", alignOffset: f = 0, arrowPadding: p = 0, avoidCollisions: m = !0, collisionBoundary: g = [], collisionPadding: v = 0, sticky: y = "partial", hideWhenDetached: b = !1, updatePositionStrategy: x = "optimized", onPlaced: S, ...C } = n, w = R(H, s), [M, P] = h.useState(null), F = e(o, P), [I, L] = h.useState(null), z = a(I), B = z?.width ?? 0, V = z?.height ?? 0, ne = c + (d === "center" ? "" : "-" + d), U = typeof v == "number" ? v : {
top: 0,
right: 0,
bottom: 0,
left: 0,
...v
}, K = Array.isArray(g) ? g : [g], q = K.length > 0, J = {
padding: U,
boundary: K.filter(W),
altBoundary: q
}, { refs: ie, floatingStyles: Y, placement: X, isPositioned: Z, middlewareData: Q } = ee({
strategy: "fixed",
placement: ne,
whileElementsMounted: /* @__PURE__ */ N((...e) => u(...e, { animationFrame: x === "always" }), "whileElementsMounted"),
elements: { reference: w.anchor },
middleware: [
T({
mainAxis: l + V,
alignmentAxis: f
}),
m && E({
mainAxis: !0,
crossAxis: !1,
limiter: y === "partial" ? D() : void 0,
...J
}),
m && O({ ...J }),
k({
...J,
apply: /* @__PURE__ */ N(({ elements: e, rects: t, availableWidth: n, availableHeight: r }) => {
let { width: i, height: a } = t.reference, o = e.floating.style;
o.setProperty("--radix-popper-available-width", `${n}px`), o.setProperty("--radix-popper-available-height", `${r}px`), o.setProperty("--radix-popper-anchor-width", `${i}px`), o.setProperty("--radix-popper-anchor-height", `${a}px`);
}, "apply")
}),
I && j({
element: I,
padding: p
}),
re({
arrowWidth: B,
arrowHeight: V
}),
b && A({
strategy: "referenceHidden",
...J,
boundary: q ? J.boundary : void 0
})
]
}), $ = w.setPlacementState;
r(() => ($(X), () => {
$(void 0);
}), [X, $]);
let [ae, oe] = G(X), se = i(S);
r(() => {
Z && se?.();
}, [Z, se]);
let ce = Q.arrow?.x, le = Q.arrow?.y, ue = Q.arrow?.centerOffset !== 0, [de, fe] = h.useState();
return r(() => {
M && fe(window.getComputedStyle(M).zIndex);
}, [M]), /* @__PURE__ */ _("div", {
ref: ie.setFloating,
"data-radix-popper-content-wrapper": "",
style: {
...Y,
transform: Z ? Y.transform : "translate(0, -200%)",
minWidth: "max-content",
zIndex: de,
"--radix-popper-transform-origin": [Q.transformOrigin?.x, Q.transformOrigin?.y].join(" "),
...Q.hide?.referenceHidden && {
visibility: "hidden",
pointerEvents: "none"
}
},
dir: n.dir,
children: /* @__PURE__ */ _(te, {
scope: s,
placedSide: ae,
placedAlign: oe,
onArrowChange: L,
arrowX: ce,
arrowY: le,
shouldHideArrow: ue,
children: /* @__PURE__ */ _(t.div, {
"data-side": ae,
"data-align": oe,
...C,
ref: F,
style: {
...C.style,
animation: Z ? C.style?.animation : "none"
}
})
})
});
}, "PopperContent"));
function W(e) {
return e !== null;
}
N(W, "isNotNull");
var re = /* @__PURE__ */ N((e) => ({
name: "transformOrigin",
options: e,
fn(t) {
let { placement: n, rects: r, middlewareData: i } = t, a = i.arrow?.centerOffset !== 0, o = a ? 0 : e.arrowWidth, s = a ? 0 : e.arrowHeight, [c, l] = G(n), u = {
start: "0%",
center: "50%",
end: "100%"
}[l], d = (i.arrow?.x ?? 0) + o / 2, f = (i.arrow?.y ?? 0) + s / 2, p = "", m = "";
return c === "bottom" ? (p = a ? u : `${d}px`, m = `${-s}px`) : c === "top" ? (p = a ? u : `${d}px`, m = `${r.floating.height + s}px`) : c === "right" ? (p = `${-s}px`, m = a ? u : `${f}px`) : c === "left" && (p = `${r.floating.width + s}px`, m = a ? u : `${f}px`), { data: {
x: p,
y: m
} };
}
}), "transformOrigin");
function G(e) {
let [t, n = "center"] = e.split("-");
return [t, n];
}
N(G, "getSideAndAlignFromPlacement");
var K = z, q = V, J = U;
//#endregion
export { I as i, J as n, K as r, q as t };
//# sourceMappingURL=dist-D8TIRAGv.js.map