@ringcentral/spring-ui 1.7.0 → 1.9.0

package/SwipeableDrawer.js

@@ -19,15 +19,12 @@ import './chunks/Backdrop.js';
 
 var SwipeableDrawer$1 = {"sui-swipeable-drawer-header-drag":"sui-swipeable-drawer-header-drag"};
 
-// Keeps track of whether everything is good to go or not, in the most efficient way possible
 function useReady() {
     const [ready, setReady] = useState(false);
     const [readyMap, updateReadyMap] = useState({});
     const registerReady = useCallback((key) => {
-        // Register the check we're gonna wait for until it's ready
         updateReadyMap((ready) => ({ ...ready, [key]: false }));
         return () => {
-            // Set it to ready
             updateReadyMap((ready) => ({ ...ready, [key]: true }));
         };
     }, []);
@@ -47,40 +44,28 @@ function useReady() {
     return { ready, registerReady };
 }
 
-// Hook for determining the size of an element using the Resize Observer API
 const observerOptions = {
-    // Respond to changes to padding, happens often on iOS when using env(safe-area-inset-bottom)
-    // And the user hides or shows the Safari browser toolbar
     box: 'border-box',
 };
-/**
- * Hook for determining the size of an element using the Resize Observer API.
- *
- * @param ref - A React ref to an element
- */
 function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
+    const { externalWindow, globalThis } = useWindowContext();
+    const win = externalWindow ?? globalThis;
     const [size, setSize] = useState(0);
     const handleResize = useCallback((entries) => {
-        // we only observe one element, so accessing the first entry here is fine
         const entry = entries?.[0];
         if (!entry) {
-            // Early return if no entry - can happen during observer disconnect
             return;
         }
         const el = entry.target;
         if (!el) {
-            // Early return if no target element
             return;
         }
-        // Prefer intrinsic content size to visible height so drag doesn’t change the measured height
-        // @juggle/resize-observer provides consistent borderBoxSize access across browsers
         const roBlock = entry?.borderBoxSize?.[0]?.blockSize ?? 0;
         const contentRectH = entry?.contentRect?.height ?? 0;
         const scrollH = el?.scrollHeight ?? 0;
         const offsetH = el?.offsetHeight ?? 0;
         const newSize = Math.max(scrollH, roBlock, contentRectH, offsetH);
         setSize(newSize);
-        // Update resize source if provided
         if (resizeSourceRef) {
             resizeSourceRef.current = 'element';
         }
@@ -89,6 +74,8 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
         if (!enabled) {
             return;
         }
+        const rAF = win.requestAnimationFrame.bind(win);
+        const cAF = win.cancelAnimationFrame.bind(win);
         let resizeObserver = null;
         let rafId = 0;
         let initialMeasurementRafId = 0;
@@ -96,93 +83,81 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
             const el = ref.current;
             if (!el || !el.isConnected)
                 return;
-            // @juggle/resize-observer provides cross-browser compatibility and polyfills
             resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(el, observerOptions);
-            // Seed an initial measurement in case RO hasn't fired yet
-            initialMeasurementRafId = requestAnimationFrame(() => {
+            initialMeasurementRafId = rAF(() => {
                 const initial = Math.max(el.scrollHeight, el.offsetHeight, el.getBoundingClientRect().height);
                 if (initial > 0) {
                     setSize(initial);
                 }
-                // else keep waiting for RO to update on next ticks
             });
         };
-        // If the element is not yet mounted (e.g. Modal shouldRender=false), keep
-        // polling via rAF until it's available, then attach the observer.
         const waitForElement = () => {
             if (ref.current) {
                 startObserving();
             }
             else {
-                rafId = requestAnimationFrame(waitForElement);
+                rafId = rAF(waitForElement);
             }
         };
         if (ref.current) {
             startObserving();
         }
         else {
-            rafId = requestAnimationFrame(waitForElement);
+            rafId = rAF(waitForElement);
         }
         return () => {
             if (rafId)
-                cancelAnimationFrame(rafId);
+                cAF(rafId);
             if (initialMeasurementRafId)
-                cancelAnimationFrame(initialMeasurementRafId);
+                cAF(initialMeasurementRafId);
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
         };
-    }, [ref, handleResize, enabled]);
+    }, [ref, handleResize, enabled, win]);
     return enabled ? size : 0;
 }
 
