@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/{chunk-RLLQRVM7.js → chunk-2H35FETR.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk-FRHPFACM.js";
 import {
   ModalHeader
-} from "./chunk-6CPGOW6J.js";
+} from "./chunk-T36HX6QY.js";
 import {
   ModalScrim
-} from "./chunk-ZFOANBWG.js";
+} from "./chunk-AG43RS4Q.js";
 import {
   useMatchesMobile
 } from "./chunk-JUJBS4ZV.js";
@@ -81,6 +81,9 @@ var sizes = {
   },
   "x-large": {
     sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  },
+  screen: {
+    sizeClass: "w-screen h-screen max-w-screen !rounded-none"
   }
 };
 var Modal = ({
@@ -99,7 +102,10 @@ var Modal = ({
   headerIcon,
   headerIconAlign,
   fixedHeightScrolling = false,
-  customActions
+  customActions,
+  headerClassname,
+  customFooter,
+  noWrapper
 }) => {
   var _a;
   const mounted = useMounted();
@@ -207,9 +213,10 @@ var Modal = ({
             "data-testid": testid,
             ref: modalRef,
             className: clsx(
-              "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
-              computedFixedHeightScrolling && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+              "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+              computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
               className,
+              !(className == null ? void 0 : className.includes("bg-")) && "bg-white",
               sizeClass
             ),
             onClick: (e) => e.stopPropagation(),
@@ -223,10 +230,11 @@ var Modal = ({
                   onClose: handleClose,
                   hideCloseIcon,
                   headerIcon,
-                  headerIconAlign
+                  headerIconAlign,
+                  headerClassname
                 }
               ),
-              children && /* @__PURE__ */ jsx(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ jsx(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -234,8 +242,8 @@ var Modal = ({
                   fixedHeightScrolling: computedFixedHeightScrolling,
                   children
                 }
-              ),
-              showButtons && /* @__PURE__ */ jsx(
+              ) : children,
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ jsx(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -244,7 +252,7 @@ var Modal = ({
                   onContinue,
                   customActions
                 }
-              )
+              ) : null
             ]
           }
         )

package/dist/chunk-2IKT6IHB.js

@@ -0,0 +1,190 @@
+// src/components/ProductImagePreview/MobileImageCarousel.tsx
+import { useRef, useEffect, useState, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+function MobileImageCarousel({
+  images,
+  currentIndex,
+  width = 483,
+  height = 483,
+  onChangeIndex,
+  className = ""
+}) {
+  const containerRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [currentTranslate, setCurrentTranslate] = useState(0);
+  const [prevTranslate, setPrevTranslate] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(width);
+  const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
+  const gap = 16;
+  const getTranslateX = useCallback(
+    (index) => {
+      const containerCenter = containerWidth / 2;
+      const imageCenter = imageSize / 2;
+      const totalOffset = index * (imageSize + gap);
+      return containerCenter - imageCenter - totalOffset;
+    },
+    [containerWidth, imageSize, gap]
+  );
+  useEffect(() => {
+    const translateX = getTranslateX(currentIndex);
+    setCurrentTranslate(translateX);
+    setPrevTranslate(translateX);
+  }, [currentIndex, getTranslateX]);
+  useEffect(() => {
+    const updateContainerWidth = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerWidth(rect.width);
+      }
+    };
+    updateContainerWidth();
+    const resizeObserver = new ResizeObserver(updateContainerWidth);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, []);
+  const handleStart = useCallback((clientX) => {
+    setIsDragging(true);
+    setStartX(clientX);
+  }, []);
+  const handleMove = useCallback(
+    (clientX) => {
+      if (!isDragging) return;
+      const currentPosition = clientX;
+      const diff = currentPosition - startX;
+      setCurrentTranslate(prevTranslate + diff);
+    },
+    [isDragging, startX, prevTranslate]
+  );
+  const handleEnd = useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    const moved = currentTranslate - prevTranslate;
+    const threshold = imageSize / 3;
+    let newIndex = currentIndex;
+    if (moved > threshold && currentIndex > 0) {
+      newIndex = currentIndex - 1;
+    } else if (moved < -threshold && currentIndex < images.length - 1) {
+      newIndex = currentIndex + 1;
+    }
+    if (newIndex !== currentIndex) {
+      onChangeIndex(newIndex);
+    } else {
+      setCurrentTranslate(prevTranslate);
+    }
+  }, [
+    isDragging,
+    currentTranslate,
+    prevTranslate,
+    currentIndex,
+    imageSize,
+    images.length,
+    onChangeIndex
+  ]);
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    handleStart(e.clientX);
+  };
+  const handleMouseMove = (e) => {
+    e.preventDefault();
+    handleMove(e.clientX);
+  };
+  const handleMouseUp = () => {
+    handleEnd();
+  };
+  const handleMouseLeave = () => {
+    handleEnd();
+  };
+  const handleTouchStart = (e) => {
+    handleStart(e.touches[0].clientX);
+  };
+  const handleTouchMove = (e) => {
+    handleMove(e.touches[0].clientX);
+  };
+  const handleTouchEnd = () => {
+    handleEnd();
+  };
+  const handleImageClick = useCallback(
+    (index) => {
+      if (!isDragging && index !== currentIndex) {
+        onChangeIndex(index);
+      }
+    },
+    [isDragging, currentIndex, onChangeIndex]
+  );
+  if (!images.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative overflow-hidden cursor-grab active:cursor-grabbing select-none w-full",
+      style: {
+        height: imageSize
+      },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseLeave,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex items-center",
+          style: {
+            transform: `translateX(${currentTranslate}px)`,
+            transition: isDragging ? "none" : "transform 0.3s ease-out",
+            gap: `${gap}px`
+          },
+          children: images.map((image, index) => {
+            const isActive = index === currentIndex;
+            const distance = Math.abs(index - currentIndex);
+            const shouldRender = distance <= 2;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-shrink-0 transition-opacity duration-300",
+                style: {
+                  width: imageSize,
+                  height: imageSize,
+                  opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3)
+                },
+                onClick: () => handleImageClick(index),
+                children: shouldRender ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: image.src,
+                    alt: image.alt || `Product image ${index + 1}`,
+                    className: "w-full h-full object-cover",
+                    draggable: false,
+                    loading: distance <= 1 ? "eager" : "lazy",
+                    style: {
+                      aspectRatio: "1 / 1"
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
+                    style: {
+                      aspectRatio: "1 / 1"
+                    },
+                    "aria-hidden": "true"
+                  }
+                )
+              },
+              image.src + index
+            );
+          })
+        }
+      )
+    }
+  ) });
+}
+
+export {
+  MobileImageCarousel
+};

