From fc06905b60e24b2ba55a97fa579712be36de0303 Mon Sep 17 00:00:00 2001
From: Dave Dunkin <dave.dunkin@logos.com>
Date: Fri, 3 Sep 2021 11:49:54 -0700
Subject: [PATCH 1/2] Fix spelling.

---
 components/collapse/component.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/collapse/component.jsx b/components/collapse/component.jsx
index c5b0e4d22..6a4822927 100644
--- a/components/collapse/component.jsx
+++ b/components/collapse/component.jsx
@@ -23,7 +23,7 @@ function getHeight(node) {
 	return node.scrollHeight;
 }
 
-/** Collapsable accordion component. Useful for nodes that have 'height: auto'. Ported from reactstrap */
+/** Collapsible accordion component. Useful for nodes that have 'height: auto'. Ported from reactstrap */
 export const Collapse = forwardClassRef(
 	class Collapse extends Component {
 		static propTypes = propTypes;

From 04a44e076076d58f0a9de005f75eaee02f9e553b Mon Sep 17 00:00:00 2001
From: Dave Dunkin <dave.dunkin@logos.com>
Date: Fri, 3 Sep 2021 11:55:25 -0700
Subject: [PATCH 2/2] If a Collapse is collapsed, don't render it instead of
 hiding it.

This reduces DOM elements, SSR size, render time, unnecessary effects (e.g. network calls), etc. for content that isn't visible.

It could be problematic for any consumers that expect their components to be rendered while hidden.
---
 components/collapse/component.jsx | 60 ++++++++++++++++---------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/components/collapse/component.jsx b/components/collapse/component.jsx
index 6a4822927..2b3f7568b 100644
--- a/components/collapse/component.jsx
+++ b/components/collapse/component.jsx
@@ -102,35 +102,37 @@ export const Collapse = forwardClassRef(
 					{status => {
 						const style = height === null ? null : { height };
 						return (
-							<Box
-								{...otherProps}
-								transitionStatus={status}
-								style={{ ...otherProps.style, ...style }}
-								ref={forwardedRef}
-								display={status === TransitionStatuses.EXITED ? 'none' : undefined}
-								position={
-									status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING
-										? 'relative'
-										: ''
-								}
-								height={
-									status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING
-										? '0'
-										: ''
-								}
-								transition={
-									status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING
-										? 'height 0.2s ease-in'
-										: ''
-								}
-								css={`
-									${status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING
-										? 'overflow: hidden'
-										: ''}
-								`}
-							>
-								{children}
-							</Box>
+							status !== TransitionStatuses.EXITED && (
+								<Box
+									{...otherProps}
+									transitionStatus={status}
+									style={{ ...otherProps.style, ...style }}
+									ref={forwardedRef}
+									position={
+										status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING
+											? 'relative'
+											: ''
+									}
+									height={
+										status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING
+											? '0'
+											: ''
+									}
+									transition={
+										status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING
+											? 'height 0.2s ease-in'
+											: ''
+									}
+									css={`
+										${status === TransitionStatuses.ENTERING ||
+										status === TransitionStatuses.EXITING
+											? 'overflow: hidden'
+											: ''}
+									`}
+								>
+									{children}
+								</Box>
+							)
 						);
 					}}
 				</Transition>