UNPKG

@undp/design-system-react

Version:

React based design system for UNDP

720 lines (714 loc) 22.2 kB
import { i as e } from "./dist-DxuGUd9a.js"; import { t } from "./dist-jqIPNHDe.js"; import { t as n } from "./dist-C8FJXTu6.js"; import * as r from "react"; import { useState as i } from "react"; import { jsx as a } from "react/jsx-runtime"; //#region node_modules/@radix-ui/react-focus-scope/dist/index.mjs var o = Object.defineProperty, s = (e, t) => o(e, "name", { value: t, configurable: !0 }), c = "focusScope.autoFocusOnMount", l = "focusScope.autoFocusOnUnmount", u = { bubbles: !1, cancelable: !0 }, d = /* @__PURE__ */ r.forwardRef(/* @__PURE__ */ s(function(i, o) { let { loop: d = !1, trapped: h = !1, onMountAutoFocus: g, onUnmountAutoFocus: _, ...b } = i, [x, C] = r.useState(null), w = n(g), T = n(_), E = r.useRef(null), D = e(o, C), O = r.useRef({ paused: !1, pause() { this.paused = !0; }, resume() { this.paused = !1; } }).current; r.useEffect(() => { if (h) { let e = function(e) { if (O.paused || !x) return; let t = e.target; x.contains(t) ? E.current = t : v(E.current, { select: !0 }); }, t = function(e) { if (O.paused || !x) return; let t = e.relatedTarget; t !== null && (x.contains(t) || v(E.current, { select: !0 })); }, n = function(e) { if (document.activeElement === document.body) for (let t of e) t.removedNodes.length > 0 && v(x); }; s(e, "handleFocusIn"), s(t, "handleFocusOut"), s(n, "handleMutations"), document.addEventListener("focusin", e), document.addEventListener("focusout", t); let r = new MutationObserver(n); return x && r.observe(x, { childList: !0, subtree: !0 }), () => { document.removeEventListener("focusin", e), document.removeEventListener("focusout", t), r.disconnect(); }; } }, [ h, x, O.paused ]), r.useEffect(() => { if (x) { y.add(O); let e = document.activeElement; if (!x.contains(e)) { let t = new CustomEvent(c, u); x.addEventListener(c, w), x.dispatchEvent(t), t.defaultPrevented || (f(S(m(x)), { select: !0 }), document.activeElement === e && v(x)); } return () => { x.removeEventListener(c, w), setTimeout(() => { let t = new CustomEvent(l, u); x.addEventListener(l, T), x.dispatchEvent(t), t.defaultPrevented || v(e ?? document.body, { select: !0 }), x.removeEventListener(l, T), y.remove(O); }, 0); }; } }, [ x, w, T, O ]); let ee = r.useCallback((e) => { if (!d && !h || O.paused) return; let t = e.key === "Tab" && !e.altKey && !e.ctrlKey && !e.metaKey, n = document.activeElement; if (t && n) { let t = e.currentTarget, [r, i] = p(t); r && i ? !e.shiftKey && n === i ? (e.preventDefault(), d && v(r, { select: !0 })) : e.shiftKey && n === r && (e.preventDefault(), d && v(i, { select: !0 })) : n === t && e.preventDefault(); } }, [ d, h, O.paused ]); return /* @__PURE__ */ a(t.div, { tabIndex: -1, ...b, ref: D, onKeyDown: ee }); }, "FocusScope")); function f(e, { select: t = !1 } = {}) { let n = document.activeElement; for (let r of e) if (v(r, { select: t }), document.activeElement !== n) return; } s(f, "focusFirst"); function p(e) { let t = m(e); return [h(t, e), h(t.reverse(), e)]; } s(p, "getTabbableEdges"); function m(e) { let t = [], n = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, { acceptNode: /* @__PURE__ */ s((e) => { let t = e.tagName === "INPUT" && e.type === "hidden"; return e.disabled || e.hidden || t ? NodeFilter.FILTER_SKIP : e.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; }, "acceptNode") }); for (; n.nextNode();) t.push(n.currentNode); return t; } s(m, "getTabbableCandidates"); function h(e, t) { let n = typeof t.checkVisibility == "function" && t.checkVisibility({ checkVisibilityCSS: !0 }); for (let r of e) if (!(n ? !r.checkVisibility({ checkVisibilityCSS: !0 }) : g(r, { upTo: t }))) return r; } s(h, "findVisible"); function g(e, { upTo: t }) { if (getComputedStyle(e).visibility === "hidden") return !0; for (; e;) { if (t !== void 0 && e === t) return !1; if (getComputedStyle(e).display === "none") return !0; e = e.parentElement; } return !1; } s(g, "isHidden"); function _(e) { return e instanceof HTMLInputElement && "select" in e; } s(_, "isSelectableInput"); function v(e, { select: t = !1 } = {}) { if (e && e.focus) { let n = document.activeElement; e.focus({ preventScroll: !0 }), e !== n && _(e) && t && e.select(); } } s(v, "focus"); var y = b(); function b() { let e = []; return { add(t) { let n = e[0]; t !== n && n?.pause(), e = x(e, t), e.unshift(t); }, remove(t) { e = x(e, t), e[0]?.resume(); } }; } s(b, "createFocusScopesStack"); function x(e, t) { let n = [...e], r = n.indexOf(t); return r !== -1 && n.splice(r, 1), n; } s(x, "arrayRemove"); function S(e) { return e.filter((e) => e.tagName !== "A"); } s(S, "removeLinks"); //#endregion //#region node_modules/@radix-ui/react-focus-guards/dist/index.mjs var C = 0, w = null; function T() { r.useEffect(() => { w ||= { start: E(), end: E() }; let { start: e, end: t } = w; return document.body.firstElementChild !== e && document.body.insertAdjacentElement("afterbegin", e), document.body.lastElementChild !== t && document.body.insertAdjacentElement("beforeend", t), C++, () => { C === 1 && (w?.start.remove(), w?.end.remove(), w = null), C = Math.max(0, C - 1); }; }, []); } function E() { let e = document.createElement("span"); return e.setAttribute("data-radix-focus-guard", ""), e.tabIndex = 0, e.style.outline = "none", e.style.opacity = "0", e.style.position = "fixed", e.style.pointerEvents = "none", e; } //#endregion //#region node_modules/tslib/tslib.es6.mjs var D = function() { return D = Object.assign || function(e) { for (var t, n = 1, r = arguments.length; n < r; n++) for (var i in t = arguments[n], t) Object.prototype.hasOwnProperty.call(t, i) && (e[i] = t[i]); return e; }, D.apply(this, arguments); }; function O(e, t) { var n = {}; for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]); if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var i = 0, r = Object.getOwnPropertySymbols(e); i < r.length; i++) t.indexOf(r[i]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[i]) && (n[r[i]] = e[r[i]]); return n; } function ee(e, t, n) { if (n || arguments.length === 2) for (var r = 0, i = t.length, a; r < i; r++) (a || !(r in t)) && (a ||= Array.prototype.slice.call(t, 0, r), a[r] = t[r]); return e.concat(a || Array.prototype.slice.call(t)); } //#endregion //#region node_modules/react-remove-scroll-bar/dist/es2015/constants.js var k = "right-scroll-bar-position", A = "width-before-scroll-bar", te = "with-scroll-bars-hidden", ne = "--removed-body-scroll-bar-size"; //#endregion //#region node_modules/use-callback-ref/dist/es2015/assignRef.js function j(e, t) { return typeof e == "function" ? e(t) : e && (e.current = t), e; } //#endregion //#region node_modules/use-callback-ref/dist/es2015/useRef.js function re(e, t) { var n = i(function() { return { value: e, callback: t, facade: { get current() { return n.value; }, set current(e) { var t = n.value; t !== e && (n.value = e, n.callback(e, t)); } } }; })[0]; return n.callback = t, n.facade; } //#endregion //#region node_modules/use-callback-ref/dist/es2015/useMergeRef.js var ie = typeof window < "u" ? r.useLayoutEffect : r.useEffect, M = /* @__PURE__ */ new WeakMap(); function ae(e, t) { var n = re(t || null, function(t) { return e.forEach(function(e) { return j(e, t); }); }); return ie(function() { var t = M.get(n); if (t) { var r = new Set(t), i = new Set(e), a = n.current; r.forEach(function(e) { i.has(e) || j(e, null); }), i.forEach(function(e) { r.has(e) || j(e, a); }); } M.set(n, e); }, [e]), n; } //#endregion //#region node_modules/use-sidecar/dist/es2015/medium.js function oe(e) { return e; } function se(e, t) { t === void 0 && (t = oe); var n = [], r = !1; return { read: function() { if (r) throw Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`."); return n.length ? n[n.length - 1] : e; }, useMedium: function(e) { var i = t(e, r); return n.push(i), function() { n = n.filter(function(e) { return e !== i; }); }; }, assignSyncMedium: function(e) { for (r = !0; n.length;) { var t = n; n = [], t.forEach(e); } n = { push: function(t) { return e(t); }, filter: function() { return n; } }; }, assignMedium: function(e) { r = !0; var t = []; if (n.length) { var i = n; n = [], i.forEach(e), t = n; } var a = function() { var n = t; t = [], n.forEach(e); }, o = function() { return Promise.resolve().then(a); }; o(), n = { push: function(e) { t.push(e), o(); }, filter: function(e) { return t = t.filter(e), n; } }; } }; } function ce(e) { e === void 0 && (e = {}); var t = se(null); return t.options = D({ async: !0, ssr: !1 }, e), t; } //#endregion //#region node_modules/use-sidecar/dist/es2015/exports.js var N = function(e) { var t = e.sideCar, n = O(e, ["sideCar"]); if (!t) throw Error("Sidecar: please provide `sideCar` property to import the right car"); var i = t.read(); if (!i) throw Error("Sidecar medium not found"); return r.createElement(i, D({}, n)); }; N.isSideCarExport = !0; function le(e, t) { return e.useMedium(t), N; } //#endregion //#region node_modules/react-remove-scroll/dist/es2015/medium.js var P = ce(), F = function() {}, I = r.forwardRef(function(e, t) { var n = r.useRef(null), i = r.useState({ onScrollCapture: F, onWheelCapture: F, onTouchMoveCapture: F }), a = i[0], o = i[1], s = e.forwardProps, c = e.children, l = e.className, u = e.removeScrollBar, d = e.enabled, f = e.shards, p = e.sideCar, m = e.noRelative, h = e.noIsolation, g = e.inert, _ = e.allowPinchZoom, v = e.as, y = v === void 0 ? "div" : v, b = e.gapMode, x = O(e, [ "forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode" ]), S = p, C = ae([n, t]), w = D(D({}, x), a); return r.createElement(r.Fragment, null, d && r.createElement(S, { sideCar: P, removeScrollBar: u, shards: f, noRelative: m, noIsolation: h, inert: g, setCallbacks: o, allowPinchZoom: !!_, lockRef: n, gapMode: b }), s ? r.cloneElement(r.Children.only(c), D(D({}, w), { ref: C })) : r.createElement(y, D({}, w, { className: l, ref: C }), c)); }); I.defaultProps = { enabled: !0, removeScrollBar: !0, inert: !1 }, I.classNames = { fullWidth: A, zeroRight: k }; //#endregion //#region node_modules/get-nonce/dist/es2015/index.js var L, ue = function() { if (L) return L; if (typeof __webpack_nonce__ < "u") return __webpack_nonce__; }; //#endregion //#region node_modules/react-style-singleton/dist/es2015/singleton.js function de() { if (!document) return null; var e = document.createElement("style"); e.type = "text/css"; var t = ue(); return t && e.setAttribute("nonce", t), e; } function fe(e, t) { e.styleSheet ? e.styleSheet.cssText = t : e.appendChild(document.createTextNode(t)); } function pe(e) { (document.head || document.getElementsByTagName("head")[0]).appendChild(e); } var me = function() { var e = 0, t = null; return { add: function(n) { e == 0 && (t = de()) && (fe(t, n), pe(t)), e++; }, remove: function() { e--, !e && t && (t.parentNode && t.parentNode.removeChild(t), t = null); } }; }, he = function() { var e = me(); return function(t, n) { r.useEffect(function() { return e.add(t), function() { e.remove(); }; }, [t && n]); }; }, R = function() { var e = he(); return function(t) { var n = t.styles, r = t.dynamic; return e(n, r), null; }; }, ge = { left: 0, top: 0, right: 0, gap: 0 }, z = function(e) { return parseInt(e || "", 10) || 0; }, _e = function(e) { var t = window.getComputedStyle(document.body), n = t[e === "padding" ? "paddingLeft" : "marginLeft"], r = t[e === "padding" ? "paddingTop" : "marginTop"], i = t[e === "padding" ? "paddingRight" : "marginRight"]; return [ z(n), z(r), z(i) ]; }, ve = function(e) { if (e === void 0 && (e = "margin"), typeof window > "u") return ge; var t = _e(e), n = document.documentElement.clientWidth, r = window.innerWidth; return { left: t[0], top: t[1], right: t[2], gap: Math.max(0, r - n + t[2] - t[0]) }; }, ye = R(), B = "data-scroll-locked", be = function(e, t, n, r) { var i = e.left, a = e.top, o = e.right, s = e.gap; return n === void 0 && (n = "margin"), ` .${te} { overflow: hidden ${r}; padding-right: ${s}px ${r}; } body[${B}] { overflow: hidden ${r}; overscroll-behavior: contain; ${[ t && `position: relative ${r};`, n === "margin" && ` padding-left: ${i}px; padding-top: ${a}px; padding-right: ${o}px; margin-left:0; margin-top:0; margin-right: ${s}px ${r}; `, n === "padding" && `padding-right: ${s}px ${r};` ].filter(Boolean).join("")} } .${k} { right: ${s}px ${r}; } .${A} { margin-right: ${s}px ${r}; } .${k} .${k} { right: 0 ${r}; } .${A} .${A} { margin-right: 0 ${r}; } body[${B}] { ${ne}: ${s}px; } `; }, V = function() { var e = parseInt(document.body.getAttribute("data-scroll-locked") || "0", 10); return isFinite(e) ? e : 0; }, xe = function() { r.useEffect(function() { return document.body.setAttribute(B, (V() + 1).toString()), function() { var e = V() - 1; e <= 0 ? document.body.removeAttribute(B) : document.body.setAttribute(B, e.toString()); }; }, []); }, Se = function(e) { var t = e.noRelative, n = e.noImportant, i = e.gapMode, a = i === void 0 ? "margin" : i; xe(); var o = r.useMemo(function() { return ve(a); }, [a]); return r.createElement(ye, { styles: be(o, !t, a, n ? "" : "!important") }); }, H = !1; if (typeof window < "u") try { var U = Object.defineProperty({}, "passive", { get: function() { return H = !0, !0; } }); window.addEventListener("test", U, U), window.removeEventListener("test", U, U); } catch { H = !1; } var W = H ? { passive: !1 } : !1, Ce = function(e) { return e.tagName === "TEXTAREA"; }, G = function(e, t) { if (!(e instanceof Element)) return !1; var n = window.getComputedStyle(e); return n[t] !== "hidden" && !(n.overflowY === n.overflowX && !Ce(e) && n[t] === "visible"); }, we = function(e) { return G(e, "overflowY"); }, Te = function(e) { return G(e, "overflowX"); }, K = function(e, t) { var n = t.ownerDocument, r = t; do { if (typeof ShadowRoot < "u" && r instanceof ShadowRoot && (r = r.host), q(e, r)) { var i = Oe(e, r); if (i[1] > i[2]) return !0; } r = r.parentNode; } while (r && r !== n.body); return !1; }, Ee = function(e) { return [ e.scrollTop, e.scrollHeight, e.clientHeight ]; }, De = function(e) { return [ e.scrollLeft, e.scrollWidth, e.clientWidth ]; }, q = function(e, t) { return e === "v" ? we(t) : Te(t); }, Oe = function(e, t) { return e === "v" ? Ee(t) : De(t); }, ke = function(e, t) { return e === "h" && t === "rtl" ? -1 : 1; }, Ae = function(e, t, n, r, i) { var a = ke(e, window.getComputedStyle(t).direction), o = a * r, s = n.target, c = t.contains(s), l = !1, u = o > 0, d = 0, f = 0; do { if (!s) break; var p = Oe(e, s), m = p[0], h = p[1] - p[2] - a * m; (m || h) && q(e, s) && (d += h, f += m); var g = s.parentNode; s = g && g.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? g.host : g; } while (!c && s !== document.body || c && (t.contains(s) || t === s)); return (u && (i && Math.abs(d) < 1 || !i && o > d) || !u && (i && Math.abs(f) < 1 || !i && -o > f)) && (l = !0), l; }, J = function(e) { return "changedTouches" in e ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [0, 0]; }, je = function(e) { return [e.deltaX, e.deltaY]; }, Me = function(e) { return e && "current" in e ? e.current : e; }, Ne = function(e, t) { return e[0] === t[0] && e[1] === t[1]; }, Pe = function(e) { return ` .block-interactivity-${e} {pointer-events: none;} .allow-interactivity-${e} {pointer-events: all;} `; }, Fe = 0, Y = []; function Ie(e) { var t = r.useRef([]), n = r.useRef([0, 0]), i = r.useRef(), a = r.useState(Fe++)[0], o = r.useState(R)[0], s = r.useRef(e); r.useEffect(function() { s.current = e; }, [e]), r.useEffect(function() { if (e.inert) { document.body.classList.add(`block-interactivity-${a}`); var t = ee([e.lockRef.current], (e.shards || []).map(Me), !0).filter(Boolean); return t.forEach(function(e) { return e.classList.add(`allow-interactivity-${a}`); }), function() { document.body.classList.remove(`block-interactivity-${a}`), t.forEach(function(e) { return e.classList.remove(`allow-interactivity-${a}`); }); }; } }, [ e.inert, e.lockRef.current, e.shards ]); var c = r.useCallback(function(e, t) { if ("touches" in e && e.touches.length === 2 || e.type === "wheel" && e.ctrlKey) return !s.current.allowPinchZoom; var r = J(e), a = n.current, o = "deltaX" in e ? e.deltaX : a[0] - r[0], c = "deltaY" in e ? e.deltaY : a[1] - r[1], l, u = e.target, d = Math.abs(o) > Math.abs(c) ? "h" : "v"; if ("touches" in e && d === "h" && u.type === "range") return !1; var f = window.getSelection(), p = f && f.anchorNode; if (p && (p === u || p.contains(u))) return !1; var m = K(d, u); if (!m) return !0; if (m ? l = d : (l = d === "v" ? "h" : "v", m = K(d, u)), !m) return !1; if (!i.current && "changedTouches" in e && (o || c) && (i.current = l), !l) return !0; var h = i.current || l; return Ae(h, t, e, h === "h" ? o : c, !0); }, []), l = r.useCallback(function(e) { var n = e; if (!(!Y.length || Y[Y.length - 1] !== o)) { var r = "deltaY" in n ? je(n) : J(n), i = t.current.filter(function(e) { return e.name === n.type && (e.target === n.target || n.target === e.shadowParent) && Ne(e.delta, r); })[0]; if (i && i.should) { n.cancelable && n.preventDefault(); return; } if (!i) { var a = (s.current.shards || []).map(Me).filter(Boolean).filter(function(e) { return e.contains(n.target); }); (a.length > 0 ? c(n, a[0]) : !s.current.noIsolation) && n.cancelable && n.preventDefault(); } } }, []), u = r.useCallback(function(e, n, r, i) { var a = { name: e, delta: n, target: r, should: i, shadowParent: Le(r) }; t.current.push(a), setTimeout(function() { t.current = t.current.filter(function(e) { return e !== a; }); }, 1); }, []), d = r.useCallback(function(e) { n.current = J(e), i.current = void 0; }, []), f = r.useCallback(function(t) { u(t.type, je(t), t.target, c(t, e.lockRef.current)); }, []), p = r.useCallback(function(t) { u(t.type, J(t), t.target, c(t, e.lockRef.current)); }, []); r.useEffect(function() { return Y.push(o), e.setCallbacks({ onScrollCapture: f, onWheelCapture: f, onTouchMoveCapture: p }), document.addEventListener("wheel", l, W), document.addEventListener("touchmove", l, W), document.addEventListener("touchstart", d, W), function() { Y = Y.filter(function(e) { return e !== o; }), document.removeEventListener("wheel", l, W), document.removeEventListener("touchmove", l, W), document.removeEventListener("touchstart", d, W); }; }, []); var m = e.removeScrollBar, h = e.inert; return r.createElement(r.Fragment, null, h ? r.createElement(o, { styles: Pe(a) }) : null, m ? r.createElement(Se, { noRelative: e.noRelative, gapMode: e.gapMode }) : null); } function Le(e) { for (var t = null; e !== null;) e instanceof ShadowRoot && (t = e.host, e = e.host), e = e.parentNode; return t; } //#endregion //#region node_modules/react-remove-scroll/dist/es2015/sidecar.js var Re = le(P, Ie), ze = r.forwardRef(function(e, t) { return r.createElement(I, D({}, e, { ref: t, sideCar: Re })); }); ze.classNames = I.classNames; //#endregion //#region node_modules/aria-hidden/dist/es2015/index.js var Be = function(e) { return typeof document > "u" ? null : (Array.isArray(e) ? e[0] : e).ownerDocument.body; }, X = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakMap(), Q = {}, $ = 0, Ve = function(e) { return e && (e.host || Ve(e.parentNode)); }, He = function(e, t) { return t.map(function(t) { if (e.contains(t)) return t; var n = Ve(t); return n && e.contains(n) ? n : (console.error("aria-hidden", t, "in not contained inside", e, ". Doing nothing"), null); }).filter(function(e) { return !!e; }); }, Ue = function(e, t, n, r) { var i = He(t, Array.isArray(e) ? e : [e]); Q[n] || (Q[n] = /* @__PURE__ */ new WeakMap()); var a = Q[n], o = [], s = /* @__PURE__ */ new Set(), c = new Set(i), l = function(e) { !e || s.has(e) || (s.add(e), l(e.parentNode)); }; i.forEach(l); var u = function(e) { !e || c.has(e) || Array.prototype.forEach.call(e.children, function(e) { if (s.has(e)) u(e); else try { var t = e.getAttribute(r), i = t !== null && t !== "false", c = (X.get(e) || 0) + 1, l = (a.get(e) || 0) + 1; X.set(e, c), a.set(e, l), o.push(e), c === 1 && i && Z.set(e, !0), l === 1 && e.setAttribute(n, "true"), i || e.setAttribute(r, "true"); } catch (t) { console.error("aria-hidden: cannot operate on ", e, t); } }); }; return u(t), s.clear(), $++, function() { o.forEach(function(e) { var t = X.get(e) - 1, i = a.get(e) - 1; X.set(e, t), a.set(e, i), t || (Z.has(e) || e.removeAttribute(r), Z.delete(e)), i || e.removeAttribute(n); }), $--, $ || (X = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakMap(), Q = {}); }; }, We = function(e, t, n) { n === void 0 && (n = "data-aria-hidden"); var r = Array.from(Array.isArray(e) ? e : [e]), i = t || Be(e); return i ? (r.push.apply(r, Array.from(i.querySelectorAll("[aria-live], script"))), Ue(r, i, n, "aria-hidden")) : function() { return null; }; }; //#endregion export { d as i, ze as n, T as r, We as t }; //# sourceMappingURL=es2015-PKoodAxS.js.map