@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/{chunk-I3WFZOFY.js → chunk-J5V2JRIK.js}

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "./chunk-RJUN52HJ.js";
+} from "./chunk-ZL5X7KP6.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/chunk-JGJUVJKD.js

@@ -0,0 +1,283 @@
+import {
+  Thumbnail
+} from "./chunk-HPQWEZJL.js";
+import {
+  ZoomWindow
+} from "./chunk-BQNPOGD5.js";
+import {
+  CarouselPagination
+} from "./chunk-MBZ55T2D.js";
+import {
+  MobileImageCarousel
+} from "./chunk-2IKT6IHB.js";
+import {
+  ProductPrimaryImage
+} from "./chunk-CQFPNZTN.js";
+import {
+  Grid
+} from "./chunk-ER6RCOH3.js";
+import {
+  useMatchesMobile
+} from "./chunk-JUJBS4ZV.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
+
+// src/components/ProductImagePreview/useProductImagePreview.ts
+import { useCallback, useEffect, useRef, useState, useMemo } from "react";
+function useProductImagePreview(props) {
+  const {
+    images,
+    currentIndex,
+    zoomEnabled = false,
+    zoomFactor = 2,
+    scrollToZoomEnabled = false,
+    onChangeIndex,
+    isMobile = false
+  } = props;
+  const hasImages = !!(images == null ? void 0 : images.length);
+  const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
+  const active = useMemo(() => {
+    return hasImages ? images[safeIndex] : void 0;
+  }, [hasImages, images, safeIndex]);
+  const [zoomPoint, setZoomPoint] = useState(null);
+  const [zoomActive, setZoomActive] = useState(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = useState(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] = useState(null);
+  const primaryImageRef = useRef(null);
+  const cleanupRef = useRef(null);
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
+  useEffect(() => {
+    if (!effectiveZoomEnabled) return;
+    const setupTracking = () => {
+      const element = primaryImageRef.current;
+      if (!element) return;
+      const updatePosition = () => {
+        if (element) {
+          setPrimaryImagePosition(element.getBoundingClientRect());
+        }
+      };
+      updatePosition();
+      const resizeObserver = new ResizeObserver(updatePosition);
+      resizeObserver.observe(element);
+      window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+      cleanupRef.current = () => {
+        resizeObserver.disconnect();
+        window.removeEventListener("scroll", updatePosition);
+        window.removeEventListener("resize", updatePosition);
+      };
+    };
+    if (primaryImageRef.current) {
+      setupTracking();
+    } else {
+      const frameId = requestAnimationFrame(setupTracking);
+      return () => cancelAnimationFrame(frameId);
+    }
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+    };
+  }, [effectiveZoomEnabled]);
+  const handleSelect = useCallback(
+    (idx) => {
+      if (idx === safeIndex) return;
+      onChangeIndex(idx);
+    },
+    [safeIndex, onChangeIndex]
+  );
+  const handleNext = useCallback(() => {
+    if (!hasImages) return;
+    const nextIndex = (safeIndex + 1) % images.length;
+    onChangeIndex(nextIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+  const handlePrevious = useCallback(() => {
+    if (!hasImages) return;
+    const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
+    onChangeIndex(previousIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+  const handleZoomPositionChange = useCallback(
+    (p, active2) => {
+      if (isMobile) return;
+      setZoomPoint(p);
+      setZoomActive(active2);
+    },
+    [isMobile]
+  );
+  const handleScrollZoom = useCallback(
+    (delta) => {
+      if (!effectiveScrollToZoomEnabled) return;
+      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
+      setCurrentZoomFactor(newZoomFactor);
+    },
+    [effectiveScrollToZoomEnabled, currentZoomFactor]
+  );
+  useEffect(() => {
+    setCurrentZoomFactor(zoomFactor);
+  }, [zoomFactor]);
+  return {
+    // State
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    hasImages,
+    safeIndex,
+    active,
+    // Refs
+    primaryImageRef,
+    // Handlers
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom,
+    handleNext,
+    handlePrevious
+  };
+}
+
+// src/components/ProductImagePreview/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PLACEHOLDER_IMAGES = [
+  { src: "", alt: "placeholder" },
+  { src: "", alt: "placeholder" }
+];
+function ProductImagePreview(props) {
+  const {
+    width = 483,
+    height = 483,
+    thumbsPerRow = 4,
+    zoomEnabled = false,
+    scrollToZoomEnabled = false,
+    images,
+    currentIndex,
+    onChangeIndex,
+    zoomLensSize,
+    zoomFactor = 2,
+    zoomWindowScaleFactor = 2.5,
+    zoomWindowOffset = 10
+  } = props;
+  const isMobile = useMatchesMobile();
+  const {
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    safeIndex,
+    active,
+    primaryImageRef,
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom
+  } = useProductImagePreview({
+    images,
+    currentIndex,
+    zoomEnabled,
+    zoomFactor,
+    scrollToZoomEnabled,
+    onChangeIndex,
+    isMobile
+  });
+  if (typeof isMobile === "undefined") return null;
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+  return /* @__PURE__ */ jsxs(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-start", children: [
+      /* @__PURE__ */ jsx("div", { ref: primaryImageRef, children: /* @__PURE__ */ jsx(
+        ProductPrimaryImage,
+        {
+          image: active,
+          width,
+          height,
+          zoomEnabled: effectiveZoomEnabled,
+          zoomLensSize,
+          scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
+          onZoomPositionChange: handleZoomPositionChange,
+          onScrollZoom: handleScrollZoom,
+          isPlaceholder: images.length === 0
+        }
+      ) }),
+      effectiveZoomEnabled && /* @__PURE__ */ jsx(
+        ZoomWindow,
+        {
+          image: active,
+          width,
+          height,
+          pointer: zoomPoint,
+          active: zoomActive,
+          zoomFactor: currentZoomFactor,
+          scaleFactor: zoomWindowScaleFactor,
+          primaryImagePosition,
+          offset: zoomWindowOffset
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      MobileImageCarousel,
+      {
+        images,
+        currentIndex: safeIndex,
+        width,
+        height,
+        onChangeIndex: handleSelect
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ 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__ */ jsx("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+      CarouselPagination,
+      {
+        images,
+        currentIndex: safeIndex,
+        onSelect: handleSelect
+      }
+    )
+  ] });
+}
+
+export {
+  ProductImagePreview
+};

package/dist/chunk-KEMCFN4U.js

@@ -0,0 +1,78 @@
+import {
+  ModalContent
+} from "./chunk-VVXPGI2P.js";
+import {
+  useGridContext
+} from "./chunk-5IFPG6TS.js";
+import {
+  Modal
+} from "./chunk-2H35FETR.js";
+import {
+  Heading2
+} from "./chunk-EU73QPW7.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-WWAPK5PH.js";
+
+// src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RowDetailModalProvider() {
+  var _a;
+  const context = useGridContext();
+  const {
+    id,
+    testid,
+    isRowDetailOpen,
+    currentRow,
+    primaryKey,
+    closeRowDetail
+  } = context;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      fixedHeightScrolling: true,
+      open: isRowDetailOpen,
+      onClose: closeRowDetail,
+      hideCloseIcon: true,
+      size: "medium",
+      className: "!p-0",
+      headerIcon: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          horizontal: true,
+          horizontalMobile: true,
+          items: "center",
+          justify: "between",
+          width: "full",
+          children: [
+            /* @__PURE__ */ jsx(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                id: id ? `${id}-open-in-new-button` : void 0,
+                testid: testid ? `${testid}-open-in-new-button` : void 0,
+                iconOnly: true,
+                variant: "tertiary",
+                onClick: closeRowDetail,
+                leftIcon: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "open_in_new", size: 24 }) })
+              }
+            )
+          ]
+        }
+      ),
+      customActions: /* @__PURE__ */ jsx(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      showButtons: true,
+      children: /* @__PURE__ */ jsx("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ jsx(ModalContent, {}) })
+    }
+  );
+}
+
+export {
+  RowDetailModalProvider
+};

