@ringcentral/spring-base 1.8.0 → 1.9.1

package/hooks.js

@@ -2,17 +2,17 @@ import { unstable_useEventCallback, unstable_ownerDocument, unstable_Timeout, un
 export { unstable_useControlled as useControlled } from '@mui/utils';
 import * as React from 'react';
 import { useState, useEffect, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
-import uniqueId from 'lodash/uniqueId';
 import { useWindowContext, useResponsiveContext, getMatchDetail } from './contexts.js';
-import { a as ariaHideOutside, g as getRefElement, l as logInDev, c as combineProps, o as ownerWindow } from './chunks/twMerge.js';
-import 'lodash/isPlainObject';
+import uniqueId from 'lodash/uniqueId';
+import { useButton as useButton$1 } from '@mui/base/useButton';
+import { c as combineProps, a as ariaHideOutside, g as getRefElement, l as logInDev, o as ownerWindow } from './chunks/twMerge.js';
 import './config.js';
 import 'lodash/omit';
 import 'lodash/pick';
+import 'lodash/isPlainObject';
 import debounce from 'lodash/debounce';
 import noop from 'lodash/noop';
 import throttle from 'lodash/throttle';
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import 'tailwind-merge';
 
 const useEventCallback = (func) => {
@@ -39,18 +39,29 @@ const isNativeButton = (el) => {
             ['button', 'submit', 'reset'].includes(el?.type)) ||
         (tag === 'A' && el?.href));
 };
-const useActive = ({ onKeyDown, onKeyUp, onClick, disabled = false, } = {}) => {
+const useActive = ({ onKeyDown, onKeyUp, onMouseDown, onClick, disabled = false, } = {}) => {
     const [active, setActive] = useState(false);
+    const { document: targetDocument = document } = useWindowContext();
     useEffect(() => {
         if (disabled)
             setActive(false);
     }, [disabled]);
     if (disabled) {
         return {
-            activeHandlers: { onKeyDown, onKeyUp, onClick },
+            activeHandlers: { onKeyDown, onKeyUp, onMouseDown, onClick },
             active: false,
         };
     }
+    const handleMouseDown = (event) => {
+        onMouseDown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        setActive(true);
+        targetDocument.addEventListener('mouseup', () => {
+            setActive(false);
+        }, { once: true });
+    };
     const handleKeyDown = (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented) {
@@ -84,7 +95,12 @@ const useActive = ({ onKeyDown, onKeyUp, onClick, disabled = false, } = {}) => {
         }
     };
     return {
-        activeHandlers: { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick },
+        activeHandlers: {
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+            onMouseDown: handleMouseDown,
+            onClick,
+        },
         active,
     };
 };
@@ -155,6 +171,23 @@ const useAnnouncer = (id) => {
     }, []);
 };
 
