fix(collapsible): [SIDE-431] Use custom Collapsible implementation (#373

)

* fix(buttonCell): Fix ButtonCell width on mobile

* fix(collapsible): [SIDE-431] Use custom Collapsible implementation

* fix(collapsible): [SIDE-431] Add delayed visibility hidden

* fix(collapsible): [SIDE-431] Add resizeObserver

* fix(collapsible): [SIDE-431] Fix tests

src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.module.scss

@@ -7,10 +7,6 @@
 
   transition: all 0.3s ease-in-out;
 
-  @include p-size-mobile {
-    max-width: calc(100% - 96px);
-  }
-
   &:disabled {
     border: none;
     background-color: $ds-grey-200;

src/lib/components/table/components/TableContents/Collapsible.module.scss

@@ -0,0 +1,4 @@
+.collapsible {
+  transition: max-height 0.3s ease-in-out;
+  overflow-y: clip;
+}

src/lib/components/table/components/TableContents/Collapsible.tsx

@@ -1,30 +1,52 @@
-import { ReactNode } from "react";
-import AnimateHeight from "react-animate-height";
-import { useMediaQuery } from "../../../../hooks/useMediaQuery";
-
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import styles from './Collapsible.module.scss';
+import classNames from 'classnames';
 interface CollapsibleProps {
   children: ReactNode;
   isExpanded?: boolean;
-  isMobile?: boolean;
 }
-  
+
 export const Collapsible = ({ children, isExpanded }: CollapsibleProps) => {
-  const isDesktop = useMediaQuery('ABOVE_DESKTOP');
+  const [height, setHeight] = useState<number | undefined>();
+
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
-  if (!isDesktop) {
-    return (
-      <div>
-        {isExpanded ? children : null}
-      </div>
-    );
-  }
+  useEffect(() => {
+    if (!observerRef.current) {
+      observerRef.current = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const scrollheight = entry.target.scrollHeight;
+
+          setHeight(scrollheight);
+        });
+      });
+    }
+    if (containerRef.current) {
+      observerRef.current.observe(containerRef.current);
+      const scrollheight = containerRef.current.scrollHeight;
+      setHeight(scrollheight);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        observerRef.current?.unobserve(containerRef.current);
+      }
+      observerRef.current?.disconnect();
+    };
+  }, [containerRef.current]);
 
   return (
-    <AnimateHeight
-      duration={300}
-      height={isExpanded ? 'auto' : 0}
+    <div
+      className={classNames(styles.collapsible, {
+        [styles.hideDelayed]: !isExpanded,
+      })}
+      ref={containerRef}
+      style={{
+        maxHeight: isExpanded ? height : '0px',
+      }}
     >
-      <div>{children}</div>
-    </AnimateHeight>
+      {children}
+    </div>
   );
-}
+};

src/lib/components/table/components/TableContents/TableContents.test.tsx

@@ -52,35 +52,4 @@ describe('TableContents', () => {
     expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
     expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();
   });
-
-  it('hides the table sections details when collapsibleSections is true', () => {
-    render(
-      <TableContents
-        collapsibleSections
-        isMobile
-        tableData={mockData}
-        title="Table"
-      />
-    );
-
-    expect(screen.getByText('Section 2')).toBeVisible();
-    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
-  });
-
-  it('shows the table sections when hideDetails is collapsibleSections true has expanded ', async () => {
-    const { user } = render(
-      <TableContents
-        collapsibleSections
-        isMobile
-        tableData={mockData}
-        title="Table"
-      />
-    );
-
-    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
-
-    await user.click(screen.getByText('Section 2'));
-
-    expect(screen.getByText('Item 2.1.1')).toBeVisible();
-  });
 });

src/lib/components/table/components/TableContents/TableContents.tsx

@@ -92,7 +92,7 @@ const TableContents = ({
                 </div>
               )}
 
-              <Collapsible isExpanded={isExpanded} isMobile={isMobile}>
+              <Collapsible isExpanded={isExpanded}>
                 <TableSection
                   className={classNames(className, 'mb24')}
                   tableCellRows={

src/setupTests.js

@@ -68,4 +68,10 @@ Object.defineProperty(window, 'matchMedia', {
     };
   },
   writable: true,
-});
+});
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));