@infomaximum/ui-kit 0.19.0 → 0.20.0

package/dist/components/BaseTooltip/hooks/useShowTooltipController.js

@@ -2,7 +2,7 @@ import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { isUndefined } from "lodash-es";
 import { convertSecondsToMilliseconds } from "../../../utils/converters.js";
 import "@floating-ui/react";
-import { setNewReferencePosition, setContextMenuPosition } from "../BaseTooltip.utils.js";
+import { setNewReferencePosition } from "../BaseTooltip.utils.js";
 const useShowTooltipController = ({
   trigger,
   defaultOpen,
@@ -13,7 +13,6 @@ const useShowTooltipController = ({
   refs,
   placement,
   onOpenChange,
-  onContextMenu,
   arrowRef
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
@@ -21,38 +20,20 @@ const useShowTooltipController = ({
   useEffect(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen, open]);
-  const isOpenResult = open ?? isOpen;
-  const closeTooltip = useCallback(() => {
-    setIsOpen(false);
-    onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange]);
-  const handleMouseUp = useCallback((e) => {
-    var _a, _b;
-    if (!e.target) {
-      return;
-    }
-    const isFloatingElement = (_a = refs.floating.current) == null ? void 0 : _a.contains(e.target);
-    const isReferenceElement = (_b = refs.domReference.current) == null ? void 0 : _b.contains(e.target);
-    const isContextMenu = trigger.includes("contextMenu");
-    if (isFloatingElement || isReferenceElement && !isContextMenu) {
-      return;
-    }
-    closeTooltip();
-    document.body.removeEventListener("mouseup", handleMouseUp);
-  }, [closeTooltip, refs.domReference, refs.floating, trigger]);
   const showTooltip = useCallback(() => {
     if (isUndefined(open)) {
-      document.body.addEventListener("mouseup", handleMouseUp);
       setIsOpen(true);
     }
     if (open !== true && isOpen !== true) {
       onOpenChange == null ? void 0 : onOpenChange(true);
     }
-  }, [handleMouseUp, isOpen, onOpenChange, open]);
+  }, [isOpen, onOpenChange, open]);
   const hideTooltip = useCallback(() => {
-    closeTooltip();
-    document.body.removeEventListener("mouseup", handleMouseUp);
-  }, [closeTooltip, handleMouseUp, open]);
+    if (isUndefined(open)) {
+      setIsOpen(false);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  }, [onOpenChange, open]);
   const handlePointerEnter = useMemo(() => {
     if (!trigger.includes("hover")) {
       return;
@@ -101,9 +82,6 @@ const useShowTooltipController = ({
     return (e) => {
       var _a;
       e.stopPropagation();
-      if (trigger.includes("contextMenu")) {
-        setContextMenuPosition(refs, e);
-      }
       const isReferenceElement = (_a = refs.domReference.current) == null ? void 0 : _a.contains(e.target);
       if (!isReferenceElement) {
         return;
@@ -112,55 +90,62 @@ const useShowTooltipController = ({
         setNewReferencePosition(refs, e, placement, arrowRef);
       }
       if (isUndefined(open)) {
-        if (isOpen) {
-          hideTooltip();
-        } else {
-          showTooltip();
-        }
+        setIsOpen((prev) => !prev);
+        onOpenChange == null ? void 0 : onOpenChange(isOpen);
       } else {
         onOpenChange == null ? void 0 : onOpenChange(!open);
       }
     };
-  }, [arrowRef, hideTooltip, isOpen, onOpenChange, open, placement, refs, showInCursorPosition, showTooltip, trigger]);
+  }, [arrowRef, isOpen, onOpenChange, open, placement, refs, showInCursorPosition, trigger]);
   const handleContextMenu = useMemo(() => {
     if (!trigger.includes("contextMenu")) {
       return void 0;
     }
     return (e) => {
-      setContextMenuPosition(refs, e);
-      if (onContextMenu) {
-        onContextMenu(e);
-        return;
-      }
       e.preventDefault();
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: e.clientX,
+            y: e.clientY,
+            top: e.clientY,
+            right: e.clientX,
+            bottom: e.clientY,
+            left: e.clientX
+          };
+        }
+      });
       showTooltip();
     };
-  }, [onContextMenu, refs, showTooltip, trigger]);
-  useEffect(() => {
-    return () => {
-      document.body.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [handleMouseUp]);
-  useEffect(() => {
-    if (open) {
-      document.body.addEventListener("mouseup", handleMouseUp);
+  }, [refs, showTooltip, trigger]);
+  const handleMouseUp = useCallback((e) => {
+    var _a, _b;
+    if (!e.target) {
+      return;
     }
-    if (open === false) {
-      document.body.removeEventListener("mouseup", handleMouseUp);
+    const isFloatingElement = (_a = refs.floating.current) == null ? void 0 : _a.contains(e.target);
+    const isReferenceElement = (_b = refs.domReference.current) == null ? void 0 : _b.contains(e.target);
+    if (!isOpen || isFloatingElement || isReferenceElement) {
+      return;
     }
-  }, [handleMouseUp, open]);
+    hideTooltip();
+  }, [hideTooltip, isOpen, refs.domReference, refs.floating]);
+  useEffect(() => {
+    document.body.addEventListener("mouseup", handleMouseUp);
+    return () => document.body.removeEventListener("mouseup", handleMouseUp);
+  }, [handleMouseUp]);
   const handlePointerUp = useMemo(() => {
     if (!trigger.includes("click")) {
       return void 0;
     }
     return (e) => {
-      if (isOpenResult) {
-        e.stopPropagation();
-      }
+      e.stopPropagation();
     };
-  }, [isOpenResult, trigger]);
+  }, [trigger]);
   return {
-    isOpen: isOpenResult,
+    isOpen: open ?? isOpen,
     handlePointerEnter,
     handlePointerLeave,
     handleFocus,

package/dist/components/Collapse/Collapse.js

@@ -1,10 +1,10 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { memo, useMemo, useCallback } from "react";
+import { useControlledState } from "../../hooks/useControlledState/useControlledState.js";
 import { getCollapseTokens } from "./Collapse.tokens.js";
 import { getCollapseContainerStyle } from "./Collapse.styles.js";
 import { CollapsePanel } from "./components/CollapsePanel/CollapsePanel.js";
 import { useTheme } from "../../hooks/useTheme/useTheme.js";
-import { useControlledState } from "../../hooks/useControlledState/useControlledState.js";
 const normalizeKeys = (key) => {
   if (key === void 0) {
     return [];

package/dist/components/Dropdown/Dropdown.types.d.ts

@@ -127,6 +127,7 @@ export interface SubMenuType {
         key: DropdownItemKeyType;
         e: MouseEvent;
     }) => void;
+    dropdownRender?: (menu: ReactNode) => ReactNode;
 }
 export declare const isSubMenu: (item: ItemType) => item is SubMenuType;
 export declare const isMenuItem: (item: ItemType) => item is MenuItem;

package/dist/components/Dropdown/components/SubMenu/SubMenu.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef, useContext, useEffect, useMemo, useCallback } from "react";
+import { isFunction } from "lodash-es";
 import { dropdownContext } from "../../contexts/dropdownContext.js";
 import { Menu } from "../Menu/Menu.js";
 import { offset, flip, useFloating, autoUpdate, useHover, useInteractions } from "@floating-ui/react";
@@ -16,7 +17,8 @@ const SubMenu = memo(({
   styles,
   search,
   clearSearchValue,
-  onClick
+  onClick,
+  dropdownRender
 }) => {
   const timerId = useRef(null);
   const context = useContext(dropdownContext);
@@ -121,6 +123,8 @@ const SubMenu = memo(({
     document.body.addEventListener("mouseup", handleMouseUp);
     return () => document.body.removeEventListener("mouseup", handleMouseUp);
   }, [handleMouseUp]);
+  const menuElement = useMemo(() => /* @__PURE__ */ jsx(Menu, { ...context, items: children, title: label, subMenuOpen: context.subMenuOpen, search, styles, onClick }), [children, context, label, onClick, search, styles]);
+  const floatingContent = isFunction(dropdownRender) ? dropdownRender(menuElement) : menuElement;
   return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, ...getReferenceProps, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onClick: handleClick, onMouseUp: (e) => {
     e.stopPropagation();
   }, onMouseDown: (e) => {
@@ -130,7 +134,7 @@ const SubMenu = memo(({
     !isStepMode && (isOpen || !!context.forceSubMenuRender) && /* @__PURE__ */ jsx("div", { ref: refs.setFloating, style: {
       ...floatingStyles,
       visibility: isOpen ? "visible" : "hidden"
-    }, ...getFloatingProps, children: /* @__PURE__ */ jsx(Menu, { ...context, items: children, title: label, subMenuOpen: context.subMenuOpen, search, styles, onClick }) })
+    }, ...getFloatingProps, children: floatingContent })
   ] });
 });
 export {