+function useButton(parameters) {
+    const muiButtonResult = useButton$1(parameters);
+    const { active: customActive, activeHandlers } = useActive({
+        disabled: parameters.disabled,
+    });
+    const originalGetRootProps = muiButtonResult.getRootProps;
+    const getRootProps = (externalProps) => {
+        const mergedProps = combineProps(externalProps, activeHandlers);
+        return originalGetRootProps(mergedProps);
+    };
+    return {
+        ...muiButtonResult,
+        active: customActive,
+        getRootProps,
+    };
+}
+
 const useAriaHideOutside = (props = {}) => {
     const { enable = true } = props;
     const { externalWindow, document } = useWindowContext();
@@ -1445,32 +1478,380 @@ const useFontLoaded = (enabled = true) => {
     return loaded;
 };
 
+function createInitialState() {
+    return {
+        entries: [],
+        savedBodyOverflow: '',
+        savedBodyPaddingRight: null,
+        docTouchStartHandler: null,
+        docTouchMoveHandler: null,
+        touchStartY: 0,
+        touchStartX: 0,
+        nonIOSLocked: false,
+        nonIOSReservedScrollBarGap: false,
+    };
+}
+function isIOS(win) {
+    const { platform, maxTouchPoints, userAgent } = win.navigator;
+    return (/iP(ad|hone|od)/.test(platform) ||
+        (platform === 'MacIntel' && maxTouchPoints > 1) ||
+        /iPad|iPhone|iPod/.test(userAgent));
+}
+function isScrollableElement(el, win) {
+    const { overflow, overflowX, overflowY } = win.getComputedStyle(el);
+    if (!/(auto|scroll|overlay)/.test(overflow + overflowX + overflowY))
+        return false;
+    return (el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1);
+}
+function isScrollBoundaryHit(scrollable, dx, dy) {
+    if (Math.abs(dy) >= Math.abs(dx)) {
+        if (dy > 0 && scrollable.scrollTop <= 0)
+            return true;
+        return (dy < 0 &&
+            scrollable.scrollTop + scrollable.clientHeight >=
+                scrollable.scrollHeight - 1);
+    }
+    if (dx > 0 && scrollable.scrollLeft <= 0)
+        return true;
+    return (dx < 0 &&
+        scrollable.scrollLeft + scrollable.clientWidth >= scrollable.scrollWidth - 1);
+}
+function findNearestScrollableAncestorWithinBoundary(el, win, boundary) {
+    const { body, documentElement } = win.document;
+    let cur = el;
+    while (cur && cur !== body && cur !== documentElement) {
+        if (isScrollableElement(cur, win))
+            return cur;
+        if (cur === boundary)
+            break;
+        cur = cur.parentElement;
+    }
+    return null;
+}
+function getActiveEntries(state) {
+    return state.entries.filter((entry) => entry.active);
+}
+function getBoundaryForEntry(topEntry) {
+    return topEntry.kind === 'element' ? topEntry.element : null;
+}
+function getScrollableWithinBoundary(target, win, boundary) {
+    if (boundary && !boundary.contains(target)) {
+        return null;
+    }
+    return findNearestScrollableAncestorWithinBoundary(target, win, boundary);
+}
+function getEntryScopedScrollable(topEntry, target, win, { allowAnonymous = false } = {}) {
+    const boundary = getBoundaryForEntry(topEntry);
+    if (!boundary && !allowAnonymous) {
+        return null;
+    }
+    return getScrollableWithinBoundary(target, win, boundary);
+}
+function getAllowTouchMoveScrollable(entry, target, win) {
+    if (entry.allowTouchMove?.(target) !== true)
+        return null;
+    return getEntryScopedScrollable(entry, target, win, {
+        allowAnonymous: true,
+    });
+}
+function canEntryAllowInnerScroll(entry, target, win, dx, dy) {
+    const allowTouchMoveScrollable = getAllowTouchMoveScrollable(entry, target, win);
+    if (allowTouchMoveScrollable) {
+        return !isScrollBoundaryHit(allowTouchMoveScrollable, dx, dy);
+    }
+    const boundaryScrollable = getEntryScopedScrollable(entry, target, win);
+    if (boundaryScrollable) {
+        return !isScrollBoundaryHit(boundaryScrollable, dx, dy);
+    }
+    return false;
+}
+function findEntryIndex(state, targetElement, entryKey) {
+    if (entryKey) {
+        return state.entries.findIndex((entry) => entry.key === entryKey);
+    }
+    if (targetElement) {
+        for (let i = state.entries.length - 1; i >= 0; i--) {
+            const entry = state.entries[i];
+            if (entry.kind === 'element' && entry.element === targetElement) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    for (let i = state.entries.length - 1; i >= 0; i--) {
+        if (state.entries[i].kind === 'anonymous') {
+            return i;
+        }
+    }
+    return -1;
+}
+function ensureEntry(state, targetElement, options = {}) {
+    const index = findEntryIndex(state, targetElement, options.entryKey);
+    const kind = targetElement ? 'element' : 'anonymous';
+    if (index >= 0) {
+        const entry = state.entries[index];
+        entry.kind = kind;
+        entry.element = targetElement ?? null;
+        entry.reserveScrollBarGap = Boolean(options.reserveScrollBarGap);
+        entry.allowTouchMove = options.allowTouchMove;
+        return entry;
+    }
+    const entry = {
+        key: options.entryKey ?? Symbol('scroll-lock-entry'),
+        kind,
+        element: targetElement ?? null,
+        active: true,
+        reserveScrollBarGap: Boolean(options.reserveScrollBarGap),
+        allowTouchMove: options.allowTouchMove,
+    };
+    state.entries.push(entry);
+    return entry;
+}
+function shouldPreventTouchMove(e, state, win) {
+    if (e.touches.length > 1)
+        return false;
+    if (e.ctrlKey)
+        return false;
+    if (!e.cancelable)
+        return false;
+    const touch = e.touches[0];
+    if (!touch)
+        return false;
+    const dy = touch.clientY - state.touchStartY;
+    const dx = touch.clientX - state.touchStartX;
+    if (dy === 0 && dx === 0)
+        return false;
+    if (getActiveEntries(state).length === 0)
+        return false;
+    const target = e.target;
+    if (!(target instanceof win.Element)) {
+        return true;
+    }
+    for (let i = state.entries.length - 1; i >= 0; i--) {
+        if (canEntryAllowInnerScroll(state.entries[i], target, win, dx, dy)) {
+            return false;
+        }
+    }
+    return true;
+}
+function lockIOS(state, win) {
+    const doc = win.document;
+    state.docTouchStartHandler = (e) => {
+        if (e.touches.length > 0) {
+            state.touchStartY = e.touches[0].clientY;
+            state.touchStartX = e.touches[0].clientX;
+        }
+    };
+    state.docTouchMoveHandler = (e) => {
+        if (shouldPreventTouchMove(e, state, win)) {
+            e.preventDefault();
+        }
+    };
+    doc.addEventListener('touchstart', state.docTouchStartHandler, {
+        passive: true,
+    });
+    doc.addEventListener('touchmove', state.docTouchMoveHandler, {
+        passive: false,
+    });
+}
+function unlockIOS(state, win) {
+    const doc = win.document;
+    if (state.docTouchStartHandler) {
+        doc.removeEventListener('touchstart', state.docTouchStartHandler);
+        state.docTouchStartHandler = null;
+    }
+    if (state.docTouchMoveHandler) {
+        doc.removeEventListener('touchmove', state.docTouchMoveHandler);
+        state.docTouchMoveHandler = null;
+    }
+}
+function lockNonIOS(state, win, { reserveScrollBarGap = false }) {
+    const body = win.document.body;
+    const gap = win.innerWidth - win.document.documentElement.clientWidth;
+    state.savedBodyOverflow = body.style.overflow;
+    if (reserveScrollBarGap && gap > 0) {
+        const computedPaddingRight = parseInt(win.getComputedStyle(body).paddingRight, 10) || 0;
+        state.savedBodyPaddingRight = body.style.paddingRight;
+        body.style.paddingRight = `${computedPaddingRight + gap}px`;
+    }
+    body.style.overflow = 'hidden';
+}
+function unlockNonIOS(state, win) {
+    const body = win.document.body;
+    body.style.overflow = state.savedBodyOverflow;
+    if (state.savedBodyPaddingRight !== null) {
+        if (state.savedBodyPaddingRight === '') {
+            body.style.removeProperty('padding-right');
+        }
+        else {
+            body.style.paddingRight = state.savedBodyPaddingRight;
+        }
+        state.savedBodyPaddingRight = null;
+    }
+}
+function bodyLockDesired(state) {
+    return getActiveEntries(state).length > 0;
+}
+function shouldReserveScrollBarGap(state) {
+    return state.entries.some((entry) => entry.active && entry.reserveScrollBarGap);
+}
+function syncIOS(state, win) {
+    const desired = state.entries.length > 0;
+    const attached = state.docTouchMoveHandler !== null;
+    if (desired === attached)
+        return;
+    if (desired) {
+        lockIOS(state, win);
+    }
+    else {
+        unlockIOS(state, win);
+    }
+}
+function syncNonIOS(state, win) {
+    const desired = bodyLockDesired(state);
+    const reserveScrollBarGap = shouldReserveScrollBarGap(state);
+    if (!desired) {
+        if (!state.nonIOSLocked)
+            return;
+        unlockNonIOS(state, win);
+        state.nonIOSLocked = false;
+        state.nonIOSReservedScrollBarGap = false;
+        return;
+    }
+    if (!state.nonIOSLocked) {
+        lockNonIOS(state, win, {
+            reserveScrollBarGap,
+        });
+        state.nonIOSLocked = true;
+        state.nonIOSReservedScrollBarGap = reserveScrollBarGap;
+        return;
+    }
+    if (reserveScrollBarGap === state.nonIOSReservedScrollBarGap)
+        return;
+    unlockNonIOS(state, win);
+    lockNonIOS(state, win, { reserveScrollBarGap });
+    state.nonIOSReservedScrollBarGap = reserveScrollBarGap;
+}
+function syncScrollLock(state, win) {
+    if (isIOS(win)) {
+        syncIOS(state, win);
+    }
+    else {
+        syncNonIOS(state, win);
+    }
+}
+function activateEntry(state, win, targetElement, options = {}) {
+    const entry = ensureEntry(state, targetElement, options);
+    entry.active = true;
+    syncScrollLock(state, win);
+}
+function lock(state, win, targetElement, options = {}) {
+    activateEntry(state, win, targetElement, options);
+}
+function unlock(state, win, targetElement, options = {}) {
+    const index = findEntryIndex(state, targetElement, options.entryKey);
+    if (index < 0)
+        return;
+    state.entries.splice(index, 1);
+    syncScrollLock(state, win);
+}
+function pause(state, win, targetElement, options = {}) {
+    const index = findEntryIndex(state, targetElement, options.entryKey);
+    if (index < 0 || state.entries[index].active === false)
+        return;
+    state.entries[index].active = false;
+    syncScrollLock(state, win);
+}
+
+const SCROLL_LOCK_KEY = '__SUI_SCROLL_LOCK__';
+function getStoredScrollLockState(win) {
+    return win[SCROLL_LOCK_KEY];
+}
+function setStoredScrollLockState(win, state) {
+    const global = win;
+    global[SCROLL_LOCK_KEY] = state;
+    return state;
+}
+function getOrCreateScrollLockState(win) {
+    const state = getStoredScrollLockState(win);
+    if (!state) {
+        return setStoredScrollLockState(win, createInitialState());
+    }
+    return state;
+}
+
+function applyLockState(state, win, targetElement, options, disabled) {
+    lock(state, win, targetElement, options);
+    if (disabled) {
+        pause(state, win, targetElement, options);
+    }
+}
+function useResolvedElement(target) {
+    const [resolvedElement, setResolvedElement] = useState(() => (getRefElement(target) ?? null));
+    const targetRef = useRef(target);
+    targetRef.current = target;
+    useEffect(() => {
+        const nextResolvedElement = (getRefElement(targetRef.current) ??
+            null);
+        setResolvedElement((current) => current === nextResolvedElement ? current : nextResolvedElement);
+    });
+    return resolvedElement;
+}
 const useBodyScrollLock = (isLocked, targetElement, options = {}) => {
-    const { disabled = false, reserveScrollBarGap = true, allowTouchMove, } = options;
-    const { document } = useWindowContext();
+    const { disabled = false, reserveScrollBarGap = true } = options;
+    const { allowTouchMove } = options;
+    const entryKeyRef = useRef(Symbol('use-body-scroll-lock-entry'));
+    const resolvedElement = useResolvedElement(targetElement);
+    const { globalThis: global } = useWindowContext();
     useEffect(() => {
-        if (disabled || !document?.body)
+        if (!isLocked)
             return;
-        const element = targetElement || document.body;
-        if (isLocked) {
-            disableBodyScroll(element, {
-                reserveScrollBarGap,
-                allowTouchMove,
-            });
-        }
+        const win = global;
+        const state = getOrCreateScrollLockState(global);
+        const entryKey = entryKeyRef.current;
+        const syncOptions = {
+            reserveScrollBarGap,
+            allowTouchMove,
+            entryKey,
+        };
+        applyLockState(state, win, resolvedElement, syncOptions, disabled);
         return () => {
-            if (isLocked) {
-                enableBodyScroll(element);
+            const currentState = getStoredScrollLockState(global);
+            if (currentState) {
+                unlock(currentState, win, resolvedElement, { entryKey });
             }
         };
+    }, [isLocked, global]);
+    useEffect(() => {
+        if (!isLocked)
+            return;
+        const win = global;
+        const state = getOrCreateScrollLockState(global);
+        const entryKey = entryKeyRef.current;
+        const syncOptions = {
+            reserveScrollBarGap,
+            allowTouchMove,
+            entryKey,
+        };
+        applyLockState(state, win, resolvedElement, syncOptions, disabled);
     }, [
-        isLocked,
-        targetElement,
+        allowTouchMove,
         disabled,
+        isLocked,
+        global,
+        resolvedElement,
         reserveScrollBarGap,
-        allowTouchMove,
-        document,
     ]);
 };
 
-export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, visuallyHiddenStyles };
+const useVirtuosoExternalWindow = () => {
+    const { externalWindow } = useWindowContext();
+    if (externalWindow && externalWindow !== globalThis.window) {
+        return {
+            externalWindow,
+        };
+    }
+    return undefined;
+};
+
+export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, useVirtuosoExternalWindow, visuallyHiddenStyles };

package/index.js

@@ -1,16 +1,16 @@
 export { configure, rcConfiguration } from './config.js';
 export { RcResponsiveContext, WindowContext, breakpointList, getMatchDetail, useResponsiveContext, useWindowContext } from './contexts.js';
-export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, visuallyHiddenStyles } from './hooks.js';
+export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, useVirtuosoExternalWindow, visuallyHiddenStyles } from './hooks.js';
 export { unstable_ownerDocument as ownerDocument, unstable_useControlled as useControlled } from '@mui/utils';
 export { a11yKeyboard, capitalize, checkDefaultPrevented, checkElementName, clearWindowSelection, getSelectionPosition, getTitle, globalStateClasses, isDeleteKeyboardEvent, isSuiElement, isUrl, isWebKit154, omit, outerSize, pick, preloadImg, removeClassName, runKeyHandler, setSelectionPosition, useClasses } from './utils.js';
 export { a as ariaHideOutside, b as combineClasses, c as combineProps, g as getRefElement, i as isRef, l as logInDev, o as ownerWindow, t as twMerge } from './chunks/twMerge.js';
 import 'react';
 import 'lodash/uniqueId';
