@ringcentral/spring-base 1.9.0 → 1.9.1

package/hooks.js

@@ -13,7 +13,6 @@ 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) => {
@@ -1479,31 +1478,369 @@ 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,
     ]);
 };
 

package/index.js

@@ -13,5 +13,4 @@ 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.9.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/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/typings/ComponentTypes.d.ts

@@ -8,6 +8,7 @@ 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 = '', 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;