@jetbrains/ring-ui-built 7.0.121 → 7.0.123-beta.0

package/README.md

@@ -13,6 +13,10 @@
 
 This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
 
+## Guidance for coding agents
+
+The npm packages include [`skills/ring-ui/SKILL.md`](./skills/ring-ui/SKILL.md), which teaches coding agents to consume Ring UI through `@jetbrains/ring-ui-built` when composing complete pages, responsive layouts, forms, themes, and feedback. The same Skill files are published in both npm artifacts.
+
 ## Try now
 * Try the [codesandbox](https://codesandbox.io/p/sandbox/ring-ui-7-0-demo-z6v6ym), based on `create-react-app` tooling, to see and try the UI components
 * Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component

package/components/collapse/collapse-content.d.ts

@@ -1,5 +1,12 @@
 import React, { type PropsWithChildren } from 'react';
 interface Props {
+    /**
+     * Height of the always-visible preview of the collapsed content.
+     * The collapsed subtree is inert until expanded, matching `aria-expanded`.
+     * The preview is only a visual clip of that subtree, so it is inert too and
+     * assistive technology will not perceive it — if the preview carries essential
+     * information, expose an accessible summary outside the collapsed content.
+     */
     minHeight?: number;
     className?: string;
     'data-test'?: string | null | undefined;

package/components/collapse/collapse-content.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import { useContext, useRef, useState, useEffect } from 'react';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { getRect } from '../global/dom.js';
@@ -14,16 +14,26 @@ const DURATION_FACTOR = 0.5;
 const DEFAULT_HEIGHT = 0;
 const VISIBLE = 1;
 const HIDDEN = 0;
+// margin for the hide fallback timer, so it fires only if transitionend never did
+const HIDE_FALLBACK_EXTRA_DELAY = 100;
+// React 18 renders unknown attributes from strings only, while React 19 treats `inert`
+// as a real boolean and removes the attribute when it gets ''
+// TODO drop the React 18 branch in develop-8.0 — Ring UI 8.0 supports React 19 only
+const REACT_MAJOR_WITH_INERT_SUPPORT = 19;
+const getInertAttributeValue = reactMajor => reactMajor >= REACT_MAJOR_WITH_INERT_SUPPORT ? true : '';
+// the cast is confined to the JSX assignment: React 18 actually receives the string form
+const INERT = getInertAttributeValue(Number(React__default.version.split('.')[0]));
+const isFullyCollapsed = (collapsed, initialContentHeight) => collapsed && initialContentHeight <= DEFAULT_HEIGHT;
 /**
  * @name CollapseContent
  */
 const CollapseContent = t0 => {
-  const $ = c(29);
-  if ($[0] !== "f05635de80c1ecb2484d9a8273c8da5ce7d933172be03e8d761443c32d96d937") {
-    for (let $i = 0; $i < 29; $i += 1) {
+  const $ = c(33);
+  if ($[0] !== "47b29aa882db3160a9eb92f6edb4f7c80dfcfaaa3f079e25b6f03c957cb3c632") {
+    for (let $i = 0; $i < 33; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "f05635de80c1ecb2484d9a8273c8da5ce7d933172be03e8d761443c32d96d937";
+    $[0] = "47b29aa882db3160a9eb92f6edb4f7c80dfcfaaa3f079e25b6f03c957cb3c632";
   }
   const {
     children,
@@ -35,7 +45,8 @@ const CollapseContent = t0 => {
     collapsed,
     duration,
     id,
-    disableAnimation
+    disableAnimation,
+    keepMounted
   } = useContext(CollapseContext);
   const containerRef = useRef(null);
   const contentRef = useRef(null);
@@ -56,15 +67,23 @@ const CollapseContent = t0 => {
   let t4;
   if ($[3] !== collapsed || $[4] !== initialContentHeight) {
     t3 = () => {
-      const onTransitionEnd = function onTransitionEnd() {
+      const container = containerRef.current;
+      const finalizeCollapse = function finalizeCollapse() {
         if (initialContentHeight <= DEFAULT_HEIGHT) {
           setShouldHideContent(collapsed);
         }
       };
-      const container = containerRef.current;
+      const onTransitionEnd = function onTransitionEnd(event) {
+        if (event.target === container && event.propertyName === "height") {
+          finalizeCollapse();
+        }
+      };
       container?.addEventListener("transitionend", onTransitionEnd);
+      const cssDuration = parseFloat(container?.style.getPropertyValue("--duration") || "") || 0;
+      const fallbackTimeout = window.setTimeout(finalizeCollapse, cssDuration + HIDE_FALLBACK_EXTRA_DELAY);
       return () => {
         container?.removeEventListener("transitionend", onTransitionEnd);
+        window.clearTimeout(fallbackTimeout);
       };
     };
     t4 = [collapsed, initialContentHeight];
@@ -80,6 +99,9 @@ const CollapseContent = t0 => {
   if (!collapsed && shouldHideContent) {
     setShouldHideContent(false);
   }
+  if (disableAnimation && !shouldHideContent && isFullyCollapsed(collapsed, initialContentHeight)) {
+    setShouldHideContent(true);
+  }
   let t5;
   let t6;
   if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
@@ -118,7 +140,9 @@ const CollapseContent = t0 => {
   }
   const style = t9;
   const fadeShouldBeVisible = Boolean(minHeight && collapsed);
-  const shouldRenderContent = disableAnimation ? !collapsed : !shouldHideContent;
+  const contentVisible = !shouldHideContent;
+  const contentHidden = Boolean(keepMounted) && !contentVisible;
+  const contentInert = collapsed;
   const t10 = `collapse-content-${id}`;
   let t11;
   if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
@@ -146,50 +170,65 @@ const CollapseContent = t0 => {
   } else {
     t14 = $[17];
   }
-  const t15 = shouldRenderContent ? children : null;
-  let t16;
-  if ($[18] !== t14 || $[19] !== t15) {
-    t16 = /*#__PURE__*/jsx("div", {
+  let t15;
+  if ($[18] !== contentHidden) {
+    t15 = contentHidden ? {
+      visibility: "hidden"
+    } : undefined;
+    $[18] = contentHidden;
+    $[19] = t15;
+  } else {
+    t15 = $[19];
+  }
+  const t16 = contentInert ? INERT : undefined;
+  const t17 = keepMounted || contentVisible ? children : null;
+  let t18;
+  if ($[20] !== t14 || $[21] !== t15 || $[22] !== t16 || $[23] !== t17) {
+    t18 = /*#__PURE__*/jsx("div", {
       ref: contentRef,
       "data-test": t14,
-      children: t15
+      style: t15,
+      inert: t16,
+      children: t17
     });
-    $[18] = t14;
-    $[19] = t15;
-    $[20] = t16;
+    $[20] = t14;
+    $[21] = t15;
+    $[22] = t16;
+    $[23] = t17;
+    $[24] = t18;
   } else {
-    t16 = $[20];
+    t18 = $[24];
   }
-  let t17;
-  if ($[21] !== fadeShouldBeVisible) {
-    t17 = fadeShouldBeVisible && /*#__PURE__*/jsx("div", {
+  let t19;
+  if ($[25] !== fadeShouldBeVisible) {
+    t19 = fadeShouldBeVisible && /*#__PURE__*/jsx("div", {
       className: styles.fade
     });
-    $[21] = fadeShouldBeVisible;
-    $[22] = t17;
+    $[25] = fadeShouldBeVisible;
+    $[26] = t19;
   } else {
-    t17 = $[22];
+    t19 = $[26];
   }
-  let t18;
-  if ($[23] !== style || $[24] !== t10 || $[25] !== t13 || $[26] !== t16 || $[27] !== t17) {
-    t18 = /*#__PURE__*/jsxs("div", {
+  let t20;
+  if ($[27] !== style || $[28] !== t10 || $[29] !== t13 || $[30] !== t18 || $[31] !== t19) {
+    t20 = /*#__PURE__*/jsxs("div", {
       ref: containerRef,
       id: t10,
       "data-test": t11,
       className: t13,
       style: style,
-      children: [t16, t17]
+      children: [t18, t19]
     });
-    $[23] = style;
-    $[24] = t10;
-    $[25] = t13;
-    $[26] = t16;
-    $[27] = t17;
-    $[28] = t18;
+    $[27] = style;
+    $[28] = t10;
+    $[29] = t13;
+    $[30] = t18;
+    $[31] = t19;
+    $[32] = t20;
   } else {
-    t18 = $[28];
+    t20 = $[32];
   }
-  return t18;
+  return t20;
 };
 
 export { CollapseContent, CollapseContent as default };

package/components/collapse/collapse-context.d.ts

@@ -2,6 +2,7 @@ interface CollapseContextInterface {
     collapsed: boolean;
     duration: number;
     disableAnimation: boolean;
+    keepMounted?: boolean;
     setCollapsed: () => void;
     id: string;
 }

package/components/collapse/collapse-context.js

@@ -5,6 +5,7 @@ const CollapseContext = /*#__PURE__*/createContext({
   collapsed: true,
   duration: BASE_ANIMATION_DURATION,
   disableAnimation: false,
+  keepMounted: false,
   setCollapsed: () => {},
   id: ''
 });

package/components/collapse/collapse.d.ts

@@ -4,6 +4,15 @@ interface Props {
     onChange?: (collapsed: boolean) => void;
     duration?: number;
     disableAnimation?: boolean;
+    /**
+     * Keep children mounted while collapsed (hidden via `visibility: hidden`
+     * and the `inert` attribute) instead of unmounting them, preserving their state.
+     * Note: hidden form controls still participate in form validation
+     * and submission — disable them while collapsed if needed.
+     * Content rendered through portals (e.g. Popup) escapes the hidden
+     * wrapper and is not hidden — close overlays on collapse.
+     */
+    keepMounted?: boolean;
     className?: string;
     defaultCollapsed?: boolean;
     collapsed?: boolean | null;

package/components/collapse/collapse.js

@@ -5,87 +5,91 @@ import { BASE_ANIMATION_DURATION } from './consts.js';
 import { jsx } from 'react/jsx-runtime';
 
 const Collapse = t0 => {
-  const $ = c(16);
-  if ($[0] !== "4b1bc7149bb2f70cda665f353438e1d305c0392543f5779c6ac7ceb49ca39f10") {
-    for (let $i = 0; $i < 16; $i += 1) {
+  const $ = c(17);
+  if ($[0] !== "3330160d096e3f437f4f27543e39ff405e76a4e1f92b7ab6836337ac8d11cb7e") {
+    for (let $i = 0; $i < 17; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "4b1bc7149bb2f70cda665f353438e1d305c0392543f5779c6ac7ceb49ca39f10";
+    $[0] = "3330160d096e3f437f4f27543e39ff405e76a4e1f92b7ab6836337ac8d11cb7e";
   }
   const {
     children,
     duration: t1,
     disableAnimation: t2,
-    className: t3,
-    onChange: t4,
-    defaultCollapsed: t5,
-    collapsed: t6
+    keepMounted: t3,
+    className: t4,
+    onChange: t5,
+    defaultCollapsed: t6,
+    collapsed: t7
   } = t0;
   const duration = t1 === undefined ? BASE_ANIMATION_DURATION : t1;
   const disableAnimation = t2 === undefined ? false : t2;
-  const className = t3 === undefined ? "" : t3;
-  const onChange = t4 === undefined ? _temp : t4;
-  const defaultCollapsed = t5 === undefined ? true : t5;
-  const collapsed = t6 === undefined ? null : t6;
+  const keepMounted = t3 === undefined ? false : t3;
+  const className = t4 === undefined ? "" : t4;
+  const onChange = t5 === undefined ? _temp : t5;
+  const defaultCollapsed = t6 === undefined ? true : t6;
+  const collapsed = t7 === undefined ? null : t7;
   const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
   const id = useId();
   const finalCollapsedValue = collapsed !== null && collapsed !== void 0 ? collapsed : innerCollapsed;
-  let t7;
+  let t8;
   if ($[1] !== finalCollapsedValue || $[2] !== onChange) {
-    t7 = () => {
+    t8 = () => {
       setInnerCollapsed(!finalCollapsedValue);
       onChange(!finalCollapsedValue);
     };
     $[1] = finalCollapsedValue;
     $[2] = onChange;
-    $[3] = t7;
+    $[3] = t8;
   } else {
-    t7 = $[3];
+    t8 = $[3];
   }
-  const setCollapsed = t7;
-  let t8;
-  if ($[4] !== disableAnimation || $[5] !== duration || $[6] !== finalCollapsedValue || $[7] !== id || $[8] !== setCollapsed) {
-    t8 = {
+  const setCollapsed = t8;
+  let t9;
+  if ($[4] !== disableAnimation || $[5] !== duration || $[6] !== finalCollapsedValue || $[7] !== id || $[8] !== keepMounted || $[9] !== setCollapsed) {
+    t9 = {
       collapsed: finalCollapsedValue,
       setCollapsed,
       duration,
       disableAnimation,
+      keepMounted,
       id
     };
     $[4] = disableAnimation;
     $[5] = duration;
     $[6] = finalCollapsedValue;
     $[7] = id;
-    $[8] = setCollapsed;
-    $[9] = t8;
+    $[8] = keepMounted;
+    $[9] = setCollapsed;
+    $[10] = t9;
   } else {
-    t8 = $[9];
+    t9 = $[10];
   }
-  let t9;
-  if ($[10] !== children || $[11] !== t8) {
-    t9 = /*#__PURE__*/jsx(CollapseContext.Provider, {
-      value: t8,
+  let t10;
+  if ($[11] !== children || $[12] !== t9) {
+    t10 = /*#__PURE__*/jsx(CollapseContext.Provider, {
+      value: t9,
       children: children
     });
-    $[10] = children;
-    $[11] = t8;
+    $[11] = children;
     $[12] = t9;
+    $[13] = t10;
   } else {
-    t9 = $[12];
+    t10 = $[13];
   }
-  let t10;
-  if ($[13] !== className || $[14] !== t9) {
-    t10 = /*#__PURE__*/jsx("div", {
+  let t11;
+  if ($[14] !== className || $[15] !== t10) {
+    t11 = /*#__PURE__*/jsx("div", {
       className: className,
-      children: t9
+      children: t10
     });
-    $[13] = className;
-    $[14] = t9;
+    $[14] = className;
     $[15] = t10;
+    $[16] = t11;
   } else {
-    t10 = $[15];
+    t11 = $[16];
   }
-  return t10;
+  return t11;
 };
 function _temp() {}
 

package/components/collapsible-group/collapsible-group.d.ts

@@ -10,6 +10,19 @@ export interface CollapsibleGroupProps {
     onChange?: (expanded: boolean) => void;
     disableAnimation?: boolean;
     interactive?: boolean;
+    /**
+     * Keep children mounted while collapsed (hidden via `visibility: hidden`
+     * and the `inert` attribute) instead of unmounting them, preserving their state.
+     * Note: hidden form controls still participate in form validation
+     * and submission — disable them while collapsed if needed.
+     * Content rendered through portals (e.g. Popup) escapes the hidden
+     * wrapper and is not hidden — close overlays on collapse.
+     */
+    keepMounted?: boolean;
+    /**
+     * Wraps the header in an <h2>–<h6> to keep the document outline.
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     'data-test'?: string | null | undefined;
 }
 declare const CollapsibleGroup: React.ForwardRefExoticComponent<CollapsibleGroupProps & React.RefAttributes<HTMLDivElement>>;

package/components/collapsible-group/collapsible-group.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import { forwardRef, useState, useContext } from 'react';
+import React__default, { forwardRef, useState, useContext } from 'react';
 import classNames from 'classnames';
 import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
@@ -17,15 +17,15 @@ import '../global/data-tests.js';
 import '../global/dom.js';
 import '../collapse/utils.js';
 
-var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","focused":"ring-collapsible-group-focused","header":"ring-collapsible-group-header","headerButton":"ring-collapsible-group-headerButton","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
+var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","focused":"ring-collapsible-group-focused","header":"ring-collapsible-group-header","heading":"ring-collapsible-group-heading","headerButton":"ring-collapsible-group-headerButton","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
 
 function CollapsibleGroupHeaderContent(t0) {
   const $ = c(16);
-  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
+  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
     for (let $i = 0; $i < 16; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
   }
   const {
     avatar,
@@ -120,11 +120,11 @@ function CollapsibleGroupHeaderContent(t0) {
 }
 function CollapsibleGroupHeader(t0) {
   const $ = c(16);
-  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
+  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
     for (let $i = 0; $i < 16; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
   }
   let avatar;
   let buttonProps;
@@ -193,11 +193,11 @@ function CollapsibleGroupHeader(t0) {
 }
 function CollapsibleGroupHeaderStatic(t0) {
   const $ = c(5);
-  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
+  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
     for (let $i = 0; $i < 5; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
   }
   const {
     avatar,
@@ -224,12 +224,12 @@ function CollapsibleGroupHeaderStatic(t0) {
   return t1;
 }
 const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
-  const $ = c(29);
-  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
-    for (let $i = 0; $i < 29; $i += 1) {
+  const $ = c(33);
+  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
+    for (let $i = 0; $i < 33; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
   }
   const {
     avatar,
@@ -242,6 +242,8 @@ const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
     onChange: t3,
     disableAnimation: t4,
     interactive: t5,
+    keepMounted: t6,
+    headingLevel,
     "data-test": dataTest
   } = t0;
   const defaultExpanded = t1 === undefined ? false : t1;
@@ -249,13 +251,14 @@ const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
   const onChange = t3 === undefined ? _temp : t3;
   const disableAnimation = t4 === undefined ? false : t4;
   const interactive = t5 === undefined ? true : t5;
+  const keepMounted = t6 === undefined ? false : t6;
   const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
   const isExpanded = expanded !== null && expanded !== void 0 ? expanded : innerExpanded;
-  let t6;
+  let t7;
   if ($[1] !== expanded || $[2] !== onChange) {
-    t6 = collapsed => {
+    t7 = collapsed => {
       const nextExpanded = !collapsed;
       if (expanded == null) {
         setInnerExpanded(nextExpanded);
@@ -264,28 +267,28 @@ const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
     };
     $[1] = expanded;
     $[2] = onChange;
-    $[3] = t6;
+    $[3] = t7;
   } else {
-    t6 = $[3];
+    t7 = $[3];
   }
-  const handleChange = t6;
-  let t7;
+  const handleChange = t7;
+  let t8;
   if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = event => {
+    t8 = event => {
       const nextTarget = event.relatedTarget;
       if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
         return;
       }
       setFocused(false);
     };
-    $[4] = t7;
+    $[4] = t8;
   } else {
-    t7 = $[4];
+    t8 = $[4];
   }
-  const onBlur = t7;
-  let t8;
+  const onBlur = t8;
+  let t9;
   if ($[5] !== className || $[6] !== focused || $[7] !== hovered || $[8] !== isExpanded) {
-    t8 = classNames(styles.expand, className, {
+    t9 = classNames(styles.expand, className, {
       [styles.hovered]: hovered,
       [styles.expanded]: isExpanded,
       [styles.focused]: focused
@@ -294,16 +297,14 @@ const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
     $[6] = focused;
     $[7] = hovered;
     $[8] = isExpanded;
-    $[9] = t8;
+    $[9] = t9;
   } else {
-    t8 = $[9];
+    t9 = $[9];
   }
-  const classes = t8;
-  const t9 = !defaultExpanded;
-  const t10 = expanded == null ? null : !expanded;
-  let t11;
+  const classes = t9;
+  let t10;
   if ($[10] !== avatar || $[11] !== interactive || $[12] !== subtitle || $[13] !== title) {
-    t11 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
+    t10 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
       avatar: avatar,
       titleContent: title,
       subtitle: subtitle,
@@ -320,60 +321,76 @@ const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
     $[11] = interactive;
     $[12] = subtitle;
     $[13] = title;
-    $[14] = t11;
+    $[14] = t10;
   } else {
-    t11 = $[14];
+    t10 = $[14];
   }
-  let t12;
-  if ($[15] !== children) {
-    t12 = /*#__PURE__*/jsx(CollapseContent, {
+  const header = t10;
+  const t11 = !defaultExpanded;
+  const t12 = expanded == null ? null : !expanded;
+  let t13;
+  if ($[15] !== header || $[16] !== headingLevel) {
+    t13 = headingLevel != null ? /*#__PURE__*/React__default.createElement(`h${headingLevel}`, {
+      className: styles.heading
+    }, header) : header;
+    $[15] = header;
+    $[16] = headingLevel;
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== children) {
+    t14 = /*#__PURE__*/jsx(CollapseContent, {
       children: /*#__PURE__*/jsx("div", {
         className: styles.body,
         children: children
       })
     });
-    $[15] = children;
-    $[16] = t12;
+    $[18] = children;
+    $[19] = t14;
   } else {
-    t12 = $[16];
+    t14 = $[19];
   }
-  let t13;
-  if ($[17] !== disableAnimation || $[18] !== handleChange || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t9) {
-    t13 = /*#__PURE__*/jsxs(Collapse, {
-      defaultCollapsed: t9,
-      collapsed: t10,
+  let t15;
+  if ($[20] !== disableAnimation || $[21] !== handleChange || $[22] !== keepMounted || $[23] !== t11 || $[24] !== t12 || $[25] !== t13 || $[26] !== t14) {
+    t15 = /*#__PURE__*/jsxs(Collapse, {
+      defaultCollapsed: t11,
+      collapsed: t12,
       onChange: handleChange,
       disableAnimation: disableAnimation,
+      keepMounted: keepMounted,
       className: styles.collapseRoot,
-      children: [t11, t12]
+      children: [t13, t14]
     });
-    $[17] = disableAnimation;
-    $[18] = handleChange;
-    $[19] = t10;
-    $[20] = t11;
-    $[21] = t12;
-    $[22] = t9;
-    $[23] = t13;
+    $[20] = disableAnimation;
+    $[21] = handleChange;
+    $[22] = keepMounted;
+    $[23] = t11;
+    $[24] = t12;
+    $[25] = t13;
+    $[26] = t14;
+    $[27] = t15;
   } else {
-    t13 = $[23];
+    t15 = $[27];
   }
-  let t14;
-  if ($[24] !== classes || $[25] !== dataTest || $[26] !== ref || $[27] !== t13) {
-    t14 = /*#__PURE__*/jsx("div", {
+  let t16;
+  if ($[28] !== classes || $[29] !== dataTest || $[30] !== ref || $[31] !== t15) {
+    t16 = /*#__PURE__*/jsx("div", {
       ref: ref,
       className: classes,
       "data-test": dataTest,
-      children: t13
+      children: t15
     });
-    $[24] = classes;
-    $[25] = dataTest;
-    $[26] = ref;
-    $[27] = t13;
-    $[28] = t14;
+    $[28] = classes;
+    $[29] = dataTest;
+    $[30] = ref;
+    $[31] = t15;
+    $[32] = t16;
   } else {
-    t14 = $[28];
+    t16 = $[32];
   }
-  return t14;
+  return t16;
 });
 CollapsibleGroup.displayName = 'CollapsibleGroup';
 function _temp() {}