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

package/dist/components/layout/toolbar/SearchTool.js

@@ -1,16 +1,16 @@
-import "react/jsx-runtime";
-import "../../ui/Button.js";
-import "../../icons/SearchIcon.js";
-import "react";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../SearchCloseButton-cbf182aa.js";
-import "../../ui/Input.js";
-import "../../ui/Checkbox.js";
-import "../../icons/ClearIcon.js";
-import "../../icons/LoaderIcon.js";
-import { S as $ } from "../../../RPLayout-5892502c.js";
-import "../../../contexts/IconContext.js";
-import "../../../contexts/RPDocumentContext.js";
+import { jsx as o, Fragment as no, jsxs as d } from "react/jsx-runtime";
+import { UIButton as co } from "../../ui/Button.js";
+import { SearchIcon as q } from "../../icons/SearchIcon.js";
+import { useState as x, useCallback as n, useEffect as k, useMemo as N } from "react";
+import { useLayoutContainer as io } from "../../../contexts/LayoutContainerContext.js";
+import { c as r } from "../../../SearchTool.module-016f3a8d.js";
+import { UIInput as ao } from "../../ui/Input.js";
+import { UICheckbox as U } from "../../ui/Checkbox.js";
+import { ClearIcon as so } from "../../icons/ClearIcon.js";
+import { LoaderIcon as po } from "../../icons/LoaderIcon.js";
+import { c as mo } from "../../../ToolbarLayout.module-60c3d6e8.js";
+import { useIconContext as lo } from "../../../contexts/IconContext.js";
+import { useDocumentContext as ho } from "../../../contexts/RPDocumentContext.js";
 import "../../../contexts/DocumentPasswordContext.js";
 import "../../../contexts/DarkModeContext.js";
 import "../../../contexts/RotationContext.js";
@@ -26,7 +26,7 @@ import "../../../contexts/FullScreenContext.js";
 import "../../../contexts/FileInputContext.js";
 import "../../../contexts/DropFileZoneContext.js";
 import "../../../contexts/DimensionPagesContext.js";
-import "../../../contexts/LocalizationContext.js";
+import { useLocalizationContext as uo } from "../../../contexts/LocalizationContext.js";
 import "../../../contexts/HighlightContext.js";
 import "../../../contexts/LicenseContext.js";
 import "../../../contexts/DownloadContext.js";
@@ -34,22 +34,191 @@ import "../../../contexts/SmoothScrollContext.js";
 import "../../../contexts/ElementPageContext.js";
 import "../../../contexts/PagesRotateContext.js";
 import "../../../contexts/LoaderContext.js";
+import { useToolComponentContext as fo } from "../../../contexts/ToolComponentContext.js";
+import { useIconToolContext as Co } from "../../../contexts/IconToolContext.js";
+import "../../../contexts/OtherToolContext.js";
 import "../../RPConfig.js";
-import "../../../contexts/ThemeContext.js";
-import "../../RPDropFileZone.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "../../../contexts/ToolComponentContext.js";
-import "../../ui/RPTooltip.js";
-import "../../ui/DropDown.js";
-import "./MenuItem.js";
-import "./MenuSeparator.js";
-import "../../../contexts/ViewportContext.js";
-import "../../../contexts/IconToolContext.js";
+import { useToolbarComponentContext as Io } from "../../../contexts/ToolbarComponentContext.js";
+import { useViewportContext as xo } from "../../../contexts/ViewportContext.js";
+import b from "../../ui/RPTooltip.js";
+import "../../../MenuItem.module-bc11d0d3.js";
+import { UIDropDown as bo } from "../../ui/DropDown.js";
 import "../../../utils/dateFormatter.js";
