@muraldevkit/ui-toolkit 4.61.2 → 4.61.3-dev-doqU.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { MenuPosition } from '../constants';
|
|
3
|
+
interface UseMenuScrollResult {
|
|
4
|
+
/** The constrained max height for the menu list when scrolling is active */
|
|
5
|
+
maxHeight: number | undefined;
|
|
6
|
+
/** Whether the menu content exceeds available space and requires internal scrolling */
|
|
7
|
+
isScrolling: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* useMenuScroll hook
|
|
11
|
+
*
|
|
12
|
+
* Detects when a menu cannot fit on screen in either its preferred or flipped position,
|
|
13
|
+
* and constrains its height to enable internal scrolling.
|
|
14
|
+
*
|
|
15
|
+
* Behavior by position:
|
|
16
|
+
* - **top/bottom**: If the menu doesn't fit in the preferred direction AND doesn't fit
|
|
17
|
+
* in the opposite direction (flip), it reverts to the original position and constrains
|
|
18
|
+
* the height to the space between the trigger edge and the viewport edge.
|
|
19
|
+
* - **left/right**: Only checks vertical overflow. If the menu is taller than the viewport,
|
|
20
|
+
* it constrains the height to the available vertical space.
|
|
21
|
+
*
|
|
22
|
+
* Uses `scrollHeight` on the list element to determine the natural (unconstrained) content
|
|
23
|
+
* height. This value remains stable even when `maxHeight` is applied, preventing feedback
|
|
24
|
+
* loops with external positioning hooks that use ResizeObserver.
|
|
25
|
+
*
|
|
26
|
+
* Uses `useLayoutEffect` for the initial calculation so that `maxHeight` is applied
|
|
27
|
+
* synchronously before the browser paints. This prevents visible flicker when the menu
|
|
28
|
+
* opens in a constrained space, because the positioning hook (useTriggerPosition) will
|
|
29
|
+
* see the already-constrained height on its first measurement via requestAnimationFrame.
|
|
30
|
+
*
|
|
31
|
+
* @param triggerRef - Reference to the trigger element that opens the menu
|
|
32
|
+
* @param listRef - Reference to the ul element inside the menu (the scrollable container)
|
|
33
|
+
* @param position - The preferred menu position relative to the trigger
|
|
34
|
+
* @param menuOffset - The gap between the trigger and the menu in pixels
|
|
35
|
+
* @param isOpen - Whether the menu is currently open
|
|
36
|
+
* @param disable - Whether to disable the hook entirely
|
|
37
|
+
* @returns An object with `maxHeight` (inline style value) and `isScrolling` (class toggle)
|
|
38
|
+
*/
|
|
39
|
+
export declare const useMenuScroll: (triggerRef: RefObject<HTMLElement> | undefined, listRef: RefObject<HTMLUListElement>, position: MenuPosition, menuOffset: number, isOpen: boolean, disable: boolean) => UseMenuScrollResult;
|
|
40
|
+
export {};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { MenuPosition } from '../constants';
|
|
3
|
+
interface UseMenuScrollResult {
|
|
4
|
+
/** The constrained max height for the menu list when scrolling is active */
|
|
5
|
+
maxHeight: number | undefined;
|
|
6
|
+
/** Whether the menu content exceeds available space and requires internal scrolling */
|
|
7
|
+
isScrolling: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* useMenuScroll hook
|
|
11
|
+
*
|
|
12
|
+
* Detects when a menu cannot fit on screen in either its preferred or flipped position,
|
|
13
|
+
* and constrains its height to enable internal scrolling.
|
|
14
|
+
*
|
|
15
|
+
* Behavior by position:
|
|
16
|
+
* - **top/bottom**: If the menu doesn't fit in the preferred direction AND doesn't fit
|
|
17
|
+
* in the opposite direction (flip), it reverts to the original position and constrains
|
|
18
|
+
* the height to the space between the trigger edge and the viewport edge.
|
|
19
|
+
* - **left/right**: Only checks vertical overflow. If the menu is taller than the viewport,
|
|
20
|
+
* it constrains the height to the available vertical space.
|
|
21
|
+
*
|
|
22
|
+
* Uses `scrollHeight` on the list element to determine the natural (unconstrained) content
|
|
23
|
+
* height. This value remains stable even when `maxHeight` is applied, preventing feedback
|
|
24
|
+
* loops with external positioning hooks that use ResizeObserver.
|
|
25
|
+
*
|
|
26
|
+
* Uses `useLayoutEffect` for the initial calculation so that `maxHeight` is applied
|
|
27
|
+
* synchronously before the browser paints. This prevents visible flicker when the menu
|
|
28
|
+
* opens in a constrained space, because the positioning hook (useTriggerPosition) will
|
|
29
|
+
* see the already-constrained height on its first measurement via requestAnimationFrame.
|
|
30
|
+
*
|
|
31
|
+
* @param triggerRef - Reference to the trigger element that opens the menu
|
|
32
|
+
* @param listRef - Reference to the ul element inside the menu (the scrollable container)
|
|
33
|
+
* @param position - The preferred menu position relative to the trigger
|
|
34
|
+
* @param menuOffset - The gap between the trigger and the menu in pixels
|
|
35
|
+
* @param isOpen - Whether the menu is currently open
|
|
36
|
+
* @param disable - Whether to disable the hook entirely
|
|
37
|
+
* @returns An object with `maxHeight` (inline style value) and `isScrolling` (class toggle)
|
|
38
|
+
*/
|
|
39
|
+
export declare const useMenuScroll: (triggerRef: RefObject<HTMLElement> | undefined, listRef: RefObject<HTMLUListElement>, position: MenuPosition, menuOffset: number, isOpen: boolean, disable: boolean) => UseMenuScrollResult;
|
|
40
|
+
export {};
|