urfu-ui-kit-react 2.1.5 → 2.1.6

package/dist/vanilla/core/tabsIndicator.js

@@ -1,38 +1,41 @@
-const c = 200, p = ["transform", "width", "height"].map((e) => `${e} 200ms ease-out`).join(", "), u = () => {
-  var e;
-  return typeof window < "u" && ((e = window.matchMedia) == null ? void 0 : e.call(window, "(prefers-reduced-motion: reduce)").matches) === !0;
-}, g = () => {
-  let e = null, f, l;
-  const h = (i, n, s) => {
-    if (!i || !n) return;
-    const o = i.querySelector('[aria-current="page"]');
+import { prefersReducedMotion$u as g, motionMs$u as b, MOTION_MS$u as w, MOTION_EASE$u as M } from "./motion.js";
+const $ = w.base, v = (t) => ["transform", "width", "height"].map((r) => `${r} ${t}ms ${M.move}`).join(", "), y = () => {
+  let t = null, r, a, h = 0;
+  const p = () => performance.now() < h, d = (n, i, f) => {
+    if (!n || !i) return;
+    const o = n.querySelector('[aria-current="page"]');
     if (!o) {
-      n.style.visibility = "hidden", e = null;
+      i.style.visibility = "hidden", t = null;
       return;
     }
-    let d = 0, a = 0;
-    for (let r = o; r && r !== i; r = r.offsetParent)
-      d += r.offsetLeft, a += r.offsetTop;
-    const t = { left: d, top: a, width: o.offsetWidth, height: o.offsetHeight };
-    e && e.left === t.left && e.top === t.top && e.width === t.width && e.height === t.height || (Object.assign(n.style, {
-      transition: s && e && !u() ? p : "none",
+    let l = 0, c = 0;
+    for (let s = o; s && s !== n; s = s.offsetParent)
+      l += s.offsetLeft, c += s.offsetTop;
+    const e = { left: l, top: c, width: o.offsetWidth, height: o.offsetHeight };
+    if (t && t.left === e.left && t.top === e.top && t.width === e.width && t.height === e.height) return;
+    const m = !!(f && t && !g()), u = b($);
+    m && (h = performance.now() + u), Object.assign(i.style, {
+      transition: m ? v(u) : "none",
       visibility: "",
-      width: `${t.width}px`,
-      height: `${t.height}px`,
-      transform: `translate(${t.left}px, ${t.top}px)`,
+      width: `${e.width}px`,
+      height: `${e.height}px`,
+      transform: `translate(${e.left}px, ${e.top}px)`,
       borderRadius: getComputedStyle(o).borderRadius
-    }), e = t);
+    }), t = e;
   };
   return {
     /** После каждой отрисовки. layout — состав и вид вкладок: при его смене подсветка не едет. */
-    update(i, n, s, o) {
-      const d = s !== f && o === l;
-      f = s, l = o, h(i, n, d);
+    update(n, i, f, o) {
+      const l = o === a && (f !== r || p());
+      r = f, a = o, d(n, i, l);
     },
-    /** Ряд сменил размер (окно, загрузка шрифтов) — встать на место без переезда. */
-    refresh(i, n) {
-      h(i, n, !1);
+    /**
+     * Ряд сменил размер (окно, шрифты, полоса прокрутки страницы) — встать на место без переезда.
+     * Посреди переезда — доехать до нового места: `transition: none` оборвал бы его прыжком.
+     */
+    refresh(n, i) {
+      d(n, i, p());
     }
   };
 };
-export { c as TABS_INDICATOR_MS$u, g as createTabsIndicator$u };
+export { $ as TABS_INDICATOR_MS$u, y as createTabsIndicator$u };

package/dist/vanilla/core/tabsScroll.js

@@ -0,0 +1,29 @@
+import { prefersReducedMotion$u as c } from "./motion.js";
+const g = (e) => {
+  const o = () => {
+    const s = e.scrollWidth - e.clientWidth;
+    e.toggleAttribute("data-fade-start", s > 1 && e.scrollLeft > 1), e.toggleAttribute("data-fade-end", s > 1 && e.scrollLeft < s - 1);
+  }, t = typeof ResizeObserver > "u" ? null : new ResizeObserver(o);
+  return t == null || t.observe(e), e.addEventListener("scroll", o, { passive: !0 }), o(), {
+    /** После каждой отрисовки: состав и отступы вкладок меняют ширину содержимого, а не трека. */
+    fade: o,
+    /**
+     * Прокрутить ряд к активной вкладке (`aria-current="page"`), если она за краем или под затуханием.
+     * Вкладка шире ряда без затуханий — по центру: иначе у последней вкладки ряд вставал в паре
+     * пикселей от конца и правый край оставался под затуханием.
+     * Только `scrollLeft` трека: `scrollIntoView` прокрутил бы и страницу к вкладкам.
+     */
+    reveal(s) {
+      const n = e.querySelector('[aria-current="page"]'), d = e.scrollWidth - e.clientWidth;
+      if (!n || d <= 0) return;
+      let i = 0;
+      for (let l = n; l && l !== e; l = l.offsetParent) i += l.offsetLeft;
+      const r = getComputedStyle(e), f = i - (parseFloat(r.scrollPaddingLeft) || 0), a = i + n.offsetWidth + (parseFloat(r.scrollPaddingRight) || 0) - e.clientWidth, u = a > f ? i + (n.offsetWidth - e.clientWidth) / 2 : Math.min(Math.max(e.scrollLeft, a), f), h = Math.min(Math.max(u, 0), d);
+      Math.abs(h - e.scrollLeft) < 1 || e.scrollTo({ left: h, behavior: s && !c() ? "smooth" : "auto" });
+    },
+    destroy() {
+      t == null || t.disconnect(), e.removeEventListener("scroll", o), e.removeAttribute("data-fade-start"), e.removeAttribute("data-fade-end");
+    }
+  };
+};
+export { g as createTabsScroll$u };

package/dist/vanilla/core/virtualList.js

@@ -0,0 +1,213 @@
+var g = Object.defineProperty;
+var y = (c, e, t) => e in c ? g(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
+var n = (c, e, t) => y(c, typeof e != "symbol" ? e + "" : e, t);
+import { prefersReducedMotion$u as m } from "./motion.js";
+const w = (c, e) => {
+  const t = new Array(c + 1);
+  t[0] = 0;
+  for (let s = 0; s < c; s++) t[s + 1] = t[s] + e(s);
+  return t;
+}, d = (c, e, t) => {
+  let s = 0, i = e;
+  for (; s < i; ) {
+    const o = Math.floor((s + i) / 2);
+    c[o + 1] <= t ? s = o + 1 : i = o;
+  }
+  return Math.min(s, Math.max(0, e - 1));
+}, b = (c, e) => c.length === e.length && c.every((t, s) => t === e[s]), z = /(auto|scroll|overlay)/, v = (c) => {
+  if (typeof window > "u") return null;
+  for (let e = c; e && e !== document.body && e !== document.documentElement; e = e.parentElement)
+    if (e instanceof HTMLElement && z.test(getComputedStyle(e).overflowY)) return e;
+  return null;
+}, p = 0.5;
+class E {
+  constructor() {
+    n(this, "keys", []);
+    n(this, "keyIndex", /* @__PURE__ */ new Map());
+    n(this, "sizes", /* @__PURE__ */ new Map());
+    n(this, "offsets", [0]);
+    n(this, "offsetsDirty", !0);
+    n(this, "estimateSize", 40);
+    n(this, "overscan", 5);
+    n(this, "explicitScrollElement");
+    n(this, "viewport", { top: 0, height: 0 });
+    n(this, "list", null);
+    n(this, "scroller", null);
+    n(this, "focusedKey", null);
+    n(this, "elementKeys", /* @__PURE__ */ new WeakMap());
+    n(this, "observed", /* @__PURE__ */ new Set());
+    n(this, "resizeObserver", null);
+    n(this, "viewportObserver", null);
+    n(this, "detach", null);
+    n(this, "signature", "");
+    n(this, "snapshot", null);
+    n(this, "listeners", /* @__PURE__ */ new Set());
+    n(this, "flushPending", !1);
+    /** Подписка на изменения окна строк; возвращает отписку. */
+    n(this, "subscribe", (e) => (this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    }));
+    /**
+     * Регистрирует отрисованную строку (у неё должен быть `data-index`): замер сразу
+     * и наблюдение за изменением высоты. `null`/другой элемент — снять наблюдение.
+     */
+    n(this, "measureElement", (e) => {
+      var i, o;
+      if (!e) return;
+      const t = Number((i = e.dataset) == null ? void 0 : i.index), s = this.keys[t];
+      s !== void 0 && (this.elementKeys.set(e, s), this.observed.has(e) || (this.observed.add(e), (o = this.resizeObserver) == null || o.observe(e)), this.setSize(s, e.getBoundingClientRect().height) && this.scheduleFlush());
+    });
+  }
+  setOptions({ keys: e, estimateSize: t, overscan: s, scrollElement: i }) {
+    let o = !1;
+    if (e !== this.keys && !b(e, this.keys)) {
+      this.keys = e, this.keyIndex = new Map(e.map((r, h) => [r, h]));
+      for (const r of this.sizes.keys()) this.keyIndex.has(r) || this.sizes.delete(r);
+      this.focusedKey !== null && !this.keyIndex.has(this.focusedKey) && (this.focusedKey = null), o = !0;
+    }
+    (t !== this.estimateSize || s !== this.overscan) && (this.estimateSize = t, this.overscan = Math.max(0, Math.floor(s)), o = !0), o && (this.offsetsDirty = !0, this.snapshot = null), i !== this.explicitScrollElement && (this.explicitScrollElement = i, this.list && this.attach(this.list));
+  }
+  /**
+   * Подключает контейнер строк (элемент высотой со весь список, внутри которого строки
+   * стоят абсолютно). `null` — отключить.
+   */
+  attach(e) {
+    var r;
+    if ((r = this.detach) == null || r.call(this), this.detach = null, this.list = e, !e || typeof window > "u") return;
+    this.scroller = this.explicitScrollElement ?? v(e.parentElement ?? e);
+    const t = (h) => {
+      const l = h.target;
+      l === window || l === document || l === this.scroller ? this.update() : l instanceof Node && l.contains(e) && (this.resolveScroller(), this.update());
+    }, s = () => this.update();
+    window.addEventListener("scroll", t, { capture: !0, passive: !0 }), window.addEventListener("resize", s);
+    const i = (h) => {
+      var u, a;
+      const l = (a = (u = h.target) == null ? void 0 : u.closest) == null ? void 0 : a.call(u, "[data-index]"), f = l && e.contains(l) ? this.elementKeys.get(l) : void 0;
+      this.focusedKey = f ?? null;
+    }, o = () => {
+      queueMicrotask(() => {
+        this.list === e && !e.contains(document.activeElement) && (this.focusedKey = null, this.update());
+      });
+    };
+    if (e.addEventListener("focusin", i), e.addEventListener("focusout", o), typeof ResizeObserver < "u") {
+      this.resizeObserver = new ResizeObserver((h) => this.onResize(h));
+      for (const h of this.observed) this.resizeObserver.observe(h);
+      this.viewportObserver = new ResizeObserver(() => {
+        this.resolveScroller(), this.update();
+      }), this.viewportObserver.observe(e), this.scroller && this.viewportObserver.observe(this.scroller);
+    }
+    this.detach = () => {
+      var h, l;
+      window.removeEventListener("scroll", t, { capture: !0 }), window.removeEventListener("resize", s), e.removeEventListener("focusin", i), e.removeEventListener("focusout", o), (h = this.viewportObserver) == null || h.disconnect(), this.viewportObserver = null, (l = this.resizeObserver) == null || l.disconnect(), this.resizeObserver = null, this.scroller = null;
+    }, this.update();
+  }
+  /** Заново найти прокручиваемого предка, если область не задана явно. */
+  resolveScroller() {
+    var s, i;
+    const e = this.list;
+    if (!e || this.explicitScrollElement) return;
+    const t = v(e.parentElement ?? e);
+    t !== this.scroller && (this.scroller && ((s = this.viewportObserver) == null || s.unobserve(this.scroller)), this.scroller = t, t && ((i = this.viewportObserver) == null || i.observe(t)));
+  }
+  /** Снимает наблюдение с удалённой строки. */
+  unmeasureElement(e) {
+    var t;
+    this.observed.delete(e), (t = this.resizeObserver) == null || t.unobserve(e);
+  }
+  /** Строки для отрисовки: окно с запасом плюс сфокусированная, по возрастанию индекса. */
+  getItems() {
+    if (this.snapshot) return this.snapshot;
+    const e = this.getOffsets(), [t, s] = this.range(), i = [], o = this.focusedKey === null ? void 0 : this.keyIndex.get(this.focusedKey);
+    o !== void 0 && o < t && i.push(o);
+    for (let r = t; r < s; r++) i.push(r);
+    return o !== void 0 && o >= s && i.push(o), this.snapshot = i.map((r) => ({
+      key: this.keys[r],
+      index: r,
+      start: e[r],
+      size: e[r + 1] - e[r]
+    })), this.snapshot;
+  }
+  /** Высота всего списка с учётом замеров, px. */
+  getTotalSize() {
+    return this.getOffsets()[this.keys.length];
+  }
+  /** Докрутить область прокрутки до строки `index`. */
+  scrollToIndex(e, { align: t = "auto", behavior: s = "auto" } = {}) {
+    if (!this.list || e < 0 || e >= this.keys.length) return;
+    this.resolveScroller(), this.readViewport();
+    const i = this.getOffsets(), o = i[e], r = i[e + 1], { top: h, height: l } = this.viewport;
+    let f;
+    if (t === "start") f = o;
+    else if (t === "end") f = r - l;
+    else if (t === "center") f = o - (l - (r - o)) / 2;
+    else if (o < h) f = o;
+    else if (r > h + l) f = r - l;
+    else return;
+    this.scrollBy(f - h, s);
+  }
+  destroy() {
+    this.attach(null), this.observed.clear(), this.listeners.clear();
+  }
+  getOffsets() {
+    return this.offsetsDirty && (this.offsets = w(this.keys.length, (e) => this.sizes.get(this.keys[e]) ?? this.estimateSize), this.offsetsDirty = !1), this.offsets;
+  }
+  range() {
+    const e = this.keys.length;
+    if (!e) return [0, 0];
+    const t = this.getOffsets(), s = this.viewport.height > 0 ? this.viewport.height : this.estimateSize * 10, i = Math.max(0, this.viewport.top), o = Math.max(i, this.viewport.top + s), r = d(t, e, i), h = d(t, e, o);
+    return [Math.max(0, r - this.overscan), Math.min(e, h + 1 + this.overscan)];
+  }
+  readViewport() {
+    const e = this.list;
+    if (!e) return;
+    const t = e.getBoundingClientRect().top, s = this.scroller;
+    if (s) {
+      const i = s.getBoundingClientRect();
+      this.viewport = { top: i.top + s.clientTop - t, height: s.clientHeight };
+    } else
+      this.viewport = { top: -t, height: window.innerHeight };
+  }
+  scrollBy(e, t = "auto") {
+    if (Math.abs(e) < p) return;
+    const s = t === "smooth" && !m() ? "smooth" : "auto", i = this.scroller;
+    i ? s === "smooth" && typeof i.scrollTo == "function" ? i.scrollTo({ top: i.scrollTop + e, behavior: "smooth" }) : i.scrollTop += e : typeof window.scrollBy == "function" && window.scrollBy({ top: e, behavior: s });
+  }
+  setSize(e, t) {
+    if (!(t > 0)) return !1;
+    const s = this.sizes.get(e) ?? this.estimateSize;
+    if (this.sizes.has(e) && Math.abs(s - t) <= p) return !1;
+    const i = this.keyIndex.get(e), o = i !== void 0 && this.list && this.getOffsets()[i + 1] <= this.viewport.top;
+    return this.sizes.set(e, t), this.offsetsDirty = !0, this.snapshot = null, o && this.scrollBy(t - s), !0;
+  }
+  /** Замеры при монтировании строк копятся и сообщаются одним уведомлением. */
+  scheduleFlush() {
+    this.flushPending || (this.flushPending = !0, queueMicrotask(() => {
+      this.flushPending = !1, this.update(!0);
+    }));
+  }
+  onResize(e) {
+    let t = !1;
+    for (const s of e) {
+      const i = this.elementKeys.get(s.target);
+      if (!(i === void 0 || !this.keyIndex.has(i))) {
+        if (!s.target.isConnected) {
+          this.unmeasureElement(s.target);
+          continue;
+        }
+        this.setSize(i, s.target.getBoundingClientRect().height) && (t = !0);
+      }
+    }
+    t && this.update(!0);
+  }
+  /** Перечитывает видимую часть и сообщает подписчикам, если состав или места строк сменились. */
+  update(e = !1) {
+    for (const r of this.observed) r.isConnected || this.unmeasureElement(r);
+    this.readViewport();
+    const [t, s] = this.range(), i = this.focusedKey === null ? -1 : this.keyIndex.get(this.focusedKey) ?? -1, o = `${t}:${s}:${i}:${this.keys.length}`;
+    if (!(!e && o === this.signature)) {
+      this.signature = o, this.snapshot = null;
+      for (const r of this.listeners) r();
+    }
+  }
+}
+export { E as VirtualListCore$u, w as buildOffsets$u, d as findIndexAt$u, v as findScrollParent$u };

package/package.json

@@ -12,7 +12,7 @@
   ],
   "license": "UNLICENSED",
   "private": false,
-  "version": "2.1.5",
+  "version": "2.1.6",
   "type": "module",
   "main": "dist/urfu-ui-kit-react",
   "types": "dist/index.d.ts",