@dmsi/wedgekit-react 0.0.249 → 0.0.251

package/dist/components/SideMenu.js

@@ -1,4 +1,4 @@
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 
 // src/components/SideMenu.tsx
 import clsx from "clsx";

package/dist/components/SideMenuGroup.js

@@ -1,20 +1,20 @@
 "use client";
 import {
   Label
-} from "../chunk-VP7HJX24.js";
+} from "../chunk-7CS736EF.js";
 import {
   Stack
-} from "../chunk-QA3KMRA6.js";
+} from "../chunk-NQXZBWDZ.js";
 import {
   Icon
-} from "../chunk-UAPWR2KE.js";
+} from "../chunk-NKUETCDA.js";
 import {
   baseTransition
 } from "../chunk-6CTCHYIS.js";
 import {
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/SideMenuGroup.tsx
 import clsx from "clsx";

package/dist/components/SideMenuItem.js

@@ -1,14 +1,14 @@
 import {
   Stack
-} from "../chunk-QA3KMRA6.js";
+} from "../chunk-NQXZBWDZ.js";
 import {
   Paragraph
-} from "../chunk-7KLALK3J.js";
+} from "../chunk-OGIFIPKH.js";
 import {
   baseTransition,
   componentPaddingMinus2pxBorder
 } from "../chunk-6CTCHYIS.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 
 // src/components/SideMenuItem.tsx
 import clsx from "clsx";

package/dist/components/Spinner.js

@@ -1,7 +1,7 @@
 import {
   Spinner
 } from "../chunk-PLMGI5K5.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Spinner
 };

package/dist/components/Stack.js

@@ -1,8 +1,8 @@
 import {
   Stack
-} from "../chunk-QA3KMRA6.js";
+} from "../chunk-NQXZBWDZ.js";
 import "../chunk-6CTCHYIS.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Stack
 };

package/dist/components/StatusPill.js

@@ -1,6 +1,6 @@
 import {
   Label
-} from "../chunk-VP7HJX24.js";
+} from "../chunk-7CS736EF.js";
 import {
   componentPaddingYUsingComponentGap,
   paddingXUsingLayoutGroupGap
@@ -9,7 +9,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/StatusPill.tsx
 import clsx from "clsx";

package/dist/components/Stepper.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   InputBase
-} from "../chunk-ESXNSPIG.js";
-import "../chunk-VP7HJX24.js";
+} from "../chunk-5NIAGAA7.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-7CS736EF.js";
 import {
   Icon
-} from "../chunk-UAPWR2KE.js";
+} from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-KNP4LUFA.js";
+} from "../chunk-WWAPK5PH.js";
 import {
   componentGap
 } from "../chunk-6CTCHYIS.js";
@@ -17,7 +17,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/Stepper.tsx
 import clsx from "clsx";

package/dist/components/Subheader.js

@@ -1,8 +1,8 @@
 import {
   Subheader
-} from "../chunk-FS2RQE55.js";
+} from "../chunk-FA7IFW66.js";
 import "../chunk-6CTCHYIS.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Subheader
 };

package/dist/components/Surface.js

@@ -2,7 +2,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/Surface.tsx
 import clsx from "clsx";

package/dist/components/Swatch.js

@@ -1,20 +1,20 @@
 import {
   Heading2,
   Heading3
-} from "../chunk-KEDK5EWD.js";
+} from "../chunk-EU73QPW7.js";
 import {
   Display1
-} from "../chunk-R2FGTCOY.js";
+} from "../chunk-GICZ5RWY.js";
 import {
   Stack
-} from "../chunk-QA3KMRA6.js";
+} from "../chunk-NQXZBWDZ.js";
 import {
   Paragraph
-} from "../chunk-7KLALK3J.js";
+} from "../chunk-OGIFIPKH.js";
 import {
   typography
 } from "../chunk-6CTCHYIS.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 
 // src/components/Swatch.tsx
 import clsx from "clsx";

package/dist/components/Textarea.js

@@ -9,7 +9,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/Textarea.tsx
 import clsx from "clsx";

package/dist/components/Theme.js

@@ -1,7 +1,7 @@
 import {
   Theme
 } from "../chunk-EWGHVZL5.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Theme
 };

package/dist/components/Time.js

@@ -1,18 +1,18 @@
-import {
-  InputBase
-} from "../chunk-ESXNSPIG.js";
-import "../chunk-VP7HJX24.js";
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
+import "../chunk-TYTD4FLW.js";
+import {
+  InputBase
+} from "../chunk-5NIAGAA7.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-7CS736EF.js";
 import {
   Stack
-} from "../chunk-QA3KMRA6.js";
+} from "../chunk-NQXZBWDZ.js";
 import {
   Icon
-} from "../chunk-UAPWR2KE.js";
+} from "../chunk-NKUETCDA.js";
 import {
   typography
 } from "../chunk-6CTCHYIS.js";
@@ -20,7 +20,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/Time.tsx
 import { useEffect, useRef, useState } from "react";

