@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/components/ui/data-display/data-grid.js

@@ -7,50 +7,53 @@ import {
 } from './types';
 
 // Simple icon components
-const ChevronUpIcon}> = ({ className = '' }) => (
+const ChevronUpIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
   </svg>
 );
 
-const ChevronDownIcon}> = ({ className = '' }) => (
+const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
   </svg>
 );
 
-const SearchIcon}> = ({ className = '' }) => (
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
   </svg>
 );
 
-const FilterIcon}> = ({ className = '' }) => (
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" />
   </svg>
 );
 
-const MenuIcon}> = ({ className = '' }) => (
+const MenuIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
   </svg>
 );
 
-// const DragIcon}> = ({ className = '' }) => (
+// const DragIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
 //   <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
 //     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M8 9l3 3-3 3m5 0h3" />
 //   </svg>
-// ); // TODO}> = ({ className = '' }) => (
+// ); // TODO: Implement drag functionality
+
+const GroupIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
   </svg>
 );
 
 // Resizable Column Header Component
-const DataGridColumn= ({
+const DataGridColumn: React.FC<DataGridColumnProps> = ({
   column,
-  // index, // TODO,
+  // index, // TODO: Use for column ordering
+  onSort,
   onResize,
   sortConfig,
   // theme,
@@ -66,7 +69,7 @@ const DataGridColumn= ({
   const [startWidth, setStartWidth] = useState(0);
   const headerRef = useRef<HTMLTableHeaderCellElement>(null);
 
-  const handleMouseDown = useCallback((e) => {
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
     if (!resizable) return;
     
     e.preventDefault();
@@ -75,7 +78,7 @@ const DataGridColumn= ({
     setStartWidth(headerRef.current?.offsetWidth || 0);
   }, [resizable]);
 
-  const handleMouseMove = useCallback((e) => {
+  const handleMouseMove = useCallback((e: MouseEvent) => {
     if (!isResizing) return;
     
     const diff = e.clientX - startX;
@@ -105,9 +108,9 @@ const DataGridColumn= ({
   return (
     <th
       ref={headerRef}
-      className={`data-grid__header data-grid__header--${size} data-grid__header--${column.align || 'left'} ${isSorted ? 'data-grid__header--sorted' }`}
+      className={`data-grid__header data-grid__header--${size} data-grid__header--${column.align || 'left'} ${isSorted ? 'data-grid__header--sorted' : ''}`}
       style={{
-        width,
+        width: column.width,
       }}
       onClick={onSort}
     >
@@ -116,14 +119,15 @@ const DataGridColumn= ({
         {column.sortable && isSorted && (
           sortConfig?.direction === 'asc' ? (
             <ChevronUpIcon className="data-grid__sort-icon" />
-          ) ="data-grid__sort-icon" />
+          ) : (
+            <ChevronDownIcon className="data-grid__sort-icon" />
           )
         )}
       </div>
       
       {resizable && (
         <div
-          className={`data-grid__resize-handle ${isResizing ? 'data-grid__resize-handle--active' }`}
+          className={`data-grid__resize-handle ${isResizing ? 'data-grid__resize-handle--active' : ''}`}
           onMouseDown={handleMouseDown}
         />
       )}
@@ -132,24 +136,25 @@ const DataGridColumn= ({
 };
 
 // Column Management Panel
-const ColumnPanel];
-  groups?];
-  onGroupChange?]) => void;
-  onColumnToggle?, visible) => void;
-  theme;
-  size;
-  onClose) => void;
+const ColumnPanel: React.FC<{
+  columns: SortableColumn[];
+  groups?: string[];
+  onGroupChange?: (groups: string[]) => void;
+  onColumnToggle?: (columnKey: string, visible: boolean) => void;
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+  onClose: () => void;
 }> = ({ columns, groups = [], onGroupChange, onColumnToggle, size, onClose }) => {
   // const { getTheme } = useTheme();
   // const themeConfig = getTheme(theme);
   // const colors = themeConfig?.colors || getDefaultColors();
 
-  const handleGroupToggle = (columnKey) => {
+  const handleGroupToggle = (columnKey: string) => {
     if (!onGroupChange) return;
     
     const newGroups = groups.includes(columnKey)
       ? groups.filter(g => g !== columnKey)
-      , columnKey];
+      : [...groups, columnKey];
     
     onGroupChange(newGroups);
   };
@@ -216,18 +221,19 @@ const ColumnPanel];
 };
 
 // Advanced Search and Filter Bar
-const DataGridToolbar;
-  searchValue?;
-  onSearchChange?) => void;
-  filterable?;
-  filters?];
-  onFiltersChange?]) => void;
-  groupable?;
-  groups?];
-  onGroupChange?]) => void;
-  columns];
-  theme;
-  size;
+const DataGridToolbar: React.FC<{
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filterable?: boolean;
+  filters?: FilterConfig[];
+  onFiltersChange?: (filters: FilterConfig[]) => void;
+  groupable?: boolean;
+  groups?: string[];
+  onGroupChange?: (groups: string[]) => void;
+  columns: SortableColumn[];
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
 }> = ({ 
   searchable, 
   searchValue, 
@@ -253,17 +259,18 @@ const DataGridToolbar;
   const addFilter = () => {
     if (!filterColumn || !filterValue || !onFiltersChange) return;
     
-    const newFilter= {
-      key,
-      value,
-      operator};
+    const newFilter: FilterConfig = {
+      key: filterColumn,
+      value: filterValue,
+      operator: 'contains'
+    };
     
     onFiltersChange([...filters, newFilter]);
     setFilterColumn('');
     setFilterValue('');
   };
 
-  const removeFilter = (index) => {
+  const removeFilter = (index: number) => {
     if (!onFiltersChange) return;
     const newFilters = filters.filter((_, i) => i !== index);
     onFiltersChange(newFilters);
@@ -292,7 +299,7 @@ const DataGridToolbar;
           {filterable && (
             <button
               className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
-              onClick={() => {/* TODO}}
+              onClick={() => {/* TODO: Open filter dialog */}}
             >
               <FilterIcon className="data-grid__toolbar-icon" />
               <span>Filter ({filters.length})</span>
@@ -302,7 +309,7 @@ const DataGridToolbar;
           {groupable && (
             <button
               className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
-              onClick={() => {/* TODO}}
+              onClick={() => {/* TODO: Open group dialog */}}
             >
               <GroupIcon className="data-grid__toolbar-icon" />
               <span>Group ({groups.length})</span>
@@ -336,12 +343,14 @@ const DataGridToolbar;
       {filters.length > 0 && (
         <div className="data-grid__active-filters">
           <span className={`data-grid__active-filters-label data-grid__active-filters-label--${size}`}>
-            Active Filters, index) => (
+            Active Filters:
+          </span>
+          {filters.map((filter, index) => (
             <div
               key={index}
               className={`data-grid__filter-tag data-grid__filter-tag--${size}`}
             >
-              <span>{filter.key})}</span>
+              <span>{filter.key}: {String(filter.value)}</span>
               <button
                 onClick={() => removeFilter(index)}
                 className="data-grid__filter-tag-remove"
@@ -380,7 +389,7 @@ const DataGridToolbar;
           <button
             onClick={addFilter}
             disabled={!filterColumn || !filterValue}
-            className={`data-grid__filter-add-button data-grid__filter-add-button--${size} ${(!filterColumn || !filterValue) ? 'data-grid__filter-add-button--disabled' }`}
+            className={`data-grid__filter-add-button data-grid__filter-add-button--${size} ${(!filterColumn || !filterValue) ? 'data-grid__filter-add-button--disabled' : ''}`}
           >
             Add Filter
           </button>
@@ -391,24 +400,28 @@ const DataGridToolbar;
 };
 
 // Main DataGrid Component
-export const DataGrid= ({
+export const DataGrid: React.FC<DataGridProps> = ({
   columns,
   data,
   sortable = true,
   filterable = true,
   groupable = true,
   resizable = true,
-  // reorderable = false, // TODO,
+  // reorderable = false, // TODO: Implement column reordering
+  onSort,
   onFiltersChange,
   onGroupChange,
   onColumnResize,
-  // onColumnReorder, // TODO,
+  // onColumnReorder, // TODO: Implement column reordering
+  sortConfig,
   filters = [],
   groups = [],
   columnWidths = {},
-  // columnOrder = [], // TODO,
+  // columnOrder = [], // TODO: Implement column ordering
+  pagination,
   onPageChange,
-  // onPageSizeChange, // TODO= true,
+  // onPageSizeChange, // TODO: Implement page size change
+  searchable = true,
   searchValue,
   onSearchChange,
   rowKey = 'id',
@@ -439,12 +452,12 @@ export const DataGrid= ({
   const enhancedColumns = useMemo(() => {
     return columns.map(column => ({
       ...column,
-      width] || column.width || 150
+      width: columnWidths[column.key] || column.width || 150
     }));
   }, [columns, columnWidths]);
 
   // Get row key function
-  const getRowKey = (row, any>, index)=> {
+  const getRowKey = (row: Record<string, any>, index: number): string => {
     if (typeof rowKey === 'function') {
       return rowKey(row);
     }
@@ -452,22 +465,22 @@ export const DataGrid= ({
   };
 
   // Handle column resize
-  const handleColumnResize = useCallback((columnKey, newWidth) => {
+  const handleColumnResize = useCallback((columnKey: string, newWidth: number) => {
     onColumnResize?.(columnKey, newWidth);
   }, [onColumnResize]);
 
   // Handle sorting
-  const handleSort = useCallback((column) => {
+  const handleSort = useCallback((column: SortableColumn) => {
     if (!sortable || !onSort || !column.sortable) return;
     
-    const newDirection = sortConfig?.key === column.key && sortConfig.direction === 'asc' ? 'desc' ;
-    onSort({ key, direction});
+    const newDirection = sortConfig?.key === column.key && sortConfig.direction === 'asc' ? 'desc' : 'asc';
+    onSort({ key: column.key, direction: newDirection });
   }, [sortable, onSort, sortConfig]);
 
   // Handle row selection
-  const handleRowSelect = useCallback((row, any>, checked) => {
-    const key = typeof rowKey === 'function' ? rowKey(row) ] || `row-0`;
-    let newSelectedKeys];
+  const handleRowSelect = useCallback((row: Record<string, any>, checked: boolean) => {
+    const key = typeof rowKey === 'function' ? rowKey(row) : row[rowKey] || `row-0`;
+    let newSelectedKeys: string[];
 
     if (checked) {
       newSelectedKeys = [...internalSelectedKeys, key];
@@ -480,13 +493,13 @@ export const DataGrid= ({
   }, [internalSelectedKeys, onSelectionChange, rowKey]);
 
   // Handle select all
-  const handleSelectAll = useCallback((checked) => {
+  const handleSelectAll = useCallback((checked: boolean) => {
     const newSelectedKeys = checked ? data.map((row, index) => {
       if (typeof rowKey === 'function') {
         return rowKey(row);
       }
       return row[rowKey] || `row-${index}`;
-    }) ];
+    }) : [];
     setInternalSelectedKeys(newSelectedKeys);
     onSelectionChange?.(newSelectedKeys);
   }, [data, onSelectionChange, rowKey]);
@@ -514,7 +527,7 @@ export const DataGrid= ({
       <div className={`data-grid__container ${className || ''}`}>
         <div className="data-grid__error">
           <div className={`data-grid__error-text data-grid__error-text--${size}`}>
-            Error}
+            Error: {error}
           </div>
         </div>
       </div>
@@ -602,7 +615,7 @@ export const DataGrid= ({
               return (
                 <tr
                   key={key}
-                  className={`data-grid__row data-grid__row--${size} ${isSelected ? 'data-grid__row--selected' } ${variant === 'striped' && index % 2 === 1 ? 'data-grid__row--striped' }`}
+                  className={`data-grid__row data-grid__row--${size} ${isSelected ? 'data-grid__row--selected' : ''} ${variant === 'striped' && index % 2 === 1 ? 'data-grid__row--striped' : ''}`}
                 >
                   {selectable && (
                     <td className={`data-grid__select-cell data-grid__select-cell--${size}`}>
@@ -619,7 +632,7 @@ export const DataGrid= ({
                     <td
                       key={column.key}
                       className={`data-grid__cell data-grid__cell--${size} data-grid__cell--${column.align || 'left'}`}
-                      style={{ width}}
+                      style={{ width: column.width }}
                     >
                       {String(row[column.key] || '')}
                     </td>
@@ -641,7 +654,7 @@ export const DataGrid= ({
             <button
               onClick={() => onPageChange?.(pagination.currentPage - 1)}
               disabled={pagination.currentPage === 1}
-              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage === 1 ? 'data-grid__pagination-button--disabled' }`}
+              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage === 1 ? 'data-grid__pagination-button--disabled' : ''}`}
             >
               Previous
             </button>
@@ -653,7 +666,7 @@ export const DataGrid= ({
             <button
               onClick={() => onPageChange?.(pagination.currentPage + 1)}
               disabled={pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize)}
-              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize) ? 'data-grid__pagination-button--disabled' }`}
+              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize) ? 'data-grid__pagination-button--disabled' : ''}`}
             >
               Next
             </button>

package/dist/components/ui/data-display/list.esm.js

@@ -7,7 +7,7 @@ import {
 } from './types';
 
 // Simple icon components (inline SVG)
-const ChevronRightIcon}> = ({ className = '' }) => (
+const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -18,7 +18,7 @@ const ChevronRightIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const SearchIcon}> = ({ className = '' }) => (
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -29,7 +29,7 @@ const SearchIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const FilterIcon}> = ({ className = '' }) => (
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -40,7 +40,7 @@ const FilterIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const DotsIcon}> = ({ className = '' }) => (
+const DotsIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -51,7 +51,7 @@ const DotsIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const CheckIcon}> = ({ className = '' }) => (
+const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -63,14 +63,15 @@ const CheckIcon}> = ({ className = '' }) => (
 );
 
 // List Search and Filter Bar
-const ListSearchFilterBar;
-  searchValue;
-  onSearchChange) => void;
-  filterable;
-  filters];
-  onFiltersChange?]) => void;
-  theme;
-  size;
+const ListSearchFilterBar: React.FC<{
+  searchable: boolean;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  filterable: boolean;
+  filters: ListFilter[];
+  onFiltersChange?: (filters: ListFilter[]) => void;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
 }> = ({
   searchable,
   searchValue,
@@ -84,9 +85,10 @@ const ListSearchFilterBar;
   // const colors = themeConfig?.colors || getDefaultColors();
 
   // const sizeClasses = {
-  //   sm,
-  //   md,
-  //   lg};
+  //   sm: 'h-8 text-sm px-3',
+  //   md: 'h-10 text-base px-4',
+  //   lg: 'h-12 text-lg px-5'
+  // };
 
   if (!searchable && !filterable) return null;
 
@@ -123,10 +125,11 @@ const ListSearchFilterBar;
 };
 
 // List Item Action Component
-const ListItemActions];
-  item;
-  theme;
-  size;
+const ListItemActions: React.FC<{
+  actions: ListAction[];
+  item: ListItem;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
 }> = ({ actions, item, size }) => {
   // const { getTheme } = useTheme();
   // const themeConfig = getTheme(theme);
@@ -135,9 +138,10 @@ const ListItemActions];
   const [showMenu, setShowMenu] = useState(false);
 
   // const sizeClasses = {
-  //   sm,
-  //   md,
-  //   lg};
+  //   sm: 'p-1',
+  //   md: 'p-1.5',
+  //   lg: 'p-2'
+  // };
 
   if (actions.length === 0) return null;
 
@@ -150,7 +154,7 @@ const ListItemActions];
           e.stopPropagation();
           action.onClick(item);
         }}
-        className={`list__action-button list__action-button--${size} ${action.variant === 'danger' ? 'list__action-button--danger' }`}
+        className={`list__action-button list__action-button--${size} ${action.variant === 'danger' ? 'list__action-button--danger' : ''}`}
         title={action.label}
       >
         {action.icon || <DotsIcon className="list__action-icon" />}
@@ -189,7 +193,7 @@ const ListItemActions];
                   action.onClick(item);
                   setShowMenu(false);
                 }}
-                className={`list__action-menu-item ${action.variant === 'danger' ? 'list__action-menu-item--danger' }`}
+                className={`list__action-menu-item ${action.variant === 'danger' ? 'list__action-menu-item--danger' : ''}`}
               >
                 {action.icon && <span className="list__action-menu-icon">{action.icon}</span>}
                 {action.label}
@@ -203,17 +207,18 @@ const ListItemActions];
 };
 
 // Individual List Item Component
-const ListItemComponent;
-  index;
-  selectable;
-  selected;
-  onSelectionChange?) => void;
-  onClick?, index) => void;
-  actions];
-  showDivider;
-  theme;
-  size;
-  variant;
+const ListItemComponent: React.FC<{
+  item: ListItem;
+  index: number;
+  selectable: boolean;
+  selected: boolean;
+  onSelectionChange?: (selected: boolean) => void;
+  onClick?: (item: ListItem, index: number) => void;
+  actions: ListAction[];
+  showDivider: boolean;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+  variant: 'default' | 'bordered' | 'striped';
 }> = ({
   item,
   index,
@@ -232,8 +237,8 @@ const ListItemComponent;
 
   return (
     <div
-      className={`list__item list__item--${size} list__item--${variant} ${isClickable ? 'list__item--clickable' } ${index % 2 === 1 && variant === 'striped' ? 'list__item--striped' }`}
-      onClick={isClickable ? () => onClick(item, index) }
+      className={`list__item list__item--${size} list__item--${variant} ${isClickable ? 'list__item--clickable' : ''} ${index % 2 === 1 && variant === 'striped' ? 'list__item--striped' : ''}`}
+      onClick={isClickable ? () => onClick(item, index) : undefined}
     >
       {/* Selection Checkbox */}
       {selectable && (
@@ -243,7 +248,7 @@ const ListItemComponent;
         >
           <button
             onClick={() => onSelectionChange?.(!selected)}
-            className={`list__item-checkbox ${selected ? 'list__item-checkbox--selected' }`}
+            className={`list__item-checkbox ${selected ? 'list__item-checkbox--selected' : ''}`}
           >
             {selected && <CheckIcon className="list__item-checkbox-icon" />}
           </button>
@@ -259,7 +264,8 @@ const ListItemComponent;
               alt={item.title}
               className="list__item-avatar-image"
             />
-          ) ="list__item-avatar-placeholder">
+          ) : (
+            <div className="list__item-avatar-placeholder">
               {item.avatar}
             </div>
           )}
@@ -334,7 +340,7 @@ const ListItemComponent;
 };
 
 // Main List Component
-export const List= ({
+export const List: React.FC<ListProps> = ({
   items,
   selectable = false,
   selectedKeys = [],
@@ -346,7 +352,8 @@ export const List= ({
   onSearchChange,
   filterable = false,
   filters = [],
-  // onFiltersChange, // TODO= false,
+  // onFiltersChange, // TODO: Implement filter functionality
+  loading = false,
   error = null,
   emptyMessage = 'No items found',
   showDividers = true,
@@ -371,12 +378,12 @@ export const List= ({
     );
   }, [items, searchable, searchValue]);
 
-  const handleSelectionChange = useCallback((itemKey, selected) => {
+  const handleSelectionChange = useCallback((itemKey: string, selected: boolean) => {
     if (!onSelectionChange) return;
 
     const newSelectedKeys = selected 
       ? [...selectedKeys, itemKey]
-      => key !== itemKey);
+      : selectedKeys.filter(key => key !== itemKey);
     
     onSelectionChange(newSelectedKeys);
   }, [selectedKeys, onSelectionChange]);
@@ -417,7 +424,8 @@ export const List= ({
           <div className="list__empty">
             {emptyMessage}
           </div>
-        ) , index) => {
+        ) : (
+          filteredItems.map((item, index) => {
             const itemKey = item.key || item.id || index.toString();
             const isSelected = selectedKeys.includes(itemKey);
             const shouldShowDivider = showDividers && index < filteredItems.length - 1;