chore: refactor Expander to dynamically wrap to height if content is …

…shorter than threshold

src/core/Expander.tsx

@@ -1,31 +1,40 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 
 type ExpanderProps = {
-  height?: number;
+  heightThreshold?: number;
   className?: string;
   fadeClassName?: string;
 };
 
 const Expander = ({
-  height = 200,
+  heightThreshold = 200,
   className,
   fadeClassName,
   children,
 }: PropsWithChildren<ExpanderProps>) => {
   const innerRef = useRef<HTMLDivElement>(null);
-  const [contentHeight, setContentHeight] = useState(height);
+  const [showControls, setShowControls] = useState(false);
+  const [height, setHeight] = useState<number | "auto">(heightThreshold);
   const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
-    setContentHeight(innerRef.current?.clientHeight ?? height);
-  }, [height, expanded]);
+    const contentHeight = innerRef.current?.clientHeight ?? heightThreshold;
 
-  const showControls = height > 0 && contentHeight > height;
+    if (contentHeight < heightThreshold) {
+      setHeight("auto");
+    } else if (expanded) {
+      setHeight(contentHeight);
+    } else {
+      setHeight(heightThreshold);
+    }
+
+    setShowControls(contentHeight >= heightThreshold);
+  }, [heightThreshold, expanded]);
 
   return (
     <>
       <div
-        style={{ ...(height && { height: expanded ? contentHeight : height }) }}
+        style={{ height }}
         className={`overflow-hidden transition-all relative ${className ?? ""}`}
       >
         {showControls && !expanded && (

src/core/Expander/Expander.stories.tsx

@@ -130,23 +130,3 @@ export const OverriddenStyles = {
     },
   },
 };
-
-export const Bypassed = {
-  render: () => (
-    <Expander
-      className="bg-neutral-400 p-16 rounded-lg"
-      fadeClassName="from-neutral-800"
-      height={0}
-    >
-      {longContentInner}
-    </Expander>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "A set height of 0, which means that no expansion behaviour is applied.",
-      },
-    },
-  },
-};