@dmsi/wedgekit-react 0.0.203 → 0.0.204

package/dist/components/index.css

@@ -1987,9 +1987,6 @@
   .text-heading-3-mobile {
     font-size: var(--text-heading-3-mobile);
   }
-  .text-label-desktop {
-    font-size: var(--text-label-desktop);
-  }
   .text-label-mobile {
     font-size: var(--text-label-mobile);
   }
@@ -2447,16 +2444,6 @@
       padding-block: var(--spacing-mobile-component-padding);
     }
   }
-  .not-disabled\:cursor-pointer {
-    &:not(*:disabled) {
-      cursor: pointer;
-    }
-  }
-  .not-disabled\:text-text-primary-normal {
-    &:not(*:disabled) {
-      color: var(--color-text-primary-normal);
-    }
-  }
   .group-hover\:block {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3002,15 +2989,6 @@
       }
     }
   }
-  .not-disabled\:hover\:underline {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: underline;
-        }
-      }
-    }
-  }
   .focus\:border-background-action-critical-primary-hover {
     &:focus {
       border-color: var(--color-background-action-critical-primary-hover);

package/dist/components/index.js

@@ -3,57 +3,57 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-XH65MD2C.js";
+} from "../chunk-33W2KSCB.js";
 import {
   Checkbox
-} from "../chunk-WFQEE2OO.js";
+} from "../chunk-E3UOI2D2.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-SDQPZQTI.js";
+} from "../chunk-RXPS5GVE.js";
 import {
   Menu
-} from "../chunk-ESTHTAR5.js";
-import "../chunk-AEDQLVKH.js";
+} from "../chunk-2JRZCC2K.js";
+import "../chunk-WE55TGZZ.js";
 import {
   MenuOption
-} from "../chunk-OZKCUKBS.js";
+} from "../chunk-WXHRJSDG.js";
 import {
   useInfiniteScroll
 } from "../chunk-WNQ53SVY.js";
 import "../chunk-6LN6QT6M.js";
 import {
   Search
-} from "../chunk-PMBEIP24.js";
+} from "../chunk-2WRRRPEB.js";
 import {
   Input
-} from "../chunk-4T3DRGLF.js";
+} from "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Label
-} from "../chunk-JWCT72WR.js";
+} from "../chunk-CJVTFYI4.js";
 import "../chunk-WVUIIBRR.js";
 import {
   Subheader
-} from "../chunk-CYZL57LH.js";
+} from "../chunk-KGVKHWUK.js";
 import {
   Accordion
-} from "../chunk-WSS2DFTP.js";
-import "../chunk-N6JVLYEE.js";
+} from "../chunk-ARC7FOL2.js";
+import "../chunk-BOWQUDUU.js";
 import {
   Card
-} from "../chunk-4LXG6QNT.js";
+} from "../chunk-TJWGFGWX.js";
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
 import {
   Button
-} from "../chunk-FKMKHLQH.js";
+} from "../chunk-SK742QNF.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import {
   componentGap,
   componentPadding
@@ -62,7 +62,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/DataGrid/index.tsx
 import React3, { useCallback, useId, useState as useState3 } from "react";

package/dist/components/useMenuSystem.js

@@ -2,9 +2,9 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-AEDQLVKH.js";
+} from "../chunk-WE55TGZZ.js";
 import "../chunk-WNQ53SVY.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   useMenuPosition,
   useSubMenuSystem

package/dist/components/useMounted.js

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

package/dist/hooks/index.js

@@ -4,7 +4,7 @@ import {
   useMatchesMedia,
   useMatchesMobile
 } from "../chunk-WNQ53SVY.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   useInfiniteScroll,
   useKeydown,

package/dist/index.css

@@ -1965,9 +1965,6 @@
   .text-heading-3-mobile {
     font-size: var(--text-heading-3-mobile);
   }
-  .text-label-desktop {
-    font-size: var(--text-label-desktop);
-  }
   .text-label-mobile {
     font-size: var(--text-label-mobile);
   }
@@ -2425,16 +2422,6 @@
       padding-block: var(--spacing-mobile-component-padding);
     }
   }
-  .not-disabled\:cursor-pointer {
-    &:not(*:disabled) {
-      cursor: pointer;
-    }
-  }
-  .not-disabled\:text-text-primary-normal {
-    &:not(*:disabled) {
-      color: var(--color-text-primary-normal);
-    }
-  }
   .group-hover\:block {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2980,15 +2967,6 @@
       }
     }
   }
