@dmsi/wedgekit-react 0.0.1277 → 1.0.1

package/dist/components/Menu.cjs

@@ -1,505 +0,0 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Menu.tsx
-var Menu_exports = {};
-__export(Menu_exports, {
-  Menu: () => Menu
-});
-module.exports = __toCommonJS(Menu_exports);
-var import_clsx = __toESM(require("clsx"), 1);
-var import_react7 = require("react");
-var import_react_dom = require("react-dom");
-
-// src/components/useMenuSystem.tsx
-var import_react6 = require("react");
-
-// src/hooks/useKeydown.ts
-var import_react = require("react");
-
-// src/hooks/useInfiniteScroll.tsx
-var import_react2 = require("react");
-
-// src/hooks/useMatchesMedia.ts
-var import_react3 = require("react");
-var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react3.useState)();
-  (0, import_react3.useLayoutEffect)(() => {
-    const mediaQueryList = window.matchMedia(query);
-    const listener = () => setMatches(mediaQueryList.matches);
-    listener();
-    mediaQueryList.addEventListener("change", listener);
-    return () => mediaQueryList.removeEventListener("change", listener);
-  }, [query]);
-  return matches;
-};
-var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
-
-// src/hooks/useTableLayout/useTableLayout.ts
-var import_react4 = require("react");
-
-// src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
-
-// src/utils.ts
-function findDocumentRoot(element) {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    throw new Error(
-      "findDocumentRoot can only be used in a browser environment."
-    );
-  }
-  if (!element || !(element instanceof Node)) {
-    return window.document.body;
-  }
-  let currentElement = element;
-  while (currentElement && currentElement.parentNode) {
-    if (currentElement.parentNode === document) {
-      return document.body;
-    } else if (currentElement.parentNode instanceof DocumentFragment) {
-      return currentElement.parentNode;
-    } else {
-      currentElement = currentElement.parentNode;
-    }
-  }
-  return window.document.body;
-}
-
-// src/hooks/useTableLayout/storage.ts
-var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
-var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
-
-// src/hooks/useEditCell.tsx
-var import_react5 = require("react");
-
-// src/components/useMenuSystem.tsx
-function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react6.useState)({
-    top: 0,
-    left: 0,
-    minWidth: 0
-  });
-  const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react6.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]);
-  (0, import_react6.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
-  ]);
-  (0, import_react6.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;
-}
-
-// src/components/Menu.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Menu = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    children,
-    className,
-    ref,
-    positionTo,
-    mobilePositionTo,
-    show,
-    setShow,
-    position = "bottom",
-    maxHeight: customMaxHeight,
-    topOffset,
-    mobileBackMenuOption,
-    mobileHide,
-    useDefaultMinWidth,
-    autoFocusOff,
-    menuName,
-    calculateMinMaxHeight
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "children",
-    "className",
-    "ref",
-    "positionTo",
-    "mobilePositionTo",
-    "show",
-    "setShow",
-    "position",
-    "maxHeight",
-    "topOffset",
-    "mobileBackMenuOption",
-    "mobileHide",
-    "useDefaultMinWidth",
-    "autoFocusOff",
-    "menuName",
-    "calculateMinMaxHeight"
-  ]);
-  const internalRef = (0, import_react7.useRef)(null);
-  const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = (0, import_react7.useState)("180px");
-  const isMobile = useMatchesMobile();
-  const { menuPosition, updatePosition } = useMenuPosition(
-    isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
-    position,
-    {
-      isOpen: show,
-      setIsOpen: setShow,
-      menuRef: internalRef,
-      topOffset,
-      isMobile: !!(isMobile && mobilePositionTo)
-    }
-  );
-  (0, import_react7.useEffect)(() => {
-    if (calculateMinMaxHeight) {
-      return;
-    }
-    const raf = requestAnimationFrame(() => {
-      if (!actualRef.current || customMaxHeight) {
-        return;
-      }
-      if (actualRef.current.childElementCount > 4) {
-        let accumulatedHeight = 0;
-        Array.from(actualRef.current.children).forEach((child, index) => {
-          if (index >= 5) {
-            return;
-          }
-          accumulatedHeight += child.clientHeight;
-        });
-        accumulatedHeight = accumulatedHeight / 5 * 4.5;
-        setMaxHeight(`${accumulatedHeight}px`);
-      }
-    });
-    return () => {
-      cancelAnimationFrame(raf);
-    };
-  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
-  (0, import_react7.useEffect)(() => {
-    if (!calculateMinMaxHeight) {
-      return;
-    }
-    if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
-      const positionToRect = positionTo.current.getBoundingClientRect();
-      const offsetInPx = 16;
-      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
-      setMaxHeight(`${calculatedMaxHeight}px`);
-    }
-  }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
-  (0, import_react7.useEffect)(() => {
-    if (!show) {
-      return;
-    }
-    initializeMenuFocus();
-    updatePosition();
-  }, [show, updatePosition]);
-  (0, import_react7.useEffect)(() => {
-    if (!show || !setShow) {
-      return;
-    }
-    const handleEscapeKey = (event) => {
-      var _a2;
-      if (event.key !== "Escape") {
-        return;
-      }
-      setShow(false);
-      (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.focus();
-    };
-    document.addEventListener("keydown", handleEscapeKey);
-    return () => {
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [show, setShow, positionTo]);
-  return show && (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({
-        id,
-        "data-testid": testid,
-        ref: setRefs,
-        className: (0, import_clsx.default)(
-          "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
-          "fixed",
-          "z-50",
-          "max-w-screen",
-          mobileHide && "opacity-0 pointer-events-none",
-          className
-        )
-      }, props), {
-        style: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props.style), {
-          maxHeight: customMaxHeight || maxHeight
-        }), menuPosition), {
-          minWidth: useDefaultMinWidth ? "212px" : menuPosition.minWidth
-        }),
-        onKeyDown: handleKeydown,
-        onMouseDown: stopPropagation,
-        onMouseUp: stopPropagation,
-        onTouchStart: stopPropagation,
-        onTouchEnd: stopPropagation,
-        tabIndex: -1,
-        "data-menu": menuName != null ? menuName : "",
-        children: [
-          mobileBackMenuOption == null ? void 0 : mobileBackMenuOption(),
-          children
-        ]
-      })
-    ),
-    findDocumentRoot(internalRef.current)
-  );
-  function handleKeydown(e) {
-    var _a2, _b2;
-    if (!internalRef.current) {
-      return;
-    }
-    if (e.key !== "Escape") {
-      e.stopPropagation();
-    }
-    const menuOptions = Array.from(
-      internalRef.current.querySelectorAll('[role="menuitem"]')
-    );
-    if (menuOptions.length === 0) {
-      return;
-    }
-    let currentIndex = -1;
-    const focusedElement = document.activeElement;
-    for (let i = 0; i < menuOptions.length; i++) {
-      if (menuOptions[i] === focusedElement) {
-        currentIndex = i;
-        break;
-      }
-    }
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const nextIndex = currentIndex < menuOptions.length - 1 ? currentIndex + 1 : 0;
-        menuOptions[nextIndex].focus();
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        const prevIndex = currentIndex > 0 ? currentIndex - 1 : menuOptions.length - 1;
-        menuOptions[prevIndex].focus();
-        break;
-      }
-      case "Home":
-        e.preventDefault();
-        menuOptions[0].focus();
-        break;
-      case "End":
-        e.preventDefault();
-        menuOptions[menuOptions.length - 1].focus();
-        break;
-      case "Enter":
-      case " ":
-      case "ArrowRight":
-        e.preventDefault();
-        if (currentIndex >= 0) {
-          menuOptions[currentIndex].click();
-        }
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.click();
-        (_b2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _b2.focus();
-        break;
-    }
-  }
-  function initializeMenuFocus() {
-    var _a2, _b2, _c;
-    if (!autoFocusOff) {
-      (_a2 = internalRef.current) == null ? void 0 : _a2.focus();
-    }
-    const selectedOption = (_b2 = internalRef.current) == null ? void 0 : _b2.querySelector(
-      "[data-selected]"
-    );
-    const firstMenuItem = (_c = internalRef.current) == null ? void 0 : _c.querySelector(
-      '[role="menuitem"]'
-    );
-    const targetElement = selectedOption || firstMenuItem;
-    if (!targetElement) {
-      return;
-    }
-    targetElement.scrollIntoView({
-      block: "nearest",
-      behavior: "instant"
-    });
-    if (autoFocusOff) {
-      return;
-    }
-    requestAnimationFrame(() => {
-      targetElement.focus();
-    });
-  }
-  function setRefs(node) {
-    internalRef.current = node;
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  }
-  function stopPropagation(e) {
-    e.stopPropagation();
-  }
-};
-Menu.displayName = "Menu";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Menu
-});

package/dist/components/Menu.js

@@ -1,14 +0,0 @@
-"use client";
-import {
-  Menu
-} from "../chunk-OM7QLLI2.js";
-import "../chunk-PE3EZP56.js";
-import "../chunk-ZRFXUER3.js";
-import "../chunk-WVGXD7HT.js";
-import "../chunk-VXWSAIB5.js";
-import "../chunk-TBZ243DS.js";
-import "../chunk-5UH6QUFB.js";
-import "../chunk-ORMEWXMH.js";
-export {
-  Menu
-};