@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Switch.js

@@ -1,22 +1,37 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useLayoutEffect } from 'react';
-import { useSwitch } from '@mui/base';
-import { useClasses, useForkRef, combineProps } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { u as useFormLabel } from './chunks/FormLabel.js';
-import { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
-import 'clsx';
-
-var Switch$1 = {"sui-switch-root":"sui-switch-root","sui-focus-visible":"sui-focus-visible","sui-switch-track":"sui-switch-track","sui-switch-dot":"sui-switch-dot","sui-switch-input":"sui-switch-input","sui-checked":"sui-checked"};
-
-const Switch = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Switch' });
-    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, rootProps, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, loading = false, loadingProps, ...rest } = props;
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useRef } from "react";
+import { useSwitch } from "@mui/base";
+import { combineProps, useClasses, useForkRef } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useFormLabel } from "./FormLabel.js";
+import { CircularProgressIndicator as CircularProgressIndicator_CircularProgressIndicator } from "./CircularProgressIndicator.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Switch = ({"sui-switch-root":"sui-switch-root","sui-focus-visible":"sui-focus-visible","sui-switch-track":"sui-switch-track","sui-switch-dot":"sui-switch-dot","sui-switch-input":"sui-switch-input","sui-checked":"sui-checked"});
+
+
+
+
+
+
+
+
+const Switch_Switch = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Switch'
+    });
+    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, rootProps, /* ⬇️ for input */ checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, loading = false, loadingProps, ...rest } = props;
     const cls = useClasses('switch', classes, className);
     const isDisabled = loading ? true : disabledProp;
     const { disabled, id } = useFormLabel({
         disabled: isDisabled,
-        id: inputPropsProp?.id,
+        id: inputPropsProp?.id
     });
     const { getInputProps, focusVisible, checked } = useSwitch({
         checked: checkedProp,
@@ -26,25 +41,57 @@ const Switch = forwardRef((inProps, ref) => {
         onChange,
         onFocus,
         onFocusVisible,
-        required,
+        required
     });
     const inputProps = getInputProps({
         role: 'switch',
-        ...inputPropsProp,
+        ...inputPropsProp
     });
     const inputRef = useRef();
     const forkRef = useForkRef(inputRefProp, inputProps.ref, inputRef);
-    useLayoutEffect(() => {
+    useLayoutEffect(()=>{
         if (autoFocus) {
             inputRef.current?.focus();
         }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxs("span", { ...rootProps, ...rest, className: cls('root', { focusVisible }), ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot'), children: loading && (jsx(CircularProgressIndicator, { ...combineProps({
+    return /*#__PURE__*/ jsxs("span", {
+        ...rootProps,
+        ...rest,
+        className: cls('root', {
+            focusVisible
+        }),
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                ...inputProps,
+                id: id,
+                className: cls('input', {
+                    checked
+                }),
+                ref: forkRef
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: cls('track')
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: cls('dot'),
+                children: loading && /*#__PURE__*/ jsx(CircularProgressIndicator_CircularProgressIndicator, {
+                    ...combineProps({
                         variant: 'indeterminate',
                         size: 'small',
-                        color: 'primary',
-                    }, loadingProps) })) })] }));
+                        color: 'primary'
+                    }, loadingProps)
+                })
+            })
+        ]
+    });
 });
-Switch.displayName = 'SuiSwitch';
+Switch_Switch.displayName = 'SuiSwitch';
+
+
+
+
+
 
-export { Switch, Switch$1 as switchStyle };
+export { Switch as switchStyle, Switch_Switch as Switch };

package/Tab.js

