@dmsi/wedgekit-react 0.0.189 → 0.0.190

package/dist/components/PDFViewer.cjs

@@ -1374,8 +1374,21 @@ function PDFViewer(props) {
       testid,
       open: isOpen,
       onClose: handleClose,
-      showButtons: !!customActions,
-      customActions,
+      showButtons: !!encodedPdfs.length,
+      customActions: !!encodedPdfs.length && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        PdfNavigation,
+        {
+          testid,
+          currentIndex,
+          total: encodedPdfs.length,
+          onPrev: handlePreviousFile,
+          onNext: handleNextFile,
+          disablePrev: currentIndex === 0,
+          disableNext: currentIndex === encodedPdfs.length - 1,
+          extraActions: customActions,
+          fileName: encodedPdfs[currentIndex].fileName
+        }
+      ),
       size: "large",
       fixedHeightScrolling: true,
       headerIconAlign: "right",
@@ -1390,46 +1403,7 @@ function PDFViewer(props) {
       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,
-          {
-            horizontal: true,
-            overflowX: "auto",
-            justify: "center",
-            items: "center",
-            sizing: "layout-group",
-            children: [
-              /* @__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
-                }
-              )
-            ]
-          }
-        )
+        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` })
       ] })
     }
   );
@@ -1546,6 +1520,61 @@ function PDFElement({ b64, testid }) {
     }
   );
 }
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    Stack,
+    {
+      horizontal: true,
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: testid ? `${testid}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onPrev,
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_backward" }),
+              disabled: disablePrev,
+              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            currentIndex + 1,
+            " / ",
+            total
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onNext,
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_forward" }),
+              disabled: disableNext,
+              testid: testid ? `${testid}-pdf-file-next-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+        ] }),
+        extraActions && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
+      ]
+    }
+  ) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PDFViewer

package/dist/components/PDFViewer.js

@@ -78,8 +78,21 @@ function PDFViewer(props) {
       testid,
       open: isOpen,
       onClose: handleClose,
-      showButtons: !!customActions,
-      customActions,
+      showButtons: !!encodedPdfs.length,
+      customActions: !!encodedPdfs.length && /* @__PURE__ */ jsx(
+        PdfNavigation,
+        {
+          testid,
+          currentIndex,
+          total: encodedPdfs.length,
+          onPrev: handlePreviousFile,
+          onNext: handleNextFile,
+          disablePrev: currentIndex === 0,
+          disableNext: currentIndex === encodedPdfs.length - 1,
+          extraActions: customActions,
+          fileName: encodedPdfs[currentIndex].fileName
+        }
+      ),
       size: "large",
       fixedHeightScrolling: true,
       headerIconAlign: "right",
@@ -94,46 +107,7 @@ function PDFViewer(props) {
       className: "!max-w-fit",
       children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", items: "center", children: [
         /* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ jsx(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` }),
-        /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            horizontal: true,
-            overflowX: "auto",
-            justify: "center",
-            items: "center",
-            sizing: "layout-group",
-            children: [
-              /* @__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
-                }
-              )
-            ]
-          }
-        )
+        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ jsx(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` })
       ] })
     }
   );
@@ -250,6 +224,61 @@ function PDFElement({ b64, testid }) {
     }
   );
 }
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      horizontal: true,
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: testid ? `${testid}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onPrev,
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_backward" }),
+              disabled: disablePrev,
+              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ jsxs(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            currentIndex + 1,
+            " / ",
+            total
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onNext,
+              rightIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_forward" }),
+              disabled: disableNext,
+              testid: testid ? `${testid}-pdf-file-next-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+        ] }),
+        extraActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: extraActions })
+      ]
+    }
+  ) });
+}
 export {
   PDFViewer
 };

package/package.json

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

package/src/components/PDFViewer.tsx

@@ -67,8 +67,22 @@ export function PDFViewer(props: PDFViewerProps) {
       testid={testid}
       open={isOpen}
       onClose={handleClose}
-      showButtons={!!customActions}
-      customActions={customActions}
+      showButtons={!!encodedPdfs.length}
+      customActions={
+        !!encodedPdfs.length && (
+          <PdfNavigation
+            testid={testid}
+            currentIndex={currentIndex}
+            total={encodedPdfs.length}
+            onPrev={handlePreviousFile}
+            onNext={handleNextFile}
+            disablePrev={currentIndex === 0}
+            disableNext={currentIndex === encodedPdfs.length - 1}
+            extraActions={customActions}
+            fileName={encodedPdfs[currentIndex].fileName}
+          />
+        )
+      }
       size="large"
       fixedHeightScrolling
       headerIconAlign="right"
@@ -90,58 +104,6 @@ export function PDFViewer(props: PDFViewerProps) {
               : `${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"}
-              key={`${pdf.fileName}-${index}`}
-              classNameLabel="items-center flex flex-row gap-2"
-              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                setCurrentIndex(index);
-
-                requestAnimationFrame(() => {
-                  const button = e.target as HTMLButtonElement;
-
-                  button.scrollIntoView({
-                    behavior: "smooth",
-                    block: "nearest",
-                    inline: "center",
-                  });
-                });
-              }}
-              disabled={isDownloading || currentIndex === index || !pdf.base64}
-            >
-              {!pdf.base64 && <Spinner />}
-              {pdf.fileName}
-            </Button>
-          ))} */}
-        </Stack>
       </Stack>
     </Modal>
   );
@@ -263,3 +225,65 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
     </div>
   );
 }
+
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName,
+}: {
+  currentIndex: number;
+  total: number;
+  onPrev: () => void;
+  onNext: () => void;
+  disablePrev: boolean;
+  disableNext: boolean;
+  extraActions?: React.ReactNode;
+  testid?: string;
+  fileName?: string;
+}) {
+  return (
+    <div className="w-full">
+      <Stack
+        horizontal
+        items="center"
+        justify="between"
+        sizing="layout-group"
+        testid={testid ? `${testid}-pdf-navigation` : undefined}
+      >
+        <Stack horizontal items="center">
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={onPrev}
+            leftIcon={<Icon name="chevron_backward" />}
+            disabled={disablePrev}
+            testid={testid ? `${testid}-pdf-file-previous-button` : undefined}
+          />
+          <Heading3 className="text-text-primary-normal whitespace-nowrap">
+            {currentIndex + 1} / {total}
+          </Heading3>
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={onNext}
+            rightIcon={<Icon name="chevron_forward" />}
+            disabled={disableNext}
+            testid={testid ? `${testid}-pdf-file-next-button` : undefined}
+          />
+          <Paragraph>
+            {fileName?.endsWith(".pdf") ? fileName : `${fileName}.pdf`}
+          </Paragraph>
+        </Stack>
+        {extraActions && (
+          <div className="flex items-center gap-2">{extraActions}</div>
+        )}
+      </Stack>
+    </div>
+  );
+}