package/dist/components/Toast.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   Heading3
-} from "../chunk-KEDK5EWD.js";
+} from "../chunk-EU73QPW7.js";
 import {
   Paragraph
-} from "../chunk-7KLALK3J.js";
+} from "../chunk-OGIFIPKH.js";
 import {
   Icon
-} from "../chunk-UAPWR2KE.js";
+} from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-KNP4LUFA.js";
+} from "../chunk-WWAPK5PH.js";
 import {
   componentGap,
   componentPadding,
@@ -20,7 +20,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/Toast.tsx
 import clsx from "clsx";

package/dist/components/Tooltip.js

@@ -3,7 +3,7 @@ import {
   Tooltip
 } from "../chunk-QQ5G773N.js";
 import "../chunk-6CTCHYIS.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Tooltip
 };

package/dist/components/TopBar.js

@@ -1,6 +1,6 @@
 import {
   LogoDMSiTopBar
-} from "../chunk-WKWNBR53.js";
+} from "../chunk-QBIEU25R.js";
 import {
   containerPaddingX,
   gapUsingContainerPadding,
@@ -12,7 +12,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/TopBar.tsx
 import clsx from "clsx";

package/dist/components/Upload.js

@@ -3,16 +3,16 @@ import {
 } from "../chunk-PLMGI5K5.js";
 import {
   Stack
-} from "../chunk-QA3KMRA6.js";
+} from "../chunk-NQXZBWDZ.js";
 import {
   Paragraph
-} from "../chunk-7KLALK3J.js";
+} from "../chunk-OGIFIPKH.js";
 import {
   Icon
-} from "../chunk-UAPWR2KE.js";
+} from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-KNP4LUFA.js";
+} from "../chunk-WWAPK5PH.js";
 import {
   componentGap
 } from "../chunk-6CTCHYIS.js";
@@ -20,7 +20,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-BBZEL7EG.js";
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/Upload.tsx
 import clsx from "clsx";

package/dist/components/WorldpayIframe.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 
 // src/components/WorldpayIframe.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/components/index.js

@@ -1,63 +1,63 @@
 import {
   DataGrid
-} from "../chunk-UWGSOAIN.js";
+} from "../chunk-KIAURU7N.js";
 import {
   Tooltip
 } from "../chunk-QQ5G773N.js";
 import {
   Select
-} from "../chunk-KSKC53TG.js";
+} from "../chunk-SYN5FFHV.js";
 import {
   Checkbox
-} from "../chunk-DXVLA32J.js";
+} from "../chunk-NO5BIKWS.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-2ALRM4YD.js";
-import {
-  MenuOption
-} from "../chunk-6IXVPFYC.js";
+} from "../chunk-2MZ5WKCL.js";
 import {
   Menu
-} from "../chunk-NA3ODQCN.js";
-import "../chunk-VP36B2MM.js";
-import "../chunk-WVUIIBRR.js";
+} from "../chunk-PGSDEGBP.js";
+import "../chunk-CCOQOO23.js";
+import {
+  MenuOption
+} from "../chunk-FLVYV4T4.js";
+import "../chunk-HIVPC3T4.js";
+import "../chunk-VXWSAIB5.js";
+import "../chunk-TYTD4FLW.js";
 import {
   Search
-} from "../chunk-3S6HGDOB.js";
+} from "../chunk-7PWT532Y.js";
 import {
   Input
-} from "../chunk-ESXNSPIG.js";
+} from "../chunk-5NIAGAA7.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Label
-} from "../chunk-VP7HJX24.js";
-import "../chunk-ZU2K7BD3.js";
-import "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-7CS736EF.js";
+import "../chunk-WVUIIBRR.js";
 import {
   Subheader
-} from "../chunk-FS2RQE55.js";
+} from "../chunk-FA7IFW66.js";
 import {
   Accordion
-} from "../chunk-NWELJDBW.js";
-import "../chunk-QA3KMRA6.js";
+} from "../chunk-4VER5OEU.js";
+import "../chunk-NQXZBWDZ.js";
 import {
   Card
-} from "../chunk-TJWGFGWX.js";
+} from "../chunk-4LXG6QNT.js";
 import {
   Paragraph
-} from "../chunk-7KLALK3J.js";
+} from "../chunk-OGIFIPKH.js";
 import {
   Icon
-} from "../chunk-UAPWR2KE.js";
+} from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-KNP4LUFA.js";
+} from "../chunk-WWAPK5PH.js";
 import "../chunk-6CTCHYIS.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Accordion,
   Button,

package/dist/components/useMenuSystem.js

@@ -2,12 +2,12 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-VP36B2MM.js";
-import "../chunk-ZU2K7BD3.js";
+} from "../chunk-CCOQOO23.js";
+import "../chunk-HIVPC3T4.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
+import "../chunk-TYTD4FLW.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   useMenuPosition,
   useSubMenuSystem

package/dist/components/useMounted.js

@@ -2,7 +2,7 @@
 import {
   useMounted
 } from "../chunk-4RJKB7LC.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   useMounted
 };