@@ -1,102 +1,165 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
-import { useTab } from '@mui/base';
-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';
-import { T as Tooltip } from './chunks/Tooltip.js';
-import 'framer-motion';
-import 'lodash/isNumber';
-import 'lodash/kebabCase';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import 'clsx';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-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-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' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useTab } from "@mui/base";
+import { combineClasses, useForkRef } from "@ringcentral/spring-base";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { Badge as Badge_Badge } from "./Badge.js";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { useTabsContext } from "./chunks/8809.js";
+import "./Tooltip.js";
+import { Tooltip } from "./chunks/4535.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Tab = ({"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-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"});
+
+
+
+
+
+
+
+
+
+
+/**
+ * Tab component for use within TabContext and Tabs.
+ *
+ * **IMPORTANT**: It is strongly recommended to provide a unique `id` prop for each Tab.
+ * - Unique ids are required for accessibility and correct tab-panel linking
+ * - If no `id` is provided, each Tab element will be cloned to provide an auto-generated id, which may have a performance cost
+ * - The warning "Tab component missing recommended 'id' prop" will be shown when `id` is not provided
+ *
+ * @example
+ * ```tsx
+ * <TabContext defaultValue={0}>
+ *   <Tabs>
+ *     <Tab id="tab-dialpad" label="Dialpad" value={0} />
+ *     <Tab id="tab-history" label="History" value={1} />
+ *   </Tabs>
+ *   <TabPanel value={0}>Dialpad Content</TabPanel>
+ *   <TabPanel value={1}>History Content</TabPanel>
+ * </TabContext>
+ * ```
+ */ const Tab_Tab = /*#__PURE__*/ 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, size: contextSize, 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({
+    const { active, focusVisible, setFocusVisible, selected, getRootProps, index } = useTab({
         ...rest,
         value,
-        rootRef: handleRef,
+        rootRef: handleRef
     });
-    useEffect(() => {
-        if (!setFloatingUnderlineVisibility)
-            return;
+    useEffect(()=>{
+        if (!setFloatingUnderlineVisibility) return;
         if (focusVisible && selected) {
+            // Hide the floating underline when the currently selected tab is also focused
             setFloatingUnderlineVisibility(false);
-        }
-        else if (selected) {
+        } else if (selected) {
+            // Show the floating underline when this tab is selected but not focused
             setFloatingUnderlineVisibility(true);
         }
-    }, [focusVisible, selected, setFloatingUnderlineVisibility]);
-    useImperativeHandle(action, () => ({
-        focusVisible: () => {
-            setFocusVisible(true);
-            tabRef.current?.focus();
-        },
-    }), [setFocusVisible]);
+    }, [
+        focusVisible,
+        selected,
+        setFloatingUnderlineVisibility
+    ]);
+    useImperativeHandle(action, ()=>({
+            focusVisible: ()=>{
+                setFocusVisible(true);
+                tabRef.current?.focus();
+            }
+        }), [
+        setFocusVisible
+    ]);
     const cls = useClassesWithMode('tab', classes, className);
     let children = null;
     if (childrenProp) {
         children = childrenProp;
-    }
-    else {
+    } else {
         let badgeClasses = {
             root: cls('badge-root', `${variant}-badge-root`, pill && 'pill-badge', pill && `${variant}-pill-badge`),
-            content: cls('badge', `${variant}-badge`),
+            content: cls('badge', `${variant}-badge`)
         };
         if (badgePropsProp?.classes) {
             badgeClasses = combineClasses(badgeClasses, badgePropsProp.classes);
         }
         let content = null;
         if (variant === 'label' && label) {
-            content = (jsx("span", { className: cls('text', `${variant}-text`), children: label }));
+            content = /*#__PURE__*/ jsx("span", {
+                className: cls('text', `${variant}-text`),
+                children: label
+            });
         }
         if (variant === 'icon' && symbol) {
-            content = jsx(Icon, { size: "small", symbol: symbol });
+            content = /*#__PURE__*/ jsx(Icon_Icon, {
+                size: "small",
+                symbol: symbol
+            });
         }
         const badgeProps = badgePropsProp && {
             color: selected ? 'primary' : 'secondary',
             variant: pill ? 'outlined' : 'contained',
             size: badgePropsProp?.type === 'dot' ? 'medium' : badgePropsProp?.size,
             ...badgePropsProp,
-            classes: badgeClasses,
+            classes: badgeClasses
         };
-        children = (jsxs("div", { className: cls('container', `${variant}-container`), children: [content, badgeProps && jsx(Badge, { ...badgeProps })] }));
+        children = /*#__PURE__*/ jsxs("div", {
+            className: cls('container', `${variant}-container`),
+            children: [
+                content,
+                badgeProps && /*#__PURE__*/ jsx(Badge_Badge, {
+                    ...badgeProps
+                })
+            ]
+        });
     }
     const tooltipTitle = title || (typeof label === 'string' ? label : undefined);
     const nativeTitle = variant === 'label' ? tooltipTitle : undefined;
-    const tab = (jsx("button", { className: cls('root', variant, {
+    const tab = /*#__PURE__*/ jsx("button", {
+        className: cls('root', variant, {
             pill,
             active,
             focusVisible,
-            selected,
-        }, size, pill && `pill-${size}`, pill && `${variant}-pill`, pill && color !== 'default' && `${variant}-pill-${color}`), title: nativeTitle, tabIndex: selected ? 0 : -1, style: {
+            selected
+        }, 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 }));
+            ...pill && index !== 0 ? {
+                marginLeft: `${pillGap}px`
+            } : {}
+        },
+        ...getRootProps(rest),
+        onChange: onChange,
+        children: children
+    });
     if (variant === 'label') {
         return tab;
     }
-    return (jsx(Tooltip, { ...TooltipProps, title: tooltipTitle, children: tab }));
+    return /*#__PURE__*/ jsx(Tooltip, {
+        ...TooltipProps,
+        title: tooltipTitle,
+        children: tab
+    });
 });
-Tab.displayName = 'SuiTab';
+Tab_Tab.displayName = 'SuiTab';
+
+
+
+
+
 
-export { Tab, Tab$1 as tabStyle };
+export { Tab as tabStyle, Tab_Tab as Tab };

package/TabContext.js

@@ -1,29 +1,73 @@
-import { jsx } from 'react/jsx-runtime';
-import { useTabs, TabsProvider } from '@mui/base';
-export { useTabsContext as useTabContext } from '@mui/base';
-import { createContext, useContext, useMemo } from 'react';
-import { useId } from '@ringcentral/spring-base';
-
-const InternalTabsContext = createContext({ tabsInstanceId: undefined });
-const useInternalTabsContext = () => useContext(InternalTabsContext);
-const generateTabStableIds = (tabsInstanceId, identifier) => {
+import { jsx } from "react/jsx-runtime";
+import { TabsProvider, useTabs, useTabsContext } 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 = /*#__PURE__*/ 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 {
         tabId: `${prefix}-tab-${identifier}`,
-        panelId: `${prefix}-tabpanel-${identifier}`,
+        panelId: `${prefix}-tabpanel-${identifier}`
     };
 };
-const useTabStableIds = (identifier) => {
+const useTabStableIds = (identifier)=>{
     const { tabsInstanceId } = useInternalTabsContext();
     return generateTabStableIds(tabsInstanceId, identifier);
 };
-const TabContext = (props) => {
+/**
+ * TabContext provides the context for Tab and TabPanel components.
+ *
+ * **IMPORTANT**: When using Tab, Tabs, and TabPanel components, you MUST wrap them with TabContext.
+ * TabContext manages the state and coordination between tabs and their panels.
+ *
+ * @example
+ * ```tsx
+ * <TabContext defaultValue={0}>
+ *   <Tabs>
+ *     <Tab label="Tab 1" value={0} />
+ *     <Tab label="Tab 2" value={1} />
+ *   </Tabs>
+ *   <TabPanel value={0}>Content 1</TabPanel>
+ *   <TabPanel value={1}>Content 2</TabPanel>
+ * </TabContext>
+ * ```
+ */ const TabContext = (props)=>{
     const { children } = props;
     const { contextValue } = useTabs(props);
     const generatedTabsInstanceId = useId('Tabs', true);
-    const internalContextValue = useMemo(() => ({ tabsInstanceId: generatedTabsInstanceId }), [generatedTabsInstanceId]);
-    return (jsx(TabsProvider, { value: contextValue, children: jsx(InternalTabsContext.Provider, { value: internalContextValue, children: children }) }));
+    const internalContextValue = useMemo(()=>({
+            tabsInstanceId: generatedTabsInstanceId
+        }), [
+        generatedTabsInstanceId
+    ]);
+    return /*#__PURE__*/ jsx(TabsProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(InternalTabsContext.Provider, {
+            value: internalContextValue,
+            children: children
+        })
+    });
 };
 TabContext.displayName = 'SuiTabContext';
 
-export { TabContext, generateTabStableIds, useInternalTabsContext, useTabStableIds };
+
+
+
+
+export { TabContext, generateTabStableIds, useInternalTabsContext, useTabStableIds, useTabsContext as useTabContext };

package/TabPanel.js

@@ -1,26 +1,53 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useTabPanel } from '@mui/base';
-import { useEver, useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { useTabStableIds } from './TabContext.js';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTabPanel } from "@mui/base";
+import { useClasses, useEver } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useTabStableIds } from "./TabContext.js";
 
