@dmsi/wedgekit-react 0.0.171 → 0.0.173

package/src/components/DataGridCell.tsx

@@ -241,6 +241,8 @@ export function DataCellHeader<T>({
     predeterminedPinned.current = [...left, ...right].includes(
       header.column.id,
     );
+    // header is stable for the lifetime of the header cell
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -251,12 +253,14 @@ export function DataCellHeader<T>({
     return () => {
       clearTimeout(handler);
     };
+    // We only want to react to filter changes; header.column methods are stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
   const style: CSSProperties = {
     position: "relative",
     whiteSpace: "nowrap",
-    width: header.column.getSize(),
+    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
     "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
     "--color-icon-on-action-primary-normal":
       "var(--color-text-brand-primary-normal)",
@@ -466,7 +470,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
     transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
-    width: header.column.getSize(),
+    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
     "--color-text-primary-normal": "var(--color-action-000)",
     "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none",
@@ -506,12 +510,20 @@ export function DragAlongCell<T extends RowData, TValue>({
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    width: cell.column.getSize(),
+    width: cell.column.columnDef.meta?.headerWidth ?? cell.column.getSize(),
     zIndex: isDragging ? 1 : 0,
   };
 
   return (
-    <DataGridCell style={style} ref={setNodeRef} {...props}>
+    <DataGridCell
+      style={style}
+      ref={setNodeRef}
+      width={
+        (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
+        `${cell.column.getSize()}px`
+      }
+      {...props}
+    >
       {children}
     </DataGridCell>
   );

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>
         )}

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>