package/dist/hooks/index.js

@@ -4,11 +4,11 @@ import {
   useMatchesMedia,
   useMatchesMobile,
   useTableLayout
-} from "../chunk-ZU2K7BD3.js";
+} from "../chunk-HIVPC3T4.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
+import "../chunk-TYTD4FLW.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   useInfiniteScroll,
   useKeydown,

package/dist/utils/index.js

@@ -13,13 +13,13 @@ import {
   mergeObjectArrays,
   parseDateParts,
   parseInputDate
-} from "../chunk-T3F37S6Z.js";
+} from "../chunk-TYTD4FLW.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
   getDecimalPlaceholder
 } from "../chunk-5UH6QUFB.js";
-import "../chunk-BBZEL7EG.js";
+import "../chunk-ORMEWXMH.js";
 export {
   calculateCursorPosition,
   countDigitsUpToCursor,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.249",
+  "version": "0.0.251",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/PDFViewer.tsx

@@ -95,9 +95,7 @@ export function PDFViewer(props: PDFViewerProps) {
       }
       className="!max-w-fit"
     >
-      <Stack sizing="layout" items="center">
-        <PDFElement testid={testid} b64={encodedPdfs[currentIndex].base64} />
-      </Stack>
+      <PDFElement testid={testid} b64={encodedPdfs[currentIndex].base64} />
     </Modal>
   );
 }
@@ -124,29 +122,19 @@ function DownloadIcon({
 
 function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [pages, setPages] = useState<React.ReactNode[]>([]);
-
-  useEffect(() => {
-    setPages([]);
-  }, [b64]);
 
   const { pdfDocument } = usePdf({
     file: `data:application/pdf;base64,${b64}`,
     workerSrc: "/scripts/pdf.worker.min.mjs",
-    page: 1,
     canvasRef,
     scale: 1.1,
-    onDocumentLoadSuccess: async (pdf) => {
-      if (pdf.numPages === 1) return;
-      // Page loader
-      const pages = await renderPages(pdf, testid || "pdf-viewer");
-      setPages(pages);
-    },
   });
 
+  const pagesArr = new Array(pdfDocument?.numPages ?? 1).fill(null);
+
   return (
     <div
-      className="flex flex-col space-y-4 "
+      className="flex flex-col space-y-4"
       style={{
         minHeight: 871,
         minWidth: 654,
@@ -154,20 +142,27 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
     >
       {!!pdfDocument && !!b64 ? (
         <Stack sizing="layout-group">
-          <div className="flex justify-center border border-border-primary-normal">
-            <canvas
-              data-testid={testid ? `${testid}-pdf-content` : undefined}
-              ref={canvasRef}
-            />
-          </div>
-          {pages.map((page, index) => (
-            <div
-              key={`${testid}-pdf-page-${index}`}
-              className="flex justify-center border border-border-primary-normal"
-            >
-              {page}
+          {pagesArr.length > 1 ? (
+            pagesArr.map((_, i) => (
+              <div
+                key={`${testid}-pdf-page-${i + 1}`}
+                className="flex justify-center border border-border-primary-normal"
+              >
+                <PdfPage
+                  testid={testid ? `${testid}-pdf_page_${i + 1}` : undefined}
+                  file={`data:application/pdf;base64,${b64}`}
+                  pageNumber={i + 1}
+                />
+              </div>
+            ))
+          ) : (
+            <div className="flex justify-center border border-border-primary-normal">
+              <canvas
+                data-testid={testid ? `${testid}-pdf-content` : undefined}
+                ref={canvasRef}
+              />
             </div>
-          ))}
+          )}
         </Stack>
       ) : (
         <Stack
@@ -246,33 +241,24 @@ function PdfNavigation({
   );
 }
 
-function renderPages(pdf: PDFDocumentProxy, testid: string) {
-  const pagesPromises = Array.from(
-    // Skip the first page as it is already rendered
-    { length: pdf.numPages - 1 },
-    async (_, i) => {
-      const page = await pdf.getPage(i + 2);
-      return (
-        <canvas
-          key={`${testid}-pdf_page_${page.pageNumber}`}
-          ref={(el) => {
-            if (el) {
-              const ctx = el.getContext("2d");
-              el.width = page.getViewport({ scale: 1.1 }).width;
-              el.height = page.getViewport({ scale: 1.1 }).height;
+function PdfPage({
+  file,
+  pageNumber,
+  testid,
+}: {
+  file: string;
+  pageNumber: number;
+  testid?: string;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
 
-              if (ctx) {
-                page.render({
-                  canvasContext: ctx,
-                  canvas: el,
-                  viewport: page.getViewport({ scale: 1.1 }),
-                });
-              }
-            }
-          }}
-        />
-      );
-    },
-  );
-  return Promise.all(pagesPromises);
+  const { pdfDocument } = usePdf({
+    file,
+    page: pageNumber,
+    canvasRef,
+  });
+
+  if (!pdfDocument) return null;
+
+  return <canvas ref={canvasRef} data-testid={testid} />;
 }