Animated the Sidebar Objects Tree view opening/closing

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx

@@ -15,6 +15,7 @@ import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/compone
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
+import { NavigationDrawerSubItemAnimatedExpandableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItemAnimatedExpandableContainer';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { Droppable } from '@hello-pangea/dnd';
 import { useContext, useState } from 'react';
@@ -158,7 +159,10 @@ export const CurrentWorkspaceMemberFavorites = ({
           </FavoritesDroppable>
         )}
 
-        {isOpen && (
+        <NavigationDrawerSubItemAnimatedExpandableContainer
+          isOpen={isOpen}
+          key={`folder-${folder.folderId}`}
+        >
           <Droppable droppableId={`folder-${folder.folderId}`}>
             {(provided) => (
               <div
@@ -202,7 +206,7 @@ export const CurrentWorkspaceMemberFavorites = ({
               </div>
             )}
           </Droppable>
-        )}
+        </NavigationDrawerSubItemAnimatedExpandableContainer>
       </NavigationDrawerItemsCollapsableContainer>
 
       {createPortal(

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx

@@ -5,6 +5,7 @@ import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
+import { NavigationDrawerSubItemAnimatedExpandableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItemAnimatedExpandableContainer';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { View } from '@/views/types/View';
 import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
@@ -66,8 +67,11 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
         Icon={getIcon(objectMetadataItem.icon)}
         active={isActive}
       />
-      {shouldSubItemsBeDisplayed &&
-        sortedObjectMetadataViews.map((view, index) => (
+
+      <NavigationDrawerSubItemAnimatedExpandableContainer
+        isOpen={shouldSubItemsBeDisplayed}
+      >
+        {sortedObjectMetadataViews.map((view, index) => (
           <NavigationDrawerSubItem
             label={view.name}
             to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
@@ -81,6 +85,7 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
             key={view.id}
           />
         ))}
+      </NavigationDrawerSubItemAnimatedExpandableContainer>
     </NavigationDrawerItemsCollapsableContainer>
   );
 };

packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx

@@ -1,9 +1,8 @@
-import { useExpandedAnimation } from '@/settings/hooks/useExpandedAnimation';
+import { ADVANCED_SETTINGS_ANIMATION_DURATION } from '@/settings/constants/AdvancedSettingsAnimationDurations';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import styled from '@emotion/styled';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
-import { IconPoint, MAIN_COLORS } from 'twenty-ui';
+import { AnimatedExpandableContainer, IconPoint, MAIN_COLORS } from 'twenty-ui';
 
 const StyledAdvancedWrapper = styled.div`
   position: relative;
@@ -37,35 +36,27 @@ export const AdvancedSettingsWrapper = ({
   hideIcon = false,
 }: AdvancedSettingsWrapperProps) => {
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
-  const { contentRef, motionAnimationVariants } = useExpandedAnimation(
-    isAdvancedModeEnabled,
-    dimension,
-  );
 
   return (
-    <AnimatePresence>
-      {isAdvancedModeEnabled && (
-        <motion.div
-          ref={contentRef}
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          variants={motionAnimationVariants}
-        >
-          <StyledAdvancedWrapper>
-            {!hideIcon && (
-              <StyledIconContainer>
-                <StyledIconPoint
-                  size={12}
-                  color={MAIN_COLORS.yellow}
-                  fill={MAIN_COLORS.yellow}
-                />
-              </StyledIconContainer>
-            )}
-            <StyledContent>{children}</StyledContent>
-          </StyledAdvancedWrapper>
-        </motion.div>
-      )}
-    </AnimatePresence>
+    <AnimatedExpandableContainer
+      isExpanded={isAdvancedModeEnabled}
+      dimension={dimension}
+      opacityDuration={ADVANCED_SETTINGS_ANIMATION_DURATION.opacity}
+      sizeDuration={ADVANCED_SETTINGS_ANIMATION_DURATION.size}
+      mode="scroll-height"
+    >
+      <StyledAdvancedWrapper>
+        {!hideIcon && (
+          <StyledIconContainer>
+            <StyledIconPoint
+              size={12}
+              color={MAIN_COLORS.yellow}
+              fill={MAIN_COLORS.yellow}
+            />
+          </StyledIconContainer>
+        )}
+        <StyledContent>{children}</StyledContent>
+      </StyledAdvancedWrapper>
+    </AnimatedExpandableContainer>
   );
 };

packages/twenty-front/src/modules/settings/hooks/useExpandedAnimation.ts

@@ -21,16 +21,19 @@ const advancedSectionAnimationConfig = (
   isExpanded: boolean,
   dimension: AnimationDimension,
   measuredValue?: number,
+  fitContent?: boolean,
 ) => ({
   initial: {
     ...commonStyles(dimension),
   },
   animate: {
     opacity: 1,
     [dimension]: isExpanded
-      ? dimension === 'width'
-        ? '100%'
-        : measuredValue
+      ? fitContent
+        ? 'fit-content'
+        : dimension === 'width'
+          ? '100%'
+          : measuredValue
       : 0,
     ...getTransitionValues(dimension),
   },
@@ -42,6 +45,7 @@ const advancedSectionAnimationConfig = (
 export const useExpandedAnimation = (
   isExpanded: boolean,
   dimension: AnimationDimension = 'height',
+  fitContent?: boolean,
 ) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [measuredValue, setMeasuredValue] = useState(0);
@@ -58,6 +62,7 @@ export const useExpandedAnimation = (
       isExpanded,
       dimension,
       dimension === 'height' ? measuredValue : undefined,
+      fitContent,
     ),
   };
 };

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx

@@ -5,7 +5,7 @@ import { Column } from '@/spreadsheet-import/steps/components/MatchColumnsStep/M
 import { Fields } from '@/spreadsheet-import/types';
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { ExpandableContainer, isDefined } from 'twenty-ui';
+import { AnimatedExpandableContainer, isDefined } from 'twenty-ui';
 
 const getExpandableContainerTitle = <T extends string>(
   fields: Fields<T>,
@@ -59,7 +59,12 @@ export const UnmatchColumn = <T extends string>({
         buttonOnClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
       />
-      <ExpandableContainer isExpanded={isExpanded}>
+      <AnimatedExpandableContainer
+        isExpanded={isExpanded}
+        dimension="height"
+        mode="scroll-height"
+        useThemeAnimation
+      >
         <StyledContentWrapper>
           {column.matchedOptions.map((option) => (
             <SubMatchingSelect
@@ -71,7 +76,7 @@ export const UnmatchColumn = <T extends string>({
             />
           ))}
         </StyledContentWrapper>
-      </ExpandableContainer>
+      </AnimatedExpandableContainer>
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItemAnimatedExpandableContainer.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { AnimatedExpandableContainer } from 'twenty-ui';
+
+type NavigationDrawerSubItemAnimatedExpandableContainerProps = {
+  children: ReactNode;
+  isOpen?: boolean;
+};
+
+export const NavigationDrawerSubItemAnimatedExpandableContainer = ({
+  children,
+  isOpen = false,
+}: NavigationDrawerSubItemAnimatedExpandableContainerProps) => {
+  return (
+    <AnimatedExpandableContainer
+      isExpanded={isOpen}
+      dimension="height"
+      mode="fit-content"
+      useThemeAnimation
+    >
+      {children}
+    </AnimatedExpandableContainer>
+  );
+};