@dmsi/wedgekit-react 0.0.171 → 0.0.172

package/dist/components/PDFViewer.js

@@ -1,16 +1,18 @@
 "use client";
 import {
   Modal
-} from "../chunk-GCBW2LDM.js";
+} from "../chunk-F6YFWBVV.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-T7NDKJDP.js";
+import "../chunk-C4JGTH6G.js";
 import "../chunk-SYEJVSE4.js";
-import "../chunk-6A54FL75.js";
+import "../chunk-MJKBQSNI.js";
 import "../chunk-ZFOANBWG.js";
 import {
   Spinner
 } from "../chunk-PLMGI5K5.js";
-import "../chunk-AZ7LVLOK.js";
+import {
+  Heading3
+} from "../chunk-AZ7LVLOK.js";
 import {
   Caption
 } from "../chunk-E7D24OHM.js";
@@ -20,11 +22,14 @@ import {
   Stack
 } from "../chunk-N6JVLYEE.js";
 import {
-  Icon
-} from "../chunk-NKUETCDA.js";
+  Paragraph
+} from "../chunk-HVI3CL7Y.js";
 import {
   Button
 } from "../chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
@@ -52,14 +57,32 @@ function PDFViewer(props) {
     setIsDownloading(false);
   }, [currentIndex, encodedPdfs]);
   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 /* @__PURE__ */ jsx(
     Modal,
     {
       testid,
       open: isOpen,
-      onClose,
+      onClose: handleClose,
       showButtons: !!customActions,
       customActions,
+      size: "large",
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
       headerIcon: /* @__PURE__ */ jsx(
         DownloadIcon,
         {
@@ -68,33 +91,49 @@ function PDFViewer(props) {
           isDownloading
         }
       ),
-      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", children: [
+      className: "!max-w-fit",
+      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", items: "center", children: [
         /* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        /* @__PURE__ */ jsx(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ jsxs(
-          Button,
+        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ jsx(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` }),
+        /* @__PURE__ */ 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__ */ jsx(Spinner, {}),
-              pdf.fileName
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handlePreviousFile,
+                  leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_backward" }),
+                  disabled: currentIndex === 0,
+                  testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxs(Heading3, { className: "text-text-primary-normal", children: [
+                currentIndex + 1,
+                " / ",
+                encodedPdfs.length
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handleNextFile,
+                  rightIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_forward" }),
+                  disabled: currentIndex === encodedPdfs.length - 1,
+                  testid: testid ? `${testid}-pdf-file-next-button` : void 0
+                }
+              )
             ]
-          },
-          `${pdf.fileName}-${index}`
-        )) })
+          }
+        )
       ] })
     }
   );
@@ -123,74 +162,93 @@ function PDFElement({ b64, testid }) {
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
-    scale: 1
+    scale: 1.1
   });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ jsx(
-      "canvas",
-      {
-        "data-testid": testid ? `${testid}-pdf-content` : void 0,
-        ref: canvasRef
-      }
-    ) : /* @__PURE__ */ jsx("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
-    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs(
-      "ul",
-      {
-        className: "flex flex-row justify-between items-center",
-        "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
-        children: [
-          /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ 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__ */ jsx(Caption, { children: "Previous" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            "li",
-            {
-              "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
-              className: "text-label-desktop text-text-on-action-primary-normal",
-              children: [
-                "Page",
-                " ",
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
-                    children: page
-                  }
-                ),
-                " ",
-                "of",
-                " ",
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
-                    children: pdfDocument.numPages
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ 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__ */ jsx(Caption, { children: "Next" })
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col space-y-4 ",
+      style: {
+        minHeight: 871,
+        minWidth: 654
+      },
+      children: [
+        !!pdfDocument && !!b64 ? /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            "data-testid": testid ? `${testid}-pdf-content` : void 0,
+            ref: canvasRef
+          }
+        ) : /* @__PURE__ */ jsx(
+          Stack,
+          {
+            justify: "center",
+            items: "center",
+            height: "full",
+            flexGrow: 1,
+            "data-testid": testid ? `${testid}-pdf-loading` : void 0,
+            children: /* @__PURE__ */ jsx(Spinner, { size: "large" })
+          }
+        ),
+        (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs(
+          "ul",
+          {
+            className: "flex flex-row justify-between items-center",
+            "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
+            children: [
+              /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ 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__ */ jsx(Caption, { className: "not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal", children: "Previous" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
+                  className: "text-label-desktop text-text-primary-normal",
+                  children: [
+                    "Page",
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
+                        children: page
+                      }
+                    ),
+                    " ",
+                    "of",
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
+                        children: pdfDocument.numPages
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
+                  disabled: page === pdfDocument.numPages,
+                  onClick: () => setPage(page + 1),
+                  children: /* @__PURE__ */ jsx(Caption, { className: "not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal", children: "Next" })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   PDFViewer

package/dist/components/Password.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/Search.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Search
-} from "../chunk-IDSFWKOR.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-PMBEIP24.js";
+import "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Select.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Select
-} from "../chunk-KADNOKNW.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-XH65MD2C.js";
+import "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Stepper.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
-import {
-  Icon
-} from "../chunk-NKUETCDA.js";
+import "../chunk-JWCT72WR.js";
 import {
   Button
 } from "../chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "../chunk-NKUETCDA.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";

package/dist/components/Time.js

@@ -3,9 +3,9 @@ import {
 } from "../chunk-6LN6QT6M.js";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import {
   Stack
 } from "../chunk-N6JVLYEE.js";

package/dist/components/Toast.js

@@ -5,12 +5,12 @@ import {
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
-import {
-  Icon
-} from "../chunk-NKUETCDA.js";
 import {
   Button
 } from "../chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "../chunk-NKUETCDA.js";
 import {
   componentGap,
   componentPadding,

package/dist/components/Upload.js

@@ -1,12 +1,12 @@
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
-import {
-  Icon
-} from "../chunk-NKUETCDA.js";
 import {
   Button
 } from "../chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "../chunk-NKUETCDA.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";

package/dist/components/index.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-KADNOKNW.js";
+} from "../chunk-XH65MD2C.js";
 import {
   Checkbox
 } from "../chunk-WFQEE2OO.js";
@@ -12,29 +12,29 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-OJX75MY2.js";
-import {
-  MenuOption
-} from "../chunk-FFU6FB3K.js";
+} from "../chunk-O4JGGMFE.js";
 import {
   Menu
 } from "../chunk-UBU6IJML.js";
 import "../chunk-5GUW4DUY.js";
+import {
+  MenuOption
+} from "../chunk-FFU6FB3K.js";
 import {
   useInfiniteScroll
 } from "../chunk-WNQ53SVY.js";
-import "../chunk-WVUIIBRR.js";
 import "../chunk-6LN6QT6M.js";
 import {
   Search
-} from "../chunk-IDSFWKOR.js";
+} from "../chunk-PMBEIP24.js";
 import {
   Input
-} from "../chunk-MVGOAMTP.js";
+} from "../chunk-4T3DRGLF.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Label
 } from "../chunk-JWCT72WR.js";
-import "../chunk-5UH6QUFB.js";
+import "../chunk-WVUIIBRR.js";
 import {
   Subheader
 } from "../chunk-CYZL57LH.js";
@@ -48,12 +48,12 @@ import {
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
-import {
-  Icon
-} from "../chunk-NKUETCDA.js";
 import {
   Button
 } from "../chunk-FKMKHLQH.js";
+import {
+  Icon
+} from "../chunk-NKUETCDA.js";
 import {
   componentGap,
   componentPadding

package/dist/index.css

@@ -843,6 +843,9 @@
   .w-screen {
     width: 100vw;
   }
+  .\!max-w-fit {
+    max-width: fit-content !important;
+  }
   .max-w-25 {
     max-width: calc(var(--spacing) * 25);
   }
@@ -2421,6 +2424,11 @@
       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) {

package/package.json

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

package/src/components/Modal.tsx

@@ -25,6 +25,7 @@ type ModalProps = PropsWithChildren<{
   showButtons?: boolean;
   hideCloseIcon?: boolean;
   headerIcon?: React.ReactNode;
+  headerIconAlign?: "left" | "center" | "right";
   fixedHeightScrolling?: boolean;
   customActions?: React.ReactNode;
 }>;
@@ -117,6 +118,7 @@ export const Modal = ({
   showButtons = false,
   hideCloseIcon = false,
   headerIcon,
+  headerIconAlign,
   fixedHeightScrolling = false,
   customActions,
 }: ModalProps) => {
@@ -150,7 +152,7 @@ export const Modal = ({
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
-  }, [mounted, open]);
+  }, [mounted, onClose, open, wasOpen]);
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -161,7 +163,7 @@ export const Modal = ({
         }
       }
     },
-    [onClose, bgRef, modalRef],
+    [onClose],
   );
 
   const handleClose = useCallback(() => {
@@ -259,6 +261,7 @@ export const Modal = ({
           onClose={handleClose}
           hideCloseIcon={hideCloseIcon}
           headerIcon={headerIcon}
+          headerIconAlign={headerIconAlign}
         />
         {children && (
           <ModalContent

package/src/components/ModalHeader.tsx

@@ -9,6 +9,7 @@ type ModalHeaderProps = {
   title?: string;
   hideCloseIcon?: boolean;
   headerIcon?: React.ReactNode;
+  headerIconAlign?: "left" | "center" | "right";
   onClose?: () => void;
   id?: string;
   testid?: string;
@@ -18,6 +19,7 @@ export const ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
+  headerIconAlign,
   onClose,
   id,
   testid,
@@ -28,6 +30,9 @@ export const ModalHeader = ({
       data-testid={testid}
       className={clsx(
         "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap,
       )}
@@ -35,7 +40,11 @@ export const ModalHeader = ({
       <div className={clsx("flex items-center", layoutGroupGap)}>
         {headerIcon}
         {title && (
-          <Heading2 id={id ? `${id}-title` : undefined} testid={testid ? `${testid}-title` : undefined} as="p">
+          <Heading2
+            id={id ? `${id}-title` : undefined}
+            testid={testid ? `${testid}-title` : undefined}
+            as="p"
+          >
             {title}
           </Heading2>
         )}