@dmsi/wedgekit-react 0.0.159 → 0.0.161

package/src/components/PDFViewer.tsx

@@ -7,6 +7,7 @@ import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { Stack } from "./Stack";
 import { Caption } from "./Caption";
+import { Spinner } from "./Spinner";
 
 type PDFViewerProps = {
   isOpen: boolean;
@@ -24,12 +25,15 @@ export function PDFViewer(props: PDFViewerProps) {
   const handleDownload = useCallback(() => {
     setIsDownloading(true);
     const link = document.createElement("a");
-    link.href = `data:application/pdf;base64,${
-      encodedPdfs[currentIndex].base64
-    }`;
-    link.download = encodedPdfs[currentIndex].fileName.endsWith(".pdf")
-      ? encodedPdfs[currentIndex].fileName
-      : `${encodedPdfs[currentIndex].fileName}.pdf`;
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf")
+      ? currentPdf.fileName
+      : `${currentPdf.fileName}.pdf`;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
@@ -46,7 +50,11 @@ export function PDFViewer(props: PDFViewerProps) {
       showButtons={!!customActions}
       customActions={customActions}
       headerIcon={
-        <DownloadIcon testid={testid ? `${testid}-download-icon` : undefined} onClick={handleDownload} isDownloading={isDownloading} />
+        <DownloadIcon
+          testid={testid ? `${testid}-download-icon` : undefined}
+          onClick={handleDownload}
+          isDownloading={isDownloading}
+        />
       }
     >
       <Stack sizing="layout">
@@ -57,6 +65,7 @@ export function PDFViewer(props: PDFViewerProps) {
               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);
 
@@ -66,12 +75,13 @@ export function PDFViewer(props: PDFViewerProps) {
                   button.scrollIntoView({
                     behavior: "smooth",
                     block: "nearest",
-                    inline: "center"
+                    inline: "center",
                   });
                 });
               }}
-              disabled={isDownloading || currentIndex === index}
+              disabled={isDownloading || currentIndex === index || !pdf.base64}
             >
+              {!pdf.base64 && <Spinner />}
               {pdf.fileName}
             </Button>
           ))}
