@dmsi/wedgekit-react 0.0.697 → 0.0.698

package/dist/components/index.cjs

@@ -7559,7 +7559,8 @@ function ProductImagePreview(props) {
     zoomLensSize,
     zoomFactor = 2,
     zoomWindowScaleFactor = 2.5,
-    zoomWindowOffset = 10
+    zoomWindowOffset = 10,
+    testid
   } = props;
   const isMobile = useMatchesMobile();
   const {
@@ -7584,100 +7585,108 @@ function ProductImagePreview(props) {
   });
   if (typeof isMobile === "undefined") return null;
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex gap-4 items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        ProductPrimaryImage,
-        {
-          image: active,
-          width,
-          height,
-          zoomEnabled: effectiveZoomEnabled,
-          zoomLensSize,
-          scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
-          onZoomPositionChange: handleZoomPositionChange,
-          onScrollZoom: handleScrollZoom,
-          isPlaceholder: images.length === 0
-        }
-      ) }),
-      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        ZoomWindow,
-        {
-          image: active,
-          width,
-          height,
-          pointer: zoomPoint,
-          active: zoomActive,
-          zoomFactor: currentZoomFactor,
-          scaleFactor: zoomWindowScaleFactor,
-          primaryImagePosition,
-          offset: zoomWindowOffset
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      MobileImageCarousel,
-      {
-        images,
-        currentIndex: safeIndex,
-        width,
-        height,
-        onChangeIndex: handleSelect
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      "div",
-      {
-        className: "flex justify-center gap-4",
-        style: { width: "100%", maxWidth: width },
-        "aria-label": "Product image thumbnails",
-        children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            Thumbnail,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    Stack,
+    {
+      sizing: "layout",
+      style: { width, position: "relative" },
+      testid,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex gap-4 items-start", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            ProductPrimaryImage,
             {
-              src: img.src,
-              alt: img.alt || `Thumbnail ${i + 1}`,
-              isActive: i === safeIndex,
-              onClick: () => handleSelect(i),
+              image: active,
+              width,
+              height,
+              zoomEnabled: effectiveZoomEnabled,
+              zoomLensSize,
+              scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
+              onZoomPositionChange: handleZoomPositionChange,
+              onScrollZoom: handleScrollZoom,
               isPlaceholder: images.length === 0
             }
-          ) }, img.src + i)
-        )
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      Grid,
-      {
-        sizing: "layout-group",
-        "aria-label": "Product image thumbnails",
-        style: {
-          width: "100%",
-          maxWidth: width
-        },
-        columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
-        children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            Thumbnail,
+          ) }),
+          effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            ZoomWindow,
             {
-              src: img.src,
-              alt: img.alt || `Thumbnail ${i + 1}`,
-              isActive: i === safeIndex,
-              onClick: () => handleSelect(i),
-              isPlaceholder: images.length === 0
-            },
-            img.src + i
+              image: active,
+              width,
+              height,
+              pointer: zoomPoint,
+              active: zoomActive,
+              zoomFactor: currentZoomFactor,
+              scaleFactor: zoomWindowScaleFactor,
+              primaryImagePosition,
+              offset: zoomWindowOffset
+            }
           )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          MobileImageCarousel,
+          {
+            images,
+            currentIndex: safeIndex,
+            width,
+            height,
+            onChangeIndex: handleSelect
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          "div",
+          {
+            className: "flex justify-center gap-4",
+            style: { width: "100%", maxWidth: width },
+            "aria-label": "Product image thumbnails",
+            children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+              (img, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                Thumbnail,
+                {
+                  src: img.src,
+                  alt: img.alt || `Thumbnail ${i + 1}`,
+                  isActive: i === safeIndex,
+                  onClick: () => handleSelect(i),
+                  isPlaceholder: images.length === 0
+                }
+              ) }, img.src + i)
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          Grid,
+          {
+            sizing: "layout-group",
+            "aria-label": "Product image thumbnails",
+            style: {
+              width: "100%",
+              maxWidth: width
+            },
+            columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
+            children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+              (img, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                Thumbnail,
+                {
+                  src: img.src,
+                  alt: img.alt || `Thumbnail ${i + 1}`,
+                  isActive: i === safeIndex,
+                  onClick: () => handleSelect(i),
+                  isPlaceholder: images.length === 0
+                },
+                img.src + i
+              )
+            )
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          CarouselPagination,
+          {
+            images,
+            currentIndex: safeIndex,
+            onSelect: handleSelect
+          }
         )
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      CarouselPagination,
-      {
-        images,
-        currentIndex: safeIndex,
-        onSelect: handleSelect
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 
 // src/components/CompactImagesPreview.tsx
@@ -7794,49 +7803,60 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 function SimpleTable({
   columns,
   data,
-  additionalRows
+  additionalRows,
+  testid
 }) {
   const allRows = additionalRows && additionalRows.length > 0 ? [...data, ...additionalRows] : data;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
-      var _a, _b;
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-        "th",
-        {
-          scope: "col",
-          className: (0, import_clsx36.default)(
-            "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
-            ((_a = column.meta) == null ? void 0 : _a.headerWidth) ? column.meta.headerWidth : "w-2/3"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
-        },
-        index
-      );
-    }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      "tr",
-      {
-        className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
-        children: columns.map((column, colIndex) => {
-          var _a;
-          const rawValue = column.id ? row[column.id] : null;
-          const cellValue = rawValue != null ? rawValue : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    Stack,
+    {
+      elevation: 4,
+      rounded: true,
+      overflowX: "hidden",
+      overflowY: "hidden",
+      testid,
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
+          var _a, _b;
           return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-            "td",
+            "th",
             {
+              scope: "col",
               className: (0, import_clsx36.default)(
-                "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
-                (_a = column.meta) == null ? void 0 : _a.headerWidth
+                "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
+                ((_a = column.meta) == null ? void 0 : _a.headerWidth) ? column.meta.headerWidth : "w-2/3"
               ),
-              children: cellValue !== null && cellValue !== void 0 ? typeof cellValue === "string" || typeof cellValue === "number" ? cellValue.toString() : cellValue : ""
+              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
             },
-            colIndex
+            index
           );
-        })
-      },
-      rowIndex
-    )) })
-  ] }) });
+        }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          "tr",
+          {
+            className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
+            children: columns.map((column, colIndex) => {
+              var _a;
+              const rawValue = column.id ? row[column.id] : null;
+              const cellValue = rawValue != null ? rawValue : null;
+              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                "td",
+                {
+                  className: (0, import_clsx36.default)(
+                    "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
+                    (_a = column.meta) == null ? void 0 : _a.headerWidth
+                  ),
+                  children: cellValue !== null && cellValue !== void 0 ? typeof cellValue === "string" || typeof cellValue === "number" ? cellValue.toString() : cellValue : ""
+                },
+                colIndex
+              );
+            })
+          },
+          rowIndex
+        )) })
+      ] })
+    }
+  );
 }
 
 // src/components/ListGroup.tsx
