@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/chunk-P36QKH26.js

@@ -0,0 +1,143 @@
+import {
+  useGridContext
+} from "./chunk-5IFPG6TS.js";
+import {
+  MobileDataGridColumn
+} from "./chunk-M6TSTDNZ.js";
+import {
+  Checkbox
+} from "./chunk-NO5BIKWS.js";
+import {
+  Subheader
+} from "./chunk-FA7IFW66.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
+import {
+  Paragraph
+} from "./chunk-OGIFIPKH.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
+
+// src/components/MobileDataGrid/MobileDataGridCard/index.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MobileDataGridCard({
+  renderLink,
+  renderChevron = true,
+  data,
+  enableRowSelection,
+  selected,
+  rowActions
+}) {
+  var _a;
+  const context = useGridContext();
+  const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id: id ? `${id}-card-${getId(data)}` : void 0,
+      "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
+      className: clsx(
+        "hover:bg-action-100 cursor-pointer list-none",
+        selected ? "bg-action-100" : "bg-background-grouped-primary-normal"
+      ),
+      onClick: () => openRowDetail(data),
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ jsx(
+              Stack,
+              {
+                sizing: "component",
+                padding: true,
+                width: "fit",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
+                    testid: testid ? `${testid}-${getId(data)}-select-checkbox` : void 0,
+                    checked: selected,
+                    onChange: () => handleRowSelect(data)
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Stack,
+              {
+                sizing: "component",
+                padding: true,
+                onClick: (e) => e.stopPropagation(),
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ jsx(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Stack,
+              {
+                horizontal: true,
+                horizontalMobile: true,
+                items: "center",
+                justify: "end",
+                sizing: "component",
+                onClick: (e) => e.stopPropagation(),
+                children: rowActions && (typeof rowActions === "function" ? rowActions(data) : rowActions)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+            var _a2, _b;
+            return ((_a2 = x.meta) == null ? void 0 : _a2.visible) !== false && !((_b = x.id) == null ? void 0 : _b.startsWith("__"));
+          }).map(
+            (column, index) => {
+              var _a2, _b;
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Paragraph,
+                      {
+                        color: "text-secondary-normal",
+                        className: "text-left",
+                        children: [
+                          (_b = column.header) == null ? void 0 : _b.toString(),
+                          ":"
+                        ]
+                      }
+                    ),
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      column.meta.mobileCell,
+                      {
+                        column,
+                        row: data,
+                        cellValue: data[column.id]
+                      }
+                    )
+                  ]
+                },
+                `${column.id}-${index}`
+              ) : /* @__PURE__ */ jsx(
+                MobileDataGridColumn,
+                {
+                  column,
+                  data
+                },
+                `${column.id}-${index}`
+              );
+            }
+          ) })
+        ] }),
+        renderChevron && /* @__PURE__ */ jsx(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ jsx(Icon, { name: "keyboard_arrow_down" }) })
+      ]
+    }
+  );
+}
+
+export {
+  MobileDataGridCard
+};

package/dist/chunk-PTRZHGHA.js

@@ -0,0 +1,89 @@
+import {
+  useMatchesMobile
+} from "./chunk-JUJBS4ZV.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
+
+// src/components/CompactImagesPreview.tsx
+import { useCallback } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CompactImagesPreview(props) {
+  const {
+    sources,
+    currentSourceIndex = 0,
+    activeImageHeight = 243,
+    activeImageWidth = 242,
+    thumbnailWidth = 30.5,
+    thumbnailHeight = 30,
+    enableThumbnailBorder = false,
+    placeholderImageUri,
+    onChangeSource
+  } = props;
+  const isMobile = useMatchesMobile();
+  const imagesCount = sources.length;
+  const handleThumbnailClick = useCallback(
+    (newIndex) => {
+      if (newIndex === currentSourceIndex) return;
+      if (newIndex < 0 || newIndex >= imagesCount) return;
+      onChangeSource(newIndex);
+    },
+    [currentSourceIndex, onChangeSource, imagesCount]
+  );
+  if (!sources.length || currentSourceIndex >= sources.length || typeof isMobile === "undefined")
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: "object-center",
+        style: { width: activeImageWidth, height: activeImageHeight },
+        src: placeholderImageUri,
+        alt: "placeholder image"
+      }
+    );
+  const currentSource = sources[currentSourceIndex];
+  return /* @__PURE__ */ jsxs(Stack, { sizing: "layout", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        style: {
+          width: isMobile ? "100%" : activeImageWidth,
+          height: activeImageHeight,
+          objectPosition: "center"
+        },
+        src: currentSource.uri,
+        alt: currentSource.name
+      }
+    ),
+    sources.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.map((source, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: (e) => {
+          e.preventDefault();
+          handleThumbnailClick(index);
+        },
+        className: clsx(
+          "cursor-pointer",
+          currentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: source.uri,
+            alt: source.name,
+            style: {
+              width: thumbnailWidth,
+              height: thumbnailHeight,
+              objectPosition: "center"
+            }
+          }
+        )
+      },
+      `compact-image-${source.uri}-${index}`
+    )) })
+  ] });
+}
+
+export {
+  CompactImagesPreview
+};