-import "./PropertyItem.js";
-import "../../../contexts/OtherToolContext.js";
-import "../../icons/InfoIcon.js";
-import "./RotateTool.js";
+import "../../../PropertyItem.module-db0150cc.js";
+import { InfoIcon as V } from "../../icons/InfoIcon.js";
+import "../../../MenuSeparator.module-89b2ff7f.js";
+import "../../../RotateTool.module-03987eba.js";
+import "../../../RPSplitter.module-13d612c4.js";
+import "../../../Container.module-f8b5c306.js";
+import "../../../WrapperLayout.module-147bc943.js";
+import "../../../RPTheme.module-bd9038da.js";
+import "../../../contexts/ThemeContext.js";
+import { SearchResultNavigator as $ } from "./SearchResultNavigator.js";
+import { SearchCloseButton as j } from "./SearchCloseButton.js";
+const Eo = () => {
+  const { searchIcon: u } = lo(), { searchIcon: E } = Co();
+  return u || E || /* @__PURE__ */ o(q, {});
+}, vt = ({ icon: u }) => {
+  const { container: E } = io(), [f, W] = x(!1), { pdf: z } = ho(), [S, A] = x(null), {
+    searchOptions: K,
+    setSearchOptions: C,
+    loading: F,
+    setSearch: s,
+    totalMatches: L,
+    currentMatchPosition: D,
+    nextMatch: O,
+    prevMatch: B,
+    search: y
+  } = mo(), { searchTool: G = !0 } = Io(), { searchTool: H = !0 } = fo(), [m, T] = x(y), { localeMessages: t } = uo(), { isSmallScreen: l } = xo(), [I, J] = x(null), Q = n(() => {
+    W(!0);
+  }, []), p = n(() => {
+    s(""), T(""), W(!1);
+  }, [s]), P = (e) => {
+    const c = e.key === "Enter", h = e.key === " ";
+    (c || h) && p();
+  }, v = n(
+    (e) => {
+      e.key === "Escape" && f && p();
+    },
+    [f]
+  ), X = n(
+    (e) => {
+      e.shiftKey && e.key === "Enter" ? B() : e.key === "Enter" && y !== m ? s(m) : e.key === "Enter" && O();
+    },
+    [m, B, O, s, y]
+  );
+  k(() => (window.addEventListener("keydown", v), () => {
+    window.removeEventListener("keydown", v);
+  }), [v]), k(() => {
+    S && setTimeout(() => {
+      S.focus();
+    }, 0);
+  }, [S]);
+  const Y = n((e) => {
+    T(e.target.value);
+  }, []), Z = n(() => {
+    T(""), s("");
+  }, [s]), _ = N(() => `${D} / ${L}`, [D, L]), { wholeWords: g, matchCase: M } = N(() => K, [K]), oo = n(
+    (e) => {
+      C((c) => ({ ...c, matchCase: e }));
+    },
+    [C]
+  ), to = n(
+    (e) => {
+      C((c) => ({ ...c, wholeWords: e }));
+    },
+    [C]
+  );
+  k(() => {
+    p();
+  }, [z, p]);
+  const i = N(() => (I == null ? void 0 : I.querySelectorAll('[tabindex]:not([tabindex="-1"])')) || [], [I]), eo = n(
+    (e) => {
+      if (e.key === "Tab") {
+        const c = document.activeElement;
+        let h = 0;
+        i.forEach((a, ro) => {
+          a === c && (h = ro);
+        });
+        let w = h + 1;
+        e.shiftKey && (w = h - 1);
+        const R = i[w];
+        if (R)
+          R.focus();
+        else if (w > i.length - 1) {
+          const a = i[0];
+          a && a.focus();
+        } else {
+          const a = i[i.length - 1];
+          a && a.focus();
+        }
+      }
+    },
+    [i]
+  );
+  return !G || !H ? null : /* @__PURE__ */ o(no, { children: /* @__PURE__ */ o(
+    bo,
+    {
+      open: f,
+      container: E,
+      side: "bottom",
+      align: "start",
+      tabIndex: 0,
+      avoidCollisions: !1,
+      triggerComponent: /* @__PURE__ */ o(b, { content: t == null ? void 0 : t.searchButtonTooltip, children: /* @__PURE__ */ o(
+        co,
+        {
+          active: f,
+          onClick: Q,
+          "aria-label": t == null ? void 0 : t.searchButtonTooltip,
+          children: u || /* @__PURE__ */ o(Eo, {})
+        }
+      ) }),
+      children: /* @__PURE__ */ d(
+        "div",
+        {
+          ref: J,
+          className: r["rp-search-tool-content"],
+          tabIndex: 0,
+          onKeyDown: eo,
+          children: [
+            /* @__PURE__ */ d("div", { className: r["rp-search-tool-input-wrapper"], children: [
+              /* @__PURE__ */ d("div", { className: r["rp-search-tool-input"], children: [
+                /* @__PURE__ */ o(b, { content: t == null ? void 0 : t.searchInputTooltip, children: /* @__PURE__ */ o(
+                  ao,
+                  {
+                    value: m,
+                    onKeyDown: X,
+                    onChange: Y,
+                    icon: /* @__PURE__ */ o(q, {}),
+                    placeholder: t == null ? void 0 : t.searchInputPlaceholder,
+                    className: r["rp-search-input"],
+                    ref: A,
+                    id: "search-input",
+                    name: "search-input",
+                    tabIndex: 0,
+                    children: !!m && /* @__PURE__ */ o("span", { className: r["rp-search-tool-input-clear"], onClick: Z, children: /* @__PURE__ */ o(so, {}) })
+                  }
+                ) }),
+                F ? /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(po, { className: r["rp-search-loader-icon"] }) }) : /* @__PURE__ */ o("span", { children: _ }),
+                l && /* @__PURE__ */ o("div", { className: r["rp-search-tool-controls"], children: /* @__PURE__ */ o(j, { onKeyPress: P, handleClose: p }) })
+              ] }),
+              /* @__PURE__ */ d("div", { className: r["rp-search-tool-input-checkboxes"], children: [
+                l && /* @__PURE__ */ o($, {}),
+                /* @__PURE__ */ o(
+                  U,
+                  {
+                    tabIndex: 0,
+                    name: "matchCase",
+                    value: M,
+                    onChange: oo,
+                    children: t == null ? void 0 : t.searchMatchCaseLabel
+                  }
+                ),
+                !l && /* @__PURE__ */ o(b, { content: t == null ? void 0 : t.searchMatchCaseTooltip, children: /* @__PURE__ */ o("div", { className: r["rp-search-icon-info"], tabIndex: 0, children: /* @__PURE__ */ o(V, {}) }) }),
+                /* @__PURE__ */ o(
+                  U,
+                  {
+                    tabIndex: 0,
+                    name: "wholeWord",
+                    value: g,
+                    onChange: to,
+                    children: t == null ? void 0 : t.searchWholeWordsLabel
+                  }
+                ),
+                !l && /* @__PURE__ */ o(b, { content: t == null ? void 0 : t.searchWholeWordsTooltip, children: /* @__PURE__ */ o("div", { tabIndex: 0, className: r["rp-search-icon-info"], children: /* @__PURE__ */ o(V, {}) }) })
+              ] })
+            ] }),
+            !l && /* @__PURE__ */ d("div", { className: r["rp-search-tool-controls"], children: [
+              /* @__PURE__ */ o($, {}),
+              /* @__PURE__ */ o(j, { onKeyPress: P, handleClose: p })
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+};
 export {
-  $ as SearchTool
+  vt as SearchTool
 };

package/dist/components/layout/toolbar/SelectionModeTool.js

@@ -1,5 +1,5 @@
 import { jsx as t, Fragment as f, jsxs as i } from "react/jsx-runtime";
-import { G as a } from "../../../index-00f8683a.js";
+import { G as a } from "../../../index-473557b1.js";
 import { TextSelectionDefaultIcon as h } from "../../icons/TextSelectionDefaultIcon.js";
 import { HandModeDefaultIcon as s } from "../../icons/HandModeDefaultIcon.js";
 import { CheckIcon as l } from "../../icons/CheckIcon.js";

package/dist/components/layout/toolbar/ThumbnailTool.js

@@ -1,13 +1,13 @@
 import { jsx as o, Fragment as u } from "react/jsx-runtime";
-import { h as a } from "../../../RPLayout-5892502c.js";
+import { f as a } from "../../../ToolbarLayout.module-60c3d6e8.js";
 import { ThumbnailIcon as h } from "../../icons/Thumbnail.js";
 import { UIButton as p } from "../../ui/Button.js";
 import e from "../../ui/RPTooltip.js";
-import { useLocalizationContext as T } from "../../../contexts/LocalizationContext.js";
-import { useToolComponentContext as f } from "../../../contexts/ToolComponentContext.js";
+import { useLocalizationContext as f } from "../../../contexts/LocalizationContext.js";
+import { useToolComponentContext as T } from "../../../contexts/ToolComponentContext.js";
 import { useIconToolContext as s } from "../../../contexts/IconToolContext.js";
 const y = () => {
-  const { active: t, setActive: c } = a(), { thumbnailIcon: l } = s(), { thumbnailTool: n = !0 } = f(), { localeMessages: i } = T(), r = i == null ? void 0 : i.thumbnailTooltip, m = () => {
+  const { active: t, setActive: c } = a(), { thumbnailIcon: l } = s(), { thumbnailTool: n = !0 } = T(), { localeMessages: i } = f(), r = i == null ? void 0 : i.thumbnailTooltip, m = () => {
     c(!t);
   };
   return n ? typeof n == "function" ? /* @__PURE__ */ o(e, { content: r, children: /* @__PURE__ */ o(n, { onClick: m, active: t }) }) : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(e, { content: r, children: /* @__PURE__ */ o(p, { onClick: m, active: t, "aria-label": r, children: l || /* @__PURE__ */ o(h, {}) }) }) }) : null;

package/dist/components/layout/toolbar/ToolbarCustom.js

@@ -1,8 +1,8 @@
-import "react/jsx-runtime";
-import "react";
-import { W as Y } from "../../../RPLayout-5892502c.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../contexts/ToolbarComponentContext.js";
+import { jsxs as p, Fragment as e, jsx as t } from "react/jsx-runtime";
+import { useRef as f } from "react";
+import { f as v, b as C, m as o, k as g } from "../../../ToolbarLayout.module-60c3d6e8.js";
+import { useLayoutContainer as x } from "../../../contexts/LayoutContainerContext.js";
+import { useToolbarComponentContext as N } from "../../../contexts/ToolbarComponentContext.js";
 import "../../../contexts/RPDocumentContext.js";
 import "../../../contexts/DocumentPasswordContext.js";
 import "../../../contexts/DarkModeContext.js";
@@ -27,26 +27,54 @@ import "../../../contexts/SmoothScrollContext.js";
 import "../../../contexts/ElementPageContext.js";
 import "../../../contexts/PagesRotateContext.js";
 import "../../../contexts/LoaderContext.js";
-import "../../RPConfig.js";
-import "../../../contexts/ThemeContext.js";
-import "../../RPDropFileZone.js";
 import "../../../contexts/ToolComponentContext.js";
+import "../../../contexts/IconToolContext.js";
+import "../../../contexts/OtherToolContext.js";
+import "../../RPConfig.js";
 import "../../ui/Button.js";
-import "../../../SearchCloseButton-cbf182aa.js";
 import "../../ui/Input.js";
-import "../../ui/Checkbox.js";
-import "../../icons/LoaderIcon.js";
 import "../../../contexts/IconContext.js";
-import "../../ui/RPTooltip.js";
 import "../../../contexts/ViewportContext.js";
-import "../../ui/DropDown.js";
-import "../../../contexts/IconToolContext.js";
-import "./MenuItem.js";
-import "./MenuSeparator.js";
+import "../../ui/RPTooltip.js";
+import "../../../MenuItem.module-bc11d0d3.js";
+import "../../../DropDown.module-a78567cb.js";
 import "../../../utils/dateFormatter.js";
-import "./PropertyItem.js";
-import "../../../contexts/OtherToolContext.js";
-import "./RotateTool.js";
+import "../../../PropertyItem.module-db0150cc.js";
+import "../../../MenuSeparator.module-89b2ff7f.js";
+import "../../../RotateTool.module-03987eba.js";
+import "../../../SearchTool.module-016f3a8d.js";
+import "../../../Checkbox.module-3edaacbb.js";
+import "../../icons/LoaderIcon.js";
+import T from "../../ui/LoadingIndicator.js";
+import "../../../RPSplitter.module-13d612c4.js";
+import "../../../Container.module-f8b5c306.js";
+import "../../../WrapperLayout.module-147bc943.js";
+import "../../../RPTheme.module-bd9038da.js";
+import "../../../contexts/ThemeContext.js";
+const Tr = (a) => {
+  const { children: c, toolbar: l } = a, d = f(null), { setContentRef: h } = x(), { active: n } = v(), { showPrintProgress: u } = N(), { progress: b } = C(), { percentage: s } = b || {}, r = l, i = r == null ? void 0 : r.topbar, m = r == null ? void 0 : r.leftSidebar;
+  return /* @__PURE__ */ p(e, { children: [
+    /* @__PURE__ */ p("div", { className: o["rp-toolbar-layout"], children: [
+      i && /* @__PURE__ */ t("div", { "data-rp": "topbar", className: o["rp-topbar-content"], children: i == null ? void 0 : i.component }),
+      /* @__PURE__ */ p("div", { className: o["rp-content"], children: [
+        /* @__PURE__ */ p(e, { children: [
+          m && /* @__PURE__ */ t("div", { "data-rp": "sidebar", className: o["rp-sidebar-content"], children: m == null ? void 0 : m.component }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              "data-rp": "thumbnailSidebar",
+              hidden: !n,
+              className: o["rp-thumbnails-wrapper"],
+              children: /* @__PURE__ */ t(g, { show: n, ref: d })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { ref: h, className: o["rp-pages"], children: c })
+      ] })
+    ] }),
+    u && s ? /* @__PURE__ */ t(T, { percentage: s }) : null
+  ] });
+};
 export {
-  Y as ToolbarCustom
+  Tr as ToolbarCustom
 };

package/dist/components/layout/toolbar/ToolbarDefault.js

@@ -0,0 +1,82 @@
+import { jsxs as o, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { useRef as d } from "react";
+import { f as h, b as u, m as t, k as f } from "../../../ToolbarLayout.module-60c3d6e8.js";
+import { useLayoutContainer as b } from "../../../contexts/LayoutContainerContext.js";
+import { useToolbarComponentContext as v } from "../../../contexts/ToolbarComponentContext.js";
+import "../../../contexts/RPDocumentContext.js";
+import "../../../contexts/DocumentPasswordContext.js";
+import "../../../contexts/DarkModeContext.js";
+import "../../../contexts/RotationContext.js";
+import "../../../contexts/LayerContext.js";
+import "../../../contexts/ZoomContext.js";
+import "../../../contexts/ViewModeContext.js";
+import "../../../contexts/ScrollModeContext.js";
+import "../../../contexts/VirtualScrollContext.js";
+import "../../../contexts/VirtualGridContext.js";
+import "../../../contexts/SelectionModeContext.js";
+import "../../../contexts/InitialStateContext.js";
+import "../../../contexts/FullScreenContext.js";
+import "../../../contexts/FileInputContext.js";
+import "../../../contexts/DropFileZoneContext.js";
+import "../../../contexts/DimensionPagesContext.js";
+import "../../../contexts/LocalizationContext.js";
+import "../../../contexts/HighlightContext.js";
+import "../../../contexts/LicenseContext.js";
+import "../../../contexts/DownloadContext.js";
+import "../../../contexts/SmoothScrollContext.js";
+import "../../../contexts/ElementPageContext.js";
+import "../../../contexts/PagesRotateContext.js";
+import "../../../contexts/LoaderContext.js";
+import "../../../contexts/ToolComponentContext.js";
+import "../../../contexts/IconToolContext.js";
+import "../../../contexts/OtherToolContext.js";
+import "../../RPConfig.js";
+import "../../ui/Button.js";
+import "../../ui/Input.js";
+import "../../../contexts/IconContext.js";
+import "../../../contexts/ViewportContext.js";
+import "../../ui/RPTooltip.js";
+import "../../../MenuItem.module-bc11d0d3.js";
+import "../../../DropDown.module-a78567cb.js";
+import "../../../utils/dateFormatter.js";
+import "../../../PropertyItem.module-db0150cc.js";
+import "../../../MenuSeparator.module-89b2ff7f.js";
+import "../../../RotateTool.module-03987eba.js";
+import "../../../SearchTool.module-016f3a8d.js";
+import "../../../Checkbox.module-3edaacbb.js";
+import "../../icons/LoaderIcon.js";
+import g from "../../ui/LoadingIndicator.js";
+import "../../../RPSplitter.module-13d612c4.js";
+import "../../../Container.module-f8b5c306.js";
+import "../../../WrapperLayout.module-147bc943.js";
+import "../../../RPTheme.module-bd9038da.js";
+import "../../../contexts/ThemeContext.js";
+import { RPHorizontalBar as x } from "./tools/defaults/RPHorizontalBar.js";
+import { RPVerticalBar as C } from "./tools/defaults/RPVerticalBar.js";
+const Pr = (e) => {
+  const { children: a } = e, n = d(null), { setContentRef: s } = b(), { active: i } = h(), { showPrintProgress: l } = v(), { progress: c } = u(), { percentage: m } = c || {};
+  return /* @__PURE__ */ o(p, { children: [
+    /* @__PURE__ */ o("div", { className: t["rp-toolbar-layout"], children: [
+      /* @__PURE__ */ r("div", { "data-rp": "topbar", className: t["rp-topbar-content"], children: /* @__PURE__ */ r(x, {}) }),
+      /* @__PURE__ */ o("div", { className: t["rp-content"], children: [
+        /* @__PURE__ */ o(p, { children: [
+          /* @__PURE__ */ r("div", { "data-rp": "sidebar", className: t["rp-sidebar-content"], children: /* @__PURE__ */ r(C, {}) }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              "data-rp": "thumbnailSidebar",
+              hidden: !i,
+              className: t["rp-thumbnails-wrapper"],
+              children: /* @__PURE__ */ r(f, { show: i, ref: n })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { ref: s, className: t["rp-pages"], children: a })
+      ] })
+    ] }),
+    l && m ? /* @__PURE__ */ r(g, { percentage: m }) : null
+  ] });
+};
+export {
+  Pr as ToolbarDefault
+};

package/dist/components/layout/toolbar/ToolbarLayout.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ToolbarDefault as e } from "./ToolbarDefault.js";
+import { ToolbarCustom as l } from "./ToolbarCustom.js";
+const b = (a) => {
+  const { children: r, toolbar: o } = a;
+  return o && typeof o == "boolean" ? /* @__PURE__ */ t(e, { children: r }) : /* @__PURE__ */ t(l, { toolbar: o, children: r });
+};
+export {
+  b as ToolbarLayout
+};

package/dist/components/layout/toolbar/ViewModeTool.js

@@ -1,5 +1,5 @@
 import { jsx as e, Fragment as I, jsxs as r } from "react/jsx-runtime";
-import { G as P } from "../../../index-00f8683a.js";
+import { G as P } from "../../../index-473557b1.js";
 import { MenuSeparator as T } from "./MenuSeparator.js";
 import { MenuItem as m } from "./MenuItem.js";
 import { DualPageIcon as C } from "../../icons/SinglePageIcon.js";

package/dist/components/layout/toolbar/ZoomTool.js

@@ -1,30 +1,142 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../contexts/ZoomContext.js";
-import "../../icons/ChevronUpIcon.js";
-import "../../icons/ZoomInIcon.js";
-import "../../icons/ZoomOutIcon.js";
-import "../../ui/Button.js";
-import { Z as A } from "../../../RPLayout-5892502c.js";
-import "../../ui/DropDown.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../index-00f8683a.js";
-import "./MenuItem.js";
-import "./MenuSeparator.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "../../../contexts/IconContext.js";
-import "../../../utils/constants.js";
-import "../../../contexts/ViewportContext.js";
-import "../../ui/RPTooltip.js";
-import "../../../utils/types.js";
-import "../../../utils/getZoomLevel.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/RPDocumentContext.js";
-import "../../../contexts/ViewModeContext.js";
-import "../../../contexts/PagesRotateContext.js";
-import "../../../clsx-0c6e471a.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../contexts/ToolComponentContext.js";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { useState as L, useRef as B, useCallback as s, useMemo as z, useEffect as X } from "react";
+import { useZoomContext as $ } from "../../../contexts/ZoomContext.js";
+import { ChevronUpIcon as q } from "../../icons/ChevronUpIcon.js";
+import { ZoomInIcon as J } from "../../icons/ZoomInIcon.js";
+import { ZoomOutIcon as K } from "../../icons/ZoomOutIcon.js";
+import { UIButton as C } from "../../ui/Button.js";
+import { u as Q, h as c } from "../../../ToolbarLayout.module-60c3d6e8.js";
+import { UIDropDown as Y } from "../../ui/DropDown.js";
+import { useLayoutContainer as M } from "../../../contexts/LayoutContainerContext.js";
+import { G as A } from "../../../index-473557b1.js";
+import { MenuItem as d } from "./MenuItem.js";
+import { MenuSeparator as oo } from "./MenuSeparator.js";
+import { useToolbarComponentContext as to } from "../../../contexts/ToolbarComponentContext.js";
+import { useIconContext as S } from "../../../contexts/IconContext.js";
+import { PAGE_PADDING as P } from "../../../utils/constants.js";
+import { useViewportContext as no } from "../../../contexts/ViewportContext.js";
+import I from "../../ui/RPTooltip.js";
+import { ZoomLevel as x } from "../../../utils/types.js";
+import { getZoomLevel as ro } from "../../../utils/getZoomLevel.js";
+import { useLocalizationContext as eo } from "../../../contexts/LocalizationContext.js";
+import { useDocumentContext as io } from "../../../contexts/RPDocumentContext.js";
+import { useViewModeContext as mo } from "../../../contexts/ViewModeContext.js";
+import { usePagesRotateContext as co } from "../../../contexts/PagesRotateContext.js";
+import { c as po } from "../../../clsx-0c6e471a.js";
+import { useIconToolContext as D } from "../../../contexts/IconToolContext.js";
+import { useToolComponentContext as uo } from "../../../contexts/ToolComponentContext.js";
+const lo = 25, T = 1e3, so = [50, 75, 100, 125, 150, 200, 300, 400], ho = () => {
+  const { zoomInIcon: e } = S(), { zoomInIcon: r } = D();
+  return e || r || /* @__PURE__ */ t(J, {});
+}, fo = () => {
+  const { zoomOutIcon: e } = S(), { zoomOutIcon: r } = D();
+  return e || r || /* @__PURE__ */ t(K, {});
+}, Ro = () => {
+  const { zoomLevel: e, setZoomLevel: r } = $(), { container: N, pagesRef: i } = M(), { zoomTool: h = !0 } = to(), { zoomTool: f = !0 } = uo(), { focusedPage: a } = Q(), { pageRotate: Z } = co(), { pages: b } = io(), { isSmallScreen: W } = no(), { localeMessages: o } = eo(), { viewMode: g } = mo(), [k, E] = L(0), [O, H] = L(!1), v = B(
+    new ResizeObserver((n) => {
+      E(n[0].contentRect.height);
+    })
+  ), y = s(() => {
+    r((n) => {
+      const p = Math.floor(n / 25) * 25;
+      return Math.min(p + 25, T);
+    });
+  }, [r]), G = s(() => {
+    r((n) => {
+      const p = Math.ceil(n / 25) * 25;
+      return Math.min(p - 25, T);
+    });
+  }, [r]), _ = z(() => e <= lo, [e]), U = z(() => e >= T, [e]), m = z(() => {
+    const n = b.get(a);
+    return n ? n.page.getViewport({ scale: 1, rotation: Z[a] }) : null;
+  }, [b, a, Z]), w = s(
+    (n) => {
+      const p = ((m == null ? void 0 : m.width) || 0) + 2 * P, F = ((m == null ? void 0 : m.height) || 0) + 2 * P, R = (i == null ? void 0 : i.clientWidth) || 0, V = (i == null ? void 0 : i.clientHeight) || 0, j = ro(
+        n,
+        R,
+        V,
+        p,
+        F,
+        g
+      );
+      r(j);
+    },
+    [r, m, i]
+  ), l = s(
+    (n) => {
+      typeof n == "number" ? r(n) : w(n);
+    },
+    [r, w]
+  );
+  return X(() => (i && v.current.observe(i), () => {
+    v.current.disconnect();
+  }), [i]), !h || !f ? null : typeof h == "function" ? /* @__PURE__ */ t(h, { zoomLevel: e, setZoomLevel: r }) : typeof f == "function" ? /* @__PURE__ */ t(f, { zoomLevel: e, setZoomLevel: r }) : /* @__PURE__ */ u("div", { className: c["rp-zoom-wrapper"], children: [
+    /* @__PURE__ */ t(I, { content: o == null ? void 0 : o.zoomOutTooltip, children: /* @__PURE__ */ t(
+      C,
+      {
+        disabled: _,
+        onClick: G,
+        "aria-label": o == null ? void 0 : o.zoomOutTooltip,
+        children: /* @__PURE__ */ t(fo, {})
+      }
+    ) }),
+    !W && /* @__PURE__ */ t(
+      Y,
+      {
+        container: N,
+        open: O,
+        onOpenChange: H,
+        triggerComponent: /* @__PURE__ */ t("div", { role: "button", children: /* @__PURE__ */ t(I, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ u(
+          C,
+          {
+            className: po(
+              c["rp-current-zoom-wrapper"],
+              O && c.active
+            ),
+            "aria-label": o == null ? void 0 : o.zoomSelectTooltip,
+            children: [
+              /* @__PURE__ */ t("span", { className: c["rp-current-zoom-text"], children: e }),
+              /* @__PURE__ */ t("span", { className: c["rp-current-zoom-text"], children: "%" }),
+              /* @__PURE__ */ t(q, { className: c["rp-current-zoom-icon"] })
+            ]
+          }
+        ) }) }),
+        style: { minWidth: "200px" },
+        align: "center",
+        side: "bottom",
+        avoidCollisions: !1,
+        children: /* @__PURE__ */ u(
+          "div",
+          {
+            style: { maxHeight: `${k}px`, overflow: "auto" },
+            className: c["rp-zoom-dropdown-content"],
+            children: [
+              /* @__PURE__ */ u(A, { children: [
+                /* @__PURE__ */ t(d, { onClick: () => l(x.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
+                /* @__PURE__ */ t(d, { onClick: () => l(x.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
+                /* @__PURE__ */ t(d, { onClick: () => l(x.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
+              ] }),
+              /* @__PURE__ */ t(oo, {}),
+              /* @__PURE__ */ t(A, { children: so.map((n) => /* @__PURE__ */ u(d, { onClick: () => l(n), children: [
+                n,
+                " %"
+              ] }, n)) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(I, { content: o == null ? void 0 : o.zoomInTooltip, children: /* @__PURE__ */ t(
+      C,
+      {
+        disabled: U,
+        onClick: y,
+        "aria-label": o == null ? void 0 : o.zoomInTooltip,
+        children: /* @__PURE__ */ t(ho, {})
+      }
+    ) })
+  ] });
+};
 export {
-  A as ZoomTool
+  Ro as ZoomTool
 };

package/dist/components/layout/toolbar/tools/FileDownloadTool.js

@@ -1,13 +1,13 @@
 import { jsx as i } from "react/jsx-runtime";
 import { FileDownloadDefaultIcon as r } from "../../../icons/FileDownloadDefaultIcon.js";
 import { UIButton as l } from "../../../ui/Button.js";
-import { c as d } from "../../../../RPLayout-5892502c.js";
+import { a as d } from "../../../../ToolbarLayout.module-60c3d6e8.js";
 import m from "../../../ui/RPTooltip.js";
 import { useLocalizationContext as p } from "../../../../contexts/LocalizationContext.js";
-const f = ({ children: t, className: n, localeMessages: o }) => /* @__PURE__ */ i(m, { className: n, content: o == null ? void 0 : o.downloadFileTooltip, children: t }), a = ({ icon: t }) => {
+const f = ({ children: t, className: n, localeMessages: o }) => /* @__PURE__ */ i(m, { className: n, content: o == null ? void 0 : o.downloadFileTooltip, children: t }), c = ({ icon: t }) => {
   const { download: n } = d(), { localeMessages: o } = p();
   return /* @__PURE__ */ i(f, { localeMessages: o, children: /* @__PURE__ */ i(l, { onClick: n, "aria-label": o == null ? void 0 : o.downloadFileTooltip, children: t || /* @__PURE__ */ i(r, {}) }) });
 };
 export {
-  a as FileDownloadTool
+  c as FileDownloadTool
 };