-import 'lodash/isPlainObject';
+import '@mui/base/useButton';
 import 'lodash/omit';
 import 'lodash/pick';
+import 'lodash/isPlainObject';
 import 'lodash/debounce';
 import 'lodash/noop';
 import 'lodash/throttle';
-import 'body-scroll-lock';
 import 'tailwind-merge';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-base",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "author": "RingCentral",
   "description": "Core utilities, hooks, and foundational functionality for Spring UI components, providing essential building blocks for React applications",
   "main": "./index.js",
@@ -9,7 +9,6 @@
   "dependencies": {
     "@mui/utils": "^6.0.2",
     "@types/lodash": "^4.14.182",
-    "body-scroll-lock": "4.0.0-beta.0",
     "clsx": "^1.2.1",
     "framer-motion": "^6.5.1",
     "lodash": "^4.17.21",

package/src/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useA11yKeyEvent';
 export * from './useActive';
 export * from './useAnnouncer';
+export * from './useButton';
 export * from './useAriaHideOutside';
 export * from './useAudio';
 export * from './useChange';
@@ -41,3 +42,4 @@ export * from './useTimeout';
 export * from './useTouchMouseEvent';
 export * from './useFontLoaded';
 export * from './useBodyScrollLock';
+export * from './useVirtuosoExternalWindow';

package/src/hooks/useActive/useActive.d.ts

@@ -1,14 +1,16 @@
-import { EventHandler, KeyboardEventHandler, SyntheticEvent } from 'react';
+import { EventHandler, KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from 'react';
 export declare type UseActiveOptions = {
     onKeyDown?: KeyboardEventHandler;
     onKeyUp?: KeyboardEventHandler;
+    onMouseDown?: MouseEventHandler;
     onClick?: EventHandler<SyntheticEvent>;
     disabled?: boolean;
 };
-export declare const useActive: ({ onKeyDown, onKeyUp, onClick, disabled, }?: UseActiveOptions) => {
+export declare const useActive: ({ onKeyDown, onKeyUp, onMouseDown, onClick, disabled, }?: UseActiveOptions) => {
     activeHandlers: {
         onKeyDown: KeyboardEventHandler<Element> | undefined;
         onKeyUp: KeyboardEventHandler<Element> | undefined;
+        onMouseDown: MouseEventHandler<Element> | undefined;
         onClick: ((event: SyntheticEvent<Element, Event>) => void) | undefined;
     };
     active: boolean;

package/src/hooks/useBodyScrollLock/bodyScrollLock.d.ts

@@ -0,0 +1,31 @@
+declare type Win = Window & typeof globalThis;
+export interface ScrollLockOptions {
+    reserveScrollBarGap?: boolean;
+    allowTouchMove?: (el: Element) => boolean;
+    entryKey?: symbol;
+}
+interface LockEntry {
+    key: symbol;
+    kind: 'anonymous' | 'element';
+    element: HTMLElement | null;
+    active: boolean;
+    reserveScrollBarGap: boolean;
+    allowTouchMove?: (el: Element) => boolean;
+}
+export interface WindowState {
+    entries: LockEntry[];
+    savedBodyOverflow: string;
+    savedBodyPaddingRight: string | null;
+    docTouchStartHandler: ((e: TouchEvent) => void) | null;
+    docTouchMoveHandler: ((e: TouchEvent) => void) | null;
+    touchStartY: number;
+    touchStartX: number;
+    nonIOSLocked: boolean;
+    nonIOSReservedScrollBarGap: boolean;
+}
+export declare function createInitialState(): WindowState;
+export declare function lock(state: WindowState, win: Win, targetElement?: HTMLElement | null, options?: ScrollLockOptions): void;
+export declare function unlock(state: WindowState, win: Win, targetElement?: HTMLElement | null, options?: ScrollLockOptions): void;
+export declare function pause(state: WindowState, win: Win, targetElement?: HTMLElement | null, options?: ScrollLockOptions): void;
+export declare function clearAllLocks(state: WindowState, win: Win): void;
+export {};

package/src/hooks/useBodyScrollLock/internal.d.ts

@@ -0,0 +1,6 @@
+import type { WindowState } from './bodyScrollLock';
+export declare const SCROLL_LOCK_KEY = "__SUI_SCROLL_LOCK__";
+export declare function getStoredScrollLockState(win: typeof globalThis): WindowState | undefined;
+export declare function setStoredScrollLockState(win: typeof globalThis, state: WindowState): WindowState;
+export declare function getOrCreateScrollLockState(win: typeof globalThis): WindowState;
+export declare function deleteStoredScrollLockState(win: typeof globalThis): void;

package/src/hooks/useBodyScrollLock/useBodyScrollLock.d.ts

@@ -1,6 +1,8 @@
+import { RefObject } from 'react';
+export declare type UseBodyScrollLockTarget = HTMLElement | RefObject<HTMLElement | null> | null | undefined;
 export interface UseBodyScrollLockOptions {
     disabled?: boolean;
     reserveScrollBarGap?: boolean;
     allowTouchMove?: (el: Element) => boolean;
 }
-export declare const useBodyScrollLock: (isLocked: boolean, targetElement?: HTMLElement | null | undefined, options?: UseBodyScrollLockOptions) => void;
+export declare const useBodyScrollLock: (isLocked: boolean, targetElement?: UseBodyScrollLockTarget, options?: UseBodyScrollLockOptions) => void;

package/src/hooks/useButton/index.d.ts

@@ -0,0 +1 @@
+export { useButton } from './useButton';

package/src/hooks/useButton/useButton.d.ts

@@ -0,0 +1,2 @@
+import { UseButtonParameters, UseButtonReturnValue } from '@mui/base/useButton';
+export declare function useButton(parameters: UseButtonParameters): UseButtonReturnValue;

package/src/hooks/useVirtuosoExternalWindow/index.d.ts

@@ -0,0 +1 @@
+export * from './useVirtuosoExternalWindow';

package/src/hooks/useVirtuosoExternalWindow/useVirtuosoExternalWindow.d.ts

@@ -0,0 +1,5 @@
+declare type ExternalWindowProps = {
+    externalWindow: Window & typeof globalThis;
+};
+export declare const useVirtuosoExternalWindow: () => ExternalWindowProps | undefined;
+export {};

package/src/typings/ComponentTypes.d.ts

@@ -7,15 +7,16 @@ export declare type GroupedMotionProps<P = {}> = Pick<MotionProps, Extract<keyof
 export declare type ClassesProp<K extends string> = {
     classes?: Partial<Record<K | 'root' | GlobalStateClassesKey, string>>;
 };
-export declare type PropsWithRoot<P, R extends ElementType, O extends string = ''> = P & Omit<ComponentPropsWithRef<R>, keyof P | O>;
-export declare type StandardProps<P, C extends string, R extends ElementType | void = void, O extends string = '', ExtendAttributes = HTMLDataAttribute> = ClassesProp<C> & (R extends ElementType ? PropsWithRoot<P, R, 'classes' | O> : P & {
+export declare type PropsWithRoot<P, R extends ElementType, O extends string = '', E = HTMLDataAttribute> = P & Omit<ComponentPropsWithRef<R>, keyof P | O> & E;
+export declare type SlotProps<R extends ElementType, O extends keyof ComponentPropsWithRef<R> = never, E = HTMLDataAttribute> = Omit<ComponentPropsWithRef<R>, O | 'className'> & E;
+export declare type StandardProps<P, C extends string, R extends ElementType | void = void, O extends string = '', ExtendAttributes = HTMLDataAttribute> = ClassesProp<C> & (R extends ElementType ? PropsWithRoot<P, R, 'classes' | O, ExtendAttributes> : P & {
     className?: string;
 }) & ExtendAttributes;
 export declare type WithClassesProps<P, C extends string> = P & ClassesProp<C>;
 export declare type BaseOverridableProps<P, C extends string> = WithClassesProps<P, C>;
-export declare type OverridableProps<B, T extends ElementType> = B & {
+export declare type OverridableProps<B, T extends ElementType, E = HTMLDataAttribute> = B & {
     component?: T;
-} & Omit<ComponentPropsWithRef<T>, keyof B>;
+} & Omit<ComponentPropsWithRef<T>, keyof B> & E;
 export declare type RefFromProps<P> = P extends {
     ref?: LegacyRef<infer R> | undefined;
 } ? R : never;