@dmsi/wedgekit-react 0.0.4

package/dist/chunk-RENGWIST.js

@@ -0,0 +1,263 @@
+import {
+  MenuOption
+} from "./chunk-IYDKL3OH.js";
+import {
+  Menu
+} from "./chunk-3IZWY2C7.js";
+import {
+  useSubMenuSystem
+} from "./chunk-XFCRKJRI.js";
+import {
+  CSS
+} from "./chunk-WVUIIBRR.js";
+import {
+  Search
+} from "./chunk-ORW5CX24.js";
+import {
+  Icon
+} from "./chunk-5K3U4IUW.js";
+import {
+  paddingUsingComponentGap
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/DataGridCell.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataGridCell = (_a) => {
+  var _b = _a, {
+    type = "default",
+    component = "static",
+    children,
+    className,
+    locked = false,
+    noPadding = false,
+    paddedLeft = false,
+    style,
+    onClick,
+    onRightClick,
+    error,
+    warning
+  } = _b, props = __objRest(_b, [
+    "type",
+    "component",
+    "children",
+    "className",
+    "locked",
+    "noPadding",
+    "paddedLeft",
+    "style",
+    "onClick",
+    "onRightClick",
+    "error",
+    "warning"
+  ]);
+  const Element = type === "header" ? "th" : "td";
+  const timerRef = useRef(null);
+  const [isGrabbing, setIsGrabbing] = useState(false);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  const handlePointerDown = (_event) => {
+    timerRef.current = window.setTimeout(() => {
+      setIsGrabbing(true);
+    }, 500);
+  };
+  const handlePointerUp = (event) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    const rightClick = event.nativeEvent instanceof MouseEvent && event.nativeEvent.button === 2;
+    if (!isGrabbing && onClick && !rightClick) {
+      onClick(event);
+    }
+    if (rightClick && onRightClick) {
+      onRightClick();
+    }
+    setIsGrabbing(false);
+  };
+  const handlePointerLeave = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+  const headerBgStyles = type === "header" && !locked && !["button"].includes(component) && "bg-brand-400 border-brand-200";
+  const lockedHeaderBgStyles = locked && !["button"].includes(component) && "bg-neutral-400 border-neutral-300";
+  const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && clsx("border-r");
+  const buttonComponentStyles = component === "button" && clsx("border-r border-b border-border-primary-normal");
+  const iconComponentStyles = component === "icon" && clsx("border-l");
+  const cellClasses = clsx(
+    headerTypeStyles,
+    buttonComponentStyles,
+    headerBgStyles,
+    lockedHeaderBgStyles,
+    iconComponentStyles,
+    className,
+    "flex items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative",
+    "focus-within:!z-10",
+    component === "input" && "border",
+    component === "input" && !error && !warning && "border-border-primary-normal",
+    component === "input" && error && "border-border-primary-error",
+    component === "input" && warning && "border-background-warning-normal",
+    !["button", "icon"].includes(component) && !noPadding && "p-2",
+    paddedLeft && "pl-2",
+    component === "icon" && "border-l",
+    isGrabbing && "!cursor-grabbing",
+    component === "checkbox" && "justify-center"
+  );
+  return /* @__PURE__ */ jsx(Element, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cellClasses,
+      style,
+      onMouseDown: handlePointerDown,
+      onMouseUp: handlePointerUp,
+      onMouseLeave: handlePointerLeave,
+      onTouchStart: handlePointerDown,
+      onTouchEnd: handlePointerUp,
+      onTouchCancel: handlePointerLeave,
+      onContextMenu: (e) => e.preventDefault(),
+      children
+    }
+  ) }));
+};
+DataGridCell.displayName = "DataGridCell";
+function DraggableCellHeader(_a) {
+  var _b = _a, {
+    header,
+    children,
+    locked = false
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children",
+    "locked"
+  ]);
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
+    id: header.column.id
+  });
+  const [showMenu, setShowMenu] = useState(false);
+  const {
+    menuRootRef,
+    toggleMenu,
+    isMenuActive,
+    registerSubMenu
+  } = useSubMenuSystem();
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0
+  };
+  return /* @__PURE__ */ jsxs(
+    DataGridCell,
+    __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      locked,
+      type: "header",
+      component: "header",
+      ref: setNodeRef,
+      colSpan: header.colSpan,
+      style
+    }, props), {
+      onClick: header.column.getToggleSortingHandler(),
+      onRightClick: () => setShowMenu(!showMenu)
+    }), locked ? {} : attributes), locked ? {} : listeners), {
+      children: [
+        children,
+        header.column.getCanFilter() && /* @__PURE__ */ jsx(Menu, { ref: menuRootRef, positionTo: node, show: showMenu, setShow: setShowMenu, children: /* @__PURE__ */ jsx(
+          MenuOption,
+          {
+            after: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" }),
+            onClick: (menuId) => toggleMenu(menuId, 0),
+            subMenu: (menuId, menuOptionRef) => {
+              var _a2;
+              return /* @__PURE__ */ jsxs(
+                Menu,
+                {
+                  positionTo: menuOptionRef,
+                  position: "right",
+                  show: isMenuActive(menuId, 0),
+                  ref: (el) => {
+                    registerSubMenu(menuId, el);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
+                      Search,
+                      {
+                        onChange: (event) => {
+                          header.column.setFilterValue(event.target.value);
+                        },
+                        value: (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("includesString"), children: "Contains" }),
+                    /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("startsWith"), children: "Starts with" }),
+                    /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("endsWith"), children: "Ends with" })
+                  ]
+                }
+              );
+            },
+            children: "Filter"
+          }
+        ) })
+      ]
+    })
+  );
+  function menuOptionIcon(value) {
+    return /* @__PURE__ */ jsx(Icon, { name: "check", className: clsx(header.column.columnDef.filterFn !== value && "text-transparent") });
+  }
+  function handleFilterFnChange(_id, value) {
+    var _a2;
+    let filterFn = "includesString";
+    const currentFilterFn = header.column.columnDef.filterFn;
+    if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
+      filterFn = currentFilterFn === "startsWith" ? "auto" : "startsWith";
+    }
+    if ((value == null ? void 0 : value.toLowerCase()) === "ends with") {
+      filterFn = currentFilterFn === "endsWith" ? "auto" : "endsWith";
+    }
+    if ((value == null ? void 0 : value.toLowerCase()) === "contains") {
+      filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
+    }
+    header.column.columnDef.filterFn = filterFn;
+    header.column.setFilterValue((_a2 = header.column.getFilterValue()) != null ? _a2 : "");
+  }
+}
+DraggableCellHeader.displayName = "DraggableCellHeader";
+function DragAlongCell(_a) {
+  var _b = _a, { cell, children } = _b, props = __objRest(_b, ["cell", "children"]);
+  const { isDragging, setNodeRef, transform } = useSortable({
+    id: cell.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    zIndex: isDragging ? 1 : 0,
+    minWidth: "min-content"
+  };
+  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+}
+DragAlongCell.displayName = "DragAlongCell";
+
+export {
+  DataGridCell,
+  DraggableCellHeader,
+  DragAlongCell
+};

package/dist/chunk-REZ33AJK.js

@@ -0,0 +1,172 @@
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/useMenuSystem.tsx
+import { useState, useRef, useEffect, useCallback } from "react";
+function useSubMenuSystem() {
+  const [activeMenus, setActiveMenus] = useState(
+    {}
+  );
+  const menuRootRef = useRef(null);
+  const subMenuRefs = useRef({});
+  const toggleMenu = (menuId, 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 closeSubMenuLevel = (level) => {
+    setActiveMenus((prev) => {
+      const newActiveMenus = __spreadValues({}, prev);
+      delete newActiveMenus[level];
+      Object.keys(newActiveMenus).forEach((key) => {
+        if (Number(key) >= level) {
+          delete newActiveMenus[Number(key)];
+        }
+      });
+      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]);
+  return {
+    menuRootRef,
+    activeMenus,
+    toggleMenu,
+    isMenuActive,
+    registerSubMenu,
+    closeSubMenuLevel
+  };
+}
+function useMenuPosition(elementRef, position = "bottom", options) {
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    minWidth: 0
+  });
+  const updatePosition = useCallback(() => {
+    var _a;
+    if (!elementRef || !elementRef.current) {
+      return;
+    }
+    const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!rect) {
+      return;
+    }
+    const viewportWidth = window.innerWidth;
+    const menuWidth = rect.width;
+    if (menuWidth >= viewportWidth) {
+      setMenuPosition({
+        top: position === "bottom" ? rect.top + window.scrollY + rect.height + 4 : rect.top + window.scrollY,
+        left: 0,
+        minWidth: viewportWidth
+      });
+      return;
+    }
+    const rightSidePosition = {
+      top: position === "bottom" ? rect.top + window.scrollY + rect.height + 4 : rect.top + window.scrollY,
+      left: position === "bottom" ? rect.right + window.scrollX - rect.width : rect.right + window.scrollX + 4,
+      minWidth: rect.width
+    };
+    const fitsViewport = rightSidePosition.left + rightSidePosition.minWidth <= viewportWidth;
+    if (fitsViewport) {
+      setMenuPosition(rightSidePosition);
+      return;
+    }
+    setMenuPosition({
+      top: rect.top + window.scrollY,
+      left: rect.left + window.scrollX - rightSidePosition.minWidth - 4,
+      minWidth: rect.width
+    });
+  }, [elementRef, position]);
+  useEffect(() => {
+    if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) {
+      return;
+    }
+    const handleClickOutside = (event) => {
+      var _a, _b, _c, _d, _e;
+      if ((_a = elementRef.current) == null ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      if ((_c = (_b = options.menuRef) == null ? void 0 : _b.current) == null ? void 0 : _c.contains(event.target)) {
+        return;
+      }
+      if ((_d = options.additionalRefs) == null ? void 0 : _d.some(
+        (ref) => {
+          var _a2;
+          return (_a2 = ref.current) == null ? void 0 : _a2.contains(event.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);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, [elementRef, updatePosition]);
+  return { menuPosition, updatePosition };
+}
+
+export {
+  useSubMenuSystem,
+  useMenuPosition
+};

package/dist/chunk-RGI3V47F.js

@@ -0,0 +1,216 @@
+import {
+  useMenuPosition
+} from "./chunk-REZ33AJK.js";
+import {
+  findDocumentRoot
+} from "./chunk-3FLOLZYP.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Menu.tsx
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var Menu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    ref,
+    positionTo,
+    show,
+    setShow,
+    position = "bottom"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "ref",
+    "positionTo",
+    "show",
+    "setShow",
+    "position"
+  ]);
+  const internalRef = useRef(null);
+  const actualRef = ref || internalRef;
+  const [maxHeight, setMaxHeight] = useState("180px");
+  const { menuPosition, updatePosition } = useMenuPosition(
+    positionTo,
+    position,
+    {
+      isOpen: show,
+      setIsOpen: setShow,
+      menuRef: internalRef
+    }
+  );
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      if (!actualRef || !actualRef.current) {
+        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]);
+  useEffect(() => {
+    if (!show) {
+      return;
+    }
+    initializeMenuFocus();
+    updatePosition();
+  }, [show, updatePosition]);
+  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]);
+  const isInPortal = typeof window !== "undefined" && window.STORYBOOK_ENV;
+  const menuContent = /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: setRefs,
+      className: clsx(
+        "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
+        "absolute",
+        "z-50",
+        className,
+        !isInPortal && "w-full"
+      )
+    }, props), {
+      style: __spreadValues(__spreadProps(__spreadValues({}, props.style), {
+        maxHeight
+      }), isInPortal ? menuPosition : {
+        top: "106%",
+        left: 0,
+        width: "100%"
+      }),
+      onKeyDown: handleKeydown,
+      tabIndex: -1,
+      children
+    })
+  );
+  if (isInPortal) {
+    return show && createPortal(menuContent, findDocumentRoot(internalRef.current));
+  }
+  return menuContent;
+  function handleKeydown(e) {
+    var _a2, _b2;
+    if (!internalRef.current) {
+      return;
+    }
+    if (e.key !== "Escape") {
+      e.stopPropagation();
+    }
+    const menuOptions = Array.from(
+      internalRef.current.children
+    );
+    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;
+    (_a2 = internalRef.current) == null ? void 0 : _a2.focus();
+    const selectedOption = (_b2 = internalRef.current) == null ? void 0 : _b2.querySelector(
+      "[data-selected]"
+    );
+    const targetElement = selectedOption || ((_c = internalRef.current) == null ? void 0 : _c.children[0]);
+    if (!targetElement) {
+      return;
+    }
+    targetElement.scrollIntoView({
+      block: "nearest",
+      behavior: "instant"
+    });
+    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";
+
+export {
+  Menu
+};