@embedpdf/viewer-chrome 3.0.0-next.13 → 3.0.0-next.15

package/dist/dialog-B5GBisKv.js

@@ -0,0 +1,55 @@
+import { c as holdFocus, n as SCRIM_CLASS, o as POPOVER, s as attachViewerLayer } from "./sheet-R6XDgyEf.js";
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/dialog.tsx
+/**
+* A dialog: centered in the viewer's box over the dimmed viewer, in the layer
+* over it (`viewer-layer.ts`), so it covers the viewer and never the page
+* around it, and sits above a sheet or a panel it opened from. It takes focus
+* when it opens (its first control), keeps Tab inside it, closes on Escape
+* and gives focus back to what opened it.
+*/
+function Dialog({ labelledBy, onClose, className, children }) {
+	const layer = useRef(null);
+	const panel = useRef(null);
+	const close = useRef(onClose);
+	close.current = onClose;
+	useLayoutEffect(() => {
+		const layerElement = layer.current;
+		const panelElement = panel.current;
+		if (!layerElement || !panelElement) return;
+		const stopLayer = attachViewerLayer(layerElement);
+		const held = holdFocus(panelElement, { onEscape: () => close.current() });
+		return () => {
+			held.release();
+			stopLayer();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: layer,
+		...POPOVER,
+		"data-epdf-layer": "",
+		className: "text-fg m-0 place-items-center overflow-hidden border-0 bg-transparent p-4 open:grid",
+		style: {
+			position: "fixed",
+			inset: "auto",
+			maxWidth: "none",
+			maxHeight: "none"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: `absolute inset-0 ${SCRIM_CLASS}`
+		}), /* @__PURE__ */ jsx("div", {
+			ref: panel,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": labelledBy,
+			className: `relative max-h-full max-w-full overflow-y-auto ${className}`,
+			children
+		})]
+	});
+}
+//#endregion
+export { Dialog as t };
+
+//# sourceMappingURL=dialog-B5GBisKv.js.map

