@dmsi/wedgekit-react 0.0.1277 → 1.0.1

package/dist/chunk-PE3EZP56.js

@@ -1,373 +0,0 @@
-import {
-  useMatchesMobile
-} from "./chunk-WVGXD7HT.js";
-import {
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/useMenuSystem.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
-function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = useState(
-    {}
-  );
-  const [activeMenu, setActiveMenu] = useState("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = useState(
-    null
-  );
-  const menuRootRef = useRef(null);
-  const subMenuRefs = useRef({});
-  const hoverTimeoutRef = useRef(null);
-  const closeTimeoutRef = useRef(null);
-  const mouseStopTimeoutRef = useRef(null);
-  const isMouseMovingRef = useRef(false);
-  const pendingOpenActionRef = useRef(null);
-  const pendingCloseActionRef = useRef(null);
-  const isMobile = useMatchesMobile();
-  const toggleMenu = (menuId, level) => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    setActiveMenu(menuId);
-    setCurrentSubMenuLevel(level);
-    setActiveMenus((prev) => {
-      const newActiveMenus = __spreadValues({}, prev);
-      if (newActiveMenus[level] === menuId) {
-        delete newActiveMenus[level];
-      } else {
-        newActiveMenus[level] = menuId;
-      }
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) > level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-      return newActiveMenus;
-    });
-  };
-  const openMenu = (menuId, level) => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    setActiveMenus((prev) => {
-      const newActiveMenus = __spreadValues({}, prev);
-      newActiveMenus[level] = menuId;
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) > level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-      return newActiveMenus;
-    });
-  };
-  const executePendingActions = useCallback(() => {
-    if (pendingCloseActionRef.current) {
-      pendingCloseActionRef.current();
-      pendingCloseActionRef.current = null;
-    }
-    if (pendingOpenActionRef.current) {
-      pendingOpenActionRef.current();
-      pendingOpenActionRef.current = null;
-    }
-  }, []);
-  const openMenuWithDelay = (menuId, level, delay = 150) => {
-    if (isMobile) {
-      return;
-    }
-    pendingOpenActionRef.current = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
-      hoverTimeoutRef.current = setTimeout(() => {
-        openMenu(menuId, level);
-      }, delay);
-    };
-    if (!isMouseMovingRef.current) {
-      executePendingActions();
-    }
-  };
-  const closeMenuWithDelay = (level, delay = 500) => {
-    if (isMobile) {
-      return;
-    }
-    pendingCloseActionRef.current = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = null;
-      }
-      closeTimeoutRef.current = setTimeout(() => {
-        closeSubMenuLevel(level);
-      }, delay);
-    };
-    if (!isMouseMovingRef.current) {
-      executePendingActions();
-    }
-  };
-  const handleMouseMove = () => {
-    isMouseMovingRef.current = true;
-    if (mouseStopTimeoutRef.current) {
-      clearTimeout(mouseStopTimeoutRef.current);
-    }
-    mouseStopTimeoutRef.current = setTimeout(() => {
-      isMouseMovingRef.current = false;
-      executePendingActions();
-    }, 200);
-  };
-  const cancelCloseTimeout = () => {
-    if (isMobile) {
-      return;
-    }
-    if (mouseStopTimeoutRef.current) {
-      clearTimeout(mouseStopTimeoutRef.current);
-      mouseStopTimeoutRef.current = null;
-      isMouseMovingRef.current = false;
-    }
-  };
-  const closeSubMenuLevel = (level) => {
-    setActiveMenus((prev) => {
-      const newActiveMenus = __spreadValues({}, prev);
-      delete newActiveMenus[level];
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) >= level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-      if (isMobile) {
-        const newSubMenuLevel = level - 1;
-        setCurrentSubMenuLevel(newSubMenuLevel);
-        const newActiveMenu = newActiveMenus[newSubMenuLevel];
-        if (Object.keys(newActiveMenus).length > 0 && newActiveMenu) {
-          setActiveMenu(newActiveMenu);
-        }
-      }
-      return newActiveMenus;
-    });
-  };
-  const registerSubMenu = (id, element) => {
-    subMenuRefs.current[id] = element;
-  };
-  const isMenuActive = (menuId, level) => {
-    return activeMenus[level] === menuId;
-  };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      var _a;
-      if (Object.keys(activeMenus).length === 0) return;
-      const target = event.target;
-      if ((_a = menuRootRef.current) == null ? void 0 : _a.contains(target)) return;
-      const isInsideActiveSubmenu = Object.values(activeMenus).some((id) => {
-        const submenuEl = subMenuRefs.current[id];
-        return submenuEl == null ? void 0 : submenuEl.contains(target);
-      });
-      if (!isInsideActiveSubmenu) {
-        setActiveMenus({});
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [activeMenus]);
-  useEffect(() => {
-    return () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-  const getAllFocusableMenuElements = () => {
-    const elements = [];
-    if (menuRootRef.current) {
-      elements.push(
-        ...Array.from(menuRootRef.current.children)
-      );
-    }
-    Object.values(activeMenus).forEach((menuId) => {
-      const submenuEl = subMenuRefs.current[menuId];
-      if (submenuEl) {
-        elements.push(...Array.from(submenuEl.children));
-      }
-    });
-    return elements;
-  };
-  const findCurrentMenuLevel = (element) => {
-    let current = element.parentElement;
-    while (current) {
-      const level = current.getAttribute("data-menu-level");
-      if (level !== null) {
-        return parseInt(level, 10);
-      }
-      current = current.parentElement;
-    }
-    return 0;
-  };
-  const getMenuElementsAtLevel = (level) => {
-    var _a;
-    if (level === 0 && menuRootRef.current) {
-      return Array.from(menuRootRef.current.children);
-    }
-    const menuId = (_a = Object.entries(activeMenus).find(([, id]) => {
-      const submenuEl = subMenuRefs.current[id];
-      return submenuEl && submenuEl.getAttribute("data-menu-level") === level.toString();
-    })) == null ? void 0 : _a[1];
-    if (menuId) {
-      const submenuEl = subMenuRefs.current[menuId];
-      if (submenuEl) {
-        return Array.from(submenuEl.children);
-      }
-    }
-    return [];
-  };
-  return {
-    menuRootRef,
-    activeMenus,
-    openMenu,
-    isMenuActive,
-    registerSubMenu,
-    closeSubMenuLevel,
-    getAllFocusableMenuElements,
-    findCurrentMenuLevel,
-    getMenuElementsAtLevel,
-    mobileHide: isMobile && Object.keys(activeMenus).length > 0,
-    listeners: {
-      onSubMenuHover: openMenuWithDelay,
-      onSubMenuLeave: closeMenuWithDelay,
-      onSubMenuEnter: cancelCloseTimeout,
-      onMouseMove: handleMouseMove,
-      toggleMenu,
-      mobilePositionTo,
-      activeMenu,
-      currentSubMenuLevel,
-      closeSubMenuLevel
-    }
-  };
-}
-function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-    minWidth: 0
-  });
-  const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = useCallback(() => {
-    var _a, _b, _c;
-    if (!(elementRef == null ? void 0 : elementRef.current)) return;
-    const triggerRect = elementRef.current.getBoundingClientRect();
-    const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    const menuWidth = (menuRect == null ? void 0 : menuRect.width) || triggerRect.width;
-    const topOffset = (_c = options == null ? void 0 : options.topOffset) != null ? _c : 4;
-    let top = 0;
-    let left = 0;
-    if (position === "bottom" || position === "bottom-right") {
-      top = triggerRect.top + triggerRect.height + topOffset;
-    } else {
-      top = triggerRect.top;
-    }
-    if (position === "bottom") {
-      left = triggerRect.left + window.scrollX;
-    } else if (position === "bottom-right") {
-      left = triggerRect.right + window.scrollX - menuWidth;
-    } else if (position === "right") {
-      if (isMobile) {
-        left = triggerRect.left + window.scrollX;
-      } else {
-        left = triggerRect.right + window.scrollX;
-      }
-    }
-    const overflowsRightViewport = left + menuWidth > viewportWidth;
-    if (overflowsRightViewport) {
-      const newLeft = triggerRect.left - menuWidth;
-      const overflowsLeftViewport = newLeft < 0;
-      if (overflowsLeftViewport) {
-        left = (viewportWidth - menuWidth) / 2;
-      } else {
-        left = newLeft;
-      }
-    }
-    if (isMobile && position === "right") {
-      top = triggerRect.top + triggerRect.height + topOffset;
-    }
-    if (isMobile && menuWidth > viewportWidth) {
-      left = 0;
-    }
-    setMenuPosition({
-      top,
-      left,
-      minWidth: triggerRect.width
-    });
-  }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  useEffect(() => {
-    if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
-    const handleClickOutside = (event) => {
-      var _a, _b, _c, _d, _e;
-      const target = event.target;
-      if ((_a = elementRef.current) == null ? void 0 : _a.contains(target)) return;
-      if ((_c = (_b = options.menuRef) == null ? void 0 : _b.current) == null ? void 0 : _c.contains(target)) return;
-      if ((_d = options.additionalRefs) == null ? void 0 : _d.some((ref) => {
-        var _a2;
-        return (_a2 = ref.current) == null ? void 0 : _a2.contains(target);
-      }))
-        return;
-      (_e = options.setIsOpen) == null ? void 0 : _e.call(options, false);
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [
-    options,
-    elementRef,
-    options == null ? void 0 : options.isOpen,
-    options == null ? void 0 : options.setIsOpen,
-    options == null ? void 0 : options.menuRef,
-    options == null ? void 0 : options.additionalRefs
-  ]);
-  useEffect(() => {
-    updatePosition();
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (elementRef == null ? void 0 : elementRef.current) {
-      resizeObserver.observe(elementRef.current);
-    }
-    window.addEventListener("scroll", updatePosition);
-    const hideMenuWhenParentIsScrolled = () => {
-      var _a;
-      (_a = options == null ? void 0 : options.setIsOpen) == null ? void 0 : _a.call(options, false);
-    };
-    const scrollableAncestors = getScrollableAncestors(elementRef.current);
-    scrollableAncestors.forEach((ancestor) => ancestor.addEventListener("scroll", hideMenuWhenParentIsScrolled));
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-      scrollableAncestors.forEach((ancestor) => ancestor.removeEventListener("scroll", hideMenuWhenParentIsScrolled));
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [elementRef, updatePosition]);
-  return { menuPosition, updatePosition };
-}
-function getScrollableAncestors(element) {
-  if (!element) {
-    return [];
-  }
-  const scrollables = [];
-  let parent = element.parentElement;
-  while (parent) {
-    const overflowY = window.getComputedStyle(parent).overflowY;
-    if (overflowY === "auto" || overflowY === "scroll") {
-      scrollables.push(parent);
-    }
-    parent = parent.parentElement;
-  }
-  return scrollables;
-}
-
-export {
-  useSubMenuSystem,
-  useMenuPosition
-};

package/dist/chunk-QBIEU25R.js

@@ -1,61 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/LogoDMSiTopBar.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function LogoDMSiTopBar(props) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps(__spreadValues({
-      width: "106",
-      height: "24",
-      viewBox: "0 0 106 24"
-    }, props), {
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M9.32182 5.86849H21.4356C23.2074 5.86849 24.3938 5.79786 25.426 7.25511C26.3235 8.60827 26.5931 9.79786 26.3851 11.4335C26.1771 13.0692 25.7342 14.2291 24.6672 15.6529C24.1742 16.3295 23.5541 16.8648 22.803 17.2551C21.7823 17.7533 21.1275 17.6826 20.0952 17.6826H7.87355V17.638L7.18024 23.2588H19.945C23.4501 23.2588 26.8242 22.5228 29.6553 19.9949C32.2745 17.6826 33.819 14.8127 34.2235 11.612C34.6664 8.125 33.8152 5.72351 31.4695 3.30344C29.0621 0.775554 26.0539 0.362915 22.4024 0.362915H10.0074L9.32182 5.92797V5.86849Z",
-            fill: "#55585A"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M44.8888 0.960416L44.5229 3.92324L44.6115 3.64071C46.1021 1.46599 48.4517 0.618408 51.0516 0.618408C53.7787 0.618408 55.5312 1.62213 56.5828 3.91952C58.4008 1.53662 60.7273 0.618408 63.6277 0.618408C65.4881 0.618408 67.1289 1.16116 68.2613 2.45856C69.6595 4.04592 69.3937 6.13514 69.1087 8.39164L67.1828 23.2355H59.7451L61.5207 9.28012C61.6979 7.90094 61.6787 6.35447 59.6873 6.35447C57.2607 6.35447 56.7831 8.52919 56.5635 10.2392L54.9111 23.2318H47.3771L49.1527 9.2764C49.3222 7.93811 49.1643 6.22436 47.3 6.22436C45.2663 6.22436 44.6153 7.68904 44.4112 9.2764L42.6355 23.2318H34.5199L37.3817 0.960416H44.8888Z",
-            fill: "#55585A"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M96.5979 0.336548L95.8699 6.39231H102.649L95.4501 9.54101L93.6821 23.2734H102.429L105.349 0.336548H96.5979Z",
-            fill: "#55585A"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M90.2045 10.4126C88.529 9.34573 85.7827 9.04833 83.7837 8.79182C83.0903 8.70632 82.3084 8.49814 81.5804 8.29368C81.3031 8.23792 81.045 8.16729 80.8062 8.07807C80.7176 8.05204 80.6175 8.02231 80.5328 8C80.3363 7.95539 80.1206 7.81041 79.928 7.61338C79.5275 7.30855 79.2886 6.94424 79.2886 6.54647C79.2886 6.35688 79.358 6.17844 79.4581 6.00372C79.4697 5.98513 79.4774 5.97026 79.4889 5.95167C79.9666 5.20446 81.2993 4.66543 82.8862 4.66543C84.8005 4.66543 86.3566 5.44981 86.4645 6.43866H93.9138C92.9316 2.34572 88.2517 0 84.0071 0C81.488 0 78.2949 0.342007 75.9184 1.66171C73.6343 2.94052 71.9973 4.66914 71.6814 7.14126C70.9419 12.9405 76.369 14.026 81.0181 14.6654C81.2762 14.6952 81.7807 14.8141 82.3315 15.0037C83.7721 15.2974 84.7928 16.026 84.7928 16.8848C84.7928 17.8773 83.4254 18.6989 81.6267 18.8699C81.4187 18.9145 81.2338 18.9368 81.0913 18.9368C79.9434 18.9368 79.1615 18.8625 78.5876 18.487C77.8635 18.197 77.3358 17.777 77.1471 17.29H69.3395C70.3795 22.3234 75.0132 24 79.7085 24C84.789 24 91.8492 22.2491 92.6157 16.2342C92.8546 14.3494 92.1844 11.7286 90.2123 10.4089L90.2045 10.4126Z",
-            fill: "#55585A"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M1.03227 9.54944H16.0773L0 16.9175L1.03227 9.54944Z",
-            fill: "#DF4405"
-          }
-        )
-      ]
-    })
-  );
-}
-
-export {
-  LogoDMSiTopBar
-};

