@dmsi/wedgekit-react 0.0.1241 → 1.0.0

package/dist/chunk-AT4AWD6B.js

@@ -1,44 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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
-};

package/dist/chunk-BWPNXY7T.js

@@ -1,78 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Grid.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var GAP_BY_SIZING = {
-  none: "gap-0",
-  "layout-group": "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
-  layout: "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
-  container: "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
-  component: "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
-};
-var PADDING_BY_SIZING = {
-  none: "p-0",
-  container: "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
-  layout: "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-  "layout-group": "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
-  component: "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
-};
-var buildColumnClasses = (base, responsive) => {
-  const classes = [`grid-cols-${base}`];
-  if (responsive) {
-    Object.entries(responsive).forEach(([bp, value]) => {
-      if (value && value > 0) classes.push(`${bp}:grid-cols-${value}`);
-    });
-  }
-  return classes.join(" ");
-};
-var Grid = (_a) => {
-  var _b = _a, {
-    children,
-    sizing = "container",
-    padding,
-    columns,
-    responsive,
-    id,
-    testid,
-    style,
-    className
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "sizing",
-    "padding",
-    "columns",
-    "responsive",
-    "id",
-    "testid",
-    "style",
-    "className"
-  ]);
-  var _a2, _b2;
-  const columnClasses = buildColumnClasses(columns, responsive);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      style
-    }, rest), {
-      className: clsx(
-        "w-full grid",
-        (_a2 = GAP_BY_SIZING[sizing]) != null ? _a2 : GAP_BY_SIZING.container,
-        padding && ((_b2 = PADDING_BY_SIZING[sizing]) != null ? _b2 : PADDING_BY_SIZING.container),
-        columnClasses,
-        className
-      ),
-      children
-    })
-  );
-};
-
-export {
-  Grid
-};

package/dist/chunk-CIYLALYO.js

