extract list expansion container to separate component

src/renderer/components/item-list/expanded-list-container.module.css

@@ -0,0 +1,3 @@
+.container {
+    height: 500px;
+}

src/renderer/components/item-list/expanded-list-container.tsx

@@ -0,0 +1,32 @@
+import { motion, Variants } from 'motion/react';
+import { ReactNode } from 'react';
+
+import styles from './expanded-list-container.module.css';
+
+const expandedAnimationVariants: Variants = {
+    hidden: {
+        height: 0,
+        minHeight: 0,
+    },
+    show: {
+        minHeight: '300px',
+        transition: {
+            duration: 0.3,
+            ease: 'easeInOut',
+        },
+    },
+};
+
+export const ExpandedListContainer = ({ children }: { children: ReactNode }) => {
+    return (
+        <motion.div
+            animate="show"
+            className={styles.listExpandedContainer}
+            exit="hidden"
+            initial="hidden"
+            variants={expandedAnimationVariants}
+        >
+            {children}
+        </motion.div>
+    );
+};

src/renderer/components/item-list/item-grid-list/item-grid-list.module.css

@@ -23,8 +23,3 @@
     padding: var(--theme-spacing-sm);
     overflow: hidden;
 }
-
-.list-expanded-container {
-    width: 100%;
-    height: 100%;
-}

src/renderer/components/item-list/item-grid-list/item-grid-list.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react';
 import { List, ListImperativeAPI, RowComponentProps, useListRef } from 'react-window-v2';
 
+import { ExpandedListContainer } from '../expanded-list-container';
 import styles from './item-grid-list.module.css';
 
 import { getDataRowsCount, ItemCard } from '/@/renderer/components/item-card/item-card';
@@ -271,15 +272,9 @@ export const ItemGridList = ({
             />
             <AnimatePresence>
                 {hasExpanded && (
-                    <motion.div
+                    <ExpandedListContainer>
-                        animate="show"
-                        className={styles.listExpandedContainer}
-                        exit="hidden"
-                        initial="hidden"
-                        variants={expandedAnimationVariants}
-                    >
                         <ExpandedListItem internalState={internalState} itemType={itemType} />
-                    </motion.div>
+                    </ExpandedListContainer>
                 )}
             </AnimatePresence>
         </motion.div>

src/renderer/components/item-list/item-table-list/item-table-list.module.css

@@ -127,7 +127,3 @@
         transparent 100%
     );
 }
-
-.list-expanded-container {
-    height: 500px;
-}

src/renderer/components/item-list/item-table-list/item-table-list.tsx

@@ -2,7 +2,7 @@
 
 import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
-import { AnimatePresence, motion, Variants } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import {
     type JSXElementConstructor,
@@ -18,6 +18,7 @@ import { type CellComponentProps, Grid, type GridProps } from 'react-window-v2';
 
 import styles from './item-table-list.module.css';
 
+import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded-list-container';
 import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
 import {
     ItemListStateActions,
@@ -77,20 +78,6 @@ interface ItemTableListProps {
     size?: 'compact' | 'default';
 }
 
-const expandedAnimationVariants: Variants = {
-    hidden: {
-        height: 0,
-        minHeight: 0,
-    },
-    show: {
-        minHeight: '300px',
-        transition: {
-            duration: 0.3,
-            ease: 'easeInOut',
-        },
-    },
-};
-
 export const ItemTableList = ({
     CellComponent,
     columns,
@@ -856,16 +843,9 @@ export const ItemTableList = ({
             </div>
             <AnimatePresence initial={false}>
                 {hasExpanded && (
-                    <motion.div
+                    <ExpandedListContainer>
-                        animate="show"
-                        className={styles.listExpandedContainer}
-                        exit="hidden"
-                        initial="hidden"
-                        style={{ height: '500px' }}
-                        variants={expandedAnimationVariants}
-                    >
                         <ExpandedListItem internalState={internalState} itemType={itemType} />
-                    </motion.div>
+                    </ExpandedListContainer>
                 )}
             </AnimatePresence>
         </motion.div>