@dmsi/wedgekit-react 0.0.2

package/dist/components/Menu.cjs

@@ -0,0 +1,437 @@
+"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_react3 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/useMenuSystem.tsx
+var import_react2 = require("react");
+
+// src/components/useMatchesMedia.tsx
+var import_react = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQueryList.addEventListener("change", listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => {
+  const isMobile = useMatchesMedia("(width < 48rem)");
+  return isMobile;
+};
+
+// src/components/useMenuSystem.tsx
+function useMenuPosition(elementRef, position = "bottom", options) {
+  const [menuPosition, setMenuPosition] = (0, import_react2.useState)({
+    top: 0,
+    left: 0,
+    minWidth: 0
+  });
+  const isMobile = useMatchesMobile();
+  const updatePosition = (0, import_react2.useCallback)(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    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") {
+      left = triggerRect.right + window.scrollX;
+    }
+    const overflowsLeftViewport = left + menuWidth > viewportWidth;
+    if (overflowsLeftViewport) {
+      left = triggerRect.left - menuWidth;
+    }
+    if (isMobile) {
+      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
+      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    }
+    setMenuPosition({
+      top,
+      left,
+      minWidth: triggerRect.width
+    });
+  }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
+  (0, import_react2.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_react2.useEffect)(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (elementRef == null ? void 0 : elementRef.current) {
+      resizeObserver.observe(elementRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [elementRef, updatePosition]);
+  return { menuPosition, updatePosition };
+}
+
+// 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;
+  }
+  var 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/components/Menu.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Menu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    ref,
+    positionTo,
+    mobilePositionTo,
+    show,
+    setShow,
+    position = "bottom",
+    maxHeight: customMaxHeight,
+    topOffset,
+    mobileBackMenuOption,
+    mobileHide,
+    useDefaultMinWidth,
+    autoFocusOff,
+    menuName
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "ref",
+    "positionTo",
+    "mobilePositionTo",
+    "show",
+    "setShow",
+    "position",
+    "maxHeight",
+    "topOffset",
+    "mobileBackMenuOption",
+    "mobileHide",
+    "useDefaultMinWidth",
+    "autoFocusOff",
+    "menuName"
+  ]);
+  const internalRef = (0, import_react3.useRef)(null);
+  const actualRef = ref || internalRef;
+  const [maxHeight, setMaxHeight] = (0, import_react3.useState)("180px");
+  const isMobile = useMatchesMobile();
+  const { menuPosition, updatePosition } = useMenuPosition(
+    isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
+    position,
+    {
+      isOpen: show,
+      setIsOpen: setShow,
+      menuRef: internalRef,
+      topOffset
+    }
+  );
+  (0, import_react3.useEffect)(() => {
+    const raf = requestAnimationFrame(() => {
+      if (!actualRef || !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, customMaxHeight]);
+  (0, import_react3.useEffect)(() => {
+    if (!show) {
+      return;
+    }
+    initializeMenuFocus();
+    updatePosition();
+  }, [show, updatePosition]);
+  (0, import_react3.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({
+        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",
+          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

@@ -0,0 +1,11 @@
+"use client";
+import {
+  Menu
+} from "../chunk-L4UM372R.js";
+import "../chunk-Z4UCFUF7.js";
+import "../chunk-SEKKGFM6.js";
+import "../chunk-4T7F5BZZ.js";
+import "../chunk-ORMEWXMH.js";
+export {
+  Menu
+};