package/dist/chunk-M6TSTDNZ.js

@@ -0,0 +1,22 @@
+import {
+  Paragraph
+} from "./chunk-OGIFIPKH.js";
+
+// src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
+import { jsxs } from "react/jsx-runtime";
+function MobileDataGridColumn(props) {
+  var _a;
+  const { column, data } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
+    /* @__PURE__ */ jsxs(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+      (_a = column.header) == null ? void 0 : _a.toString(),
+      ":"
+    ] }),
+    " ",
+    column.id && data[column.id] ? data[column.id] : null
+  ] });
+}
+
+export {
+  MobileDataGridColumn
+};

package/dist/chunk-M7INAUAJ.js

@@ -0,0 +1,140 @@
+import {
+  GridContext
+} from "./chunk-AJ5M6MVX.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/MobileDataGrid/GridContextProvider/index.tsx
+import { useCallback, useMemo, useReducer, useState } from "react";
+
+// src/components/MobileDataGrid/dataGridReducer.ts
+function dataGridReducer(state, action) {
+  var _a, _b, _c;
+  const { type, payload } = action;
+  let itemIndex = null;
+  if (action.type === "INSERT" && action.pos === "INDEX")
+    itemIndex = action.index;
+  if (action.type === "UPDATE")
+    itemIndex = (_a = action.index) != null ? _a : state.filter(({ id }) => !!id).findIndex(({ id }) => id === action.id);
+  switch (type) {
+    case "SET":
+      return [...payload];
+    case "UPDATE":
+      if (typeof itemIndex !== "number" || itemIndex < 0)
+        throw new Error("action.(id | index) must be provided.");
+      return [
+        ...state.slice(0, itemIndex),
+        __spreadProps(__spreadValues(__spreadValues({}, state[itemIndex]), payload), {
+          meta: __spreadValues(__spreadValues({}, (_b = state[itemIndex].meta) != null ? _b : {}), (_c = payload.meta) != null ? _c : {})
+        }),
+        ...state.slice(itemIndex + 1)
+      ];
+    default:
+      throw new Error("Action type not implemented.");
+  }
+}
+
+// src/components/MobileDataGrid/GridContextProvider/index.tsx
+import { jsx } from "react/jsx-runtime";
+function GridContextProvider(props) {
+  const {
+    initialColumns,
+    id,
+    testid,
+    children,
+    data,
+    numberOfColumnsToShow,
+    primaryKey,
+    getId,
+    onRowSelect
+  } = props;
+  const [columns, dispatch] = useReducer(dataGridReducer, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = useState([]);
+  const [currentRow, setCurrentRow] = useState(null);
+  const resetColumnVisibility = useCallback(() => {
+    const newColumns = columns.map((column) => {
+      var _a;
+      const initialColumn = initialColumns.find((c) => c.id === column.id);
+      return __spreadProps(__spreadValues({}, column), {
+        meta: __spreadProps(__spreadValues({}, column.meta), {
+          visible: (_a = initialColumn == null ? void 0 : initialColumn.meta) == null ? void 0 : _a.visible
+        })
+      });
+    });
+    dispatch({ type: "SET", payload: newColumns });
+  }, [columns, initialColumns]);
+  const handleRowSelect = useCallback(
+    (item) => {
+      var _a;
+      const rowId = (_a = getId(item)) != null ? _a : "";
+      if (!rowId) return;
+      const nextSelected = selectedRowIds.includes(rowId) ? selectedRowIds.filter((id2) => id2 !== rowId) : [...selectedRowIds, rowId];
+      setSelectedRowIds(nextSelected);
+      if (onRowSelect) onRowSelect(item, nextSelected);
+    },
+    [getId, onRowSelect, selectedRowIds]
+  );
+  const handleRowSelectAll = useCallback(() => {
+    setSelectedRowIds((prev) => {
+      if (prev.length === data.length) {
+        return [];
+      }
+      return data.map(getId).filter((id2) => id2 !== void 0);
+    });
+  }, [data, getId]);
+  const openRowDetail = useCallback((row) => {
+    setCurrentRow(row);
+  }, []);
+  const closeRowDetail = useCallback(() => {
+    setCurrentRow(null);
+  }, []);
+  const visibleColumns = useMemo(() => {
+    const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
+    if (primaryKey) {
+      const pkColumn = columns.find((col) => col.id === String(primaryKey));
+      const otherColumns = columns.filter(
+        (col) => col.id !== String(primaryKey)
+      );
+      const orderedColumns = pkColumn ? [pkColumn, ...otherColumns] : [...otherColumns];
+      return orderedColumns.filter((x) => {
+        var _a;
+        return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
+      }).slice(0, effectiveLimit);
+    }
+    return columns.filter((x) => {
+      var _a;
+      return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
+    }).slice(0, effectiveLimit);
+  }, [columns, numberOfColumnsToShow, primaryKey]);
+  return /* @__PURE__ */ jsx(
+    GridContext.Provider,
+    {
+      value: {
+        columns,
+        testid,
+        id,
+        data,
+        selectedRowIds,
+        visibleColumns,
+        numberOfColumnsToShow,
+        primaryKey,
+        dispatch,
+        getId,
+        resetColumnVisibility,
+        handleRowSelect,
+        handleRowSelectAll,
+        isRowDetailOpen: !!currentRow,
+        currentRow,
+        openRowDetail,
+        closeRowDetail
+      },
+      children
+    }
+  );
+}
+
+export {
+  GridContextProvider
+};

package/dist/chunk-MBZ55T2D.js

@@ -0,0 +1,51 @@
+// src/components/ProductImagePreview/CarouselPagination.tsx
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+function CarouselPagination({
+  images,
+  currentIndex,
+  onSelect,
+  className
+}) {
+  if (!(images == null ? void 0 : images.length)) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "flex items-center justify-center w-full px-4 md:hidden",
+        className
+      ),
+      "aria-label": "Image navigation",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid gap-2 place-items-center",
+          style: {
+            gridTemplateColumns: `repeat(${Math.min(images.length, 8)}, 1fr)`
+          },
+          role: "tablist",
+          children: images.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelect(index),
+              className: clsx(
+                "w-4 h-4 transition-all duration-200 focus:outline-none",
+                index === currentIndex ? "ring-2 ring-brand-400" : "ring ring-neutral-300"
+              ),
+              "aria-label": `Go to image ${index + 1}`,
+              role: "tab",
+              "aria-selected": index === currentIndex,
+              tabIndex: index === currentIndex ? 0 : -1
+            },
+            index
+          ))
+        }
+      )
+    }
+  );
+}
+
+export {
+  CarouselPagination
+};

package/dist/chunk-N6PNLLNS.js

@@ -0,0 +1,77 @@
+import {
+  Heading3
+} from "./chunk-EU73QPW7.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
+import {
+  Paragraph
+} from "./chunk-OGIFIPKH.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-WWAPK5PH.js";
+
+// src/components/PDFViewer/PDFNavigation.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      horizontal: true,
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: testid ? `${testid}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onPrev,
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_backward" }),
+              disabled: disablePrev,
+              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ jsxs(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            currentIndex + 1,
+            " / ",
+            total
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onNext,
+              rightIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_forward" }),
+              disabled: disableNext,
+              testid: testid ? `${testid}-pdf-file-next-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+        ] }),
+        extraActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: extraActions })
+      ]
+    }
+  ) });
+}
+
+export {
+  PdfNavigation
+};

package/dist/{chunk-ZA5E7ZYM.js → chunk-NXGUDYRR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-W32JB47H.js";
 import {
   MenuOption
-} from "./chunk-OXSBIBGT.js";
+} from "./chunk-CKQNJNU3.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";