@ringcentral/spring-ui 1.7.0 → 1.8.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,26 @@ 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 [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';
         }
@@ -96,20 +79,15 @@ 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(() => {
                 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();
@@ -137,8 +115,6 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
     return enabled ? size : 0;
 }
 
-// Hook for measuring drawer dimensions
-// Hook for tracking viewport height
 function useMaxHeight(registerReady) {
     const { globalThis } = useWindowContext();
     const setReady = useMemo(() => {
@@ -147,28 +123,23 @@ function useMaxHeight(registerReady) {
     const [maxHeight, setMaxHeight] = useState(() => globalThis.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 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)
                 if (raf.current !== 0) {
-                    setMaxHeight(globalThis.innerHeight); // ✅ Safe to update
+                    setMaxHeight(globalThis.innerHeight);
                     raf.current = 0;
                 }
             });
         };
         globalThis.addEventListener('resize', handleResize);
         setMaxHeight(globalThis.innerHeight);
-        // Call setReady exactly once for window height readiness
         if (setReady && !maxReadyCalledRef.current) {
             maxReadyCalledRef.current = true;
             setReady();
@@ -180,9 +151,6 @@ function useMaxHeight(registerReady) {
     }, [setReady, globalThis]);
     return maxHeight;
 }
-/**
- * Custom hook to preserve last non-zero height values
- */
 function usePreservedHeight(currentHeight) {
     const lastHeightRef = useRef(0);
     useLayoutEffect(() => {
@@ -194,11 +162,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 +175,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 +186,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 +198,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 +205,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 +219,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 +230,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 +269,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 +286,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 +297,51 @@ 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 { 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 +350,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 +364,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 +376,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 +392,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 +404,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 +462,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 +475,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 +487,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 +511,22 @@ 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, {
         filterTaps: true,
     });
-    //  animate height for vertical drawers only
     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 +547,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 +574,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') })] }));
 });

package/Tab.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
 import { useTab } from '@mui/base';
-import { useForkRef, useClasses, combineClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useForkRef, combineClasses } from '@ringcentral/spring-base';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { B as Badge } from './chunks/Badge.js';
 import { I as Icon } from './chunks/Icon.js';
 import { u as useTabsContext } from './chunks/TabsContext.js';
@@ -21,15 +21,16 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
 
-var Tab$1 = {"sui-tab-container":"sui-tab-container","sui-tab-pill-badge":"sui-tab-pill-badge","sui-tab-badge-root":"sui-tab-badge-root","sui-tab-root":"sui-tab-root","sui-selected":"sui-selected","sui-focus-visible":"sui-focus-visible","sui-tab-badge":"sui-tab-badge","sui-active":"sui-active","sui-tab-label":"sui-tab-label","sui-tab-label-container":"sui-tab-label-container","sui-tab-label-text":"sui-tab-label-text","sui-tab-label-badge-root":"sui-tab-label-badge-root","sui-tab-icon":"sui-tab-icon","sui-tab-icon-container":"sui-tab-icon-container","sui-tab-icon-pill":"sui-tab-icon-pill","sui-tab-icon-badge-root":"sui-tab-icon-badge-root","sui-tab-pill":"sui-tab-pill","sui-tab-label-pill-cobranding":"sui-tab-label-pill-cobranding","sui-tab-icon-pill-cobranding":"sui-tab-icon-pill-cobranding"};
+var Tab$1 = {"sui-tab-container":"sui-tab-container","sui-tab-pill-badge":"sui-tab-pill-badge","sui-tab-badge-root":"sui-tab-badge-root","sui-tab-root":"sui-tab-root","sui-selected":"sui-selected","sui-focus-visible":"sui-focus-visible","sui-tab-badge":"sui-tab-badge","sui-active":"sui-active","sui-tab-label":"sui-tab-label","sui-tab-label-container":"sui-tab-label-container","sui-tab-label-text":"sui-tab-label-text","sui-tab-label-badge-root":"sui-tab-label-badge-root","sui-tab-icon":"sui-tab-icon","sui-tab-icon-container":"sui-tab-icon-container","sui-tab-icon-pill":"sui-tab-icon-pill","sui-tab-icon-badge-root":"sui-tab-icon-badge-root","sui-tab-large":"sui-tab-large","sui-tab-pill":"sui-tab-pill","sui-tab-pill-small":"sui-tab-pill-small","sui-tab-label-pill-cobranding":"sui-tab-label-pill-cobranding","sui-tab-icon-pill-cobranding":"sui-tab-icon-pill-cobranding","sui-compact":"sui-compact"};
 
 const Tab = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Tab' });
     const { classes, className, children: childrenProp, action, onChange, variant = 'label', color: colorProp, label, symbol, TooltipProps, BadgeProps: badgePropsProp, title, style, value, ...rest } = props;
     const tabRef = useRef(null);
     const handleRef = useForkRef(tabRef, ref);
-    const { pill, pillGap, color: contextColor, setFloatingUnderlineVisibility, } = useTabsContext();
+    const { pill, pillGap, color: contextColor, size: contextSize, setFloatingUnderlineVisibility, } = useTabsContext();
     const color = colorProp ?? contextColor ?? 'default';
+    const size = contextSize ?? 'medium';
     const { active, focusVisible, setFocusVisible, selected, getRootProps, index, } = useTab({
         ...rest,
         value,
@@ -39,11 +40,9 @@ const Tab = forwardRef((inProps, ref) => {
         if (!setFloatingUnderlineVisibility)
             return;
         if (focusVisible && selected) {
-            // Hide the floating underline when the currently selected tab is also focused
             setFloatingUnderlineVisibility(false);
         }
         else if (selected) {
-            // Show the floating underline when this tab is selected but not focused
             setFloatingUnderlineVisibility(true);
         }
     }, [focusVisible, selected, setFloatingUnderlineVisibility]);
@@ -53,7 +52,7 @@ const Tab = forwardRef((inProps, ref) => {
             tabRef.current?.focus();
         },
     }), [setFocusVisible]);
-    const cls = useClasses('tab', classes, className);
+    const cls = useClassesWithMode('tab', classes, className);
     let children = null;
     if (childrenProp) {
         children = childrenProp;
@@ -89,7 +88,7 @@ const Tab = forwardRef((inProps, ref) => {
             active,
             focusVisible,
             selected,
-        }, pill && `${variant}-pill`, pill && color !== 'default' && `${variant}-pill-${color}`), title: nativeTitle, tabIndex: selected ? 0 : -1, style: {
+        }, size, pill && `pill-${size}`, pill && `${variant}-pill`, pill && color !== 'default' && `${variant}-pill-${color}`), title: nativeTitle, tabIndex: selected ? 0 : -1, style: {
             ...style,
             ...(pill && index !== 0 ? { marginLeft: `${pillGap}px` } : {}),
         }, ...getRootProps(rest), onChange: onChange, children: children }));