package/dist/chunk-QVWYTQKL.js

@@ -0,0 +1,29 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ImagePlaceholder.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ImagePlaceholder(props) {
+  const clipId = useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 242,
+      height: 243,
+      fill: "none"
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
+      ]
+    })
+  );
+}
+
+export {
+  ImagePlaceholder
+};

package/dist/{chunk-6CPGOW6J.js → chunk-T36HX6QY.js}

@@ -22,7 +22,8 @@ var ModalHeader = ({
   headerIconAlign,
   onClose,
   id,
-  testid
+  testid,
+  headerClassname
 }) => {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -35,10 +36,11 @@ var ModalHeader = ({
         headerIconAlign === "right" && "justify-end",
         headerIconAlign === "left" && "justify-start",
         layoutPaddding,
-        layoutGroupGap
+        layoutGroupGap,
+        headerClassname
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ jsx(
             Heading2,
@@ -58,7 +60,7 @@ var ModalHeader = ({
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
-            leftIcon: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }) })
+            leftIcon: /* @__PURE__ */ jsx("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }) })
           }
         )
       ]

package/dist/chunk-U6PUOGG4.js

@@ -0,0 +1,114 @@
+import {
+  DownloadIcon
+} from "./chunk-EJSPFQCY.js";
+import {
+  PDFElement
+} from "./chunk-4UNWXB4A.js";
+import {
+  PdfNavigation
+} from "./chunk-N6PNLLNS.js";
+import {
+  Modal
+} from "./chunk-2H35FETR.js";
+
+// src/components/PDFViewer/index.tsx
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function PDFViewer(props) {
+  const {
+    isOpen,
+    onClose,
+    encodedPdfs,
+    customActions,
+    testid,
+    isMobile,
+    title,
+    customFooter = false,
+    withPagination = true,
+    error
+  } = props;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const handleDownload = useCallback(() => {
+    setIsDownloading(true);
+    const link = document.createElement("a");
+    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);
+    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,
+      customFooter,
+      onClose: handleClose,
+      noWrapper: true,
+      showButtons: isMobile && customFooter ? !!customActions : !!encodedPdfs.length,
+      customActions: !!encodedPdfs.length && !isMobile && withPagination ? /* @__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
+        }
+      ) : customActions,
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
+      headerIcon: !isMobile ? /* @__PURE__ */ jsx(
+        DownloadIcon,
+        {
+          testid: testid ? `${testid}-download-icon` : void 0,
+          onClick: handleDownload,
+          isDownloading
+        }
+      ) : void 0,
+      title: isMobile ? title != null ? title : encodedPdfs[currentIndex].fileName : void 0,
+      size: isMobile ? "screen" : "large",
+      headerClassname: "bg-brand-400 desktop:bg-background-grouped-primary-normal p-mobile-layout-padding text-brand-text-action-primary-normal",
+      children: /* @__PURE__ */ jsx(
+        PDFElement,
+        {
+          testid,
+          b64: encodedPdfs[currentIndex].base64,
+          isMobile,
+          error
+        }
+      )
+    }
+  );
+}
+
+export {
+  PDFViewer
+};

package/dist/{chunk-NQXZBWDZ.js → chunk-V6U7LU6M.js}

@@ -70,7 +70,9 @@ var Stack = (_a) => {
     noGap,
     marginTop,
     marginBottom,
-    testid
+    testid,
+    bottom,
+    zIndex
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -107,8 +109,11 @@ var Stack = (_a) => {
     "noGap",
     "marginTop",
     "marginBottom",
-    "testid"
+    "testid",
+    "bottom",
+    "zIndex"
   ]);
