@dmsi/wedgekit-react 0.0.171 → 0.0.173

package/dist/components/PDFViewer.cjs

@@ -432,6 +432,7 @@ var ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
+  headerIconAlign,
   onClose,
   id,
   testid
@@ -443,13 +444,24 @@ var ModalHeader = ({
       "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Heading2,
+            {
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
+            }
+          )
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
@@ -709,6 +721,7 @@ var Modal = ({
   showButtons = false,
   hideCloseIcon = false,
   headerIcon,
+  headerIconAlign,
   fixedHeightScrolling = false,
   customActions
 }) => {
@@ -738,7 +751,7 @@ var Modal = ({
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
-  }, [mounted, open]);
+  }, [mounted, onClose, open, wasOpen]);
   const handleKeyDown = (0, import_react5.useCallback)(
     (e) => {
       if (e.key === "Escape") {
@@ -748,7 +761,7 @@ var Modal = ({
         }
       }
     },
-    [onClose, bgRef, modalRef]
+    [onClose]
   );
   const handleClose = (0, import_react5.useCallback)(() => {
     if (onClose) {
@@ -833,7 +846,8 @@ var Modal = ({
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
-                  headerIcon
+                  headerIcon,
+                  headerIconAlign
                 }
               ),
               children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1264,8 +1278,61 @@ var Spinner = ({ size = "small", testid }) => {
 };
 Spinner.displayName = "Spinner";
 
-// src/components/PDFViewer.tsx
+// src/components/Paragraph.tsx
+var import_clsx12 = __toESM(require("clsx"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
+    "id",
+    "testid"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      className: (0, import_clsx12.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/PDFViewer.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function PDFViewer(props) {
   const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
   const [currentIndex, setCurrentIndex] = (0, import_react6.useState)(0);
@@ -1286,15 +1353,33 @@ function PDFViewer(props) {
     setIsDownloading(false);
   }, [currentIndex, encodedPdfs]);
   if (!encodedPdfs.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  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 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Modal,
     {
       testid,
       open: isOpen,
-      onClose,
+      onClose: handleClose,
       showButtons: !!customActions,
       customActions,
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      size: "large",
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         DownloadIcon,
         {
           testid: testid ? `${testid}-download-icon` : void 0,
@@ -1302,33 +1387,49 @@ function PDFViewer(props) {
           isDownloading
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Stack, { sizing: "layout", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          Button,
+      className: "!max-w-fit",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Stack, { sizing: "layout", items: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
+        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Stack,
           {
-            testid: testid ? `${testid}-${pdf.fileName}-button` : void 0,
-            variant: index === currentIndex ? "primary" : "secondary",
-            classNameLabel: "items-center flex flex-row gap-2",
-            onClick: (e) => {
-              setCurrentIndex(index);
-              requestAnimationFrame(() => {
-                const button = e.target;
-                button.scrollIntoView({
-                  behavior: "smooth",
-                  block: "nearest",
-                  inline: "center"
-                });
-              });
-            },
-            disabled: isDownloading || currentIndex === index || !pdf.base64,
+            horizontal: true,
+            overflowX: "auto",
+            justify: "center",
+            items: "center",
+            sizing: "layout-group",
             children: [
-              !pdf.base64 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, {}),
-              pdf.fileName
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handlePreviousFile,
+                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_backward" }),
+                  disabled: currentIndex === 0,
+                  testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading3, { className: "text-text-primary-normal", children: [
+                currentIndex + 1,
+                " / ",
+                encodedPdfs.length
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handleNextFile,
+                  rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_forward" }),
+                  disabled: currentIndex === encodedPdfs.length - 1,
+                  testid: testid ? `${testid}-pdf-file-next-button` : void 0
+                }
+              )
             ]
-          },
-          `${pdf.fileName}-${index}`
-        )) })
+          }
+        )
       ] })
     }
   );
@@ -1338,13 +1439,13 @@ function DownloadIcon({
   isDownloading,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Button,
     {
       testid,
       iconOnly: true,
       variant: "tertiary",
-      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
       onClick
     }
   );
@@ -1357,74 +1458,93 @@ function PDFElement({ b64, testid }) {
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
-    scale: 1
+    scale: 1.1
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "canvas",
-      {
-        "data-testid": testid ? `${testid}-pdf-content` : void 0,
-        ref: canvasRef
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
-    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      "ul",
-      {
-        className: "flex flex-row justify-between items-center",
-        "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "button",
-            {
-              "data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
-              disabled: page === 1,
-              onClick: () => setPage(page - 1),
-              className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Caption, { children: "Previous" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-            "li",
-            {
-              "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
-              className: "text-label-desktop text-text-on-action-primary-normal",
-              children: [
-                "Page",
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "span",
-                  {
-                    "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
-                    children: page
-                  }
-                ),
-                " ",
-                "of",
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "span",
-                  {
-                    "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
-                    children: pdfDocument.numPages
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "button",
-            {
-              "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
-              disabled: page === pdfDocument.numPages,
-              onClick: () => setPage(page + 1),
-              className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Caption, { children: "Next" })
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: "flex flex-col space-y-4 ",
+      style: {
+        minHeight: 871,
+        minWidth: 654
+      },
+      children: [
+        !!pdfDocument && !!b64 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "canvas",
+          {
+            "data-testid": testid ? `${testid}-pdf-content` : void 0,
+            ref: canvasRef
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Stack,
+          {
+            justify: "center",
+            items: "center",
+            height: "full",
+            flexGrow: 1,
+            "data-testid": testid ? `${testid}-pdf-loading` : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, { size: "large" })
+          }
+        ),
+        (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "ul",
+          {
+            className: "flex flex-row justify-between items-center",
+            "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "button",
+                {
+                  "data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
+                  disabled: page === 1,
+                  onClick: () => setPage(page - 1),
+                  className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Caption, { className: "not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal", children: "Previous" })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "li",
+                {
+                  "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
+                  className: "text-label-desktop text-text-primary-normal",
+                  children: [
+                    "Page",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      "span",
+                      {
+                        "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
+                        children: page
+                      }
+                    ),
+                    " ",
+                    "of",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      "span",
+                      {
+                        "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
+                        children: pdfDocument.numPages
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "button",
+                {
+                  "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
+                  disabled: page === pdfDocument.numPages,
+                  onClick: () => setPage(page + 1),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Caption, { className: "not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal", children: "Next" })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {