@jetbrains/ring-ui-built 8.0.0-beta.5 → 8.0.0-beta.7

package/components/_helpers/avatar-info.js

@@ -7,22 +7,20 @@ var styles = {"avatar":"ring-avatar-avatar","round":"ring-avatar-round","avatarI
 
 const fontSizes = {
   [Size.Size16]: 9,
-  [Size.Size18]: 9,
   [Size.Size20]: 9,
   [Size.Size24]: 11,
   [Size.Size28]: 12,
   [Size.Size32]: 14,
   [Size.Size40]: 16,
-  [Size.Size48]: 16,
   [Size.Size56]: 22
 };
 function AvatarInfo(t0) {
   const $ = c(7);
-  if ($[0] !== "db386ebce597a72ca92c29748d7d2b70e27ec0dd005eced756c361b3bfc587ee") {
+  if ($[0] !== "33d9e62fc244e982736d73abc4599d28e2503bcb0c1be77e33e4cecd23099cfb") {
     for (let $i = 0; $i < 7; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "db386ebce597a72ca92c29748d7d2b70e27ec0dd005eced756c361b3bfc587ee";
+    $[0] = "33d9e62fc244e982736d73abc4599d28e2503bcb0c1be77e33e4cecd23099cfb";
   }
   const {
     size,

package/components/_helpers/icon-svg.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import memoize from '../global/memoize.js';
 import { jsx } from 'react/jsx-runtime';
 
-var styles = {"icon":"ring-icon-icon","glyph":"ring-icon-glyph","compatibilityMode":"ring-icon-compatibilityMode","gray":"ring-icon-gray","hover":"ring-icon-hover","green":"ring-icon-green","magenta":"ring-icon-magenta","red":"ring-icon-red","blue":"ring-icon-blue","white":"ring-icon-white","loading":"ring-icon-loading","icon-loading":"ring-icon-icon-loading"};
+var styles = {"icon":"ring-icon-icon","glyph":"ring-icon-glyph","compatibilityMode":"ring-icon-compatibilityMode","gray":"ring-icon-gray","hover":"ring-icon-hover","green":"ring-icon-green","magenta":"ring-icon-magenta","red":"ring-icon-red","blue":"ring-icon-blue","white":"ring-icon-white"};
 
 function convertReactSVGDOMProperty(str) {
   return str.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());

package/components/auth-dialog/auth-dialog.js

@@ -36,8 +36,8 @@ import '../_helpers/dialog-body-scroll-preventer.js';
 import 'scrollbar-width';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
 import '../icon/icon.js';
+import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';

package/components/avatar/avatar-size.d.ts

@@ -3,14 +3,10 @@
  */
 export declare enum Size {
     Size16 = 16,
-    /** @deprecated */
-    Size18 = 18,
     Size20 = 20,
     Size24 = 24,
     Size28 = 28,
     Size32 = 32,
     Size40 = 40,
-    /** @deprecated */
-    Size48 = 48,
     Size56 = 56
 }

package/components/avatar/avatar-size.js

@@ -4,15 +4,11 @@
 var Size;
 (function (Size) {
   Size[Size["Size16"] = 16] = "Size16";
-  /** @deprecated */
-  Size[Size["Size18"] = 18] = "Size18";
   Size[Size["Size20"] = 20] = "Size20";
   Size[Size["Size24"] = 24] = "Size24";
   Size[Size["Size28"] = 28] = "Size28";
   Size[Size["Size32"] = 32] = "Size32";
   Size[Size["Size40"] = 40] = "Size40";
-  /** @deprecated */
-  Size[Size["Size48"] = 48] = "Size48";
   Size[Size["Size56"] = 56] = "Size56";
 })(Size || (Size = {}));
 

package/components/avatar/avatar.js

@@ -1,10 +1,7 @@
-import 'core-js/modules/es.array.includes.js';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import deprecate from 'util-deprecate';
 import { isDataURI, parseQueryString, encodeURL } from '../global/url.js';
 import { getPixelRatio } from '../global/dom.js';
-import memoize from '../global/memoize.js';
 import FallbackAvatar from './fallback-avatar.js';
 import { Size } from './avatar-size.js';
 import { s as styles, A as AvatarInfo } from '../_helpers/avatar-info.js';
@@ -12,7 +9,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react/compiler-runtime';
 import '../global/get-uid.js';
 
-const warnSize = memoize(size => deprecate(() => {}, `Avatar: Size${size} is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.`));
 class Avatar extends PureComponent {
   static defaultProps = {
     dpr: getPixelRatio(),
@@ -47,9 +43,6 @@ class Avatar extends PureComponent {
       skipParams,
       ...restProps
     } = this.props;
-    if ([Size.Size18, Size.Size48].includes(size)) {
-      warnSize(size)();
-    }
     const sizeString = `${size}px`;
     const subavatarSizeString = `${subavatarSize}px`;
     const styleObj = {

package/components/avatar/fallback-avatar.js

@@ -15,15 +15,6 @@ const SizesSquare = {
     fontSize: '8px',
     textAnchor: 'middle'
   },
-  [Size.Size18]: {
-    radius: 4,
-    text: {
-      x: 9,
-      y: 13
-    },
-    fontSize: '11px',
-    textAnchor: 'middle'
-  },
   [Size.Size20]: {
     radius: 4,
     text: {
@@ -96,21 +87,6 @@ const SizesSquare = {
       height: 2.5
     }
   },
-  [Size.Size48]: {
-    radius: 4,
-    text: {
-      x: 3,
-      y: 21
-    },
-    fontSize: '19px',
-    letterSpacing: 1,
-    underscore: {
-      x: 5,
-      y: 32,
-      width: 15,
-      height: 2.5
-    }
-  },
   [Size.Size56]: {
     radius: 4,
     text: {
@@ -138,16 +114,6 @@ const SizesRound = {
     textAnchor: 'middle',
     dominantBaseline: 'middle'
   },
-  [Size.Size18]: {
-    radius: 4,
-    fontSize: '11px',
-    text: {
-      x: '50%',
-      y: '54%'
-    },
-    textAnchor: 'middle',
-    dominantBaseline: 'middle'
-  },
   [Size.Size20]: {
     radius: 4,
     fontSize: '9px',
@@ -200,17 +166,6 @@ const SizesRound = {
     textAnchor: 'middle',
     dominantBaseline: 'middle'
   },
-  [Size.Size48]: {
-    radius: 4,
-    fontSize: '19px',
-    letterSpacing: 1,
-    text: {
-      x: '50%',
-      y: '54%'
-    },
-    textAnchor: 'middle',
-    dominantBaseline: 'middle'
-  },
   [Size.Size56]: {
     radius: 4,
     fontSize: '26px',
@@ -247,11 +202,11 @@ function hashCode(s) {
 }
 function FallbackAvatar(t0) {
   const $ = c(38);
-  if ($[0] !== "b668230117e1d8da4bff753c3c60cfa65c2cb38b8160a7b90f4e36892987cdc5") {
+  if ($[0] !== "1a4ecd5a43a79807aefab02d5c9ac8b224f24139f867e5804d91fecdd9285808") {
     for (let $i = 0; $i < 38; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "b668230117e1d8da4bff753c3c60cfa65c2cb38b8160a7b90f4e36892987cdc5";
+    $[0] = "1a4ecd5a43a79807aefab02d5c9ac8b224f24139f867e5804d91fecdd9285808";
   }
   const {
     username,

package/components/avatar-stack/avatar-stack.js

@@ -70,11 +70,11 @@ var styles = {"avatarStack":"ring-avatar-stack-avatarStack","extraText":"ring-av
 
 function AvatarStack(t0) {
   const $ = c(28);
-  if ($[0] !== "7c1a1eb1e78b51cf2e869808174f0a400bcb10f038b5fe22275d5cdc8f4f1bb3") {
+  if ($[0] !== "f469d96d157850b6a22cfb2dd7b1d71f151ee90317dbfd199eb6713e97a9ce55") {
     for (let $i = 0; $i < 28; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "7c1a1eb1e78b51cf2e869808174f0a400bcb10f038b5fe22275d5cdc8f4f1bb3";
+    $[0] = "f469d96d157850b6a22cfb2dd7b1d71f151ee90317dbfd199eb6713e97a9ce55";
   }
   let children;
   let className;
@@ -108,7 +108,7 @@ function AvatarStack(t0) {
   }
   const size = t1 === undefined ? Size.Size20 : t1;
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const sizeClass = size !== Size.Size16 && size !== Size.Size18 && size !== Size.Size48 ? styles[`size${size}`] : undefined;
+  const sizeClass = size !== Size.Size16 ? styles[`size${size}`] : undefined;
   let t2;
   if ($[8] !== className || $[9] !== dropdownOpen || $[10] !== sizeClass) {
     t2 = classNames(styles.avatarStack, className, sizeClass, {

package/components/button/button.d.ts

@@ -15,10 +15,6 @@ export interface ButtonBaseProps {
     secondary?: boolean | null | undefined;
     ghost?: boolean | null | undefined;
     short?: boolean | null | undefined;
-    /**
-     * @deprecated Use inline instead
-     */
-    text?: boolean | null | undefined;
     inline?: boolean | null | undefined;
     dropdown?: boolean | null | undefined;
     disabled?: boolean | undefined;

package/components/button/button.js

@@ -2,19 +2,18 @@ import { PureComponent, createRef } from 'react';
 import classNames from 'classnames';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
-import deprecate from 'util-deprecate';
 import Icon from '../icon/icon.js';
 import ClickableLink from '../link/clickable-link.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import { g as getButtonClasses, s as styles } from '../_helpers/button.classes.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Size } from '../icon/icon.constants.js';
+import 'util-deprecate';
 import '../_helpers/icon-svg.js';
 import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../global/configuration.js';
 
-const warnText = deprecate(() => {}, 'Button: "text" prop is deprecated and will be removed in 8.0. Use inline instead.');
 function removeLinkProps(props) {
   const {
     download,
@@ -46,7 +45,6 @@ class Button extends PureComponent {
   static contextType = ControlsHeightContext;
   buttonRef = /*#__PURE__*/createRef();
   render() {
-    var _ref;
     const {
       // Modifiers
       active,
@@ -59,7 +57,6 @@ class Button extends PureComponent {
       secondary,
       ghost,
       short,
-      text,
       dropdown,
       height,
       // Props
@@ -75,10 +72,7 @@ class Button extends PureComponent {
       disabled,
       ...props
     } = this.props;
-    const isInline = (_ref = inline !== null && inline !== void 0 ? inline : text) !== null && _ref !== void 0 ? _ref : !!icon;
-    if (text) {
-      warnText();
-    }
+    const isInline = inline !== null && inline !== void 0 ? inline : !!icon;
     const classes = getButtonClasses({
       ...this.props,
       inline: isInline,

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

@@ -3,6 +3,7 @@ import { use, useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { getRect } from '../global/dom.js';
+import { parseCssDuration } from '../global/parse-css-duration.js';
 import { toPx } from './utils.js';
 import { CollapseContext } from './collapse-context.js';
 import { COLLAPSE_CONTENT_CONTAINER_TEST_ID, COLLAPSE_CONTENT_TEST_ID } from './consts.js';
@@ -14,16 +15,19 @@ 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;
+const isFullyCollapsed = (collapsed, initialContentHeight) => collapsed && initialContentHeight <= DEFAULT_HEIGHT;
 /**
  * @name CollapseContent
  */
 const CollapseContent = t0 => {
-  const $ = c(29);
-  if ($[0] !== "db13df5cd36e9e8017f88ee099234f4bd4acb2f34d80bfcbd6171247616c949c") {
-    for (let $i = 0; $i < 29; $i += 1) {
+  const $ = c(33);
+  if ($[0] !== "e428f8c30c8f8cfdd43da215eea42f35a3b93ebf1af57f7e14bd2e082111ea3f") {
+    for (let $i = 0; $i < 33; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "db13df5cd36e9e8017f88ee099234f4bd4acb2f34d80bfcbd6171247616c949c";
+    $[0] = "e428f8c30c8f8cfdd43da215eea42f35a3b93ebf1af57f7e14bd2e082111ea3f";
   }
   const {
     children,
@@ -35,7 +39,8 @@ const CollapseContent = t0 => {
     collapsed,
     duration,
     id,
-    disableAnimation
+    disableAnimation,
+    keepMounted
   } = use(CollapseContext);
   const containerRef = useRef(null);
   const contentRef = useRef(null);
@@ -56,15 +61,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 = parseCssDuration(container?.style.getPropertyValue("--duration") || "");
+      const fallbackTimeout = window.setTimeout(finalizeCollapse, cssDuration + HIDE_FALLBACK_EXTRA_DELAY);
       return () => {
         container?.removeEventListener("transitionend", onTransitionEnd);
+        window.clearTimeout(fallbackTimeout);
       };
     };
     t4 = [collapsed, initialContentHeight];
@@ -80,6 +93,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 +134,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 +164,64 @@ 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 = keepMounted || contentVisible ? children : null;
+  let t17;
+  if ($[20] !== contentInert || $[21] !== t14 || $[22] !== t15 || $[23] !== t16) {
+    t17 = /*#__PURE__*/jsx("div", {
       ref: contentRef,
       "data-test": t14,
-      children: t15
+      style: t15,
+      inert: contentInert,
+      children: t16
     });
-    $[18] = t14;
-    $[19] = t15;
-    $[20] = t16;
+    $[20] = contentInert;
+    $[21] = t14;
+    $[22] = t15;
+    $[23] = t16;
+    $[24] = t17;
   } else {
-    t16 = $[20];
+    t17 = $[24];
   }
-  let t17;
-  if ($[21] !== fadeShouldBeVisible) {
-    t17 = fadeShouldBeVisible && /*#__PURE__*/jsx("div", {
+  let t18;
+  if ($[25] !== fadeShouldBeVisible) {
+    t18 = fadeShouldBeVisible && /*#__PURE__*/jsx("div", {
       className: styles.fade
     });
-    $[21] = fadeShouldBeVisible;
-    $[22] = t17;
+    $[25] = fadeShouldBeVisible;
+    $[26] = t18;
   } else {
-    t17 = $[22];
+    t18 = $[26];
   }
-  let t18;
-  if ($[23] !== style || $[24] !== t10 || $[25] !== t13 || $[26] !== t16 || $[27] !== t17) {
-    t18 = /*#__PURE__*/jsxs("div", {
+  let t19;
+  if ($[27] !== style || $[28] !== t10 || $[29] !== t13 || $[30] !== t17 || $[31] !== t18) {
+    t19 = /*#__PURE__*/jsxs("div", {
       ref: containerRef,
       id: t10,
       "data-test": t11,
       className: t13,
       style: style,
-      children: [t16, t17]
+      children: [t17, t18]
     });
-    $[23] = style;
-    $[24] = t10;
-    $[25] = t13;
-    $[26] = t16;
-    $[27] = t17;
-    $[28] = t18;
+    $[27] = style;
+    $[28] = t10;
+    $[29] = t13;
+    $[30] = t17;
+    $[31] = t18;
+    $[32] = t19;
   } else {
-    t18 = $[28];
+    t19 = $[32];
   }
-  return t18;
+  return t19;
 };
 
 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] !== "82eaf77725c22a5c861c79e76fbc1b71c454cd55ea6a0d6b6ce3ecd951f15271") {
-    for (let $i = 0; $i < 16; $i += 1) {
+  const $ = c(17);
+  if ($[0] !== "c01294e8c8f1b12e5881d26b9c4bcfc3b1ba5726fff07b53471c113b3a63b1f5") {
+    for (let $i = 0; $i < 17; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "82eaf77725c22a5c861c79e76fbc1b71c454cd55ea6a0d6b6ce3ecd951f15271";
+    $[0] = "c01294e8c8f1b12e5881d26b9c4bcfc3b1ba5726fff07b53471c113b3a63b1f5";
   }
   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, {
-      value: t8,
+  let t10;
+  if ($[11] !== children || $[12] !== t9) {
+    t10 = /*#__PURE__*/jsx(CollapseContext, {
+      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

@@ -11,10 +11,23 @@ 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: {
-    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
+    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, keepMounted, headingLevel, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default CollapsibleGroup;