@react-pdf-kit/viewer 0.0.0-experimental.0

package/dist/components/page/TextLayer.js

@@ -0,0 +1,203 @@
+import { jsx as H } from "react/jsx-runtime";
+import { useRef as g, useState as P, useMemo as G, useCallback as _, useEffect as w } from "react";
+import { useDocumentContext as J } from "../../contexts/RPDocumentContext.js";
+import * as $ from "pdfjs-dist";
+import { resetDivs as U, highlightMatches as V } from "../../utils/highlight.js";
+import { useSearchContext as X } from "../../contexts/SearchContext.js";
+import { useSmoothScaleContext as z } from "../../contexts/SmoothScaleContext.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "../../utils/types.js";
+import "../../de_DE-a553b162.js";
+import "../../utils/getThumbnailViewport.js";
+import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "../../utils/appConsole.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+import "../../utils/charators.js";
+import "../../utils/hooks/useSearch.js";
+import "../../contexts/VirtualScrollContext.js";
+import "../../contexts/ScrollModeContext.js";
+import "../../contexts/InitialStateContext.js";
+import "../../contexts/ZoomContext.js";
+import "../../utils/constants.js";
+import "../../utils/getZoomLevel.js";
+import "../../contexts/LayoutContainerContext.js";
+import "../../contexts/ViewModeContext.js";
+import "../../contexts/RotationContext.js";
+import "../../contexts/GlobalCurrentPage.js";
+import "../../contexts/EventCallbackContext.js";
+import "../../utils/hooks/useDebounce.js";
+import "../../PaginationContext-9217cab4.js";
+import "../../contexts/VirtualGridContext.js";
+import "../../utils/smoothScrollTo.js";
+import "../../contexts/DimensionPagesContext.js";
+import "../../contexts/PagesRotateContext.js";
+import "../../contexts/SmoothScrollContext.js";
+import "../../utils/getScrollDistance.js";
+import "../../utils/calculatePage.js";
+import "../../utils/getWordPositionInPage.js";
+const F = "_selecting_1553j_14", K = "_markedContent_1553j_37", a = {
+  "rp-text-layer": "_rp-text-layer_1553j_1",
+  selecting: F,
+  markedContent: K,
+  "rp-text-layer-text": "_rp-text-layer-text_1553j_61"
+}, ke = (k) => {
+  const { pageNumber: d } = k, { pages: R } = J(), { isTransitioning: q } = z(), i = g(null), { matches: O, currentMatch: v } = X(), [D, A] = P(
+    []
+  ), p = g(), h = g(), L = g([]), y = G(() => O.filter((r) => r.pageIndex === d - 1), [O, d]), T = _(
+    (r, t, e = !1) => {
+      if (e && U(r, t), !y.length) {
+        L.current = [], A([]);
+        return;
+      }
+      const n = V(y, r, t);
+      A(n);
+    },
+    [y]
+  ), x = g(), C = g(!1), S = _(() => Array.from(document.querySelectorAll('[data-rp$="-textLayer"]')), []);
+  w(() => ((() => {
+    if (x.current)
+      return;
+    x.current = new AbortController();
+    const { signal: t } = x.current, e = () => {
+      S().forEach((o) => {
+        const s = o.querySelector(".endOfContent");
+        s && (o.appendChild(s), s.style.width = "", s.style.height = "", o.classList.remove(a.selecting));
+      });
+    };
+    document.addEventListener(
+      "pointerdown",
+      () => {
+        C.current = !0;
+      },
+      { signal: t }
+    ), document.addEventListener(
+      "pointerup",
+      () => {
+        C.current = !1, e();
+      },
+      { signal: t }
+    ), window.addEventListener(
+      "blur",
+      () => {
+        C.current = !1, e();
+      },
+      { signal: t }
+    ), document.addEventListener(
+      "keyup",
+      () => {
+        C.current || e();
+      },
+      { signal: t }
+    );
+    let n = null;
+    document.addEventListener(
+      "selectionchange",
+      () => {
+        var M, j;
+        const o = document.getSelection();
+        if (!o)
+          return;
+        if (o.rangeCount === 0) {
+          e();
+          return;
+        }
+        const s = /* @__PURE__ */ new Set();
+        for (let c = 0; c < o.rangeCount; c++) {
+          const f = o.getRangeAt(c);
+          S().forEach((N) => {
+            f.intersectsNode(N) && !s.has(N) && s.add(N);
+          });
+        }
+        S().forEach((c) => {
+          if (s.has(c))
+            c.classList.add(a.selecting);
+          else {
+            const f = c.querySelector(".endOfContent");
+            f && (c.appendChild(f), f.style.width = "", f.style.height = "", c.classList.remove(a.selecting));
+          }
+        });
+        const l = o.getRangeAt(0);
+        let u = n && (l.compareBoundaryPoints(Range.END_TO_END, n) === 0 || l.compareBoundaryPoints(Range.START_TO_END, n) === 0) ? l.startContainer : l.endContainer;
+        u.nodeType === Node.TEXT_NODE && (u = u.parentNode);
+        const m = (M = u.parentElement) == null ? void 0 : M.closest(
+          a["rp-text-layer"]
+        ), E = m == null ? void 0 : m.querySelector(".endOfContent");
+        E && m && (E.style.width = m.style.width, E.style.height = m.style.height, (j = u.parentElement) == null || j.insertBefore(E, u.nextSibling)), n = l.cloneRange();
+      },
+      { signal: t }
+    );
+  })(), () => {
+    var t;
+    (t = x.current) == null || t.abort(), x.current = void 0;
+  }), [S]);
+  const I = _(() => {
+    i.current && i.current.classList.add(a.selecting);
+  }, []), B = _(() => {
+    i.current && i.current.classList.remove(a.selecting);
+  }, []);
+  return w(() => {
+    if (L.current.forEach((e) => {
+      e.classList.remove("selected");
+    }), !D.length || !v || v.pageIndex !== d - 1)
+      return;
+    const r = y.findIndex(
+      (e) => JSON.stringify(e) === JSON.stringify(v)
+    );
+    if (r === -1)
+      return;
+    const t = D.filter((e) => e.index === r);
+    t.length && (L.current = t.map((e) => e.element), t.forEach((e) => {
+      e.element.classList.add("selected");
+    }));
+  }, [v, D, y]), w(() => {
+    const r = R.get(d);
+    if (!r || !i.current)
+      return;
+    const t = i.current;
+    return p.current && p.current.cancel(), r.page.getTextContent().then((e) => {
+      const n = r.page.getViewport({ scale: 1 });
+      return p.current = new $.TextLayer({
+        viewport: n,
+        textContentSource: e,
+        container: t
+      }), h.current = e, t && (t.innerText = ""), p.current.render();
+    }).then(() => {
+      var s, l;
+      [].slice.call(t.children).forEach((b) => {
+        b.classList.add(a["rp-text-layer-text"]), b.setAttribute("data-rp", "rp-text-layer-text");
+      });
+      const n = (s = p.current) == null ? void 0 : s.textDivs;
+      n && h.current && T(h.current, n);
+      const o = document.createElement("div");
+      o.className = "endOfContent", (l = i.current) == null || l.appendChild(o);
+    }).catch(() => {
+    }), () => {
+      var e;
+      (e = p.current) == null || e.cancel();
+    };
+  }, [R, d]), w(() => {
+    var e;
+    [].slice.call(i.current.children).forEach((n) => {
+      n.classList.add(a["rp-text-layer-text"]);
+    });
+    const t = (e = p.current) == null ? void 0 : e.textDivs;
+    t && h.current && T(h.current, t, !0);
+  }, [T]), /* @__PURE__ */ H(
+    "div",
+    {
+      "data-rp-text-layer": !0,
+      "data-rp": `page-${d}-textLayer`,
+      className: a["rp-text-layer"],
+      ref: i,
+      style: q ? { visibility: "hidden" } : void 0,
+      onMouseDown: I,
+      onMouseUp: B
+    }
+  );
+};
+export {
+  ke as TextLayer
+};

