@pdf-viewer/react/dist/components/ui/Checkbox.js

A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.

import { jsxs as _, jsx as s } from "react/jsx-runtime";
import * as c from "react";
import { c as j, u as A, a as B, P as w, b as I, d as H, e as K } from "../../index-48ca3f30.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]);
}
var E = "Checkbox", [z, W] = j(E), [F, T] = z(E), S = c.forwardRef(
  (e, r) => {
    const {
      __scopeCheckbox: t,
      name: a,
      checked: u,
      defaultChecked: n,
      required: h,
      disabled: l,
      value: b = "on",
      onCheckedChange: m,
      form: p,
      ...x
    } = e, [i, C] = c.useState(null), v = A(r, (o) => C(o)), y = c.useRef(!1), g = i ? p || !!i.closest("form") : !0, [f = !1, P] = B({
      prop: u,
      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);
      }
    }, [i, P]), /* @__PURE__ */ _(F, { scope: t, state: f, disabled: l, children: [
      /* @__PURE__ */ s(
        w.button,
        {
          type: "button",
          role: "checkbox",
          "aria-checked": d(f) ? "mixed" : f,
          "aria-required": h,
          "data-state": M(f),
          "data-disabled": l ? "" : void 0,
          disabled: l,
          value: b,
          ...x,
          ref: v,
          onKeyDown: I(e.onKeyDown, (o) => {
            o.key === "Enter" && o.preventDefault();
          }),
          onClick: I(e.onClick, (o) => {
            P((k) => d(k) ? !0 : !k), g && (y.current = o.isPropagationStopped(), y.current || o.stopPropagation());
          })
        }
      ),
      g && /* @__PURE__ */ s(
        X,
        {
          control: i,
          bubbles: !y.current,
          name: a,
          value: b,
          checked: f,
          required: h,
          disabled: l,
          form: p,
          style: { transform: "translateX(-100%)" },
          defaultChecked: d(n) ? !1 : n
        }
      )
    ] });
  }
);
S.displayName = E;
var N = "CheckboxIndicator", D = c.forwardRef(
  (e, r) => {
    const { __scopeCheckbox: t, forceMount: a, ...u } = e, n = T(N, t);
    return /* @__PURE__ */ s(H, { present: a || d(n.state) || n.state === !0, children: /* @__PURE__ */ s(
      w.span,
      {
        "data-state": M(n.state),
        "data-disabled": n.disabled ? "" : void 0,
        ...u,
        ref: r,
        style: { pointerEvents: "none", ...e.style }
      }
    ) });
  }
);
D.displayName = N;
var X = (e) => {
  const { control: r, checked: t, bubbles: a = !0, defaultChecked: u, ...n } = e, h = c.useRef(null), l = q(t), b = K(r);
  c.useEffect(() => {
    const p = h.current, x = window.HTMLInputElement.prototype, C = Object.getOwnPropertyDescriptor(x, "checked").set;
    if (l !== t && C) {
      const v = new Event("click", { bubbles: a });
      p.indeterminate = d(t), C.call(p, d(t) ? !1 : t), p.dispatchEvent(v);
    }
  }, [l, t, a]);
  const m = c.useRef(d(t) ? !1 : t);
  return /* @__PURE__ */ s(
    "input",
    {
      type: "checkbox",
      "aria-hidden": !0,
      defaultChecked: u ?? m.current,
      ...n,
      tabIndex: -1,
      ref: h,
      style: {
        ...e.style,
        ...b,
        position: "absolute",
        pointerEvents: "none",
        opacity: 0,
        margin: 0
      }
    }
  );
};
function d(e) {
  return e === "indeterminate";
}
function M(e) {
  return d(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
var U = S, G = D;
const R = {
  "rp-checkbox": "_rp-checkbox_1vwg8_1",
  "rp-checkbox-indicator": "_rp-checkbox-indicator_1vwg8_25"
}, Y = ({
  children: e,
  value: r,
  name: t,
  onChange: a,
  tabIndex: u
}) => /* @__PURE__ */ _("div", { style: { display: "flex", alignItems: "center", position: "relative" }, children: [
  /* @__PURE__ */ s(
    U,
    {
      tabIndex: 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 })
] });
export {
  Y as UICheckbox
};