@ringcentral/spring-ui 1.7.0 → 1.9.0

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-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;
     }

package/TableRow.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useButton } from '@mui/base';
-import { useClasses } from '@ringcentral/spring-base';
+import { useClasses, useButton } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { u as useTablelvl2Context } from './chunks/Tablelvl2Context.js';
 
@@ -21,8 +20,7 @@ const TableRow = forwardRef((inProps, ref) => {
         rootElementName: TableRowRoot,
         rootRef: ref,
     });
-    const rootProps = getRootProps();
-    // Determine the appropriate role
+    const rootProps = getRootProps(rest);
     const role = roleProp ?? (TableRowRoot !== defaultComponent ? 'row' : undefined);
     return (jsx(TableRowRoot, { className: cls('root', variant, {
             hoverable,