@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -171,7 +171,12 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
         const video = videoRef.current;
         if (video) {
           const tracks = video.textTracks;
-          console.log('Setting subtitle:', subtitleLang ? 'enabled' : 'disabled', 'Available tracks:', tracks.length);
+          console.log(
+            'Setting subtitle:',
+            subtitleLang ? 'enabled' : 'disabled',
+            'Available tracks:',
+            tracks.length
+          );
 
           // Hide all tracks first
           for (let i = 0; i < tracks.length; i++) {

package/src/components/index.ts

@@ -110,9 +110,20 @@ export {
   type SideMenuListProps,
 } from './Navigation/SideMenu/SideMenuList';
 // Menu components
-export { Menu, MenuItem, MenuDivider, type MenuProps, type MenuItemProps, type MenuDividerProps } from './Navigation/Menu/Menu';
+export {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  type MenuProps,
+  type MenuItemProps,
+  type MenuDividerProps,
+} from './Navigation/Menu/Menu';
 export { MegaMenu, MegaMenuColumn, MegaMenuLink } from './Navigation/Menu/MegaMenu';
-export type { MegaMenuProps, MegaMenuColumnProps, MegaMenuLinkProps } from '../lib/types/components';
+export type {
+  MegaMenuProps,
+  MegaMenuColumnProps,
+  MegaMenuLinkProps,
+} from '../lib/types/components';
 // Navigation sub-components
 export { NavDropdown, type NavDropdownProps } from './Navigation/Nav/NavDropdown';
 export { default as Pagination, type PaginationProps } from './Pagination/Pagination';

package/src/layouts/Grid/Grid.stories.tsx

@@ -549,7 +549,9 @@ export const AlignmentAndSpacing: Story = {
         </p>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="start"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            justify-content="start"
+          </h3>
           <Row justifyContent="start" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>
@@ -561,7 +563,9 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="center"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            justify-content="center"
+          </h3>
           <Row justifyContent="center" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>
@@ -587,7 +591,9 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="around"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            justify-content="around"
+          </h3>
           <Row justifyContent="around" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -374,7 +374,11 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           const position = positions[index];
           if (!position) {
             return (
-              <div key={item.id} ref={item.ref as React.LegacyRef<HTMLDivElement>} style={{ opacity: 0, position: 'absolute' }}>
+              <div
+                key={item.id}
+                ref={item.ref as React.LegacyRef<HTMLDivElement>}
+                style={{ opacity: 0, position: 'absolute' }}
+              >
                 {item.element}
               </div>
             );

package/src/lib/__tests__/theme-tools.test.ts

@@ -7,7 +7,7 @@ import {
   validateTheme,
   themeToCSS,
   getThemeMetadata,
-  supportsDarkMode
+  supportsDarkMode,
 } from '../theme-tools';
 import { Theme } from '../theme/types';
 
@@ -59,13 +59,39 @@ describe('theme-tools', () => {
     },
     shadows: { xs: 'none', sm: 'none', md: 'none', lg: 'none', xl: 'none' },
     transitions: {
-      duration: { shortest: 150, shorter: 200, short: 250, standard: 300, complex: 375, enteringScreen: 225, leavingScreen: 195 },
-      easing: { easeInOut: 'ease', easeOut: 'ease', easeIn: 'ease', sharp: 'ease' }
+      duration: {
+        shortest: 150,
+        shorter: 200,
+        short: 250,
+        standard: 300,
+        complex: 375,
+        enteringScreen: 225,
+        leavingScreen: 195,
+      },
+      easing: { easeInOut: 'ease', easeOut: 'ease', easeIn: 'ease', sharp: 'ease' },
+    },
+    zIndex: {
+      mobileStepper: 1000,
+      speedDial: 1050,
+      appBar: 1100,
+      drawer: 1200,
+      modal: 1300,
+      snackbar: 1400,
+      tooltip: 1500,
+    },
+    borderRadius: {
+      base: 4,
+      sm: 2,
+      md: 4,
+      lg: 8,
+      xl: 12,
+      xxl: 16,
+      '3xl': 24,
+      '4xl': 32,
+      pill: 9999,
     },
-    zIndex: { mobileStepper: 1000, speedDial: 1050, appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 },
-    borderRadius: { base: 4, sm: 2, md: 4, lg: 8, xl: 12, xxl: 16, '3xl': 24, '4xl': 32, pill: 9999 },
     custom: {},
-    __isJSTheme: true
+    __isJSTheme: true,
   };
 
   describe('quickTheme', () => {

package/src/lib/composables/shared-mouse-tracker.ts

@@ -19,15 +19,15 @@ class GlobalMouseTracker {
    */
   subscribe(callback: (pos: MousePosition) => void): () => void {
     this.listeners.add(callback);
-    
+
     // Start tracking if this is the first subscriber
     if (this.listeners.size === 1) {
       this.startTracking();
     }
-    
+
     // Immediately notify with current position
     callback(this.position);
-    
+
     // Return unsubscribe function
     return () => {
       this.unsubscribe(callback);
@@ -39,7 +39,7 @@ class GlobalMouseTracker {
    */
   private unsubscribe(callback: (pos: MousePosition) => void): void {
     this.listeners.delete(callback);
-    
+
     // Stop tracking if no more subscribers
     if (this.listeners.size === 0) {
       this.stopTracking();
@@ -53,9 +53,9 @@ class GlobalMouseTracker {
     if (this.isTracking) {
       return;
     }
-    
+
     this.isTracking = true;
-    
+
     // Use document-level listener for global tracking
     document.addEventListener('mousemove', this.handleMouseMove, { passive: true });
   }
@@ -67,16 +67,16 @@ class GlobalMouseTracker {
     if (!this.isTracking) {
       return;
     }
-    
+
     this.isTracking = false;
     document.removeEventListener('mousemove', this.handleMouseMove);
-    
+
     // Cancel any pending RAF
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);
       this.rafId = null;
     }
-    
+
     this.lastEvent = null;
   }
 
@@ -85,7 +85,7 @@ class GlobalMouseTracker {
    */
   private handleMouseMove = (e: MouseEvent): void => {
     this.lastEvent = e;
-    
+
     // Use requestAnimationFrame to throttle updates
     if (this.rafId === null) {
       this.rafId = requestAnimationFrame(() => {
@@ -94,9 +94,9 @@ class GlobalMouseTracker {
             x: this.lastEvent.clientX,
             y: this.lastEvent.clientY,
           };
-          
+
           // Notify all subscribers
-          this.listeners.forEach((callback) => {
+          this.listeners.forEach(callback => {
             try {
               callback(this.position);
             } catch (error) {
@@ -104,7 +104,7 @@ class GlobalMouseTracker {
             }
           });
         }
-        
+
         this.rafId = null;
       });
     }
@@ -130,4 +130,3 @@ const globalMouseTracker = new GlobalMouseTracker();
 
 export { globalMouseTracker };
 export type { GlobalMouseTracker };
-

package/src/lib/composables/useAtomixGlass.ts

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
   AtomixGlassProps,
   DisplacementMode,
@@ -41,10 +35,7 @@ const backgroundDetectionCache = new WeakMap<HTMLElement, BackgroundDetectionCac
  * Compare two OverLightConfig values for equality
  * Handles primitives (boolean, 'auto') and objects with deep comparison
  */
-const compareOverLightConfig = (
-  config1: OverLightConfig,
-  config2: OverLightConfig
-): boolean => {
+const compareOverLightConfig = (config1: OverLightConfig, config2: OverLightConfig): boolean => {
   // Primitive comparison for boolean and 'auto'
   if (typeof config1 !== 'object' || config1 === null) {
     return config1 === config2;
@@ -294,7 +285,10 @@ export function useAtomixGlass({
           setDynamicCornerRadius(extractedRadius);
         }
       } catch (error) {
-        if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
+        if (
+          (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
+          debugCornerRadius
+        ) {
           console.error('[AtomixGlass] Error extracting corner radius:', error);
         }
       }
@@ -308,7 +302,8 @@ export function useAtomixGlass({
   // Media query handlers and background detection
   useEffect(() => {
     // Only run auto-detection for 'auto' mode or object config (which uses auto-detection)
-    const shouldDetect = (overLight === 'auto' || (typeof overLight === 'object' && overLight !== null));
+    const shouldDetect =
+      overLight === 'auto' || (typeof overLight === 'object' && overLight !== null);
 
     if (shouldDetect && glassRef.current) {
       const element = glassRef.current;
@@ -357,7 +352,13 @@ export function useAtomixGlass({
               const bgImage = computedStyle.backgroundImage;
 
               // Check for solid color backgrounds
-              if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' && bgColor !== 'initial' && bgColor !== 'none') {
+              if (
+                bgColor &&
+                bgColor !== 'rgba(0, 0, 0, 0)' &&
+                bgColor !== 'transparent' &&
+                bgColor !== 'initial' &&
+                bgColor !== 'none'
+              ) {
                 const rgb = bgColor.match(/\d+/g);
                 if (rgb && rgb.length >= 3) {
                   const r = Number(rgb[0]);
@@ -365,9 +366,20 @@ export function useAtomixGlass({
                   const b = Number(rgb[2]);
 
                   // Validate RGB values are valid numbers
-                  if (!isNaN(r) && !isNaN(g) && !isNaN(b) &&
-                    isFinite(r) && isFinite(g) && isFinite(b) &&
-                    r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
+                  if (
+                    !isNaN(r) &&
+                    !isNaN(g) &&
+                    !isNaN(b) &&
+                    isFinite(r) &&
+                    isFinite(g) &&
+                    isFinite(b) &&
+                    r >= 0 &&
+                    r <= 255 &&
+                    g >= 0 &&
+                    g <= 255 &&
+                    b >= 0 &&
+                    b <= 255
+                  ) {
                     // Only consider if it's not pure black or very dark
                     if (r > 10 || g > 10 || b > 10) {
                       const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
@@ -414,11 +426,12 @@ export function useAtomixGlass({
               if (typeof overLight === 'object' && overLight !== null) {
                 const objConfig = overLight as OverLightObjectConfig;
                 if (objConfig.threshold !== undefined) {
-                  const configThreshold = typeof objConfig.threshold === 'number' &&
+                  const configThreshold =
+                    typeof objConfig.threshold === 'number' &&
                     !isNaN(objConfig.threshold) &&
                     isFinite(objConfig.threshold)
-                    ? objConfig.threshold
-                    : 0.7;
+                      ? objConfig.threshold
+                      : 0.7;
                   threshold = Math.min(0.9, Math.max(0.1, configThreshold));
                 }
               }
@@ -426,24 +439,31 @@ export function useAtomixGlass({
               const isOverLightDetected = avgLuminance > threshold;
 
               // Cache the result in shared cache
-              setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold);
+              setCachedBackgroundDetection(
+                element.parentElement,
+                overLight,
+                isOverLightDetected,
+                threshold
+              );
 
               setDetectedOverLight(isOverLightDetected);
             } else {
               // Invalid luminance calculation, default to false
               const result = false;
-              const threshold = typeof overLight === 'object' && overLight !== null
-                ? (overLight as OverLightObjectConfig).threshold || 0.7
-                : 0.7;
+              const threshold =
+                typeof overLight === 'object' && overLight !== null
+                  ? (overLight as OverLightObjectConfig).threshold || 0.7
+                  : 0.7;
               setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
               setDetectedOverLight(result);
             }
           } else {
             // Default to false if no valid background found
             const result = false;
-            const threshold = typeof overLight === 'object' && overLight !== null
-              ? (overLight as OverLightObjectConfig).threshold || 0.7
-              : 0.7;
+            const threshold =
+              typeof overLight === 'object' && overLight !== null
+                ? (overLight as OverLightObjectConfig).threshold || 0.7
+                : 0.7;
             setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
             setDetectedOverLight(result);
           }
@@ -454,9 +474,10 @@ export function useAtomixGlass({
           }
           const result = false;
           if (element && element.parentElement) {
-            const threshold = typeof overLight === 'object' && overLight !== null
-              ? (overLight as OverLightObjectConfig).threshold || 0.7
-              : 0.7;
+            const threshold =
+              typeof overLight === 'object' && overLight !== null
+                ? (overLight as OverLightObjectConfig).threshold || 0.7
+                : 0.7;
             setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
           }
           setDetectedOverLight(result);
@@ -562,7 +583,10 @@ export function useAtomixGlass({
       setInternalMouseOffset(newOffset);
       setInternalGlobalMousePosition(globalPos);
 
-      if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && enablePerformanceMonitoring) {
+      if (
+        (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
+        enablePerformanceMonitoring
+      ) {
         const endTime = performance.now();
         // const duration = endTime - startTime;
         // if (duration > 5) {
@@ -692,14 +716,7 @@ export function useAtomixGlass({
       Math.abs(normalizedX) * stretchIntensity * 0.15;
 
     return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
-  }, [
-    globalMousePosition,
-    elasticity,
-    glassSize,
-    glassRef,
-    overLight,
-    detectedOverLight,
-  ]);
+  }, [globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight]);
 
   const calculateFadeInFactor = useCallback(() => {
     if (
@@ -724,7 +741,9 @@ export function useAtomixGlass({
     );
     const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
 
-    return edgeDistance > CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
+    return edgeDistance > CONSTANTS.ACTIVATION_ZONE
+      ? 0
+      : 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
   }, [globalMousePosition, glassSize, glassRef]);
 
   const calculateElasticTranslation = useCallback(() => {
@@ -769,7 +788,9 @@ export function useAtomixGlass({
       element !== null && element instanceof HTMLElement && element.isConnected;
 
     const validateSize = (size: GlassSize): boolean =>
-      validateGlassSize(size) && size.width <= CONSTANTS.MAX_SIZE && size.height <= CONSTANTS.MAX_SIZE;
+      validateGlassSize(size) &&
+      size.width <= CONSTANTS.MAX_SIZE &&
+      size.height <= CONSTANTS.MAX_SIZE;
 
     let rafId: number | null = null;
     let lastSize = { width: 0, height: 0 };
@@ -903,7 +924,9 @@ export function useAtomixGlass({
     const activeIntensity = isActive ? 1.6 : 1;
 
     // More robust overlight configuration with better defaults and clamping
-    const baseOpacity = isOverLight ? Math.min(0.6, Math.max(0.2, 0.5 * hoverIntensity * activeIntensity)) : 0;
+    const baseOpacity = isOverLight
+      ? Math.min(0.6, Math.max(0.2, 0.5 * hoverIntensity * activeIntensity))
+      : 0;
 
     const baseConfig = {
       isOverLight,
@@ -920,11 +943,31 @@ export function useAtomixGlass({
       const objConfig = overLight as OverLightObjectConfig;
 
       // Validate and apply object config values with proper clamping
-      const validatedThreshold = validateConfigValue(objConfig.threshold, 0.1, 1.0, baseConfig.threshold);
+      const validatedThreshold = validateConfigValue(
+        objConfig.threshold,
+        0.1,
+        1.0,
+        baseConfig.threshold
+      );
       const validatedOpacity = validateConfigValue(objConfig.opacity, 0.1, 1.0, baseConfig.opacity);
-      const validatedContrast = validateConfigValue(objConfig.contrast, 0.5, 2.5, baseConfig.contrast);
-      const validatedBrightness = validateConfigValue(objConfig.brightness, 0.5, 2.0, baseConfig.brightness);
-      const validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, 0.5, 3.0, baseConfig.saturationBoost);
+      const validatedContrast = validateConfigValue(
+        objConfig.contrast,
+        0.5,
+        2.5,
+        baseConfig.contrast
+      );
+      const validatedBrightness = validateConfigValue(
+        objConfig.brightness,
+        0.5,
+        2.0,
+        baseConfig.brightness
+      );
+      const validatedSaturationBoost = validateConfigValue(
+        objConfig.saturationBoost,
+        0.5,
+        3.0,
+        baseConfig.saturationBoost
+      );
 
       const finalConfig = {
         ...baseConfig,
@@ -936,7 +979,10 @@ export function useAtomixGlass({
       };
 
       // Debug logging
-      if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
+      if (
+        (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
+        debugOverLight
+      ) {
         console.log('[AtomixGlass] OverLight Config:', {
           isOverLight,
           config: {
@@ -968,7 +1014,10 @@ export function useAtomixGlass({
     }
 
     // Debug logging for non-object configs
-    if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
+    if (
+      (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
+      debugOverLight
+    ) {
       console.log('[AtomixGlass] OverLight Config:', {
         isOverLight,
         configType: typeof overLight === 'boolean' ? (overLight ? 'true' : 'false') : overLight,
@@ -991,7 +1040,15 @@ export function useAtomixGlass({
     }
 
     return baseConfig;
-  }, [overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive, validateConfigValue, debugOverLight]);
+  }, [
+    overLight,
+    getEffectiveOverLight,
+    mouseOffset,
+    isHovered,
+    isActive,
+    validateConfigValue,
+    debugOverLight,
+  ]);
 
   // Event handlers
   const handleMouseEnter = useCallback(() => setIsHovered(true), []);

package/src/lib/composables/useChartExport.ts

@@ -325,4 +325,4 @@ export function useChartExport() {
     exportChart,
     shareChart,
   };
-}
+}

package/src/lib/composables/useDataTable.ts

@@ -274,7 +274,9 @@ export function useDataTable({
   const visibleColumns = useMemo(() => {
     return columnOrder
       .map(key => columns.find(col => col.key === key))
-      .filter((col): col is DataTableColumn => col !== undefined && columnVisibility[col.key] !== false);
+      .filter(
+        (col): col is DataTableColumn => col !== undefined && columnVisibility[col.key] !== false
+      );
   }, [columns, columnOrder, columnVisibility]);
 
   // Handle sorting
@@ -299,13 +301,10 @@ export function useDataTable({
   );
 
   // Handle page change
-  const handlePageChange = useCallback(
-    (page: number) => {
-      if (page < 1) return;
-      setCurrentPage(page);
-    },
-    []
-  );
+  const handlePageChange = useCallback((page: number) => {
+    if (page < 1) return;
+    setCurrentPage(page);
+  }, []);
 
   // Handle search
   const handleSearch = useCallback((query: string) => {
@@ -330,7 +329,13 @@ export function useDataTable({
 
   // Pre-process column filters to avoid redundant lookups and transformations
   const activeColumnFilters = useMemo(() => {
-    if (!columnFilters) return [];
+    if (!columnFilters)
+      return [] as Array<{
+        key: string;
+        value: string;
+        lowercaseValue: string;
+        column: DataTableColumn;
+      }>;
 
     return Object.entries(columnFilterValues)
       .filter(([, value]) => value !== undefined && value !== null && value !== '')
@@ -341,7 +346,8 @@ export function useDataTable({
         return {
           key: columnKey,
           value,
-          lowercaseValue: typeof value === 'string' ? value.toLowerCase() : String(value).toLowerCase(),
+          lowercaseValue:
+            typeof value === 'string' ? value.toLowerCase() : String(value).toLowerCase(),
           column,
         };
       })
@@ -369,7 +375,9 @@ export function useDataTable({
 
       // Apply column-specific filters
       for (let i = 0; i < activeColumnFilters.length; i++) {
-        const { key, value, lowercaseValue, column } = activeColumnFilters[i];
+        const filter = activeColumnFilters[i];
+        if (!filter) continue;
+        const { key, value, lowercaseValue, column } = filter;
         const cellValue = row[key];
 
         if (cellValue == null) return false;
@@ -451,7 +459,9 @@ export function useDataTable({
       }
 
       if (onSelectionChange) {
-        const selectedRowsData = sortedData.filter(row => newSelectedIds.includes(getRowId(row, rowKey)));
+        const selectedRowsData = sortedData.filter(row =>
+          newSelectedIds.includes(getRowId(row, rowKey))
+        );
         onSelectionChange(selectedRowsData, newSelectedIds);
       }
     },
@@ -463,16 +473,16 @@ export function useDataTable({
     (selected: boolean) => {
       if (selectionMode !== 'multiple') return;
 
-      const newSelectedIds = selected
-        ? paginatedData.map(row => getRowId(row, rowKey))
-        : [];
+      const newSelectedIds = selected ? paginatedData.map(row => getRowId(row, rowKey)) : [];
 
       if (!controlledSelectedRowIds) {
         setInternalSelectedRowIds(newSelectedIds);
       }
 
       if (onSelectionChange) {
-        const selectedRowsData = sortedData.filter(row => newSelectedIds.includes(getRowId(row, rowKey)));
+        const selectedRowsData = sortedData.filter(row =>
+          newSelectedIds.includes(getRowId(row, rowKey))
+        );
         onSelectionChange(selectedRowsData, newSelectedIds);
       }
     },
@@ -488,7 +498,9 @@ export function useDataTable({
   // Check if some rows are selected (indeterminate)
   const isIndeterminate = useMemo(() => {
     if (selectionMode !== 'multiple' || paginatedData.length === 0) return false;
-    const selectedCount = paginatedData.filter(row => selectedRowIds.includes(getRowId(row, rowKey))).length;
+    const selectedCount = paginatedData.filter(row =>
+      selectedRowIds.includes(getRowId(row, rowKey))
+    ).length;
     return selectedCount > 0 && selectedCount < paginatedData.length;
   }, [selectionMode, paginatedData, selectedRowIds, rowKey]);