+  var _a2, _b2, _c, _d, _e;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ jsx(
@@ -119,9 +124,9 @@ var Stack = (_a) => {
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
+        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
@@ -130,7 +135,11 @@ var Stack = (_a) => {
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
         position: position !== void 0 ? position : void 0,
         top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
       },
       className: clsx(
         "scrollbar-thin",

package/dist/chunk-VJVY6NPF.js

@@ -0,0 +1,32 @@
+// src/components/PDFViewer/PDFPage.tsx
+import { usePdf } from "@mikecousins/react-pdf";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function PdfPage({
+  file,
+  pageNumber,
+  testid,
+  isMobile
+}) {
+  const canvasRef = useRef(null);
+  const { pdfDocument } = usePdf({
+    file,
+    page: pageNumber,
+    canvasRef,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3
+  });
+  if (!pdfDocument) return null;
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-testid": testid,
+      style: { width: "100%", height: "auto" }
+    }
+  );
+}
+
+export {
+  PdfPage
+};

package/dist/chunk-VVXPGI2P.js

@@ -0,0 +1,61 @@
+import {
+  useGridContext
+} from "./chunk-5IFPG6TS.js";
+import {
+  MobileDataGridColumn
+} from "./chunk-M6TSTDNZ.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
+import {
+  Paragraph
+} from "./chunk-OGIFIPKH.js";
+
+// src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ModalContent() {
+  const context = useGridContext();
+  const { columns, currentRow } = context;
+  if (!currentRow) return null;
+  return /* @__PURE__ */ jsx(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+    var _a;
+    return !((_a = x.id) == null ? void 0 : _a.startsWith("__"));
+  }).map(
+    (column, index) => {
+      var _a, _b;
+      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
+          children: [
+            /* @__PURE__ */ jsxs(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+              (_b = column.header) == null ? void 0 : _b.toString(),
+              ":"
+            ] }),
+            " ",
+            /* @__PURE__ */ jsx(
+              column.meta.mobileCell,
+              {
+                column,
+                row: currentRow,
+                cellValue: currentRow == null ? void 0 : currentRow[column.id]
+              }
+            )
+          ]
+        },
+        `${column.id}-${index}`
+      ) : /* @__PURE__ */ jsx(
+        MobileDataGridColumn,
+        {
+          column,
+          data: currentRow
+        },
+        `${column.id}-${index}`
+      );
+    }
+  ) });
+}
+
+export {
+  ModalContent
+};

package/dist/{chunk-ARQBSR3I.js → chunk-YCKRVNJ3.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk-WPEDVM56.js";
 import {
   MenuOption
-} from "./chunk-OXSBIBGT.js";
-import {
-  Search
-} from "./chunk-6GAYJCFE.js";
+} from "./chunk-CKQNJNU3.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";
+import {
+  Search
+} from "./chunk-6DPFKSCT.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/chunk-YYHQLQDQ.js

@@ -0,0 +1,68 @@
+import {
+  MobileDataGridCard
+} from "./chunk-P36QKH26.js";
+import {
+  useGridContext
+} from "./chunk-5IFPG6TS.js";
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/MobileDataGrid/ColumnList.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ColumnList(props) {
+  const {
+    withBorder,
+    renderLink,
+    renderChevron,
+    footer: Footer,
+    enableRowSelection,
+    rowActions
+  } = props;
+  const ctx = useGridContext();
+  const { id, testid, data, getId, selectedRowIds } = ctx;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
+        !!Footer && "mb-20"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          id,
+          "data-testid": testid,
+          className: clsx(
+            "rounded absolute top-0 left-0 w-full flex-1",
+            "divide-y divide-border-primary-normal",
+            withBorder && "border border-border-primary-normal"
+          ),
+          children: [
+            data.map((item) => {
+              const id2 = getId(item);
+              return /* @__PURE__ */ jsx(
+                MobileDataGridCard,
+                {
+                  data: item,
+                  renderLink,
+                  enableRowSelection,
+                  selected: !!id2 && selectedRowIds.includes(id2),
+                  renderChevron,
+                  rowActions
+                },
+                id2
+              );
+            }),
+            !!Footer && /* @__PURE__ */ jsx("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ jsx(Footer, __spreadValues({}, ctx)) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  ColumnList
+};