fix(callout): fix callout expand in production (#736)

* fix(callout): fix callout expand in production

Fixes issue where the Callout component content was not expanding correctly in prdouction. This is
because the property `name` is obfuscated in production for some environments. Setting and checking
for `displayName` should fix the issue because it is not obfuscated in production.

* refactor(callouttitle): replaces string literal for callout with a constant

packages/components/src/core/Callout/components/CalloutTitle/index.tsx

@@ -1,8 +1,12 @@
 import { AlertTitleProps } from "@mui/material/AlertTitle";
+import { CALLOUT_TITLE_DISPLAY_NAME } from "../../constants";
 import { StyledCalloutTitle } from "./style";
 
 const CalloutTitle = ({ children }: AlertTitleProps): JSX.Element => {
   return <StyledCalloutTitle>{children}</StyledCalloutTitle>;
 };
 
+// Display name required to ensure Callout expand works correctly.
+CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
+
 export default CalloutTitle;

packages/components/src/core/Callout/constants.ts

@@ -0,0 +1 @@
+export const CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";

packages/components/src/core/Callout/index.tsx

@@ -3,6 +3,7 @@ import { Grow } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import ButtonIcon from "../ButtonIcon";
 import Icon from "../Icon";
+import { CALLOUT_TITLE_DISPLAY_NAME } from "./constants";
 import { StyledCallout } from "./style";
 
 const SDS_STAGE_OPEN = "open";
@@ -100,7 +101,9 @@ const Callout = ({
   let calloutContent;
 
   const firstChildIsCalloutTitle =
-    Array.isArray(children) && children[0]?.type?.name === "CalloutTitle";
+    Array.isArray(children) &&
+    children[0]?.type?.displayName === CALLOUT_TITLE_DISPLAY_NAME;
+
   if (firstChildIsCalloutTitle) {
     [calloutTitle, ...calloutContent] = children;
   }