@@ -8043,7 +8063,8 @@ var import_jsx_runtime58 = require("react/jsx-runtime");
 function SkeletonParagraph({
   className = "",
   heightClassName = "h-6",
-  size = "large"
+  size = "large",
+  testid
 }) {
   const sizeClassMap = {
     small: "min-w-10 w-1/4",
@@ -8055,7 +8076,8 @@ function SkeletonParagraph({
     {
       "aria-label": "Loading content",
       role: "status",
-      className: `skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`
+      className: `skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`,
+      "data-testid": testid
     }
   );
 }
@@ -8191,7 +8213,12 @@ function Alert(_a) {
 
 // src/components/OrderCheckIcon.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
-function OrderCheckIcon(props) {
+function OrderCheckIcon(_a) {
+  var _b = _a, {
+    testid
+  } = _b, props = __objRest(_b, [
+    "testid"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "svg",
     __spreadProps(__spreadValues({
@@ -8199,7 +8226,8 @@ function OrderCheckIcon(props) {
       viewBox: "0 0 37 36",
       fill: "none",
       width: 37,
-      height: 36
+      height: 36,
+      "data-testid": testid
     }, props), {
       children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "path",

package/dist/components/index.js

@@ -8,7 +8,7 @@ import "../chunk-M7INAUAJ.js";
 import "../chunk-URAV33TJ.js";
 import {
   ProductImagePreview
-} from "../chunk-B2DVT7KT.js";
+} from "../chunk-SNENJFTN.js";
 import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
@@ -22,8 +22,8 @@ import "../chunk-I2L2DXPU.js";
 import {
   useGridContext
 } from "../chunk-5IFPG6TS.js";
-import "../chunk-ZILLGHBE.js";
 import "../chunk-AJ5M6MVX.js";
+import "../chunk-ZILLGHBE.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import {
@@ -31,13 +31,13 @@ import {
 } from "../chunk-UF5XGCSF.js";
 import {
   SimpleTable
-} from "../chunk-63WMDTVQ.js";
+} from "../chunk-FESS4LWU.js";
 import {
   SkeletonParagraph
-} from "../chunk-L3BXRDLP.js";
+} from "../chunk-KBIEWFQS.js";
 import {
   OrderCheckIcon
-} from "../chunk-34VEVX5H.js";
+} from "../chunk-NSZTJ5R4.js";
 import {
   Pagination
 } from "../chunk-LB7UT6F3.js";

package/package.json

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

package/dist/chunk-63WMDTVQ.js

@@ -1,61 +0,0 @@
-import {
-  Subheader
-} from "./chunk-BYC6QID5.js";
-import {
-  Stack
-} from "./chunk-MTGNBARV.js";
-
-// src/components/SimpleTable.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-function SimpleTable({
-  columns,
-  data,
-  additionalRows
-}) {
-  const allRows = additionalRows && additionalRows.length > 0 ? [...data, ...additionalRows] : data;
-  return /* @__PURE__ */ jsx(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
-      var _a, _b;
-      return /* @__PURE__ */ jsx(
-        "th",
-        {
-          scope: "col",
-          className: clsx(
-            "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
-            ((_a = column.meta) == null ? void 0 : _a.headerWidth) ? column.meta.headerWidth : "w-2/3"
-          ),
-          children: /* @__PURE__ */ jsx(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
-        },
-        index
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ jsx(
-      "tr",
-      {
-        className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
-        children: columns.map((column, colIndex) => {
-          var _a;
-          const rawValue = column.id ? row[column.id] : null;
-          const cellValue = rawValue != null ? rawValue : null;
-          return /* @__PURE__ */ jsx(
-            "td",
-            {
-              className: clsx(
-                "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
-                (_a = column.meta) == null ? void 0 : _a.headerWidth
-              ),
-              children: cellValue !== null && cellValue !== void 0 ? typeof cellValue === "string" || typeof cellValue === "number" ? cellValue.toString() : cellValue : ""
-            },
-            colIndex
-          );
-        })
-      },
-      rowIndex
-    )) })
-  ] }) });
-}
-
-export {
-  SimpleTable
-};