package/dist/chunk-4UNWXB4A.js

@@ -0,0 +1,89 @@
+import {
+  PdfPage
+} from "./chunk-VJVY6NPF.js";
+import {
+  Spinner
+} from "./chunk-SBRRNFOP.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
+
+// src/components/PDFViewer/PDFElement.tsx
+import { usePdf } from "@mikecousins/react-pdf";
+import { useRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+function PDFElement({
+  b64,
+  testid,
+  isMobile,
+  error
+}) {
+  var _a;
+  const canvasRef = useRef(null);
+  const { pdfDocument } = usePdf({
+    file: `data:application/pdf;base64,${b64}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3,
+    canvasRef
+  });
+  const pagesArr = new Array((_a = pdfDocument == null ? void 0 : pdfDocument.numPages) != null ? _a : 1).fill(null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex flex-col space-y-4",
+      style: !isMobile ? {
+        minHeight: 871,
+        minWidth: 654
+      } : void 0,
+      children: !!pdfDocument && !!b64 && !error ? /* @__PURE__ */ jsx(Stack, { sizing: "layout-group", children: pagesArr.length > 1 ? pagesArr.map((_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ jsx(
+            PdfPage,
+            {
+              testid: testid ? `${testid}-pdf_page_${i + 1}` : void 0,
+              file: `data:application/pdf;base64,${b64}`,
+              pageNumber: i + 1
+            }
+          )
+        },
+        `${testid}-pdf-page-${i + 1}`
+      )) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              "data-testid": testid ? `${testid}-pdf-content` : void 0,
+              ref: canvasRef,
+              style: { width: "100%", height: "auto" }
+            }
+          )
+        }
+      ) }) : /* @__PURE__ */ jsx(
+        Stack,
+        {
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          "data-testid": testid ? `${testid}-pdf-${error ? "error" : "loading"}` : void 0,
+          children: error ? error : /* @__PURE__ */ jsx(Spinner, { size: "large" })
+        }
+      )
+    }
+  );
+}
+
+export {
+  PDFElement
+};

package/dist/chunk-5IFPG6TS.js

@@ -0,0 +1,17 @@
+import {
+  GridContext
+} from "./chunk-AJ5M6MVX.js";
+
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
+import { useContext } from "react";
+function useGridContext() {
+  const ctx = useContext(GridContext);
+  if (!ctx) {
+    throw new Error("useGridContext must be used within GridContextProvider");
+  }
+  return ctx;
+}
+
+export {
+  useGridContext
+};

package/dist/{chunk-6GAYJCFE.js → chunk-6DPFKSCT.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-RJUN52HJ.js";
+} from "./chunk-ZL5X7KP6.js";
 import {
   __objRest,
   __spreadValues

package/dist/{chunk-ZFOANBWG.js → chunk-AG43RS4Q.js}

@@ -16,9 +16,10 @@ var ModalScrim = ({
       id,
       "data-testid": testid,
       className: clsx(
-        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
         size === "small" && "p-4",
+        size === "screen" ? "desktop:p-0" : "desktop:p-4",
         "inset-0 z-50"
       ),
       onMouseDown: onClick,

package/dist/chunk-AJ5M6MVX.js

@@ -0,0 +1,7 @@
+// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
+import { createContext } from "react";
+var GridContext = createContext(null);
+
+export {
+  GridContext
+};

package/dist/chunk-AT4AWD6B.js

@@ -0,0 +1,44 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Surface.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Surface = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    elevation = 0,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "elevation",
+    "id"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      className: clsx(
+        "rounded-base",
+        {
+          "shadow-2": elevation === 2,
+          "shadow-4": elevation === 4,
+          "shadow-16": elevation === 16
+        },
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+};
+Surface.displayName = "Surface";
+
+export {
+  Surface
+};

package/dist/chunk-BQNPOGD5.js

@@ -0,0 +1,105 @@
+import {
+  Surface
+} from "./chunk-AT4AWD6B.js";
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ProductImagePreview/ZoomWindow.tsx
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function ZoomWindow({
+  image,
+  width,
+  height,
+  pointer,
+  active,
+  zoomFactor = 2,
+  scaleFactor = 2,
+  primaryImagePosition,
+  offset = 10,
+  className = ""
+}) {
+  const imageSrc = useMemo(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  if (!image || !active || !pointer) return null;
+  const zoomWindowSize = pointer.lensSize * scaleFactor;
+  const baseW = pointer.w || width;
+  const baseH = pointer.h || height;
+  const scaledW = baseW * zoomFactor;
+  const scaledH = baseH * zoomFactor;
+  const centerX = pointer.x * baseW * zoomFactor;
+  const centerY = pointer.y * baseH * zoomFactor;
+  const imageOffsetX = zoomWindowSize / 2 - centerX;
+  const imageOffsetY = zoomWindowSize / 2 - centerY;
+  const calculatePosition = () => {
+    if (!primaryImagePosition) {
+      return {
+        position: "fixed",
+        zIndex: 999,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    }
+    const lensLeft = primaryImagePosition.left + pointer.x * primaryImagePosition.width - pointer.lensSize / 2;
+    const lensTop = primaryImagePosition.top + pointer.y * primaryImagePosition.height - pointer.lensSize / 2;
+    let left = lensLeft + pointer.lensSize + offset;
+    let top = lensTop;
+    const { innerWidth, innerHeight } = window;
+    if (left + zoomWindowSize > innerWidth) {
+      left = lensLeft - zoomWindowSize - offset;
+    }
+    if (top + zoomWindowSize > innerHeight) {
+      top = lensTop + pointer.lensSize - zoomWindowSize;
+    }
+    if (top < 0) {
+      top = lensTop;
+    }
+    if (left < 0) {
+      left = lensLeft + pointer.lensSize + offset;
+    }
+    return {
+      position: "fixed",
+      zIndex: 999,
+      left,
+      top
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    Surface,
+    {
+      elevation: 16,
+      className,
+      style: __spreadValues({
+        width: zoomWindowSize,
+        height: zoomWindowSize,
+        position: "fixed",
+        zIndex: 999,
+        overflow: "hidden",
+        pointerEvents: "none",
+        userSelect: "none"
+      }, calculatePosition()),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageSrc,
+          alt: "",
+          className: "pointer-events-none select-none max-w-none object-cover",
+          style: {
+            width: scaledW,
+            height: scaledH,
+            transform: `translate(${imageOffsetX}px, ${imageOffsetY}px)`
+          },
+          draggable: false,
+          loading: "lazy"
+        },
+        imageSrc
+      )
+    }
+  );
+}
+
+export {
+  ZoomWindow
+};