UNPKG

@pdf-viewer/react

Version:

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

273 lines (272 loc) 6.88 kB
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 y, a as S, b as G, d as K, e as X } from "../../index-c9a2990a.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, oe] = 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] = X({ 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), _ = K(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" }, ne = ({ 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 { ne as UICheckbox };