@@ -1,72 +0,0 @@
-import {
-  Subheader
-} from "./chunk-7Z3WINQ3.js";
-import {
-  Stack
-} from "./chunk-MVDGHWKO.js";
-
-// src/components/SimpleTable.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-function SimpleTable({
-  columns,
-  data,
-  additionalRows,
-  testid
-}) {
-  const allRows = additionalRows && additionalRows.length > 0 ? [...data, ...additionalRows] : data;
-  return /* @__PURE__ */ jsx(
-    Stack,
-    {
-      elevation: 4,
-      rounded: true,
-      overflowX: "hidden",
-      overflowY: "hidden",
-      testid,
-      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
-};

package/dist/chunk-DNNX5EYX.js

@@ -1,274 +0,0 @@
-import {
-  useMounted
-} from "./chunk-4RJKB7LC.js";
-import {
-  ModalButtons
-} from "./chunk-XB2S2QMB.js";
-import {
-  ModalContent
-} from "./chunk-6YUQCRMX.js";
-import {
-  ModalHeader
-} from "./chunk-UZHBKSXJ.js";
-import {
-  ModalScrim
-} from "./chunk-E7LGUC2B.js";
-import {
-  useMatchesMobile
-} from "./chunk-WVGXD7HT.js";
-import {
-  findDocumentRoot
-} from "./chunk-VXWSAIB5.js";
-
-// src/components/Modal.tsx
-import clsx from "clsx";
-import { useCallback, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { usePrevious } from "react-use";
-import { jsx, jsxs } from "react/jsx-runtime";
-var fadeInScale = (element, duration = 300) => element.animate(
-  [
-    { opacity: 0, transform: "scale(0.95)" },
-    { opacity: 1, transform: "scale(1)" }
-  ],
-  {
-    duration,
-    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-    fill: "both"
-  }
-);
-var fadeOutScale = (element, duration = 200) => element.animate(
-  [
-    { opacity: 1, transform: "scale(1)" },
-    { opacity: 0, transform: "scale(0.95)" }
-  ],
-  {
-    duration,
-    easing: "ease-in-out",
-    fill: "both"
-  }
-);
-var bgFadeIn = (element, duration = 300) => element.animate([{ opacity: 0 }, { opacity: 1 }], {
-  duration,
-  easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-  fill: "both"
-});
-var bgFadeOut = (element, duration = 200) => element.animate([{ opacity: 1 }, { opacity: 0 }], {
-  duration,
-  easing: "ease-in-out",
-  fill: "both"
-});
-var whenAllAnimationsFinish = (animations, callback) => {
-  let finishedCount = 0;
-  animations.forEach((animation) => {
-    animation.onfinish = () => {
-      finishedCount += 1;
-      if (finishedCount === animations.length) {
-        callback();
-      }
-    };
-  });
-};
-var sizes = {
-  small: {
-    sizeClass: "h-fit max-h-dvh desktop:max-w-120 rounded-sm"
-  },
-  medium: {
-    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240"
-  },
-  large: {
-    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240"
-  },
-  "x-large": {
-    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240"
-  },
-  screen: {
-    sizeClass: "w-screen h-dvh max-w-screen !rounded-none"
-  }
-};
-var Modal = ({
-  id,
-  testid,
-  title,
-  open = false,
-  size = "small",
-  className,
-  children,
-  onClose,
-  onContinue,
-  closeOnBackdropClick = true,
-  showButtons = false,
-  hideCloseIcon = false,
-  headerIcon,
-  headerIconAlign,
-  headerIconClassname,
-  fixedHeightScrolling = false,
-  customActions,
-  headerClassname,
-  customFooter,
-  noWrapper,
-  titleAs: TitleComponent,
-  mobileButtonStack = false
-}) => {
-  var _a;
-  const mounted = useMounted();
-  const modalRef = useRef(null);
-  const bgRef = useRef(null);
-  const wasOpen = usePrevious(open);
-  const isMobile = useMatchesMobile();
-  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  useEffect(() => {
-    if (!mounted) return;
-    if (!modalRef.current || !bgRef.current) {
-      console.error("Modal or background reference is not set.");
-      return;
-    }
-    if (wasOpen === void 0) return;
-    if (wasOpen && !open) {
-      const modalAnimation = fadeOutScale(modalRef.current);
-      const bgAnimation = bgFadeOut(bgRef.current);
-      whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
-        if (onClose) {
-          onClose();
-        }
-      });
-    } else if (!wasOpen && open) {
-      fadeInScale(modalRef.current);
-      bgFadeIn(bgRef.current);
-    }
-  }, [mounted, onClose, open, wasOpen]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        if (onClose) {
-          e.preventDefault();
-          onClose();
-        }
-      }
-    },
-    [onClose]
-  );
-  const handleClose = useCallback(() => {
-    if (onClose) {
-      onClose();
-    }
-  }, [onClose]);
-  useEffect(() => {
-    if (open) {
-      document.addEventListener("keyup", handleKeyDown);
-    }
-    return () => {
-      document.removeEventListener("keyup", handleKeyDown);
-    };
-  }, [open, handleKeyDown]);
-  useEffect(() => {
-    if (!open) return;
-    const scrollY = window.scrollY;
-    const body = document.body;
-    body.style.position = "fixed";
-    body.style.top = `-${scrollY}px`;
-    body.style.left = "0";
-    body.style.right = "0";
-    body.style.overflow = "hidden";
-    body.style.width = "100%";
-    return () => {
-      body.style.position = "";
-      body.style.top = "";
-      body.style.left = "";
-      body.style.right = "";
-      body.style.overflow = "";
-      body.style.width = "";
-      window.scrollTo(0, scrollY);
-    };
-  }, [open]);
-  const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = useCallback(
-    (e) => {
-      const target = e.target;
-      const currentTarget = e.currentTarget;
-      if (currentTarget.contains(target) && currentTarget !== target) {
-        e.stopPropagation();
-        return;
-      }
-      if (open && closeOnBackdropClick) {
-        handleClose();
-      }
-    },
-    [open, closeOnBackdropClick, handleClose]
-  );
-  if (!mounted) {
-    return null;
-  }
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      ModalScrim,
-      {
-        id: id ? `${id}-scrim` : void 0,
-        testid: testid ? `${testid}-scrim` : void 0,
-        size,
-        ref: bgRef,
-        show: open,
-        onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            id,
-            "data-testid": testid,
-            ref: modalRef,
-            className: clsx(
-              "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0",
-              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(),
-            children: [
-              /* @__PURE__ */ jsx(
-                ModalHeader,
-                {
-                  id: id ? `${id}-header` : void 0,
-                  testid: testid ? `${testid}-header` : void 0,
-                  title,
-                  onClose: handleClose,
-                  hideCloseIcon,
-                  headerIcon,
-                  headerIconAlign,
-                  headerClassname,
-                  headerIconClassname,
-                  titleAs: TitleComponent
-                }
-              ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ jsx(
-                ModalContent,
-                {
-                  id: id ? `${id}-content` : void 0,
-                  testid: testid ? `${testid}-content` : void 0,
-                  fixedHeightScrolling: computedFixedHeightScrolling,
-                  children
-                }
-              ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ jsx(
-                ModalButtons,
-                {
-                  id: id ? `${id}-buttons` : void 0,
-                  testid: testid ? `${testid}-buttons` : void 0,
-                  onClose: handleClose,
-                  onContinue,
-                  customActions,
-                  mobileButtonStack
-                }
-              ) : null
-            ]
-          }
-        )
-      }
-    ),
-    findDocumentRoot(bgRef.current)
-  );
-};
-Modal.displayName = "Modal";
-
-export {
-  Modal
-};

package/dist/chunk-E3FOCECQ.js

@@ -1,61 +0,0 @@
-import {
-  useGridContext
-} from "./chunk-5IFPG6TS.js";
-import {
-  MobileDataGridColumn
-} from "./chunk-7YA3TF73.js";
-import {
-  Stack
-} from "./chunk-MVDGHWKO.js";
-import {
-  Paragraph
-} from "./chunk-7MBRCM3M.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: "grid grid-cols-2 gap-2 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-E7LGUC2B.js

@@ -1,35 +0,0 @@
-// src/components/ModalScrim.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var ModalScrim = ({
-  show = false,
-  size = "small",
-  children,
-  onClick,
-  ref,
-  id,
-  testid
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: clsx(
-        "overflow-y-auto h-dvh 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,
-      ref,
-      children
-    }
-  );
-};
-ModalScrim.displayName = "ModalScrim";
-
-export {
-  ModalScrim
-};