package/dist/chunk-QG6NWMGA.js

@@ -1,138 +0,0 @@
-import {
-  useMatchesMobile
-} from "./chunk-WVGXD7HT.js";
-import {
-  componentPadding,
-  typography
-} from "./chunk-SATCWGO7.js";
-
-// src/components/Tooltip.tsx
-import clsx from "clsx";
-import {
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { createPortal } from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Tooltip = ({
-  id,
-  testid,
-  message,
-  position = "top",
-  children,
-  showOnTruncation = false,
-  offset = 8,
-  keepHidden = false
-}) => {
-  const ref = useRef(null);
-  const tooltipRef = useRef(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = useState(false);
-  const [removeOpacity, setRemoveOpacity] = useState(false);
-  const updatePosition = () => {
-    if (!ref.current || !tooltipRef.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    let top = 0;
-    let left = 0;
-    switch (position) {
-      case "top":
-        top = rect.top - tooltipRect.height - offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.left - tooltipRect.width - offset;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.right + offset;
-        break;
-    }
-    setTooltipPosition({ top, left });
-    requestAnimationFrame(() => {
-      setRemoveOpacity(true);
-    });
-  };
-  const handleMouseEnter = () => {
-    if (!showOnTruncation || checkForTextTruncation()) {
-      setIsVisible(true);
-    }
-  };
-  const handleMouseLeave = () => {
-    setIsVisible(false);
-    setRemoveOpacity(false);
-  };
-  useEffect(() => {
-    if (isVisible && tooltipRef.current) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isVisible]);
-  useEffect(() => {
-    if (isVisible) {
-      window.addEventListener("resize", updatePosition);
-      return () => window.removeEventListener("resize", updatePosition);
-    }
-  }, [isVisible]);
-  const isMobile = useMatchesMobile();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer",
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        children,
-        !keepHidden && isVisible && !isMobile && typeof document !== "undefined" && createPortal(
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              id: id ? `${id}-message` : void 0,
-              "data-testid": testid ? `${testid}-message` : void 0,
-              ref: tooltipRef,
-              style: {
-                position: "fixed",
-                top: `${tooltipPosition.top}px`,
-                left: `${tooltipPosition.left}px`,
-                zIndex: 9999
-              },
-              className: clsx(
-                typography.caption,
-                "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
-                componentPadding,
-                !removeOpacity && "opacity-0"
-              ),
-              children: message
-            }
-          ),
-          document.body
-        )
-      ]
-    }
-  );
-  function checkForTextTruncation() {
-    if (showOnTruncation && ref.current) {
-      const element = ref.current.querySelector("p, a");
-      if (element) {
-        const isTruncated = element.scrollWidth > element.clientWidth;
-        return isTruncated;
-      }
-    }
-    return false;
-  }
-};
-Tooltip.displayName = "Tooltip";
-
-export {
-  Tooltip
-};

package/dist/chunk-QVWYTQKL.js

@@ -1,29 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/ImagePlaceholder.tsx
-import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function ImagePlaceholder(props) {
-  const clipId = useId();
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      width: 242,
-      height: 243,
-      fill: "none"
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
-      ]
-    })
-  );
-}
-
-export {
-  ImagePlaceholder
-};