Fix a bug in AnimatedExpansion

packages/_helpers/animated-expansion.tsx → packages/_helpers/expand-transition.tsx

@@ -2,23 +2,23 @@ import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { collapse, expand } from 'element-collapse';
 import { classNames } from '@chbphone55/classnames';
 
-export function AnimatedExpansion({
+export function ExpandTransition({
   show,
   children,
 }: PropsWithChildren<{ show?: Boolean }>) {
   const [isExpanded, setIsExpanded] = useState(show);
-  const expandableRef = useRef(null);
+  const expandableRef = useRef<HTMLDivElement>(null);
   const isMounted = useRef(false);
 
-  async function collapseElement() {
+  async function collapseElement(el: HTMLElement) {
     await new Promise((resolve) => {
-      collapse(expandableRef.current, resolve);
+      collapse(el, resolve);
     });
     setIsExpanded(false);
   }
 
-  function expandElement() {
-    expand(expandableRef.current);
+  function expandElement(el: HTMLElement) {
+    expand(el);
     setIsExpanded(true);
   }
 
@@ -29,10 +29,12 @@ export function AnimatedExpansion({
       return;
     }
 
+    if (!expandableRef.current) return;
+
     if (show) {
-      expandElement();
+      expandElement(expandableRef.current);
     } else {
-      collapseElement();
+      collapseElement(expandableRef.current);
     }
   }, [show]);
 

packages/_helpers/index.ts

@@ -1,4 +1,4 @@
 export { Clickable } from './clickable';
 export { DeadToggle } from './dead-toggle';
 export { Affix } from './affix';
-export { AnimatedExpansion } from './animated-expansion';
+export { ExpandTransition } from './expand-transition';

packages/alert/src/component.tsx

@@ -1,7 +1,7 @@
 import { classNames } from '@chbphone55/classnames';
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { AlertProps } from '.';
-import { AnimatedExpansion } from '../../_helpers';
+import { ExpandTransition } from '../../_helpers';
 
 export function Alert({
   show,
@@ -12,7 +12,7 @@ export function Alert({
   const { color, icon } = styleMap[type];
 
   return (
-    <AnimatedExpansion show={show}>
+    <ExpandTransition show={show}>
       <div
         className={classNames(
           props.className,
@@ -23,7 +23,7 @@ export function Alert({
         <div className={`mr-8 text-${color}-600`}>{icon}</div>
         <div className="last-child:mb-0 text-14">{children}</div>
       </div>
-    </AnimatedExpansion>
+    </ExpandTransition>
   );
 }
 

packages/expandable/src/component.tsx

@@ -1,7 +1,10 @@
 import { classNames } from '@chbphone55/classnames';
-import { box as boxClasses, buttonReset } from '@fabric-ds/css/component-classes';
+import {
+  box as boxClasses,
+  buttonReset,
+} from '@fabric-ds/css/component-classes';
 import React from 'react';
-import { AnimatedExpansion } from '../../_helpers';
+import { ExpandTransition } from '../../_helpers';
 import type { ExpandableProps } from './props';
 
 export function Expandable(props: ExpandableProps) {
@@ -92,7 +95,7 @@ export function Expandable(props: ExpandableProps) {
 
 function ExpansionBehaviour({ animated, stateExpanded, children }) {
   return animated ? (
-    <AnimatedExpansion show={stateExpanded}>{children}</AnimatedExpansion>
+    <ExpandTransition show={stateExpanded}>{children}</ExpandTransition>
   ) : (
     <div
       className={classNames({