@@ -84,7 +94,7 @@ export function PDFViewer(props: PDFViewerProps) {
 function DownloadIcon({
   onClick,
   isDownloading,
-  testid
+  testid,
 }: {
   onClick: () => void;
   isDownloading?: boolean;
@@ -101,7 +111,7 @@ function DownloadIcon({
   );
 }
 
-function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
+function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
   const [page, setPage] = useState(1);
   const canvasRef = useRef(null);
 
@@ -115,12 +125,26 @@ function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
 
   return (
     <div className="flex flex-col space-y-4">
-      {pdfDocument ? <canvas data-testid={testid ? `${testid}-pdf-content` : undefined} ref={canvasRef} /> : <div data-testid={testid ? `${testid}-pdf-loading` : undefined}>Loading PDF...</div>}
+      {pdfDocument ? (
+        <canvas
+          data-testid={testid ? `${testid}-pdf-content` : undefined}
+          ref={canvasRef}
+        />
+      ) : (
+        <div data-testid={testid ? `${testid}-pdf-loading` : undefined}>
+          Loading PDF...
+        </div>
+      )}
       {pdfDocument?.numPages && pdfDocument.numPages > 1 && (
-        <ul className="flex flex-row justify-between items-center" data-testid={testid ? `${testid}-pdf-pagination` : undefined}>
+        <ul
+          className="flex flex-row justify-between items-center"
+          data-testid={testid ? `${testid}-pdf-pagination` : undefined}
+        >
           <li className="previous">
             <button
-              data-testid={testid ? `${testid}-pdf-pagination-previous-button` : undefined}
+              data-testid={
+                testid ? `${testid}-pdf-pagination-previous-button` : undefined
+              }
               disabled={page === 1}
               onClick={() => setPage(page - 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "
@@ -128,12 +152,34 @@ function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
               <Caption>Previous</Caption>
             </button>
           </li>
-          <li data-testid={testid ? `${testid}-pdf-pagination-text` : undefined} className="text-label-desktop text-text-on-action-primary-normal">
-            Page <span data-testid={testid ? `${testid}-pdf-pagination-page-${page}` : undefined}>{page}</span> of <span data-testid={testid ? `${testid}-pdf-pagination-total-page-${pdfDocument!.numPages}` : undefined}>{pdfDocument!.numPages}</span>
+          <li
+            data-testid={testid ? `${testid}-pdf-pagination-text` : undefined}
+            className="text-label-desktop text-text-on-action-primary-normal"
+          >
+            Page{" "}
+            <span
+              data-testid={
+                testid ? `${testid}-pdf-pagination-page-${page}` : undefined
+              }
+            >
+              {page}
+            </span>{" "}
+            of{" "}
+            <span
+              data-testid={
+                testid
+                  ? `${testid}-pdf-pagination-total-page-${pdfDocument!.numPages}`
+                  : undefined
+              }
+            >
+              {pdfDocument!.numPages}
+            </span>
           </li>
           <li className="next">
             <button
-              data-testid={testid ? `${testid}-pdf-pagination-next-button` : undefined}
+              data-testid={
+                testid ? `${testid}-pdf-pagination-next-button` : undefined
+              }
               disabled={page === pdfDocument!.numPages}
               onClick={() => setPage(page + 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "

package/src/components/Spinner.tsx

@@ -15,7 +15,7 @@ export const Spinner: React.FC<SpinnerProps> = ({ size = "small", testid }) => {
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       fill="#1D1E1E"
-      className={size === "large" ? "animate-spin" : ""}
+      className="animate-spin"
       aria-label="Loading"
     >
       <circle cx="12" cy="4" r="2" opacity="1">

package/src/utils/date.ts

@@ -10,13 +10,13 @@ export function parseInputDate(input: string): string | null {
   if (!match) {
     return null;
   }
-  
+
   const [, month, day, year] = match;
-  
+
   // Pad with zeros if necessary
   const paddedMonth = month.padStart(2, "0");
   const paddedDay = day.padStart(2, "0");
-  
+
   return `${year}-${paddedMonth}-${paddedDay}`;
 }
 
@@ -25,7 +25,11 @@ export function parseInputDate(input: string): string | null {
  */
 export function isValidDate(dateString: string): boolean {
   const date = new Date(dateString);
-  return date instanceof Date && !isNaN(date.getTime()) && dateString === date.toISOString().split("T")[0];
+  return (
+    date instanceof Date &&
+    !isNaN(date.getTime()) &&
+    dateString === date.toISOString().split("T")[0]
+  );
 }
 
 /**
@@ -34,17 +38,17 @@ export function isValidDate(dateString: string): boolean {
 export function formatInputValue(value: string): string {
   // Remove all non-digits
   const digits = value.replace(/\D/g, "");
-  
+
   // Return digits as-is if less than 2
   if (digits.length < 2) {
     return digits;
   }
-  
+
   // Format with full MM/DD/YYYY pattern if 4 or more digits
   if (digits.length >= 4) {
     return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
   }
-  
+
   // Format with MM/DD pattern for 2-3 digits
   return `${digits.slice(0, 2)}/${digits.slice(2)}`;
 }
@@ -66,9 +70,12 @@ export function isSlash(character: string): boolean {
 /**
  * Count digits up to cursor position
  */
-export function countDigitsUpToCursor(value: string, cursorPosition: number): number {
+export function countDigitsUpToCursor(
+  value: string,
+  cursorPosition: number,
+): number {
   let digitCount = 0;
-  
+
   for (let i = 0; i < cursorPosition && i < value.length; i++) {
     if (!isDigit(value[i])) {
       continue;
@@ -76,69 +83,84 @@ export function countDigitsUpToCursor(value: string, cursorPosition: number): nu
 
     digitCount++;
   }
-  
+
   return digitCount;
 }
 
 /**
  * Find position after specific digit count
  */
-export function findPositionAfterDigitCount(formattedValue: string, targetDigitCount: number): number {
+export function findPositionAfterDigitCount(
+  formattedValue: string,
+  targetDigitCount: number,
+): number {
   let currentDigitCount = 0;
-  
+
   for (let i = 0; i < formattedValue.length; i++) {
     if (!isDigit(formattedValue[i])) {
       continue;
     }
-    
+
     currentDigitCount++;
-    
+
     if (currentDigitCount !== targetDigitCount) {
       continue;
     }
-    
+
     const positionAfterDigit = i + 1;
     const nextCharacter = formattedValue[positionAfterDigit];
-    
+
     // Place cursor after slash if it follows the target digit
     if (nextCharacter && isSlash(nextCharacter)) {
       return positionAfterDigit + 1;
     }
-    
+
     return positionAfterDigit;
   }
-  
+
   return formattedValue.length;
 }
 
 /**
  * Calculate cursor position after formatting
  */
-export function calculateCursorPosition(originalValue: string, formattedValue: string, originalPosition: number): number {
-  const targetDigitCount = countDigitsUpToCursor(originalValue, originalPosition);
-  const newPosition = findPositionAfterDigitCount(formattedValue, targetDigitCount);
-  
+export function calculateCursorPosition(
+  originalValue: string,
+  formattedValue: string,
+  originalPosition: number,
+): number {
+  const targetDigitCount = countDigitsUpToCursor(
+    originalValue,
+    originalPosition,
+  );
+  const newPosition = findPositionAfterDigitCount(
+    formattedValue,
+    targetDigitCount,
+  );
+
   return Math.min(newPosition, formattedValue.length);
 }
 
 /**
  * Parse date parts from YYYY-MM-DD format
  */
-export function parseDateParts(dateString: string): { year: number; month: number; day: number } | null {
+export function parseDateParts(
+  dateString: string,
+): { year: number; month: number; day: number } | null {
   const [yearStr, monthStr, dayStr] = dateString.split("-");
-  
+
   if (!yearStr || !monthStr || !dayStr) {
     return null;
   }
-  
+
   const year = parseInt(yearStr, 10);
   const month = parseInt(monthStr, 10);
   const day = parseInt(dayStr, 10);
-  
+
   if (isNaN(year) || isNaN(month) || isNaN(day)) {
     return null;
   }
-  
+
   return { year, month, day };
 }
 
@@ -158,10 +180,14 @@ export function isValidDateRange(month: number, day: number): boolean {
 /**
  * Format date parts to display format (MM/DD/YYYY)
  */
-export function formatDatePartsToDisplay(year: number, month: number, day: number): string {
+export function formatDatePartsToDisplay(
+  year: number,
+  month: number,
+  day: number,
+): string {
   const paddedMonth = month.toString().padStart(2, "0");
   const paddedDay = day.toString().padStart(2, "0");
-  
+
   return `${paddedMonth}/${paddedDay}/${year}`;
 }
 
@@ -172,21 +198,22 @@ export function formatDate(date: string): string {
   if (!date) {
     return "";
   }
-  
+
   try {
     const dateParts = parseDateParts(date);
     if (!dateParts) {
       return "";
     }
-    
+
     const { year, month, day } = dateParts;
-    
+
     if (!isValidDateRange(month, day)) {
       return "";
     }
-    
+
     return formatDatePartsToDisplay(year, month, day);
   } catch (error) {
+    console.error("Error formatting date:", error);
     return "";
   }
 }
@@ -194,11 +221,14 @@ export function formatDate(date: string): string {
 /**
  * Validate if date range is valid (to >= from)
  */
-export function isValidDateRangeOrder(fromDate: string, toDate: string): boolean {
+export function isValidDateRangeOrder(
+  fromDate: string,
+  toDate: string,
+): boolean {
   if (!fromDate || !toDate || !isValidDate(fromDate) || !isValidDate(toDate)) {
     return false;
   }
-  
+
   // Check if 'to' date is not earlier than 'from' date
   const from = new Date(fromDate);
   const to = new Date(toDate);

package/src/utils.ts

@@ -9,7 +9,7 @@ export function findDocumentRoot(
   if (!element || !(element instanceof Node)) {
     return window.document.body;
   }
-  var currentElement = element;
+  let currentElement = element;
   while (currentElement && currentElement.parentNode) {
     if (currentElement.parentNode === document) {
       return document.body;

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-AEDEFN7A.js → chunk-FFU6FB3K.js}

@@ -1,9 +1,9 @@
-import {
-  Label
-} from "./chunk-JWCT72WR.js";
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";
+import {
+  Label
+} from "./chunk-JWCT72WR.js";
 import {
   Paragraph
 } from "./chunk-HVI3CL7Y.js";