package/dist/components/page/searchHighlight.js

@@ -0,0 +1,37 @@
+import { EMPTY_KEYWORD_REGEXP as c } from "../../utils/const.js";
+const n = (e) => {
+  let s = e.keyword.replace(/[.^$*+?()[{|\\]/g, (f) => `\\${f}`).trim();
+  const i = e.matchCase ? "g" : "gi";
+  return {
+    keyword: e.keyword,
+    regExp: new RegExp(s, i),
+    wholeWords: e.wholeWords || !1
+  };
+}, u = (e, t, r) => e instanceof RegExp ? {
+  keyword: e.source,
+  regExp: e,
+  wholeWords: r || !1
+} : typeof e == "string" ? e === "" ? c : n({
+  keyword: e,
+  matchCase: t || !1,
+  wholeWords: r || !1
+}) : (typeof t < "u" && (e.matchCase = t), typeof r < "u" && (e.wholeWords = r), n(e)), o = (e) => {
+  const t = e.parentNode;
+  t && t.removeChild(e);
+}, p = (e, t) => {
+  o(e);
+  const r = t.parentNode;
+  r && r.insertBefore(e, t), o(t);
+}, l = (e) => {
+  const t = e.parentNode;
+  if (!t)
+    return;
+  const r = document.createRange();
+  r.selectNodeContents(e), p(r.extractContents(), e), t.normalize();
+}, g = (e, t) => e.top < t.top ? -1 : e.top > t.top ? 1 : e.left < t.left ? -1 : e.left > t.left ? 1 : 0;
+export {
+  n as normalizeFlagKeyword,
+  u as normalizeSingleKeyword,
+  g as sortHighlightPosition,
+  l as unwrap
+};

package/dist/components/ui/Button.js

@@ -0,0 +1,25 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as p } from "../../clsx-0c6e471a.js";
+import { withRef as u } from "../../utils/withRef.js";
+import "react";
+const o = {
+  "rp-button": "_rp-button_1jswj_1",
+  "rp-button-active": "_rp-button-active_1jswj_18"
+}, _ = u((r, s) => {
+  const { children: e, active: t, className: a, role: n, ...i } = r;
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      tabIndex: 0,
+      ref: s,
+      role: n,
+      "aria-pressed": t !== void 0 ? t : void 0,
+      ...i,
+      className: p(o["rp-button"], a, t ? o["rp-button-active"] : ""),
+      children: e
+    }
+  );
+});
+export {
+  _ as UIButton
+};