-// Hook for measuring drawer dimensions
-// Hook for tracking viewport height
 function useMaxHeight(registerReady) {
-    const { globalThis } = useWindowContext();
+    const { externalWindow, globalThis } = useWindowContext();
+    const win = externalWindow ?? globalThis;
     const setReady = useMemo(() => {
         return registerReady ? registerReady('maxHeight') : undefined;
     }, [registerReady]);
-    const [maxHeight, setMaxHeight] = useState(() => globalThis.innerHeight ?? 0);
+    const [maxHeight, setMaxHeight] = useState(() => win.innerHeight ?? 0);
     const raf = useRef(0);
     const maxReadyCalledRef = useRef(false);
-    // Reset the ready flag when setReady changes (drawer reset)
     useLayoutEffect(() => {
         maxReadyCalledRef.current = false;
     }, [setReady]);
     useLayoutEffect(() => {
+        const rAF = win.requestAnimationFrame.bind(win);
+        const cAF = win.cancelAnimationFrame.bind(win);
         const handleResize = () => {
             if (raf.current) {
-                // bail to throttle the amount of resize changes
                 return;
             }
-            // throttle state changes using rAF
-            raf.current = requestAnimationFrame(() => {
-                // Check if cleanup already ran (raf.current would be 0)
+            raf.current = rAF(() => {
                 if (raf.current !== 0) {
-                    setMaxHeight(globalThis.innerHeight); // ✅ Safe to update
+                    setMaxHeight(win.innerHeight);
                     raf.current = 0;
                 }
             });
         };
-        globalThis.addEventListener('resize', handleResize);
-        setMaxHeight(globalThis.innerHeight);
-        // Call setReady exactly once for window height readiness
+        win.addEventListener('resize', handleResize);
+        setMaxHeight(win.innerHeight);
         if (setReady && !maxReadyCalledRef.current) {
             maxReadyCalledRef.current = true;
             setReady();
         }
         return () => {
-            globalThis.removeEventListener('resize', handleResize);
-            cancelAnimationFrame(raf.current);
+            win.removeEventListener('resize', handleResize);
+            cAF(raf.current);
         };
-    }, [setReady, globalThis]);
+    }, [setReady, win]);
     return maxHeight;
 }
