@pdf-viewer/react 1.9.0-beta.3 → 1.9.0-beta.4

package/dist/components/ui/Checkbox.js

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

package/dist/components/ui/DropDown.js

@@ -1,29 +1,29 @@
-import { jsxs as i, jsx as d } from "react/jsx-runtime";
-import { R as l, T as c, P as p, C as _ } from "../../index-7279fb4e.js";
-import { c as A } from "../../clsx-0c6e471a.js";
-import '../../assets/DropDown.css';const F = "_slideDownAndFade_1vzkq_1", w = "_slideLeftAndFade_1vzkq_1", m = "_slideUpAndFade_1vzkq_1", f = "_slideRightAndFade_1vzkq_1", g = {
+import { jsxs as l, jsx as d } from "react/jsx-runtime";
+import { R as p, T as c, P as _, C as A } from "../../index-00f8683a.js";
+import { c as F } from "../../clsx-0c6e471a.js";
+import '../../assets/DropDown.css';const w = "_slideDownAndFade_1vzkq_1", m = "_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: m,
-  slideRightAndFade: f,
+  slideDownAndFade: w,
+  slideLeftAndFade: m,
+  slideUpAndFade: f,
+  slideRightAndFade: g,
   "rp-dropdown-arrow": "_rp-dropdown-arrow_1vzkq_30"
-}, v = (e) => {
-  const { triggerComponent: n, children: o, container: s, className: r, open: t, ...a } = e;
-  return /* @__PURE__ */ i(l, { modal: !1, open: t, children: [
+}, z = (e) => {
+  const { triggerComponent: n, children: o, container: s, className: r, open: t, onOpenChange: a, ...i } = e;
+  return /* @__PURE__ */ l(p, { modal: !1, open: t, onOpenChange: a, children: [
     /* @__PURE__ */ d(c, { asChild: !0, children: n }),
-    /* @__PURE__ */ d(p, { container: s, children: /* @__PURE__ */ d(
-      _,
+    /* @__PURE__ */ d(_, { container: s, children: /* @__PURE__ */ d(
+      A,
       {
         sideOffset: 8,
         align: "end",
-        ...a,
-        className: A(g["rp-dropdown-content"], r),
+        ...i,
+        className: F(h["rp-dropdown-content"], r),
         children: o
       }
     ) })
   ] });
 };
 export {
-  v as UIDropDown
+  z as UIDropDown
 };

package/dist/components/ui/Input.js

@@ -1,24 +1,24 @@
 import { jsxs as a, jsx as n } from "react/jsx-runtime";
 import { c as e } from "../../clsx-0c6e471a.js";
-import { forwardRef as u } from "react";
-import '../../assets/Input.css';const p = {
+import { withRef as u } from "../../utils/withRef.js";
+import '../../assets/Input.css';const r = {
   "rp-input": "_rp-input_3rj4v_1",
   "rp-input-wrapper": "_rp-input-wrapper_3rj4v_22",
   "rp-input-icon": "_rp-input-icon_3rj4v_26"
-}, d = u((i, s) => {
-  const { className: t, icon: r, children: o, ...c } = i;
-  return /* @__PURE__ */ a("div", { className: p["rp-input-wrapper"], children: [
+}, d = u((i, t) => {
+  const { className: s, icon: p, children: c, ...o } = i;
+  return /* @__PURE__ */ a("div", { className: r["rp-input-wrapper"], children: [
     /* @__PURE__ */ n(
       "input",
       {
-        ...c,
-        "data-icon": !!r,
-        ref: s,
-        className: e(t, p["rp-input"], "ignore-hover")
+        ...o,
+        "data-icon": !!p,
+        ref: t,
+        className: e(s, r["rp-input"], "ignore-hover")
       }
     ),
-    r && /* @__PURE__ */ n("span", { className: p["rp-input-icon"], children: r }),
-    o
+    p && /* @__PURE__ */ n("span", { className: r["rp-input-icon"], children: p }),
+    c
   ] });
 });
 export {

package/dist/components/ui/LoadingIndicator.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { K as i } from "../../RPLayout-897cb09d.js";
+import { K as i } from "../../RPLayout-5892502c.js";
 import "../../clsx-0c6e471a.js";
 import "../../contexts/LocalizationContext.js";
 export {