@dmsi/wedgekit-react 0.0.1277 → 1.0.1

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
-};

package/dist/chunk-EWGHVZL5.js

@@ -1,27 +0,0 @@
-// src/components/Theme.tsx
-import { jsx } from "react/jsx-runtime";
-function Theme({
-  theme,
-  children,
-  id,
-  testid,
-  ref
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: "contents",
-      "data-theme": theme,
-      ref: (e) => {
-        if (ref) ref.current = e;
-      },
-      children
-    }
-  );
-}
-
-export {
-  Theme
-};

package/dist/chunk-F4VE3THQ.js

@@ -1,71 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Card.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-function Card(props) {
-  const _a = props, {
-    children,
-    selected,
-    testid,
-    padding,
-    paddingX,
-    paddingY,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    elevation = 4
-  } = _a, rest = __objRest(_a, [
-    "children",
-    "selected",
-    "testid",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingBottom",
-    "paddingTop",
-    "paddingLeft",
-    "paddingRight",
-    "elevation"
-  ]);
-  const CardComponent = props.as || "div";
-  const anyPaddingPropSpecified = padding !== void 0 || paddingX !== void 0 || paddingY !== void 0 || paddingBottom !== void 0 || paddingTop !== void 0 || paddingLeft !== void 0 || paddingRight !== void 0;
-  const paddingClasses = clsx(
-    // Backward compatibility: if no new padding props provided keep existing class.
-    !anyPaddingPropSpecified && "p-desktop-layout-padding",
-    // New responsive spacing tokens (mirrors Stack for layout sizing)
-    padding && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-    paddingX && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
-    paddingY && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-    paddingBottom && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-    paddingTop && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
-    paddingLeft && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
-    paddingRight && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding"
-  );
-  return /* @__PURE__ */ jsx(
-    CardComponent,
-    __spreadProps(__spreadValues({}, rest), {
-      "data-testid": testid,
-      className: clsx(
-        "rounded-sm",
-        paddingClasses,
-        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
-        elevation === 0 && "shadow-none",
-        elevation === 2 && "shadow-2",
-        elevation === 4 && "shadow-4",
-        elevation === 16 && "shadow-16",
-        rest.className
-      ),
-      children
-    })
-  );
-}
-
-export {
-  Card
-};