@dmsi/wedgekit-react 0.0.171 → 0.0.172

package/src/components/PDFViewer.tsx

@@ -8,6 +8,8 @@ import { Icon } from "./Icon";
 import { Stack } from "./Stack";
 import { Caption } from "./Caption";
 import { Spinner } from "./Spinner";
+import { Paragraph } from "./Paragraph";
+import { Heading3 } from "./Heading";
 
 type PDFViewerProps = {
   isOpen: boolean;
@@ -42,13 +44,34 @@ export function PDFViewer(props: PDFViewerProps) {
 
   if (!encodedPdfs.length) return null;
 
+  function handleNextFile() {
+    if (currentIndex < encodedPdfs.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }
+
+  function handlePreviousFile() {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  }
+
+  function handleClose() {
+    setCurrentIndex(0);
+    setIsDownloading(false);
+    onClose();
+  }
+
   return (
     <Modal
       testid={testid}
       open={isOpen}
-      onClose={onClose}
+      onClose={handleClose}
       showButtons={!!customActions}
       customActions={customActions}
+      size="large"
+      fixedHeightScrolling
+      headerIconAlign="right"
       headerIcon={
         <DownloadIcon
           testid={testid ? `${testid}-download-icon` : undefined}
@@ -56,11 +79,44 @@ export function PDFViewer(props: PDFViewerProps) {
           isDownloading={isDownloading}
         />
       }
+      className="!max-w-fit"
     >
-      <Stack sizing="layout">
+      <Stack sizing="layout" items="center">
         <PDFElement testid={testid} b64={encodedPdfs[currentIndex].base64} />
-        <Stack horizontal overflowX="auto" sizing="layout-group">
-          {encodedPdfs.map((pdf, index) => (
+        {!!encodedPdfs[currentIndex].fileName && (
+          <Paragraph>
+            {encodedPdfs[currentIndex].fileName.endsWith(".pdf")
+              ? encodedPdfs[currentIndex].fileName
+              : `${encodedPdfs[currentIndex].fileName}.pdf`}
+          </Paragraph>
+        )}
+        <Stack
+          horizontal
+          overflowX="auto"
+          justify="center"
+          items="center"
+          sizing="layout-group"
+        >
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={handlePreviousFile}
+            leftIcon={<Icon name="chevron_backward" />}
+            disabled={currentIndex === 0}
+            testid={testid ? `${testid}-pdf-file-previous-button` : undefined}
+          />
+          <Heading3 className="text-text-primary-normal">
+            {currentIndex + 1} / {encodedPdfs.length}
+          </Heading3>
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={handleNextFile}
+            rightIcon={<Icon name="chevron_forward" />}
+            disabled={currentIndex === encodedPdfs.length - 1}
+            testid={testid ? `${testid}-pdf-file-next-button` : undefined}
+          />
+          {/* {encodedPdfs.map((pdf, index) => (
             <Button
               testid={testid ? `${testid}-${pdf.fileName}-button` : undefined}
               variant={index === currentIndex ? "primary" : "secondary"}
@@ -84,7 +140,7 @@ export function PDFViewer(props: PDFViewerProps) {
               {!pdf.base64 && <Spinner />}
               {pdf.fileName}
             </Button>
-          ))}
+          ))} */}
         </Stack>
       </Stack>
     </Modal>
@@ -120,20 +176,32 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
-    scale: 1,
+    scale: 1.1,
   });
 
   return (
-    <div className="flex flex-col space-y-4">
-      {pdfDocument ? (
+    <div
+      className="flex flex-col space-y-4 "
+      style={{
+        minHeight: 871,
+        minWidth: 654,
+      }}
+    >
+      {!!pdfDocument && !!b64 ? (
         <canvas
           data-testid={testid ? `${testid}-pdf-content` : undefined}
           ref={canvasRef}
         />
       ) : (
-        <div data-testid={testid ? `${testid}-pdf-loading` : undefined}>
-          Loading PDF...
-        </div>
+        <Stack
+          justify="center"
+          items="center"
+          height="full"
+          flexGrow={1}
+          data-testid={testid ? `${testid}-pdf-loading` : undefined}
+        >
+          <Spinner size="large" />
+        </Stack>
       )}
       {pdfDocument?.numPages && pdfDocument.numPages > 1 && (
         <ul
@@ -149,12 +217,14 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
               onClick={() => setPage(page - 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "
             >
-              <Caption>Previous</Caption>
+              <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-on-action-primary-normal"
+            className="text-label-desktop text-text-primary-normal"
           >
             Page{" "}
             <span
@@ -182,9 +252,10 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
               }
               disabled={page === pdfDocument!.numPages}
               onClick={() => setPage(page + 1)}
-              className="not-disabled:cursor-pointer not-disabled:hover:underline "
             >
-              <Caption>Next</Caption>
+              <Caption className="not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal">
+                Next
+              </Caption>
             </button>
           </li>
         </ul>

package/dist/{chunk-MVGOAMTP.js → chunk-4T3DRGLF.js}

@@ -1,11 +1,11 @@
-import {
-  Label
-} from "./chunk-JWCT72WR.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
   getDecimalPlaceholder
 } from "./chunk-5UH6QUFB.js";
+import {
+  Label
+} from "./chunk-JWCT72WR.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-T7NDKJDP.js → chunk-C4JGTH6G.js}

@@ -1,9 +1,9 @@
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   layoutGroupGap,
   layoutPaddding

package/dist/{chunk-UGNB32SL.js → chunk-LM5MKBPM.js}

@@ -1,12 +1,12 @@
 import {
   Label
 } from "./chunk-JWCT72WR.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap,

package/dist/{chunk-ZR4E5A43.js → chunk-ZGFQN47L.js}

@@ -1,9 +1,9 @@
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   __objRest,
   __spreadProps,