urfu-ui-kit-react 2.1.2 → 2.1.4

package/dist/components/Modal/Modal.js

@@ -0,0 +1,102 @@
+import { jsx as a, jsxs as j } from "react/jsx-runtime";
+import { useRef as I, useState as L, useInsertionEffect as R, useLayoutEffect as F, useEffect as l } from "react";
+import { createPortal as H } from "react-dom";
+import { useMountTransition$u as z } from "../../hooks/useMountTransition.js";
+/* empty css                 */
+import { useModalFocus$u as B, ModalFocusContext$u as U, isTopModal$u as q } from "./useModalFocus.js";
+import { isEditorPopupTarget$u as G } from "./editorFocus.js";
+import { useModalTitleClearance$u as J } from "./useModalTitleClearance.js";
+/* empty css                  */
+/* empty css                 */
+/* empty css                                   */
+/* empty css       */
+import { getPortalScopeProps$u as Q, getUiKitDefaults$u as V } from "../../shared/uiKitDefaults.js";
+import { lockKitScroll$u as W, ownKitNode$u as X, isKitEventHandled$u as Y, markKitEventHandled$u as Z } from "../../vanilla/core/kitRegistry.js";
+const fe = ({
+  onCancel: s,
+  active: o,
+  ariaLabel: k,
+  ariaLabelledBy: m,
+  children: c,
+  maxWidth: N = "900px",
+  maxHeight: _,
+  className: x = "",
+  height: v = "",
+  notCloseClickOnBack: w,
+  closeOnEscape: f = !1,
+  closeButtonInside: p = !1,
+  lockScroll: y = !1,
+  unmountOnClose: P = !1,
+  portalOn: n = !0,
+  trapFocus: S = !0,
+  initialFocus: T = "first",
+  mobileSheet: A
+}) => {
+  const K = A ?? V().mobileSheets, i = I(null), [e] = L(
+    () => typeof document > "u" ? null : document.createElement("div")
+  );
+  R(() => {
+    if (!(!n || !e))
+      return e.className = "u-react-modal-portal", document.body.appendChild(e), () => e.remove();
+  }, [n, e]), F(() => {
+    if (!n || !e) return;
+    const t = Q()["data-u-kit"];
+    if (t ? e.setAttribute("data-u-kit", t) : e.removeAttribute("data-u-kit"), o) {
+      const r = document.activeElement;
+      document.body.appendChild(e), r instanceof HTMLElement && e.contains(r) && r.focus({ preventScroll: !0 });
+    }
+  }, [o, n, e]);
+  const b = 180, { shouldRender: g, status: $, isAnimated: C } = z({
+    isOpen: !!o,
+    duration: b
+  }), d = C && $ === "exiting", h = !!o || d, E = d ? { opacity: 0, transition: `opacity ${b}ms ease` } : null, { scope: u, onFocusCapture: D } = B(i, !!o, S, T);
+  if (J(i, h, m, c, p), l(() => {
+    if (!o || !f || typeof s != "function") return;
+    const t = (r) => {
+      r.key !== "Escape" || r.defaultPrevented || Y(r) || !q(u) || G(i.current, r.target) || (Z(r), s(r));
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [o, f, s, u]), l(() => {
+    if (!(!o || !y))
+      return W();
+  }, [o, y]), l(() => {
+    const t = i.current;
+    return t ? X(t) : void 0;
+  }, [g, n]), P && !g) return null;
+  const M = /* @__PURE__ */ a(U.Provider, { value: u, children: /* @__PURE__ */ a(
+    "div",
+    {
+      className: `${h ? "u-modal u-modal-active" : "u-modal"}${K ? " u-react-modal-sheet" : ""}${d ? " u-react-modal-closing" : ""} ${x}`,
+      style: { backgroundColor: "unset" },
+      onMouseDown: w ? () => {
+      } : s,
+      children: /* @__PURE__ */ a("div", { className: "u-modal__container", style: Object.assign({ backgroundColor: "#0006" }, E), children: /* @__PURE__ */ j(
+        "div",
+        {
+          className: `u-modal__body${p ? " u-modal__body--close-inside" : ""}`,
+          ref: i,
+          tabIndex: -1,
+          onFocusCapture: D,
+          role: "dialog",
+          "aria-label": k,
+          "aria-labelledby": m,
+          "aria-modal": o || void 0,
+          "aria-hidden": !o || void 0,
+          onMouseDown: (t) => {
+            t.stopPropagation();
+          },
+          style: Object.assign(
+            { width: "100%", maxWidth: N, height: v, maxHeight: _, zIndex: 1001 },
+            E
+          ),
+          children: [
+            c,
+            /* @__PURE__ */ a("div", { className: "u-modal__exit", children: /* @__PURE__ */ a("button", { className: "u-button-cross", onClick: s, "aria-label": "Закрыть" }) })
+          ]
+        }
+      ) })
+    }
+  ) });
+  return !n || !e ? M : H(M, e);
+};
+export { fe as Modal$u };

package/dist/components/Modal/editorFocus.js

@@ -0,0 +1,15 @@
+const r = (n) => {
+  var o;
+  const t = n.ownerDocument.defaultView, e = (o = t == null ? void 0 : t.tinymce) == null ? void 0 : o.get();
+  return (Array.isArray(e) ? e : []).filter((s) => {
+    const i = s.getContainer();
+    return (i == null ? void 0 : i.isConnected) && n.contains(i);
+  });
+}, c = (n) => {
+  var t;
+  return (t = n.theme) != null && t.getSinkElement ? [...new Set(["dialog", "popup"].map((e) => {
+    var o, s;
+    return (s = (o = n.theme) == null ? void 0 : o.getSinkElement) == null ? void 0 : s.call(o, e);
+  }))].filter((e) => !!(e != null && e.isConnected)) : [];
+}, a = (n) => r(n).flatMap(c), l = (n, t) => !!(t && r(n).some((e) => e.getContainer().contains(t) || c(e).some((o) => o.contains(t)))), m = (n, t) => !!(n && t instanceof Node && a(n).some((e) => e.contains(t)));
+export { a as getEditorFocusRoots$u, l as isEditorFocusTarget$u, m as isEditorPopupTarget$u };

package/dist/components/Modal/useModalFocus.js

@@ -0,0 +1,112 @@
+import { useContext as B, useRef as g, useLayoutEffect as R, createContext as O } from "react";
+import { isEditorFocusTarget$u as q, getEditorFocusRoots$u as V } from "./editorFocus.js";
+import { topKitModal$u as x, kitModalStack$u as U } from "../../vanilla/core/kitRegistry.js";
+const W = O(null), p = U(), v = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', h = (t) => {
+  var e;
+  const r = (e = t.bodyRef.current) == null ? void 0 : e.ownerDocument;
+  return !!r && x(r) === t;
+}, D = /* @__PURE__ */ new WeakSet(), C = (t) => !!(t && D.has(t)), E = (t) => {
+  var r;
+  if (!t.isConnected || t.closest('[hidden], [inert], [aria-hidden="true"]')) return !1;
+  for (let e = t; e; e = e.parentElement) {
+    const s = (r = e.ownerDocument.defaultView) == null ? void 0 : r.getComputedStyle(e);
+    if ((s == null ? void 0 : s.display) === "none" || (s == null ? void 0 : s.visibility) === "hidden" || (s == null ? void 0 : s.visibility) === "collapse") return !1;
+  }
+  return !0;
+}, A = (t) => {
+  const r = t.bodyRef.current;
+  if (!r) return [];
+  const e = [r, ...t.portals, ...V(r)].filter(E);
+  for (let s = 0; s < e.length; s += 1)
+    for (const f of e[s].querySelectorAll("[aria-controls]"))
+      if (f.getAttribute("aria-expanded") !== "false")
+        for (const b of (f.getAttribute("aria-controls") ?? "").split(/\s+/)) {
+          const n = r.ownerDocument.getElementById(b);
+          n && E(n) && !e.some((d) => d.contains(n)) && e.push(n);
+        }
+  return e;
+}, y = (t, r) => A(t).some((e) => e.contains(r)), H = (t) => {
+  const r = [...new Set(A(t).flatMap((e) => [
+    ...e.matches(v) ? [e] : [],
+    ...e.querySelectorAll(v)
+  ]))].filter((e) => e.tabIndex >= 0 && !e.matches(':disabled, input[type="hidden"]') && E(e));
+  return r.filter((e) => {
+    if (!(e instanceof HTMLInputElement) || e.type !== "radio" || !e.name) return !0;
+    const s = r.filter((f) => f instanceof HTMLInputElement && f.type === "radio" && f.name === e.name && f.form === e.form);
+    return e === (s.find((f) => f.checked) ?? s[0]);
+  }).sort((e, s) => (e.tabIndex > 0 ? e.tabIndex : 1 / 0) - (s.tabIndex > 0 ? s.tabIndex : 1 / 0));
+}, k = (t) => {
+  var e;
+  const r = t.lastFocused;
+  r && E(r) && y(t, r) && !r.matches(":disabled") ? r.focus({ preventScroll: !0 }) : (e = H(t)[0] ?? t.bodyRef.current) == null || e.focus({ preventScroll: !0 });
+}, N = (t, r, e, s = "first") => {
+  const f = B(W), b = g(s);
+  b.current = s;
+  const n = g({
+    bodyRef: t,
+    parent: f,
+    portals: /* @__PURE__ */ new Set(),
+    lastFocused: null,
+    element: () => t.current,
+    open: () => {
+      var i;
+      return ((i = t.current) == null ? void 0 : i.getAttribute("aria-modal")) === "true";
+    }
+  }).current;
+  D.add(n);
+  const d = g(null), w = g(r);
+  w.current = r;
+  const S = () => {
+    var l;
+    const i = d.current;
+    if (d.current = null, !i || !E(i)) return;
+    const o = x(i.ownerDocument), u = C(o) ? y(o, i) : !!((l = o == null ? void 0 : o.element()) != null && l.contains(i));
+    (!o || u) && i.focus({ preventScroll: !0 });
+  };
+  return R(() => {
+    var M, L;
+    const i = t.current;
+    if (!r || !i) {
+      S();
+      return;
+    }
+    const o = i.ownerDocument, u = d.current ?? (o.activeElement instanceof HTMLElement ? o.activeElement : null);
+    d.current = null, n.portals.clear(), n.lastFocused = null;
+    const l = p.findIndex((c) => {
+      if (!C(c)) return !1;
+      for (let a = c.parent; a; a = a.parent) if (a === n) return !0;
+      return !1;
+    });
+    p.splice(l < 0 ? p.length : l, 0, n);
+    const m = (L = (M = x(o)) == null ? void 0 : M.element()) == null ? void 0 : L.closest(".u-react-modal-portal");
+    if ((m == null ? void 0 : m.parentElement) === o.body && o.body.lastElementChild !== m) {
+      const c = o.activeElement;
+      o.body.appendChild(m), c instanceof HTMLElement && m.contains(c) && c.focus({ preventScroll: !0 });
+    }
+    const F = (c) => {
+      !e || !h(n) || !(c.target instanceof HTMLElement) || (y(n, c.target) ? n.lastFocused = c.target : k(n));
+    }, I = (c) => {
+      if (!e || !h(n) || c.defaultPrevented || c.key !== "Tab" || c.altKey || c.ctrlKey || c.metaKey || q(i, o.activeElement)) return;
+      const a = H(n), T = a.indexOf(o.activeElement), K = T < 0 ? c.shiftKey ? a.length - 1 : 0 : (T + (c.shiftKey ? -1 : 1) + a.length) % a.length;
+      c.preventDefault(), (a[K] ?? i).focus({ preventScroll: !0 });
+    };
+    return o.addEventListener("focusin", F), o.addEventListener("keydown", I), e && h(n) && (u && y(n, u) ? n.lastFocused = u : b.current === "dialog" ? i.focus({ preventScroll: !0 }) : k(n)), () => {
+      o.removeEventListener("focusin", F), o.removeEventListener("keydown", I);
+      const c = p.indexOf(n);
+      c >= 0 && p.splice(c, 1), e && (d.current = u, queueMicrotask(() => {
+        var a;
+        (!w.current || !((a = n.bodyRef.current) != null && a.isConnected)) && S();
+      })), n.portals.clear();
+    };
+  }, [r, e, t, n]), { scope: n, onFocusCapture: (i) => {
+    if (!h(n) || !(i.target instanceof HTMLElement)) return;
+    const o = i.target, u = t.current;
+    if (u && !u.contains(o)) {
+      let l = o;
+      for (; l.parentElement && l.parentElement !== u.ownerDocument.body; ) l = l.parentElement;
+      l !== u.ownerDocument.body && !l.contains(u) && n.portals.add(l);
+    }
+    n.lastFocused = o;
+  } };
+};
+export { W as ModalFocusContext$u, h as isTopModal$u, N as useModalFocus$u };

package/dist/components/Modal/useModalTitleClearance.js

@@ -0,0 +1,48 @@
+import { useLayoutEffect as v } from "react";
+const F = (r, g, p, b, w) => {
+  var o, f, m;
+  const t = r.ownerDocument.defaultView, a = t == null ? void 0 : t.getComputedStyle(r), e = g.top + (parseFloat((a == null ? void 0 : a.borderTopWidth) ?? "") || 0) + (parseFloat((a == null ? void 0 : a.paddingTop) ?? "") || 0), i = Math.max(0, p - e + b), l = (f = (o = r.ownerDocument).createRange) == null ? void 0 : f.call(o);
+  l == null || l.selectNodeContents(r);
+  const s = [...((m = l == null ? void 0 : l.getClientRects) == null ? void 0 : m.call(l)) ?? []].filter((c) => c.width > 0 || c.height > 0).map((c) => (c.top + c.bottom) / 2 + w / 2);
+  if (s.length === 0) return i;
+  const h = Math.max(...s) - e;
+  if (i <= h) return i;
+  const d = r.nextElementSibling, n = Math.max(
+    0,
+    parseFloat((a == null ? void 0 : a.marginBottom) ?? "") || 0,
+    d && t && parseFloat(t.getComputedStyle(d).marginTop) || 0
+  );
+  return Math.min(i, Math.max(h, p - e - n));
+}, A = (r, g, p, b, w) => {
+  v(() => {
+    const t = r.current;
+    if (!g || !t) return;
+    const e = (p ?? "").split(/\s+/).map((o) => t.ownerDocument.getElementById(o)).find((o) => (o == null ? void 0 : o.closest(".u-modal__body")) === t) ?? [...t.querySelectorAll("h1, h2, h3, h4, h5, h6")].find((o) => o.closest(".u-modal__body") === t), i = t.querySelector(":scope > .u-modal__exit > button"), l = t.ownerDocument.defaultView;
+    if (!e || !i || !l || ["flex", "inline-flex", "grid", "inline-grid"].includes(l.getComputedStyle(e).display)) return;
+    t.setAttribute("data-u-modal-has-title", "");
+    let s = 0;
+    const h = () => {
+      const o = e.getBoundingClientRect(), f = i.getBoundingClientRect(), m = t.getBoundingClientRect(), c = l.getComputedStyle(e), x = parseFloat(c.lineHeight) || (parseFloat(c.fontSize) || 16) * 1.2, C = t.offsetWidth > 0 && m.width > 0 ? m.width / t.offsetWidth : 1;
+      t.style.setProperty(
+        "--u-modal-title-close-top",
+        `${(o.top - m.top - f.height / 2) / C + x / 2}px`
+      );
+      const u = i.getBoundingClientRect(), y = parseFloat(l.getComputedStyle(t).getPropertyValue("--u-modal-title-gap")) || 8;
+      u.left < o.right + y && u.right > o.left && u.bottom + y > o.top && u.top < o.bottom ? (e.setAttribute("data-u-modal-title-clearance", ""), e.style.setProperty(
+        "--u-modal-title-clearance-width",
+        `${Math.min(o.width, Math.max(0, o.right - u.left + y))}px`
+      ), e.style.setProperty(
+        "--u-modal-title-clearance-height",
+        `${F(e, o, u.bottom, y, x)}px`
+      )) : (e.removeAttribute("data-u-modal-title-clearance"), e.style.removeProperty("--u-modal-title-clearance-width"), e.style.removeProperty("--u-modal-title-clearance-height"));
+    }, d = () => {
+      l.cancelAnimationFrame(s), s = l.requestAnimationFrame(h);
+    };
+    h();
+    const n = typeof ResizeObserver > "u" ? null : new ResizeObserver(d);
+    return n == null || n.observe(t), n == null || n.observe(e), n == null || n.observe(i), l.addEventListener("resize", d), () => {
+      n == null || n.disconnect(), l.removeEventListener("resize", d), l.cancelAnimationFrame(s), t.removeAttribute("data-u-modal-has-title"), t.style.removeProperty("--u-modal-title-close-top"), e.removeAttribute("data-u-modal-title-clearance"), e.style.removeProperty("--u-modal-title-clearance-width"), e.style.removeProperty("--u-modal-title-clearance-height");
+    };
+  }, [r, g, p, b, w]);
+};
+export { A as useModalTitleClearance$u };

package/dist/components/Multiselect/Multiselect.d.ts

@@ -1,5 +1,6 @@
 
 import './Multiselect.less';
+
 import '../../styles/tokens.less';
 import '../../styles/popup.less';
 import type { MultiselectProperties } from './Multiselect.types';

package/dist/components/Multiselect/Multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Multiselect/Multiselect.tsx"],"names":[],"mappings":"AAEA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAChC,OAAO,KAAK,EAAE,qBAAqB,EAAoB,MAAM,qBAAqB,CAAC;AAcnF,eAAO,MAAM,WAAW,GAAI,mbAgCzB,qBAAqB,4CAgbvB,CAAA"}
+{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Multiselect/Multiselect.tsx"],"names":[],"mappings":"AAEA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0DAA0D,CAAC;AAClE,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAChC,OAAO,KAAK,EAAE,qBAAqB,EAAoB,MAAM,qBAAqB,CAAC;AAcnF,eAAO,MAAM,WAAW,GAAI,mbAgCzB,qBAAqB,4CAgbvB,CAAA"}