@muraldevkit/ui-toolkit 4.62.0-dev-3JXS.1 → 4.62.0

package/dist/components/index.d.ts

@@ -32,4 +32,3 @@ export * from './rovingTabindex';
 export * from './toolbar';
 export * from './filter';
 export * from './breadcrumb';
-export * from './image';

package/dist/components/menu/MrlMenu/MrlMenu.d.ts

@@ -7,7 +7,7 @@ export interface MrlMenuProps {
     /** Children to be rendered within the menu component*/
     children: React.ReactNode;
     /** Event to close the menu */
-    clickOutsideEvent?: 'mouseup' | 'mousedown' | 'click';
+    clickOutsideEvent?: 'mousedown' | 'mouseup' | 'click';
     /**
      * Enables closing the menu when scrolling. Default is false.
      *

package/dist/components/menu/hooks/useMenuScroll.d.ts

@@ -0,0 +1,40 @@
+import { RefObject } from 'react';
+import { MenuPosition } from '../constants';
+interface UseMenuScrollResult {
+    /** The constrained max height for the menu list when scrolling is active */
+    maxHeight: number | undefined;
+    /** Whether the menu content exceeds available space and requires internal scrolling */
+    isScrolling: boolean;
+}
+/**
+ * useMenuScroll hook
+ *
+ * Detects when a menu cannot fit on screen in either its preferred or flipped position,
+ * and constrains its height to enable internal scrolling.
+ *
+ * Behavior by position:
+ * - **top/bottom**: If the menu doesn't fit in the preferred direction AND doesn't fit
+ *   in the opposite direction (flip), it reverts to the original position and constrains
+ *   the height to the space between the trigger edge and the viewport edge.
+ * - **left/right**: Only checks vertical overflow. If the menu is taller than the viewport,
+ *   it constrains the height to the available vertical space.
+ *
+ * Uses `scrollHeight` on the list element to determine the natural (unconstrained) content
+ * height. This value remains stable even when `maxHeight` is applied, preventing feedback
+ * loops with external positioning hooks that use ResizeObserver.
+ *
+ * Uses `useLayoutEffect` for the initial calculation so that `maxHeight` is applied
+ * synchronously before the browser paints. This prevents visible flicker when the menu
+ * opens in a constrained space, because the positioning hook (useTriggerPosition) will
+ * see the already-constrained height on its first measurement via requestAnimationFrame.
+ *
+ * @param triggerRef - Reference to the trigger element that opens the menu
+ * @param listRef - Reference to the ul element inside the menu (the scrollable container)
+ * @param position - The preferred menu position relative to the trigger
+ * @param menuOffset - The gap between the trigger and the menu in pixels
+ * @param isOpen - Whether the menu is currently open
+ * @param disable - Whether to disable the hook entirely
+ * @returns An object with `maxHeight` (inline style value) and `isScrolling` (class toggle)
+ */
+export declare const useMenuScroll: (triggerRef: RefObject<HTMLElement> | undefined, listRef: RefObject<HTMLUListElement>, position: MenuPosition, menuOffset: number, isOpen: boolean, disable: boolean) => UseMenuScrollResult;
+export {};

package/dist/components/panel/MrlPanelContext/MrlPanelContext.d.ts

@@ -1,13 +1,8 @@
 import * as React from 'react';
-export type MrlPanelContextState = {
-    hasScrollbar: boolean;
-    scrollbarWidth: number;
-};
-export declare const initialState: {
-    hasScrollbar: boolean;
-    scrollbarWidth: number;
-};
-export declare const MrlPanelContext: React.Context<MrlPanelContextState>;
+import { ScrollbarInfo } from '../../../hooks';
+export type MrlPanelContextState = ScrollbarInfo;
+export declare const initialState: MrlPanelContextState;
+export declare const MrlPanelContext: React.Context<ScrollbarInfo>;
 /**
  * Returns the MrlPanelContext state.
  *

package/dist/components/popover/MrlPopover/hooks/use-mrl-popover-event-handlers.d.ts

@@ -21,7 +21,7 @@ type UseMrlPopoverEventHandlersReturn = {
     hideMenuHover: (e: MouseEvent) => void;
     showMenuHover: () => void;
     toggleMenuKey: (e: KeyboardEvent) => void;
-    toggleMenuMouse: () => void;
+    toggleMenuTrigger: () => void;
 };
 /**
  * Creates all of the required event handlers for the MrlPopover component

package/dist/hooks/index.d.ts

@@ -2,4 +2,3 @@ export * from './useCoordinate';
 export * from './useBreakpoint';
 export * from './useElementDimensions';
 export * from './useScrollbarInfo';
-export * from './useReducedMotion';

package/dist/hooks/useScrollbarInfo/index.d.ts

@@ -1,14 +1,24 @@
 import * as React from 'react';
-export type UseScrollbarInfoReturn<T extends HTMLElement> = {
+export type ScrollbarInfo = {
+    /** Indicates if a horizontal scrollbar is present */
     hasHorizontalScrollbar: boolean;
+    /** Indicates if a vertical scrollbar is present */
     hasVerticalScrollbar: boolean;
+    /** Width in pixels of the vertical scrollbar (0 for overlay scrollbars) */
+    verticalScrollbarWidth: number;
+    /** Height in pixels of the horizontal scrollbar (0 for overlay scrollbars) */
+    horizontalScrollbarHeight: number;
+};
+/**
+ * Return type for the `useScrollbarInfo` hook.
+ */
+export type UseScrollbarInfoReturn<T extends HTMLElement> = ScrollbarInfo & {
     scrollableContainerRef: React.MutableRefObject<T | null>;
-    scrollbarWidth: number;
 };
 /**
- * Custom hook that provides information about the presence and width of scrollbars
+ * Custom hook that provides information about the presence and dimensions of vertical and horizontal scrollbars
  * in a scrollable container.
  *
- * @returns {UseScrollbarInfoReturn} hasHorizontalScrollbar, hasVerticalScrollbar and scrollbarWidth values.
+ * @returns {UseScrollbarInfoReturn} Returns the scrollbar information and a ref to attach to the scrollable container
  */
 export declare function useScrollbarInfo<T extends HTMLElement>(): UseScrollbarInfoReturn<T>;