-/**
- * Custom hook to preserve last non-zero height values
- */
 function usePreservedHeight(currentHeight) {
     const lastHeightRef = useRef(0);
     useLayoutEffect(() => {
@@ -194,11 +169,7 @@ function usePreservedHeight(currentHeight) {
 }
 function useDimensions({ contentRef, footerEnabled, footerRef, headerEnabled, headerRef, registerReady, resizeSourceRef, open, }) {
     const setReady = useMemo(() => registerReady('contentHeight'), [registerReady]);
-    // Do not re-register contentHeight readiness on disconnect; register once above and let
-    // the ResizeObserver drive readiness when size > 0. This avoids readiness loops.
-    // (Intentionally removed disconnection re-register logic)
     const maxHeight = useMaxHeight(registerReady);
-    // Measure all elements - only when drawer is open
     const headerHeight = useElementSizeObserver(headerRef, {
         enabled: open && headerEnabled,
         resizeSourceRef,
@@ -211,12 +182,9 @@ function useDimensions({ contentRef, footerEnabled, footerRef, headerEnabled, he
         enabled: open && footerEnabled,
         resizeSourceRef,
     });
-    // Preserve last non-zero heights to avoid collapsing to 0 when the
-    // modal/portal temporarily unmounts or RO reports 0 during transitions
     const effectiveContentHeight = usePreservedHeight(contentHeight);
     const effectiveHeaderHeight = usePreservedHeight(headerHeight);
     const effectiveFooterHeight = usePreservedHeight(footerHeight);
-    // When content is measured (>0), mark ready for contentHeight
     useLayoutEffect(() => {
         if (!setReady)
             return;
@@ -225,7 +193,6 @@ function useDimensions({ contentRef, footerEnabled, footerRef, headerEnabled, he
             setReady();
         }
     }, [contentHeight, contentRef, setReady]);
-    // Calculate available space for content, ensuring it's never negative
     const availableContentSpace = Math.max(0, maxHeight - effectiveHeaderHeight - effectiveFooterHeight);
     const minHeight = Math.min(availableContentSpace, effectiveContentHeight) +
         effectiveHeaderHeight +
@@ -238,7 +205,6 @@ function useDimensions({ contentRef, footerEnabled, footerRef, headerEnabled, he
     };
 }
 
-// Hook for calculating snap points
 function roundAndCheckForNaN(value) {
     const rounded = Math.round(value);
     if (Number.isNaN(rounded)) {
@@ -246,15 +212,12 @@ function roundAndCheckForNaN(value) {
     }
     return rounded;
 }
-// Clamp function with clear NaN handling
 function clamp(number, lower, upper) {
     number = +number;
     lower = +lower;
     upper = +upper;
-    // Handle NaN values with sensible defaults
     const safeLower = Number.isNaN(lower) ? 0 : lower;
     const safeUpper = Number.isNaN(upper) ? Number.POSITIVE_INFINITY : upper;
-    // Ensure lower <= upper to avoid invalid ranges
     const finalLower = Math.min(safeLower, safeUpper);
     const finalUpper = Math.max(safeLower, safeUpper);
     if (Number.isNaN(number)) {
@@ -263,11 +226,9 @@ function clamp(number, lower, upper) {
     return Math.min(Math.max(number, finalLower), finalUpper);
 }
 function processSnapPoints(snapPoints, maxHeight) {
-    // Validate maxHeight input
     if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
         throw new Error(`Invalid maxHeight: ${maxHeight}. Must be a positive finite number.`);
     }
-    // Match React Spring Bottom Sheet implementation exactly
     const safeSnaps = []
         .concat(snapPoints)
         .map(roundAndCheckForNaN);
@@ -276,7 +237,6 @@ function processSnapPoints(snapPoints, maxHeight) {
         return acc;
     }, new Set());
     const processedPoints = Array.from(snapPointsDedupedSet);
-    // Handle empty snap points array
     if (processedPoints.length === 0) {
         throw new Error('No valid snap points available. The snapPoints function must return at least one valid number.\n' +
             'Example: snapPoints: ({ minHeight, maxHeight }) => [minHeight, maxHeight]');
@@ -316,7 +276,6 @@ function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, he
         })
         : [0], maxHeight);
     function findSnap(numberOrCallback) {
-        // Defensive check: should never happen due to processSnapPoints validation
         if (snapPoints.length === 0) {
             throw new Error('Cannot find snap point: no snap points available');
         }
@@ -334,7 +293,6 @@ function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, he
                 });
             }
             catch (error) {
-                // If callback throws, fall back to current position or minSnap
                 unsafeSearch = heightRef.current ?? minSnap;
             }
         }
@@ -346,69 +304,53 @@ function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, he
             querySnap = roundAndCheckForNaN(unsafeSearch);
         }
         catch (error) {
-            // If number is invalid (NaN, etc), fall back to current position or minSnap
             querySnap = heightRef.current ?? minSnap;
         }
-        // Support index-based selection: if querySnap is a small integer and within bounds, treat as index
         const isValidIndex = querySnap >= 0 &&
             querySnap < snapPoints.length &&
             Number.isInteger(querySnap);
         if (isValidIndex) {
             return snapPoints[querySnap];
         }
-        // Otherwise, find closest snap point by value
         return snapPoints.reduce((prev, curr) => Math.abs(curr - querySnap) < Math.abs(prev - querySnap) ? curr : prev, minSnap);
     }
     return { minSnap, maxSnap, findSnap, maxHeight, snapPoints };
 }
 
-//implementation for Drawer gestures
-// Standardized spring configuration
 const SPRING_CONFIG = {
     type: 'spring',
     stiffness: 600,
     damping: 50,
     mass: 1,
 };
-// Rubberband effect constants
 const RUBBERBAND_RESISTANCE = 0.8;
 const SINGLE_SNAP_STRETCH_FACTOR = 1.2;
 const MULTI_SNAP_STRETCH_FACTOR = 1.8;
-// Gesture behavior constants
-const DISMISS_THRESHOLD = 50; // Minimum movement in pixels to trigger dismiss
-const VELOCITY_THRESHOLD = 0.1; // Minimum velocity to apply to spring animation
-const PREDICTION_MULTIPLIER = 2; // Multiplier for velocity-based position prediction
-const DISMISS_POSITION_FACTOR = 2; // Divisor for calculating dismiss threshold (minSnap / 2)
-// Default functions
+const DISMISS_THRESHOLD = 50;
+const VELOCITY_THRESHOLD = 0.1;
+const PREDICTION_MULTIPLIER = 2;
+const DISMISS_POSITION_FACTOR = 2;
 function defaultSnapPoints({ minHeight }) {
-    // When no snap points are specified, just use content height
-    // This means the drawer shows content at natural size and can only dismiss
     return [minHeight];
 }
 function defaultInitialSnap({ snapPoints, lastSnap: _lastSnap, }) {
-    // Default behavior: choose the smallest snap point (usually content height)
-    // Users can override this in their initialSnap function if they want lastSnap behavior
     return Math.min(...snapPoints);
 }
 function useDrawerGestures(options) {
     const { anchor, open, onClose, snapPoints: getSnapPoints = defaultSnapPoints, initialSnap: getInitialSnap = defaultInitialSnap, contentRef, headerRef, footerRef, headerEnabled, footerEnabled, } = options;
+    const { externalWindow } = useWindowContext();
+    const gestureWindow = externalWindow;
     const { ready, registerReady } = useReady();
-    // Height tracking refs
     const heightRef = useRef(0);
     const lastSnapRef = useRef(null);
     const resizeSourceRef = useRef('window');
-    // Animation cleanup ref to prevent memory leaks
     const animationRef = useRef(null);
-    // Cleanup animations on unmount to prevent memory leaks
     useLayoutEffect(() => {
         return () => {
             animationRef.current?.stop();
         };
     }, []);
-    // Motion values
     const heightMotionValue = useMotionValue(0);
-    // We animate with spring only on release; during drag we set the value directly for immediate follow
-    // Ensure motion value starts with correct value when drawer opens
     useLayoutEffect(() => {
         if (open &&
             ready &&
@@ -417,7 +359,6 @@ function useDrawerGestures(options) {
             heightMotionValue.set(heightRef.current);
         }
     }, [open, ready, heightMotionValue]);
-    // Snap points calculation
     const { minSnap, maxSnap, findSnap, maxHeight } = useSnapPoints({
         contentRef: contentRef,
         footerEnabled,
@@ -432,14 +373,11 @@ function useDrawerGestures(options) {
         resizeSourceRef,
         open,
     });
-    // Calculate initial snap
     const defaultSnap = useMemo(() => {
         if (!ready)
             return 0;
-        // If initial snap is a function, it receives state via findSnap
         return findSnap(getInitialSnap);
     }, [ready, getInitialSnap, findSnap]);
-    // Only set the initial height once per open cycle when content is present
     const didInitRef = useRef(false);
     const isContentPresent = !!contentRef?.current && contentRef.current.isConnected;
     useLayoutEffect(() => {
@@ -447,16 +385,11 @@ function useDrawerGestures(options) {
             return;
         if (didInitRef.current)
             return;
-        // Use the calculated defaultSnap (which may or may not include lastSnap based on user's initialSnap function)
         const safeInitial = defaultSnap > 0 ? defaultSnap : minSnap;
-        // If we don't have content present and no valid fallback height, wait
         if (!isContentPresent && safeInitial <= 0)
             return;
-        // 1. Set to 0 immediately
         heightMotionValue.set(0);
-        // 2. Update heightRef
         heightRef.current = safeInitial;
-        // 3. Animate to target position
         animationRef.current = animate(heightMotionValue, safeInitial, SPRING_CONFIG);
         didInitRef.current = true;
     }, [
@@ -468,13 +401,11 @@ function useDrawerGestures(options) {
         heightMotionValue,
         lastSnapRef.current,
     ]);
-    // Content resize:
     useLayoutEffect(() => {
         if (!open || !ready || !isContentPresent)
             return;
         if (!didInitRef.current)
-            return; // Only after initial setup is complete
-        // Find closest snap point to current height (preserves user positioning)
+            return;
         const currentHeight = heightRef.current ?? 0;
         if (currentHeight > 0) {
             const closestSnap = findSnap(currentHeight);
@@ -482,37 +413,29 @@ function useDrawerGestures(options) {
             heightRef.current = closestSnap;
             lastSnapRef.current = closestSnap;
         }
-    }, [minSnap, maxSnap]); // Triggers when snap points change (content resize)
-    // Reset init flag when closing so next open can initialize again
+    }, [minSnap, maxSnap]);
     useLayoutEffect(() => {
         if (!open) {
             didInitRef.current = false;
-            // Preserve the current height as lastSnap for next open
             if (heightRef.current > 0) {
                 lastSnapRef.current = heightRef.current;
             }
-            // Animate motion value to 0 on close
             animationRef.current = animate(heightMotionValue, 0, SPRING_CONFIG);
         }
     }, [open, heightMotionValue]);
-    // Drag handler
     const handleDrag = useEventCallback(({ args: [{ closeOnTap = false } = {}] = [], cancel, down, last, memo = heightMotionValue.get(), movement: [_mx, _my], tap, velocity: [_, velocityY], event, }) => {
         if (!ready) {
             cancel();
             return memo;
         }
-        // Handle close on tap (backdrop tap)
         if (closeOnTap && tap) {
             cancel();
-            // Use timeout to avoid tap events on backdrop triggering click events underneath
             onClose(event, 'gestureSwipe');
             return memo;
         }
-        // Filter out taps
         if (tap) {
             return memo;
         }
-        // dismissal logic for all anchors
         const getDismissInfo = () => {
             switch (anchor) {
                 case 'bottom':
@@ -548,10 +471,8 @@ function useDrawerGestures(options) {
             }
         };
         const { isDismissDirection, movement, threshold } = getDismissInfo();
-        // For horizontal drawers, only handle dismiss (no snap points)
         const isVertical = anchor === 'top' || anchor === 'bottom';
         if (!isVertical) {
-            // Check for dismiss condition (horizontal drawers only)
             if (!down && isDismissDirection && movement > threshold) {
                 cancel();
                 onClose(event, 'gestureSwipe');
@@ -563,7 +484,6 @@ function useDrawerGestures(options) {
         const rawY = memo + my;
         const predictedDistance = my * velocityY;
         const predictedY = Math.max(minSnap, Math.min(maxHeight, rawY + predictedDistance * PREDICTION_MULTIPLIER));
-        // Check for vertical dismissal - only when trying to go below minimum snap point
         if (!down && isDismissDirection) {
             const dismissThreshold = minSnap / DISMISS_POSITION_FACTOR;
             const currentPosition = rawY + predictedDistance;
@@ -576,28 +496,22 @@ function useDrawerGestures(options) {
         let newY;
         if (down) {
             if (minSnap === maxSnap) {
-                // Special case when min and max snap are the same (only one snap point)
                 if (rawY < minSnap) {
-                    newY = rawY; // Allow smooth dragging down (toward dismiss) with no resistance
+                    newY = rawY;
                 }
                 else {
-                    // Strong resistance when dragging up beyond content
                     newY = rubberbandIfOutOfBounds(rawY, minSnap, maxSnap * SINGLE_SNAP_STRETCH_FACTOR, RUBBERBAND_RESISTANCE);
                 }
             }
             else {
-                // Multiple snap points: allow stretching beyond maxSnap for rubberband effect
                 newY = rubberbandIfOutOfBounds(rawY, 0, maxSnap * MULTI_SNAP_STRETCH_FACTOR, RUBBERBAND_RESISTANCE);
             }
         }
         else {
-            // On release: use predicted position
             newY = predictedY;
         }
         if (last) {
-            // End of gesture: find closest snap point and animate to it
             const targetSnap = findSnap(newY);
-            // Animate to target snap point using spring
             animationRef.current = animate(heightMotionValue, targetSnap, {
                 ...SPRING_CONFIG,
                 velocity: Math.abs(velocityY) > VELOCITY_THRESHOLD ? velocityY : 0,
@@ -606,29 +520,26 @@ function useDrawerGestures(options) {
             lastSnapRef.current = targetSnap;
             return memo;
         }
-        // During drag: directly set height to follow finger with rubberband
         heightMotionValue.set(newY);
         return memo;
     });
-    // Gesture binding
     const isVertical = anchor === 'top' || anchor === 'bottom';
-    const bind = useDrag(handleDrag, {
+    const gestureConfig = useMemo(() => ({
         filterTaps: true,
-    });
-    //  animate height for vertical drawers only
+        ...(gestureWindow && {
+            window: gestureWindow,
+        }),
+    }), [gestureWindow]);
+    const bind = useDrag(handleDrag, gestureConfig);
     const heightStyle = useTransform(heightMotionValue, (y) => {
-        // Ensure drawer never exceeds viewport bounds
         const clamped = Math.max(0, Math.min(y, maxHeight));
         return `${Math.round(clamped)}px`;
     });
-    // Imperative snapTo function
     const snapTo = useCallback((numberOrCallback) => {
         if (!ready)
             return;
         const targetSnap = findSnap(numberOrCallback);
-        // Animate to target snap point
         animationRef.current = animate(heightMotionValue, targetSnap, SPRING_CONFIG);
-        // Update refs
         heightRef.current = targetSnap;
         lastSnapRef.current = targetSnap;
     }, [ready, findSnap, heightMotionValue, heightRef, lastSnapRef]);
@@ -649,45 +560,16 @@ function useDrawerGestures(options) {
     };
 }
 
-/**
- * SwipeableDrawer Component - Gesture-enhanced drawer with swipe support
- *
- * Wraps the base Drawer component and adds touch/mouse gesture support for resizing and closing.
- * Perfect for mobile bottom sheets and interactive panels.
- *
- * @example
- * ```tsx
- * bottom sheet with gestures
- * <SwipeableDrawer
- *   open={open}
- *   onClose={onClose}
- *   anchor="bottom"
- *   gestureControlsProps={{
- *     snapPoints: ({ minHeight, maxHeight }) => [
- *       minHeight,        // Content height
- *       maxHeight * 0.6,  // 60% of screen
- *       maxHeight         // Full screen
- *     ],
- *     initialSnap: 0      // Start at content height
- *   }}
- * >
- *   <Content />
- * </SwipeableDrawer>
- * ```
- */
 const SwipeableDrawer = forwardRef((inProps, ref) => {
     const props = useThemeProps({
         props: inProps,
         name: 'SwipeableDrawer',
     });
     const { anchor = 'bottom', bodyProps, classes, className, children, header, footer, open, onClose, variant = 'temporary', blocking = true, gestureControlsProps, ...rest } = props;
-    // Refs for gesture system
     const contentRef = useRef(null);
     const headerRef = useRef(null);
     const footerRef = useRef(null);
     const isVertical = anchor === 'top' || anchor === 'bottom';
-    // Stabilize header/footer enabled state to prevent measurement fluctuations
-    // Header is enabled if there's a header prop OR if there's a drag handle (for vertical drawers)
     const headerEnabled = useMemo(() => !!header || isVertical, [header, isVertical]);
     const footerEnabled = useMemo(() => !!footer, [footer]);
     const cls = useClasses('swipeable-drawer', classes, className);
@@ -705,32 +587,25 @@ const SwipeableDrawer = forwardRef((inProps, ref) => {
         footerEnabled,
         ...gestureProps,
     });
-    // Expose snapTo function through action ref
     useImperativeHandle(action, () => ({
         snapTo: gestureControls.snapTo,
     }), [gestureControls.snapTo]);
     const gestureBindProps = gestureControls.bind();
-    // Enhanced body props that include gesture motion
     const enhancedBodyProps = {
         ...bodyProps,
-        // Apply gesture bindings for horizontal drawers (left/right)
-        // Vertical drawers (top/bottom) use motion values instead
         ...(!isVertical ? gestureBindProps : {}),
         style: {
             ...bodyProps?.style,
-            // Apply motion styles for vertical drawers (top/bottom)
             ...(isVertical && {
                 ...gestureControls.motionProps.style,
             }),
         },
     };
-    // Consolidate measurement refs (refs only)
     const measurementRefs = {
         header: headerRef,
         footer: footerRef,
         content: contentRef,
     };
-    // Gesture props for header
     const headerGestureProps = {
         className: clsx(isVertical && cls('header-drag')),
         ...(isVertical && gestureBindProps),

package/Switch.js

@@ -9,9 +9,7 @@ var Switch$1 = {"sui-switch-root":"sui-switch-root","sui-focus-visible":"sui-foc
 
 const Switch = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Switch' });
-    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, 
-    /* ⬇️ for input */
-    checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
+    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
     const cls = useClasses('switch', classes, className);
     const { disabled, id } = useFormLabel({
         disabled: disabledProp,
@@ -34,7 +32,6 @@ const Switch = forwardRef((inProps, ref) => {
         if (autoFocus) {
             inputRef.current?.focus();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (jsxs("span", { className: cls('root', { focusVisible }), ...rest, ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot') })] }));
 });