remove unused refs from list/grid components

src/renderer/features/albums/components/album-list-infinite-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -15,10 +14,10 @@ import {
     SortOrder,
 } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
+
 interface AlbumListInfiniteGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
 
-export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>(
+export const AlbumListInfiniteGrid = ({
-    ({
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -28,7 +27,7 @@ export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>
     },
     saveScrollOffset = true,
     serverId,
-    }) => {
+}: AlbumListInfiniteGridProps) => {
     const listCountQuery = albumQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -68,5 +67,4 @@ export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>
             rows={rows}
         />
     );
-    },
+};
-);

src/renderer/features/albums/components/album-list-infinite-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface AlbumListInfiniteTableProps extends ItemListTableComponentProps<AlbumListQuery> {}
 
-export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProps>(
+export const AlbumListInfiniteTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -38,9 +35,7 @@ export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProp
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: AlbumListInfiniteTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = albumQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -90,9 +85,7 @@ export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProp
             onColumnResized={handleColumnResized}
             onRangeChanged={onRangeChanged}
             onScrollEnd={handleOnScrollEnd}
-                ref={ref}
             size={size}
         />
     );
-    },
+};
-);

src/renderer/features/albums/components/album-list-paginated-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface AlbumListPaginatedGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
 
-export const AlbumListPaginatedGrid = forwardRef<any, AlbumListPaginatedGridProps>(
+export const AlbumListPaginatedGrid = ({
-    (
-        {
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -32,9 +29,7 @@ export const AlbumListPaginatedGrid = forwardRef<any, AlbumListPaginatedGridProp
     },
     saveScrollOffset = true,
     serverId,
-        },
+}: AlbumListPaginatedGridProps) => {
-        ref,
-    ) => {
     const listCountQuery = albumQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -81,10 +76,8 @@ export const AlbumListPaginatedGrid = forwardRef<any, AlbumListPaginatedGridProp
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.ALBUM}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 rows={rows}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/albums/components/album-list-paginated-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,9 +21,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface AlbumListPaginatedTableProps extends ItemListTableComponentProps<AlbumListQuery> {}
 
-export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTableProps>(
+export const AlbumListPaginatedTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -40,9 +37,7 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: AlbumListPaginatedTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = albumQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -103,11 +98,9 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
                 onColumnReordered={handleColumnReordered}
                 onColumnResized={handleColumnResized}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 size={size}
                 startRowIndex={startRowIndex}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx

@@ -19,8 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListInfiniteGridProps
     extends ItemListGridComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListInfiniteGrid = forwardRef<any, AlbumArtistListInfiniteGridProps>(
+export const AlbumArtistListInfiniteGrid = ({
-    ({
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -30,7 +29,7 @@ export const AlbumArtistListInfiniteGrid = forwardRef<any, AlbumArtistListInfini
     },
     saveScrollOffset = true,
     serverId,
-    }) => {
+}: AlbumArtistListInfiniteGridProps) => {
     const listCountQuery = artistsQueries.albumArtistListCount({
         query: { ...query },
         serverId: serverId,
@@ -69,5 +68,4 @@ export const AlbumArtistListInfiniteGrid = forwardRef<any, AlbumArtistListInfini
             rows={rows}
         />
     );
-    },
+};
-);

src/renderer/features/artists/components/album-artist-list-infinite-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -21,9 +20,7 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListInfiniteTableProps
     extends ItemListTableComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfiniteTableProps>(
+export const AlbumArtistListInfiniteTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -39,9 +36,7 @@ export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfin
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: AlbumArtistListInfiniteTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = artistsQueries.albumArtistListCount({
         query: { ...query },
         serverId: serverId,
@@ -92,9 +87,7 @@ export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfin
             onColumnResized={handleColumnResized}
             onRangeChanged={onRangeChanged}
             onScrollEnd={handleOnScrollEnd}
-                ref={ref}
             size={size}
         />
     );
-    },
+};
-);

src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx

@@ -1,5 +1,5 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
+import { ref } from 'process';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -21,9 +21,7 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListPaginatedGridProps
     extends ItemListGridComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListPaginatedGrid = forwardRef<any, AlbumArtistListPaginatedGridProps>(
+export const AlbumArtistListPaginatedGrid = ({
-    (
-        {
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -33,9 +31,7 @@ export const AlbumArtistListPaginatedGrid = forwardRef<any, AlbumArtistListPagin
     },
     saveScrollOffset = true,
     serverId,
-        },
+}: AlbumArtistListPaginatedGridProps) => {
-        ref,
-    ) => {
     const listCountQuery = artistsQueries.albumArtistListCount({
         query: { ...query },
         serverId: serverId,
@@ -86,5 +82,4 @@ export const AlbumArtistListPaginatedGrid = forwardRef<any, AlbumArtistListPagin
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/artists/components/album-artist-list-paginated-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -23,9 +22,7 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListPaginatedTableProps
     extends ItemListTableComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPaginatedTableProps>(
+export const AlbumArtistListPaginatedTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -41,9 +38,7 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: AlbumArtistListPaginatedTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = artistsQueries.albumArtistListCount({
         query: { ...query },
         serverId: serverId,
@@ -105,11 +100,9 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
                 onColumnReordered={handleColumnReordered}
                 onColumnResized={handleColumnResized}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 size={size}
                 startRowIndex={startRowIndex}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/artists/components/artist-list-infinite-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,8 +17,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListInfiniteGridProps extends ItemListGridComponentProps<ArtistListQuery> {}
 
-export const ArtistListInfiniteGrid = forwardRef<any, ArtistListInfiniteGridProps>(
+export const ArtistListInfiniteGrid = ({
-    ({
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -29,7 +27,7 @@ export const ArtistListInfiniteGrid = forwardRef<any, ArtistListInfiniteGridProp
     },
     saveScrollOffset = true,
     serverId,
-    }) => {
+}: ArtistListInfiniteGridProps) => {
     const listCountQuery = artistsQueries.artistListCount({
         query: { ...query },
         serverId: serverId,
@@ -68,5 +66,4 @@ export const ArtistListInfiniteGrid = forwardRef<any, ArtistListInfiniteGridProp
             rows={rows}
         />
     );
-    },
+};
-);

src/renderer/features/artists/components/artist-list-infinite-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListInfiniteTableProps extends ItemListTableComponentProps<ArtistListQuery> {}
 
-export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTableProps>(
+export const ArtistListInfiniteTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -38,9 +35,7 @@ export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTablePr
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: ArtistListInfiniteTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = artistsQueries.artistListCount({
         query: { ...query },
         serverId: serverId,
@@ -91,9 +86,7 @@ export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTablePr
             onColumnResized={handleColumnResized}
             onRangeChanged={onRangeChanged}
             onScrollEnd={handleOnScrollEnd}
-                ref={ref}
             size={size}
         />
     );
-    },
+};
-);

src/renderer/features/artists/components/artist-list-paginated-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListPaginatedGridProps extends ItemListGridComponentProps<ArtistListQuery> {}
 
-export const ArtistListPaginatedGrid = forwardRef<any, ArtistListPaginatedGridProps>(
+export const ArtistListPaginatedGrid = ({
-    (
-        {
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -32,9 +29,7 @@ export const ArtistListPaginatedGrid = forwardRef<any, ArtistListPaginatedGridPr
     },
     saveScrollOffset = true,
     serverId,
-        },
+}: ArtistListPaginatedGridProps) => {
-        ref,
-    ) => {
     const listCountQuery = artistsQueries.artistListCount({
         query: { ...query },
         serverId: serverId,
@@ -80,10 +75,8 @@ export const ArtistListPaginatedGrid = forwardRef<any, ArtistListPaginatedGridPr
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.ARTIST}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 rows={rows}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/artists/components/artist-list-paginated-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,9 +21,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListPaginatedTableProps extends ItemListTableComponentProps<ArtistListQuery> {}
 
-export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTableProps>(
+export const ArtistListPaginatedTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -40,9 +37,7 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: ArtistListPaginatedTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = artistsQueries.artistListCount({
         query: { ...query },
         serverId: serverId,
@@ -104,11 +99,9 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
                 onColumnReordered={handleColumnReordered}
                 onColumnResized={handleColumnResized}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 size={size}
                 startRowIndex={startRowIndex}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/genres/components/genre-list-infinite-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,8 +17,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListInfiniteGridProps extends ItemListGridComponentProps<GenreListQuery> {}
 
-export const GenreListInfiniteGrid = forwardRef<any, GenreListInfiniteGridProps>(
+export const GenreListInfiniteGrid = ({
-    ({
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -29,7 +27,7 @@ export const GenreListInfiniteGrid = forwardRef<any, GenreListInfiniteGridProps>
     },
     saveScrollOffset = true,
     serverId,
-    }) => {
+}: GenreListInfiniteGridProps) => {
     const listCountQuery = genresQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -68,5 +66,4 @@ export const GenreListInfiniteGrid = forwardRef<any, GenreListInfiniteGridProps>
             rows={rows}
         />
     );
-    },
+};
-);

src/renderer/features/genres/components/genre-list-infinite-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListInfiniteTableProps extends ItemListTableComponentProps<GenreListQuery> {}
 
-export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProps>(
+export const GenreListInfiniteTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -38,9 +35,7 @@ export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProp
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: GenreListInfiniteTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = genresQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -91,9 +86,7 @@ export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProp
             onColumnResized={handleColumnResized}
             onRangeChanged={onRangeChanged}
             onScrollEnd={handleOnScrollEnd}
-                ref={ref}
             size={size}
         />
     );
-    },
+};
-);

src/renderer/features/genres/components/genre-list-paginated-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListPaginatedGridProps extends ItemListGridComponentProps<GenreListQuery> {}
 
-export const GenreListPaginatedGrid = forwardRef<any, GenreListPaginatedGridProps>(
+export const GenreListPaginatedGrid = ({
-    (
-        {
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -32,9 +29,7 @@ export const GenreListPaginatedGrid = forwardRef<any, GenreListPaginatedGridProp
     },
     saveScrollOffset = true,
     serverId,
-        },
+}: GenreListPaginatedGridProps) => {
-        ref,
-    ) => {
     const listCountQuery = genresQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -80,10 +75,8 @@ export const GenreListPaginatedGrid = forwardRef<any, GenreListPaginatedGridProp
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.GENRE}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 rows={rows}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/genres/components/genre-list-paginated-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,9 +21,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListPaginatedTableProps extends ItemListTableComponentProps<GenreListQuery> {}
 
-export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTableProps>(
+export const GenreListPaginatedTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -40,9 +37,7 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: GenreListPaginatedTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = genresQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -104,11 +99,9 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
                 onColumnReordered={handleColumnReordered}
                 onColumnResized={handleColumnResized}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 size={size}
                 startRowIndex={startRowIndex}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,8 +17,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListInfiniteGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListInfiniteGrid = forwardRef<any, PlaylistListInfiniteGridProps>(
+export const PlaylistListInfiniteGrid = ({
-    ({
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -29,7 +27,7 @@ export const PlaylistListInfiniteGrid = forwardRef<any, PlaylistListInfiniteGrid
     },
     saveScrollOffset = true,
     serverId,
-    }) => {
+}: PlaylistListInfiniteGridProps) => {
     const listCountQuery = playlistsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -68,5 +66,4 @@ export const PlaylistListInfiniteGrid = forwardRef<any, PlaylistListInfiniteGrid
             rows={rows}
         />
     );
-    },
+};
-);

src/renderer/features/playlists/components/playlist-list-infinite-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListInfiniteTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListInfiniteTable = forwardRef<any, PlaylistListInfiniteTableProps>(
+export const PlaylistListInfiniteTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -38,9 +35,7 @@ export const PlaylistListInfiniteTable = forwardRef<any, PlaylistListInfiniteTab
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: PlaylistListInfiniteTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = playlistsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -90,9 +85,7 @@ export const PlaylistListInfiniteTable = forwardRef<any, PlaylistListInfiniteTab
             onColumnResized={handleColumnResized}
             onRangeChanged={onRangeChanged}
             onScrollEnd={handleOnScrollEnd}
-                ref={ref}
             size={size}
         />
     );
-    },
+};
-);

src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,9 +19,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListPaginatedGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListPaginatedGrid = forwardRef<any, PlaylistListPaginatedGridProps>(
+export const PlaylistListPaginatedGrid = ({
-    (
-        {
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -32,9 +29,7 @@ export const PlaylistListPaginatedGrid = forwardRef<any, PlaylistListPaginatedGr
     },
     saveScrollOffset = true,
     serverId,
-        },
+}: PlaylistListPaginatedGridProps) => {
-        ref,
-    ) => {
     const listCountQuery = playlistsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -80,10 +75,8 @@ export const PlaylistListPaginatedGrid = forwardRef<any, PlaylistListPaginatedGr
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.PLAYLIST}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 rows={rows}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/playlists/components/playlist-list-paginated-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,9 +21,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListPaginatedTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedTableProps>(
+export const PlaylistListPaginatedTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -40,9 +37,7 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: PlaylistListPaginatedTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = playlistsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -103,11 +98,9 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
                 onColumnReordered={handleColumnReordered}
                 onColumnResized={handleColumnResized}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 size={size}
                 startRowIndex={startRowIndex}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/songs/components/song-list-infinite-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -13,8 +12,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListInfiniteGridProps extends ItemListGridComponentProps<SongListQuery> {}
 
-export const SongListInfiniteGrid = forwardRef<any, SongListInfiniteGridProps>(
+export const SongListInfiniteGrid = ({
-    ({
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -24,7 +22,7 @@ export const SongListInfiniteGrid = forwardRef<any, SongListInfiniteGridProps>(
     },
     saveScrollOffset = true,
     serverId,
-    }) => {
+}: SongListInfiniteGridProps) => {
     const listCountQuery = songsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -63,5 +61,4 @@ export const SongListInfiniteGrid = forwardRef<any, SongListInfiniteGridProps>(
             rows={rows}
         />
     );
-    },
+};
-);

src/renderer/features/songs/components/song-list-infinite-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -15,9 +14,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListInfiniteTableProps extends ItemListTableComponentProps<SongListQuery> {}
 
-export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>(
+export const SongListInfiniteTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -33,9 +30,7 @@ export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: SongListInfiniteTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = songsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -86,9 +81,7 @@ export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>
             onColumnResized={handleColumnResized}
             onRangeChanged={onRangeChanged}
             onScrollEnd={handleOnScrollEnd}
-                ref={ref}
             size={size}
         />
     );
-    },
+};
-);

src/renderer/features/songs/components/song-list-paginated-grid.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -14,9 +13,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListPaginatedGridProps extends ItemListGridComponentProps<SongListQuery> {}
 
-export const SongListPaginatedGrid = forwardRef<any, SongListPaginatedGridProps>(
+export const SongListPaginatedGrid = ({
-    (
-        {
     gap = 'md',
     itemsPerPage = 100,
     itemsPerRow,
@@ -25,9 +22,7 @@ export const SongListPaginatedGrid = forwardRef<any, SongListPaginatedGridProps>
         sortOrder: SortOrder.ASC,
     },
     serverId,
-        },
+}: SongListPaginatedGridProps) => {
-        ref,
-    ) => {
     const listCountQuery = songsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -64,10 +59,8 @@ export const SongListPaginatedGrid = forwardRef<any, SongListPaginatedGridProps>
                 gap={gap}
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.SONG}
-                    ref={ref}
                 rows={rows}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);

src/renderer/features/songs/components/song-list-paginated-table.tsx

@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -17,9 +16,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListPaginatedTableProps extends ItemListTableComponentProps<SongListQuery> {}
 
-export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProps>(
+export const SongListPaginatedTable = ({
-    (
-        {
     autoFitColumns = false,
     columns,
     enableAlternateRowColors = false,
@@ -35,9 +32,7 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
     saveScrollOffset = true,
     serverId,
     size = 'default',
-        },
+}: SongListPaginatedTableProps) => {
-        ref,
-    ) => {
     const listCountQuery = songsQueries.listCount({
         query: { ...query },
         serverId: serverId,
@@ -99,11 +94,9 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
                 onColumnReordered={handleColumnReordered}
                 onColumnResized={handleColumnResized}
                 onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
                 size={size}
                 startRowIndex={startRowIndex}
             />
         </ItemListWithPagination>
     );
-    },
+};
-);