@axinom/mosaic-ui 0.59.0 → 0.60.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.59.0",
+  "version": "0.60.0-rc.4",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -108,5 +108,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6632b19e6b9345ce2c7eae9abccfd9a3c1b1e50c"
+  "gitHead": "949fed291c809ae8c58cf5b09771abb397843d25"
 }

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -29,13 +29,15 @@
 }
 
 .container {
-  overflow: hidden;
-  transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
-}
+  display: grid;
+  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  grid-template-rows: 0fr;
 
-.expanded {
-  border-bottom: var(--accordion-item-border, $accordion-item-border);
-  margin-top: 1px;
+  &.expanded {
+    grid-template-rows: 1fr;
+    border-bottom: var(--accordion-item-border, $accordion-item-border);
+    margin-top: 1px;
+  }
 }
 
 .content {
@@ -47,6 +49,7 @@
     $accordion-item-background-color
   );
   color: var(--accordion-item-text-color, $accordion-item-text-color);
+  overflow: hidden;
 }
 
 .button {

package/src/components/Accordion/AccordionItem/AccordionItem.spec.tsx

@@ -74,36 +74,28 @@ describe('AccordionItem', () => {
     expect(children).toHaveLength(1);
   });
 
-  it(`content maxHeight should be 0 when 'isExpanded' is false`, () => {
+  it(`should set expanded class when 'isExpanded' is true`, () => {
     const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={false}>
+      <AccordionItem header={<b>Item 1</b>} isExpanded={true}>
         <div></div>
       </AccordionItem>,
     );
 
-    const containerStyles = wrapper
-      .find('.container')
-      .last()
-      .prop('style') as React.CSSProperties;
+    const expanded = wrapper.find('.expanded');
 
-    expect(containerStyles).toEqual({ maxHeight: 0 });
+    expect(expanded).toHaveLength(1);
   });
 
-  it(`content maxHeight should be scrollHeight when 'isExpanded' is true`, () => {
-    jest.spyOn(Element.prototype, 'scrollHeight', 'get').mockReturnValue(100);
-
+  it(`should not set expanded class when 'isExpanded' is true`, () => {
     const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={true}>
+      <AccordionItem header={<b>Item 1</b>} isExpanded={false}>
         <div></div>
       </AccordionItem>,
     );
 
-    const containerStyles = wrapper
-      .find('.container')
-      .last()
-      .prop('style') as React.CSSProperties;
+    const expanded = wrapper.find('.expanded');
 
-    expect(containerStyles).toEqual({ maxHeight: 100 });
+    expect(expanded).toHaveLength(0);
   });
 
   it('creates a class based off of the className prop', () => {

package/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
 import classes from './AccordionItem.scss';
@@ -39,15 +39,6 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
   sticky = false,
   className,
 }) => {
-  const [scrollHeight, setScrollHeight] = useState<number>(0);
-  const elementRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (elementRef.current) {
-      setScrollHeight(elementRef.current.scrollHeight);
-    }
-  }, [scrollHeight, children]);
-
   return (
     <div data-test-id="accordion-item" className={className}>
       <div
@@ -72,13 +63,7 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
       </div>
       <div
         data-test-id="accordion-item-content"
-        ref={elementRef}
-        className={
-          isExpanded
-            ? clsx(classes.container, classes.expanded)
-            : classes.container
-        }
-        style={{ maxHeight: isExpanded ? scrollHeight : 0 }}
+        className={clsx(classes.container, isExpanded && classes.expanded)}
       >
         <div
           className={classes.content}