package/dist/dialog-B5GBisKv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-B5GBisKv.js","names":[],"sources":["../src/ui/dialog.tsx"],"sourcesContent":["/**\n * A dialog: centered in the viewer's box over the dimmed viewer, in the layer\n * over it (`viewer-layer.ts`), so it covers the viewer and never the page\n * around it, and sits above a sheet or a panel it opened from. It takes focus\n * when it opens (its first control), keeps Tab inside it, closes on Escape\n * and gives focus back to what opened it.\n */\nimport { useLayoutEffect, useRef, type ReactNode } from 'react';\n\nimport { SCRIM_CLASS } from './sheet';\nimport { POPOVER, attachViewerLayer, holdFocus } from './viewer-layer';\n\nexport interface DialogProps {\n  /** The id of the dialog's title, which names it for assistive technology. */\n  readonly labelledBy: string;\n  /** What Escape does: close the dialog, or nothing while it's busy. */\n  readonly onClose: () => void;\n  /** The dialog's own box: its border, background, width and padding. */\n  readonly className: string;\n  readonly children: ReactNode;\n}\n\nexport function Dialog({ labelledBy, onClose, className, children }: DialogProps) {\n  const layer = useRef<HTMLDivElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const close = useRef(onClose);\n  close.current = onClose;\n  useLayoutEffect(() => {\n    const layerElement = layer.current;\n    const panelElement = panel.current;\n    if (!layerElement || !panelElement) return;\n    const stopLayer = attachViewerLayer(layerElement);\n    const held = holdFocus(panelElement, { onEscape: () => close.current() });\n    return () => {\n      held.release();\n      stopLayer();\n    };\n    // The dialog opens once; it closes by unmounting.\n  }, []);\n  return (\n    <div\n      ref={layer}\n      {...POPOVER}\n      data-epdf-layer=\"\"\n      className=\"text-fg m-0 place-items-center overflow-hidden border-0 bg-transparent p-4 open:grid\"\n      style={{ position: 'fixed', inset: 'auto', maxWidth: 'none', maxHeight: 'none' }}\n    >\n      <div aria-hidden=\"true\" className={`absolute inset-0 ${SCRIM_CLASS}`} />\n      <div\n        ref={panel}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        className={`relative max-h-full max-w-full overflow-y-auto ${className}`}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAsBA,SAAgB,OAAO,EAAE,YAAY,SAAS,WAAW,YAAyB;CAChF,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,QAAQ,OAAO,OAAO;CAC5B,MAAM,UAAU;CAChB,sBAAsB;EACpB,MAAM,eAAe,MAAM;EAC3B,MAAM,eAAe,MAAM;EAC3B,IAAI,CAAC,gBAAgB,CAAC,cAAc;EACpC,MAAM,YAAY,kBAAkB,YAAY;EAChD,MAAM,OAAO,UAAU,cAAc,EAAE,gBAAgB,MAAM,QAAQ,EAAE,CAAC;EACxE,aAAa;GACX,KAAK,QAAQ;GACb,UAAU;EACZ;CAEF,GAAG,CAAC,CAAC;CACL,OACE,qBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,mBAAgB;EAChB,WAAU;EACV,OAAO;GAAE,UAAU;GAAS,OAAO;GAAQ,UAAU;GAAQ,WAAW;EAAO;EALjF,UAAA,CAOE,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAW,oBAAoB;EAAgB,CAAA,GACvE,oBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,WAAW,kDAAkD;GAE5D;EACE,CAAA,CACF;;AAET"}

package/dist/dialog-t8F13BL_.cjs

@@ -0,0 +1,60 @@
+const require_sheet = require("./sheet-BDsa_Sup.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui/dialog.tsx
+/**
+* A dialog: centered in the viewer's box over the dimmed viewer, in the layer
+* over it (`viewer-layer.ts`), so it covers the viewer and never the page
+* around it, and sits above a sheet or a panel it opened from. It takes focus
+* when it opens (its first control), keeps Tab inside it, closes on Escape
+* and gives focus back to what opened it.
+*/
+function Dialog({ labelledBy, onClose, className, children }) {
+	const layer = (0, react.useRef)(null);
+	const panel = (0, react.useRef)(null);
+	const close = (0, react.useRef)(onClose);
+	close.current = onClose;
+	(0, react.useLayoutEffect)(() => {
+		const layerElement = layer.current;
+		const panelElement = panel.current;
+		if (!layerElement || !panelElement) return;
+		const stopLayer = require_sheet.attachViewerLayer(layerElement);
+		const held = require_sheet.holdFocus(panelElement, { onEscape: () => close.current() });
+		return () => {
+			held.release();
+			stopLayer();
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: layer,
+		...require_sheet.POPOVER,
+		"data-epdf-layer": "",
+		className: "text-fg m-0 place-items-center overflow-hidden border-0 bg-transparent p-4 open:grid",
+		style: {
+			position: "fixed",
+			inset: "auto",
+			maxWidth: "none",
+			maxHeight: "none"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-hidden": "true",
+			className: `absolute inset-0 ${require_sheet.SCRIM_CLASS}`
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: panel,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": labelledBy,
+			className: `relative max-h-full max-w-full overflow-y-auto ${className}`,
+			children
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "Dialog", {
+	enumerable: true,
+	get: function() {
+		return Dialog;
+	}
+});
+
+//# sourceMappingURL=dialog-t8F13BL_.cjs.map

package/dist/dialog-t8F13BL_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-t8F13BL_.cjs","names":["attachViewerLayer","holdFocus","POPOVER","SCRIM_CLASS"],"sources":["../src/ui/dialog.tsx"],"sourcesContent":["/**\n * A dialog: centered in the viewer's box over the dimmed viewer, in the layer\n * over it (`viewer-layer.ts`), so it covers the viewer and never the page\n * around it, and sits above a sheet or a panel it opened from. It takes focus\n * when it opens (its first control), keeps Tab inside it, closes on Escape\n * and gives focus back to what opened it.\n */\nimport { useLayoutEffect, useRef, type ReactNode } from 'react';\n\nimport { SCRIM_CLASS } from './sheet';\nimport { POPOVER, attachViewerLayer, holdFocus } from './viewer-layer';\n\nexport interface DialogProps {\n  /** The id of the dialog's title, which names it for assistive technology. */\n  readonly labelledBy: string;\n  /** What Escape does: close the dialog, or nothing while it's busy. */\n  readonly onClose: () => void;\n  /** The dialog's own box: its border, background, width and padding. */\n  readonly className: string;\n  readonly children: ReactNode;\n}\n\nexport function Dialog({ labelledBy, onClose, className, children }: DialogProps) {\n  const layer = useRef<HTMLDivElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const close = useRef(onClose);\n  close.current = onClose;\n  useLayoutEffect(() => {\n    const layerElement = layer.current;\n    const panelElement = panel.current;\n    if (!layerElement || !panelElement) return;\n    const stopLayer = attachViewerLayer(layerElement);\n    const held = holdFocus(panelElement, { onEscape: () => close.current() });\n    return () => {\n      held.release();\n      stopLayer();\n    };\n    // The dialog opens once; it closes by unmounting.\n  }, []);\n  return (\n    <div\n      ref={layer}\n      {...POPOVER}\n      data-epdf-layer=\"\"\n      className=\"text-fg m-0 place-items-center overflow-hidden border-0 bg-transparent p-4 open:grid\"\n      style={{ position: 'fixed', inset: 'auto', maxWidth: 'none', maxHeight: 'none' }}\n    >\n      <div aria-hidden=\"true\" className={`absolute inset-0 ${SCRIM_CLASS}`} />\n      <div\n        ref={panel}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        className={`relative max-h-full max-w-full overflow-y-auto ${className}`}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAsBA,SAAgB,OAAO,EAAE,YAAY,SAAS,WAAW,YAAyB;CAChF,MAAM,SAAA,GAAA,MAAA,OAAA,CAA+B,IAAI;CACzC,MAAM,SAAA,GAAA,MAAA,OAAA,CAA+B,IAAI;CACzC,MAAM,SAAA,GAAA,MAAA,OAAA,CAAe,OAAO;CAC5B,MAAM,UAAU;CAChB,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,MAAM,eAAe,MAAM;EAC3B,MAAM,eAAe,MAAM;EAC3B,IAAI,CAAC,gBAAgB,CAAC,cAAc;EACpC,MAAM,YAAYA,cAAAA,kBAAkB,YAAY;EAChD,MAAM,OAAOC,cAAAA,UAAU,cAAc,EAAE,gBAAgB,MAAM,QAAQ,EAAE,CAAC;EACxE,aAAa;GACX,KAAK,QAAQ;GACb,UAAU;EACZ;CAEF,GAAG,CAAC,CAAC;CACL,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,KAAK;EACL,GAAIC,cAAAA;EACJ,mBAAgB;EAChB,WAAU;EACV,OAAO;GAAE,UAAU;GAAS,OAAO;GAAQ,UAAU;GAAQ,WAAW;EAAO;EALjF,UAAA,CAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,eAAY;GAAO,WAAW,oBAAoBC,cAAAA;EAAgB,CAAA,GACvE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,WAAW,kDAAkD;GAE5D;EACE,CAAA,CACF;;AAET"}