package/TabContext.js

@@ -4,13 +4,8 @@ export { useTabsContext as useTabContext } from '@mui/base';
 import { createContext, useContext, useMemo } from 'react';
 import { useId } from '@ringcentral/spring-base';
 
-// Create a separate context for internal use that both Tab and TabPanel can access
 const InternalTabsContext = createContext({ tabsInstanceId: undefined });
 const useInternalTabsContext = () => useContext(InternalTabsContext);
-/**
- * Generate stable IDs for tab and tabpanel pairs
- * This ensures consistent IDs regardless of whether the tab is visible or in more menu
- */
 const generateTabStableIds = (tabsInstanceId, identifier) => {
     const prefix = tabsInstanceId || 'Tabs';
     return {

package/TableBody.js

@@ -12,7 +12,7 @@ const TableBody = forwardRef((inProps, ref) => {
     const { component: TableBodyRoot = defaultComponent, classes, className, children, ...rest } = props;
     const cls = useClasses('table-body', classes, className);
     const table = useTableContext();
-    const fillerRowForStickyFooter = table && table.stickyFooter ? (jsx("tr", { "aria-hidden": true, className: "invisible" })) : null; // If the table has a sticky footer, we need to add an empty row to prevent any row from stretching vertically.
+    const fillerRowForStickyFooter = table && table.stickyFooter ? (jsx("tr", { "aria-hidden": true, className: "invisible" })) : null;
     return (jsxs(TableBodyRoot, { role: TableBodyRoot === defaultComponent ? undefined : 'rowgroup', className: cls('root'), ...rest, ref: ref, children: [children, fillerRowForStickyFooter] }));
 });
 TableBody.displayName = 'SuiTableBody';

package/TableCell.js

@@ -13,10 +13,6 @@ import './chunks/usePrefersReducedMotion.js';
 
 var TableCell$1 = {"sui-table-cell-root":"sui-table-cell-root","sui-table-cell-padding-checkbox":"sui-table-cell-padding-checkbox","sui-table-cell-content":"sui-table-cell-content","sui-table-cell-head":"sui-table-cell-head","sui-table-cell-sortable":"sui-table-cell-sortable","sui-table-cell-content-sortable":"sui-table-cell-content-sortable","sui-table-cell-sort-icon":"sui-table-cell-sort-icon","sui-focus-visible":"sui-focus-visible","sui-table-cell-padding-none":"sui-table-cell-padding-none","sui-table-cell-align-left":"sui-table-cell-align-left","sui-table-cell-align-center":"sui-table-cell-align-center","sui-table-cell-align-right":"sui-table-cell-align-right","sui-table-cell-align-justify":"sui-table-cell-align-justify","sui-table-cell-sticky-header-default-bg":"sui-table-cell-sticky-header-default-bg","sui-table-cell-content-padding-checkbox":"sui-table-cell-content-padding-checkbox","sui-table-cell-content-align-center":"sui-table-cell-content-align-center","sui-table-cell-content-align-right":"sui-table-cell-content-align-right","sui-table-cell-content-align-justify":"sui-table-cell-content-align-justify","sui-table-cell-sorted":"sui-table-cell-sorted","sui-table-cell-sort-indicator":"sui-table-cell-sort-indicator","sui-table-cell-sort-icon-sorted":"sui-table-cell-sort-icon-sorted","sui-table-cell-column-divider":"sui-table-cell-column-divider"};
 
-/**
- * The component renders a `<th>` element when the parent context is a header
- * or otherwise a `<td>` element.
- */
 const TableCell = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'TableCell' });
     const { component: componentProp, variant: variantProp, padding = 'normal', align = 'inherit', scope: scopeProp, sortDirection, showSortIndicator = false, initialSortIconDirection = 'asc', classes, className, children, SortIconProps, ...rest } = props;
@@ -36,8 +32,6 @@ const TableCell = forwardRef((inProps, ref) => {
     }
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible();
     let scope = scopeProp;
-    // scope is not a valid attribute for <td/> elements.
-    // source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element
     if (TableCellRoot === 'td') {
         scope = undefined;
     }