package/dist/components/ui/Checkbox.js

@@ -0,0 +1,273 @@
+import { jsx as i, jsxs as w, Fragment as U } from "react/jsx-runtime";
+import * as s from "react";
+import { c as z, a as B, P as y, b as S, d as G, f as K } from "../../index-c0faa594.js";
+import { u as X } from "../../index-655864a7.js";
+import { CheckIcon as J } from "../icons/CheckIcon.js";
+import "react-dom";
+function Q(e) {
+  const r = s.useRef({ value: e, previous: e });
+  return s.useMemo(() => (r.current.value !== e && (r.current.previous = r.current.value, r.current.value = e), r.current.previous), [e]);
+}
+var g = "Checkbox", [V, ne] = z(g), [W, E] = V(g);
+function Y(e) {
+  const {
+    __scopeCheckbox: r,
+    checked: o,
+    children: d,
+    defaultChecked: n,
+    disabled: t,
+    form: u,
+    name: f,
+    onCheckedChange: l,
+    required: k,
+    value: C = "on",
+    // @ts-expect-error
+    internal_do_not_use_render: p
+  } = e, [h, v] = K({
+    prop: o,
+    defaultProp: n ?? !1,
+    onChange: l,
+    caller: g
+  }), [m, x] = s.useState(null), [_, c] = s.useState(null), a = s.useRef(!1), I = m ? !!u || !!m.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    !0
+  ), R = {
+    checked: h,
+    disabled: t,
+    setChecked: v,
+    control: m,
+    setControl: x,
+    name: f,
+    form: u,
+    value: C,
+    hasConsumerStoppedPropagationRef: a,
+    required: k,
+    defaultChecked: b(n) ? !1 : n,
+    isFormControl: I,
+    bubbleInput: _,
+    setBubbleInput: c
+  };
+  return /* @__PURE__ */ i(
+    W,
+    {
+      scope: r,
+      ...R,
+      children: Z(p) ? p(R) : d
+    }
+  );
+}
+var M = "CheckboxTrigger", T = s.forwardRef(
+  ({ __scopeCheckbox: e, onKeyDown: r, onClick: o, ...d }, n) => {
+    const {
+      control: t,
+      value: u,
+      disabled: f,
+      checked: l,
+      required: k,
+      setControl: C,
+      setChecked: p,
+      hasConsumerStoppedPropagationRef: h,
+      isFormControl: v,
+      bubbleInput: m
+    } = E(M, e), x = B(n, C), _ = s.useRef(l);
+    return s.useEffect(() => {
+      const c = t == null ? void 0 : t.form;
+      if (c) {
+        const a = () => p(_.current);
+        return c.addEventListener("reset", a), () => c.removeEventListener("reset", a);
+      }
+    }, [t, p]), /* @__PURE__ */ i(
+      y.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": b(l) ? "mixed" : l,
+        "aria-required": k,
+        "data-state": j(l),
+        "data-disabled": f ? "" : void 0,
+        disabled: f,
+        value: u,
+        ...d,
+        ref: x,
+        onKeyDown: S(r, (c) => {
+          c.key === "Enter" && c.preventDefault();
+        }),
+        onClick: S(o, (c) => {
+          p((a) => b(a) ? !0 : !a), m && v && (h.current = c.isPropagationStopped(), h.current || c.stopPropagation());
+        })
+      }
+    );
+  }
+);
+T.displayName = M;
+var q = s.forwardRef(
+  (e, r) => {
+    const {
+      __scopeCheckbox: o,
+      name: d,
+      checked: n,
+      defaultChecked: t,
+      required: u,
+      disabled: f,
+      value: l,
+      onCheckedChange: k,
+      form: C,
+      ...p
+    } = e;
+    return /* @__PURE__ */ i(
+      Y,
+      {
+        __scopeCheckbox: o,
+        checked: n,
+        defaultChecked: t,
+        disabled: f,
+        required: u,
+        onCheckedChange: k,
+        name: d,
+        form: C,
+        value: l,
+        internal_do_not_use_render: ({ isFormControl: h }) => /* @__PURE__ */ w(U, { children: [
+          /* @__PURE__ */ i(
+            T,
+            {
+              ...p,
+              ref: r,
+              __scopeCheckbox: o
+            }
+          ),
+          h && /* @__PURE__ */ i(
+            O,
+            {
+              __scopeCheckbox: o
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+q.displayName = g;
+var A = "CheckboxIndicator", F = s.forwardRef(
+  (e, r) => {
+    const { __scopeCheckbox: o, forceMount: d, ...n } = e, t = E(A, o);
+    return /* @__PURE__ */ i(
+      G,
+      {
+        present: d || b(t.checked) || t.checked === !0,
+        children: /* @__PURE__ */ i(
+          y.span,
+          {
+            "data-state": j(t.checked),
+            "data-disabled": t.disabled ? "" : void 0,
+            ...n,
+            ref: r,
+            style: { pointerEvents: "none", ...e.style }
+          }
+        )
+      }
+    );
+  }
+);
+F.displayName = A;
+var D = "CheckboxBubbleInput", O = s.forwardRef(
+  ({ __scopeCheckbox: e, ...r }, o) => {
+    const {
+      control: d,
+      hasConsumerStoppedPropagationRef: n,
+      checked: t,
+      defaultChecked: u,
+      required: f,
+      disabled: l,
+      name: k,
+      value: C,
+      form: p,
+      bubbleInput: h,
+      setBubbleInput: v
+    } = E(D, e), m = B(o, v), x = Q(t), _ = X(d);
+    s.useEffect(() => {
+      const a = h;
+      if (!a)
+        return;
+      const I = window.HTMLInputElement.prototype, N = Object.getOwnPropertyDescriptor(
+        I,
+        "checked"
+      ).set, H = !n.current;
+      if (x !== t && N) {
+        const L = new Event("click", { bubbles: H });
+        a.indeterminate = b(t), N.call(a, b(t) ? !1 : t), a.dispatchEvent(L);
+      }
+    }, [h, x, t, n]);
+    const c = s.useRef(b(t) ? !1 : t);
+    return /* @__PURE__ */ i(
+      y.input,
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: u ?? c.current,
+        required: f,
+        disabled: l,
+        name: k,
+        value: C,
+        form: p,
+        ...r,
+        tabIndex: -1,
+        ref: m,
+        style: {
+          ...r.style,
+          ..._,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+O.displayName = D;
+function Z(e) {
+  return typeof e == "function";
+}
+function b(e) {
+  return e === "indeterminate";
+}
+function j(e) {
+  return b(e) ? "indeterminate" : e ? "checked" : "unchecked";
+}
+const P = {
+  "rp-checkbox": "_rp-checkbox_1vwg8_1",
+  "rp-checkbox-indicator": "_rp-checkbox-indicator_1vwg8_25"
+}, ce = ({
+  children: e,
+  value: r,
+  name: o,
+  onChange: d,
+  tabIndex: n,
+  "aria-label": t
+}) => {
+  const u = t ? { "aria-label": t } : {};
+  return /* @__PURE__ */ w("div", { style: { display: "flex", alignItems: "center", position: "relative" }, children: [
+    /* @__PURE__ */ i(
+      q,
+      {
+        tabIndex: n,
+        className: P["rp-checkbox"],
+        checked: r,
+        id: o,
+        onCheckedChange: d,
+        role: "checkbox",
+        "aria-checked": r,
+        ...u,
+        children: /* @__PURE__ */ i(F, { className: P["rp-checkbox-indicator"], "aria-hidden": "true", children: /* @__PURE__ */ i(J, {}) })
+      }
+    ),
+    /* @__PURE__ */ i("label", { className: P["rp-checkbox-label"], htmlFor: o, children: e })
+  ] });
+};
+export {
+  ce as UICheckbox
+};

package/dist/components/ui/DropDown.js

@@ -0,0 +1,36 @@
+import { jsxs as p, jsx as d } from "react/jsx-runtime";
+import { R as l, T as c, P as _, C as m } from "../../index-4baea9b5.js";
+import { c as A } from "../../clsx-0c6e471a.js";
+import "react";
+import "../../index-c0faa594.js";
+import "react-dom";
+import "../../index-e3ee9457.js";
+import "../../Combination-54a77a7a.js";
+import "../../floating-ui.react-dom-5ec29bd6.js";
+import "../../index-655864a7.js";
+const F = "_slideDownAndFade_1vzkq_1", w = "_slideLeftAndFade_1vzkq_1", f = "_slideUpAndFade_1vzkq_1", g = "_slideRightAndFade_1vzkq_1", h = {
+  "rp-dropdown-content": "_rp-dropdown-content_1vzkq_1",
+  slideDownAndFade: F,
+  slideLeftAndFade: w,
+  slideUpAndFade: f,
+  slideRightAndFade: g,
+  "rp-dropdown-arrow": "_rp-dropdown-arrow_1vzkq_30"
+}, P = (e) => {
+  const { triggerComponent: n, children: o, container: r, className: t, open: s, onOpenChange: i, ...a } = e;
+  return /* @__PURE__ */ p(l, { modal: !1, open: s, onOpenChange: i, children: [
+    /* @__PURE__ */ d(c, { asChild: !0, children: n }),
+    /* @__PURE__ */ d(_, { container: r, children: /* @__PURE__ */ d(
+      m,
+      {
+        sideOffset: 8,
+        align: "end",
+        ...a,
+        className: A(h["rp-dropdown-content"], t),
+        children: o
+      }
+    ) })
+  ] });
+};
+export {
+  P as UIDropDown
+};

package/dist/components/ui/Input.js

@@ -0,0 +1,28 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { c as u } from "../../clsx-0c6e471a.js";
+import { withRef as l } from "../../utils/withRef.js";
+import "react";
+const t = {
+  "rp-input": "_rp-input_3rj4v_1",
+  "rp-input-wrapper": "_rp-input-wrapper_3rj4v_22",
+  "rp-input-icon": "_rp-input-icon_3rj4v_26"
+}, h = l((n, e) => {
+  const { className: o, icon: p, children: s, ...r } = n, c = r.role || (r.type === "text" || !r.type ? "textbox" : void 0);
+  return /* @__PURE__ */ a("div", { className: t["rp-input-wrapper"], children: [
+    /* @__PURE__ */ i(
+      "input",
+      {
+        ...r,
+        role: c,
+        "data-icon": !!p,
+        ref: e,
+        className: u(o, t["rp-input"], "ignore-hover")
+      }
+    ),
+    p && /* @__PURE__ */ i("span", { className: t["rp-input-icon"], "aria-hidden": "true", children: p }),
+    s
+  ] });
+});
+export {
+  h as UIInput
+};

package/dist/components/ui/LoadingIndicator.js

@@ -0,0 +1,47 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import { c as o } from "../../clsx-0c6e471a.js";
+import { usePrintContext as p } from "../../contexts/PrintContext.js";
+import { useLocalizationContext as d } from "../../contexts/LocalizationContext.js";
+import "react";
+import "../../utils/hooks/usePrint.js";
+import "../../contexts/RPDocumentContext.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../utils/types.js";
+import "../../de_DE-a553b162.js";
+import "../../utils/getThumbnailViewport.js";
+import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "../../utils/appConsole.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+import "../../utils/hooks/useLocalization.js";
+const s = "_loading_wazy2_1", i = {
+  "rp-loading-overlay": "_rp-loading-overlay_wazy2_1",
+  "rp-loading-modal": "_rp-loading-modal_wazy2_14",
+  "rp-loading-title": "_rp-loading-title_wazy2_27",
+  "rp-loading-progress-bar": "_rp-loading-progress-bar_wazy2_35",
+  "rp-loading-progress": "_rp-loading-progress_wazy2_35",
+  "rp-loading-cancel-button": "_rp-loading-cancel-button_wazy2_55",
+  loading: s
+}, I = ({ percentage: n }) => {
+  const { cancel: l } = p(), { localeMessages: r } = d();
+  return n < 1 ? null : /* @__PURE__ */ a("div", { className: o(i["rp-loading-overlay"]), children: /* @__PURE__ */ t("div", { className: o(i["rp-loading-modal"]), children: [
+    /* @__PURE__ */ t("div", { className: o(i["rp-loading-title"]), children: [
+      r == null ? void 0 : r.printLoadingMessage,
+      "..."
+    ] }),
+    /* @__PURE__ */ a("div", { className: o(i["rp-loading-progress-bar"]), children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: o(i["rp-loading-progress"]),
+        style: { width: `${n}%` }
+      }
+    ) }),
+    /* @__PURE__ */ a("button", { className: o(i["rp-loading-cancel-button"]), onClick: l, children: r == null ? void 0 : r.printCancelLabel })
+  ] }) });
+};
+export {
+  I as default
+};