-var TabPanel$1 = {};
 
-const TabPanel = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TabPanel' });
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TabPanel = ({});
+
+
+
+
+
+
+
+const TabPanel_TabPanel = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'TabPanel'
+    });
     const { classes, className, children, value, keepMounted, id, ...rest } = props;
     const { panelId } = useTabStableIds(value);
     const { hidden, getRootProps } = useTabPanel({
         ...props,
-        id: id ?? panelId,
+        id: id ?? panelId
     });
     const isEverShown = useEver(!hidden);
     const keepAlive = keepMounted && isEverShown;
     const unmount = hidden && !keepAlive;
     const cls = useClasses('tab-panel', classes, className);
-    return (jsx("div", { role: "tabpanel", className: cls('root'), ...rest, ...getRootProps(), ref: ref, children: !unmount && children }));
+    return /*#__PURE__*/ jsx("div", {
+        role: "tabpanel",
+        className: cls('root'),
+        ...rest,
+        ...getRootProps(),
+        ref: ref,
+        children: !unmount && children
+    });
 });
-TabPanel.displayName = 'SuiTabPanel';
+TabPanel_TabPanel.displayName = 'SuiTabPanel';
+
+
+
+
+
 
-export { TabPanel, TabPanel$1 as tabPanelStyle };
+export { TabPanel as tabPanelStyle, TabPanel_TabPanel as TabPanel };

