[@mantine/core] Spoiler: Fix Spoiler inside Accordion (#2037)

* [@mantine/core] Select: only use open/close callback when value changes

* [@mantine/core] Select: do not use early return

* [@mantine/core] Spoiler: useElementSize hook to calculate height

* [@mantine/core] Spoiler: improve story

src/mantine-core/src/Spoiler/Spoiler.story.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Accordion } from '../Accordion/Accordion';
 import { Spoiler } from './Spoiler';
 
 export default { title: 'Spoiler' };
@@ -27,3 +28,26 @@ export function ContentChanges() {
     </div>
   );
 }
+
+export function InsideAccordion() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Accordion>
+        <Accordion.Item value="first">
+          <Accordion.Control>Expand me</Accordion.Control>
+          <Accordion.Panel>
+            <Spoiler showLabel="Show" hideLabel="Hide" maxHeight={50}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut quam vitae
+              lorem viverra ultricies. Integer hendrerit, quam mollis tempus iaculis, tellus est
+              pellentesque eros, vel molestie risus eros sit amet sem. Fusce pretium ex quis neque
+              fringilla facilisis. Aenean sed luctus tortor, eget suscipit neque. Pellentesque
+              consequat neque quis porta luctus. Donec vitae est id velit condimentum mollis id vel
+              est. Sed eleifend interdum enim, a facilisis ex faucibus nec. Morbi vel est et mauris
+              congue ullamcorper. Duis eget velit lacinia, consequat neque vel, dignissim massa.
+            </Spoiler>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+}

src/mantine-core/src/Spoiler/Spoiler.tsx

@@ -1,5 +1,6 @@
-import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles';
+import { useElementSize } from '@mantine/hooks';
 import { Anchor } from '../Anchor';
 import { Box } from '../Box';
 import useStyles, { SpoilerStylesParams } from './Spoiler.styles';
@@ -57,24 +58,20 @@ export const Spoiler = forwardRef<HTMLDivElement, SpoilerProps>((props, ref) =>
 
   const [show, setShowState] = useState(initialState);
   const [spoiler, setSpoilerState] = useState(initialState);
-  const [contentHeight, setContentHeight] = useState<number>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
+  const { ref: contentRef, height } = useElementSize();
 
   const spoilerMoreContent = show ? hideLabel : showLabel;
 
   useEffect(() => {
-    if (contentRef.current) {
-      setSpoilerState(maxHeight < contentRef.current.offsetHeight);
-      setContentHeight(contentRef.current.offsetHeight);
-    }
-  }, [maxHeight, children]);
+    setSpoilerState(maxHeight < height);
+  }, [height, maxHeight, children]);
 
   return (
     <Box className={cx(classes.root, className)} ref={ref} {...others}>
       <div
         className={classes.content}
         style={{
-          maxHeight: !show ? maxHeight : contentHeight || undefined,
+          maxHeight: !show ? maxHeight : height || undefined,
         }}
       >
         <div ref={contentRef}>{children}</div>