-  .not-disabled\:hover\:underline {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: underline;
-        }
-      }
-    }
-  }
   .focus\:border-background-action-critical-primary-hover {
     &:focus {
       border-color: var(--color-background-action-critical-primary-hover);

package/dist/utils/index.js

@@ -18,7 +18,7 @@ import {
   formatDecimalValue,
   getDecimalPlaceholder
 } from "../chunk-5UH6QUFB.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   calculateCursorPosition,
   countDigitsUpToCursor,

package/package.json

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

package/src/components/PDFViewer.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import { usePdf } from "@mikecousins/react-pdf";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Modal } from "./Modal";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { Stack } from "./Stack";
-import { Caption } from "./Caption";
 import { Spinner } from "./Spinner";
 import { Paragraph } from "./Paragraph";
 import { Heading3 } from "./Heading";
+import { PDFDocumentProxy } from "pdfjs-dist";
 
 type PDFViewerProps = {
   isOpen: boolean;
@@ -97,13 +97,6 @@ export function PDFViewer(props: PDFViewerProps) {
     >
       <Stack sizing="layout" items="center">
         <PDFElement testid={testid} b64={encodedPdfs[currentIndex].base64} />
-        {!!encodedPdfs[currentIndex].fileName && (
-          <Paragraph>
-            {encodedPdfs[currentIndex].fileName.endsWith(".pdf")
-              ? encodedPdfs[currentIndex].fileName
-              : `${encodedPdfs[currentIndex].fileName}.pdf`}
-          </Paragraph>
-        )}
       </Stack>
     </Modal>
   );
@@ -130,15 +123,25 @@ function DownloadIcon({
 }
 
 function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
-  const [page, setPage] = useState(1);
-  const canvasRef = useRef(null);
+  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,
+    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);
+    },
   });
 
   return (
@@ -150,10 +153,22 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
       }}
     >
       {!!pdfDocument && !!b64 ? (
-        <canvas
-          data-testid={testid ? `${testid}-pdf-content` : undefined}
-          ref={canvasRef}
-        />
+        <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}
+            </div>
+          ))}
+        </Stack>
       ) : (
         <Stack
           justify="center"
@@ -165,63 +180,6 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
           <Spinner size="large" />
         </Stack>
       )}
-      {pdfDocument?.numPages && pdfDocument.numPages > 1 && (
-        <ul
-          className="flex flex-row justify-between items-center"
-          data-testid={testid ? `${testid}-pdf-pagination` : undefined}
-        >
-          <li className="previous">
-            <button
-              data-testid={
-                testid ? `${testid}-pdf-pagination-previous-button` : undefined
-              }
-              disabled={page === 1}
-              onClick={() => setPage(page - 1)}
-              className="not-disabled:cursor-pointer not-disabled:hover:underline "
-            >
-              <Caption className="not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal">
-                Previous
-              </Caption>
-            </button>
-          </li>
-          <li
-            data-testid={testid ? `${testid}-pdf-pagination-text` : undefined}
-            className="text-label-desktop text-text-primary-normal"
-          >
-            Page{" "}
-            <span
-              data-testid={
-                testid ? `${testid}-pdf-pagination-page-${page}` : undefined
-              }
-            >
-              {page}
-            </span>{" "}
-            of{" "}
-            <span
-              data-testid={
-                testid
-                  ? `${testid}-pdf-pagination-total-page-${pdfDocument!.numPages}`
-                  : undefined
-              }
-            >
-              {pdfDocument!.numPages}
-            </span>
-          </li>
-          <li className="next">
-            <button
-              data-testid={
-                testid ? `${testid}-pdf-pagination-next-button` : undefined
-              }
-              disabled={page === pdfDocument!.numPages}
-              onClick={() => setPage(page + 1)}
-            >
-              <Caption className="not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal">
-                Next
-              </Caption>
-            </button>
-          </li>
-        </ul>
-      )}
     </div>
   );
 }
@@ -287,3 +245,33 @@ function PdfNavigation({
     </div>
   );
 }
+
+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;
+
+              if (ctx) {
+                page.render({
+                  canvasContext: ctx,
+                  viewport: page.getViewport({ scale: 1.1 }),
+                });
+              }
+            }
+          }}
+        />
+      );
+    },
+  );
+  return Promise.all(pagesPromises);
+}

package/dist/chunk-E7D24OHM.js

@@ -1,134 +0,0 @@
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  typography
-} from "./chunk-RDLEIAQU.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Caption.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Caption = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as = "span",
-    style = "default",
-    color,
-    align,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "style",
-    "color",
-    "align",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ jsxs("div", { id, "data-testid": testid, className: "flex gap-1", children: [
-    /* @__PURE__ */ jsx(
-      WhichIcon,
-      {
-        id,
-        testid,
-        style,
-        size: 16,
-        className: "mt-[3px] desktop:mt-0"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Element,
-      __spreadProps(__spreadValues({
-        id: id ? `${id}-text` : void 0,
-        "data-testid": testid ? `${testid}-text` : void 0,
-        className: clsx(
-          typography.caption.replace("text-text-primary-normal", ""),
-          (style === "default" || style === "info") && "text-text-secondary-normal",
-          style === "success" && "text-text-success-normal",
-          style === "warning" && "text-text-warning-normal",
-          style === "error" && "text-text-critical-normal",
-          align === "left" && "text-left",
-          align === "center" && "text-center",
-          align === "right" && "text-right",
-          className
-        )
-      }, props), {
-        style: {
-          color: color ? `var(--color-${color})` : void 0
-        },
-        children
-      })
-    )
-  ] });
-};
-var WhichIcon = ({
-  style,
-  size,
-  className,
-  id,
-  testid
-}) => {
-  if (style === "success") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "check_circle",
-        size
-      }
-    ) });
-  }
-  if (style === "warning") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "warning",
-        size
-      }
-    ) });
-  }
-  if (style === "error") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  if (style === "info") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  return null;
-};
-Caption.displayName = "Caption";
-
-export {
-  Caption
-};