package/Table.js

@@ -1,24 +1,67 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { T as TableContext } from './chunks/TableContext.js';
-export { u as useTableContext } from './chunks/TableContext.js';
-export { T as Tablelvl2Context, u as useTablelvl2Context } from './chunks/Tablelvl2Context.js';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { TableContext } from "./chunks/7279.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Table = ({"sui-table-root":"sui-table-root","sui-table-sticky-header":"sui-table-sticky-header","sui-table-sticky-footer":"sui-table-sticky-footer"});
+
+
+
+
 
-var Table$1 = {"sui-table-root":"sui-table-root","sui-table-sticky-header":"sui-table-sticky-header","sui-table-sticky-footer":"sui-table-sticky-footer"};
 
 const defaultComponent = 'table';
-const Table = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Table' });
-    const { component: TableRoot = defaultComponent, classes, className, children, stickyHeader = false, stickyFooter = false, columnDivider = false, ...rest } = props;
+const Table_Table = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Table'
+    });
+    const { component: TableRoot = defaultComponent, classes, className, children, stickyHeader = false, stickyFooter = false, columnDivider = false, rowDivider = true, size = 'medium', ...rest } = props;
     const cls = useClasses('table', classes, className);
-    const table = useMemo(() => ({ stickyHeader, stickyFooter, columnDivider }), [stickyHeader, stickyFooter, columnDivider]);
-    return (jsx(TableContext.Provider, { value: table, children: jsx(TableRoot, { role: TableRoot === defaultComponent ? undefined : 'table', className: cls('root', {
+    const table = useMemo(()=>({
+            stickyHeader,
+            stickyFooter,
+            columnDivider,
+            rowDivider,
+            size
+        }), [
+        stickyHeader,
+        stickyFooter,
+        columnDivider,
+        rowDivider,
+        size
+    ]);
+    return /*#__PURE__*/ jsx(TableContext.Provider, {
+        value: table,
+        children: /*#__PURE__*/ jsx(TableRoot, {
+            role: TableRoot === defaultComponent ? undefined : 'table',
+            className: cls('root', {
                 'sticky-header': stickyHeader,
-                'sticky-footer': stickyFooter,
-            }), ...rest, ref: ref, children: children }) }));
+                'sticky-footer': stickyFooter
+            }),
+            ...rest,
+            ref: ref,
+            children: children
+        })
+    });
 });
-Table.displayName = 'SuiTable';
+Table_Table.displayName = 'SuiTable';
+
+
+
+
+
+
+
+
 
-export { Table, TableContext, Table$1 as tableStyle };
+export { Table as tableStyle, Table_Table as Table };
+export { TableContext, useTableContext } from "./chunks/7279.js";
+export { TableRowContext, useTableRowContext } from "./chunks/987.js";
+export { Tablelvl2Context, useTablelvl2Context } from "./chunks/8011.js";

package/TableBody.js

@@ -1,20 +1,50 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { u as useTableContext } from './chunks/TableContext.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useTableContext } from "./chunks/7279.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TableBody = ({"sui-table-body-root":"sui-table-body-root"});
+
+
+
+
 
-var TableBody$1 = {"sui-table-body-root":"sui-table-body-root"};
 
 const defaultComponent = 'tbody';
-const TableBody = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TableBody' });
+const TableBody_TableBody = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'TableBody'
+    });
     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;
-    return (jsxs(TableBodyRoot, { role: TableBodyRoot === defaultComponent ? undefined : 'rowgroup', className: cls('root'), ...rest, ref: ref, children: [children, fillerRowForStickyFooter] }));
+    const fillerRowForStickyFooter = table && table.stickyFooter ? /*#__PURE__*/ 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.
+    return /*#__PURE__*/ jsxs(TableBodyRoot, {
+        role: TableBodyRoot === defaultComponent ? undefined : 'rowgroup',
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: [
+            children,
+            fillerRowForStickyFooter
+        ]
+    });
 });
-TableBody.displayName = 'SuiTableBody';
+TableBody_TableBody.displayName = 'SuiTableBody';
+
+
+
+
+
 
-export { TableBody, TableBody$1 as tableBodyStyle };
+export { TableBody as tableBodyStyle, TableBody_TableBody as TableBody };