@jetbrains/ring-ui-built 7.0.124 → 8.0.0-beta.10

package/components/avatar/fallback-avatar.js

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { useState } from 'react';
 import getUID from '../global/get-uid.js';
 import { Size } from './avatar-size.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

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { useState, Children } from 'react';
 import classNames from 'classnames';
 import DropdownMenu from '../dropdown-menu/dropdown-menu.js';
@@ -32,7 +32,6 @@ import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import '../global/configuration.js';
 import '../global/compose-refs.js';
 import '../control-help/control-help.js';
 import '../link/link.js';
@@ -55,6 +54,7 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../popup-menu/popup-menu.js';
 import '../popup/popup.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/banner/banner.js

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import React__default from 'react';
 import classNames from 'classnames';
 import infoIcon from '@jetbrains/icons/info-filled';
@@ -13,7 +13,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import '../global/configuration.js';
 import '../global/memoize.js';
 import '../global/data-tests.js';
 import '../link/clickable-link.js';
@@ -30,6 +29,7 @@ import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../tab-trap/tab-trap.js';
+import '../global/configuration.js';
 import '../popup/position.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';

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/configuration.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/button-group/button-group.js

@@ -6,7 +6,7 @@ import ControlHelp from '../control-help/control-help.js';
 import { s as styles } from '../_helpers/caption.js';
 export { C as Caption } from '../_helpers/caption.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 
 function allChildrenDisabled(children) {
   if (!children || typeof children !== 'object') return false;

package/components/button-toolbar/button-toolbar.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { jsx } from 'react/jsx-runtime';
 
-var styles = {"buttonClass":"ring-button-button","buttonToolbar":"ring-button-toolbar-buttonToolbar","buttonGroup":"ring-button-toolbar-buttonGroup","split":"ring-button-toolbar-split"};
+var styles = {"button":"ring-button-button","buttonToolbar":"ring-button-toolbar-buttonToolbar","buttonGroup":"ring-button-toolbar-buttonGroup","split":"ring-button-toolbar-split"};
 
 class ButtonToolbar extends PureComponent {
   render() {

package/components/checkbox/checkbox.d.ts

@@ -24,6 +24,6 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T | null) => () => void>;
     render(): import("react").JSX.Element;
 }

package/components/checkbox/checkbox.js

@@ -10,8 +10,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
-import '../global/configuration.js';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import 'memoize-one';
 

package/components/clipboard/clipboard.js

@@ -14,8 +14,7 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
-import '../global/configuration.js';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import 'react/jsx-runtime';
 import '../loader-inline/loader-inline.js';
@@ -26,6 +25,7 @@ import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
 import '../alert/alert-heading.js';

package/components/collapse/collapse-content.js

@@ -1,8 +1,9 @@
-import { c } from 'react-compiler-runtime';
-import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import { c } from 'react/compiler-runtime';
+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';
@@ -10,30 +11,22 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"container":"ring-collapse-container","transition":"ring-collapse-transition","summary":"ring-collapse-summary","trigger":"ring-collapse-trigger","fade":"ring-collapse-fade"};
 
-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(33);
-  if ($[0] !== "47b29aa882db3160a9eb92f6edb4f7c80dfcfaaa3f079e25b6f03c957cb3c632") {
+  if ($[0] !== "e3da703013c1e2308afa08a0649f729dead9cb8e25336ece00ca1a0416bee9c3") {
     for (let $i = 0; $i < 33; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "47b29aa882db3160a9eb92f6edb4f7c80dfcfaaa3f079e25b6f03c957cb3c632";
+    $[0] = "e3da703013c1e2308afa08a0649f729dead9cb8e25336ece00ca1a0416bee9c3";
   }
   const {
     children,
@@ -45,9 +38,10 @@ const CollapseContent = t0 => {
     collapsed,
     duration,
     id,
+    animate,
     disableAnimation,
     keepMounted
-  } = useContext(CollapseContext);
+  } = use(CollapseContext);
   const containerRef = useRef(null);
   const contentRef = useRef(null);
   const [initialContentHeight] = useState(minHeight);
@@ -79,7 +73,7 @@ const CollapseContent = t0 => {
         }
       };
       container?.addEventListener("transitionend", onTransitionEnd);
-      const cssDuration = parseFloat(container?.style.getPropertyValue("--duration") || "") || 0;
+      const cssDuration = parseCssDuration(container?.style.getPropertyValue("--duration") || "");
       const fallbackTimeout = window.setTimeout(finalizeCollapse, cssDuration + HIDE_FALLBACK_EXTRA_DELAY);
       return () => {
         container?.removeEventListener("transitionend", onTransitionEnd);
@@ -121,8 +115,7 @@ const CollapseContent = t0 => {
     t6 = $[8];
   }
   useEffect(t5, t6);
-  const calculatedDuration = duration + contentHeight * DURATION_FACTOR;
-  const t7 = `${calculatedDuration}ms`;
+  const t7 = `${duration}ms`;
   const t8 = collapsed && !minHeight ? HIDDEN : VISIBLE;
   let t9;
   if ($[9] !== height || $[10] !== t7 || $[11] !== t8) {
@@ -151,7 +144,7 @@ const CollapseContent = t0 => {
   } else {
     t11 = $[13];
   }
-  const t12 = !disableAnimation;
+  const t12 = animate && !disableAnimation;
   let t13;
   if ($[14] !== t12) {
     t13 = classNames(styles.container, {
@@ -180,55 +173,54 @@ const CollapseContent = t0 => {
   } 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", {
+  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,
       style: t15,
-      inert: t16,
-      children: t17
+      inert: contentInert,
+      children: t16
     });
-    $[20] = t14;
-    $[21] = t15;
-    $[22] = t16;
-    $[23] = t17;
-    $[24] = t18;
+    $[20] = contentInert;
+    $[21] = t14;
+    $[22] = t15;
+    $[23] = t16;
+    $[24] = t17;
   } else {
-    t18 = $[24];
+    t17 = $[24];
   }
-  let t19;
+  let t18;
   if ($[25] !== fadeShouldBeVisible) {
-    t19 = fadeShouldBeVisible && /*#__PURE__*/jsx("div", {
+    t18 = fadeShouldBeVisible && /*#__PURE__*/jsx("div", {
       className: styles.fade
     });
     $[25] = fadeShouldBeVisible;
-    $[26] = t19;
+    $[26] = t18;
   } else {
-    t19 = $[26];
+    t18 = $[26];
   }
-  let t20;
-  if ($[27] !== style || $[28] !== t10 || $[29] !== t13 || $[30] !== t18 || $[31] !== t19) {
-    t20 = /*#__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: [t18, t19]
+      children: [t17, t18]
     });
     $[27] = style;
     $[28] = t10;
     $[29] = t13;
-    $[30] = t18;
-    $[31] = t19;
-    $[32] = t20;
+    $[30] = t17;
+    $[31] = t18;
+    $[32] = t19;
   } else {
-    t20 = $[32];
+    t19 = $[32];
   }
-  return t20;
+  return t19;
 };
 
 export { CollapseContent, CollapseContent as default };

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

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

package/components/collapse/collapse-context.js

@@ -4,6 +4,7 @@ import { BASE_ANIMATION_DURATION } from './consts.js';
 const CollapseContext = /*#__PURE__*/createContext({
   collapsed: true,
   duration: BASE_ANIMATION_DURATION,
+  animate: false,
   disableAnimation: false,
   keepMounted: false,
   setCollapsed: () => {},

package/components/collapse/collapse-control.js

@@ -1,5 +1,5 @@
-import { c } from 'react-compiler-runtime';
-import { useContext, cloneElement } from 'react';
+import { c } from 'react/compiler-runtime';
+import { use, cloneElement } from 'react';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { CollapseContext } from './collapse-context.js';
 import { COLLAPSE_CONTROL_TEST_ID } from './consts.js';
@@ -7,11 +7,11 @@ import { jsx } from 'react/jsx-runtime';
 
 const CollapseControl = t0 => {
   const $ = c(13);
-  if ($[0] !== "37a6daba1dc720b937e7d2a844af157177f8338140503553968cf8ae1ecf6263") {
+  if ($[0] !== "10418ecc7774e31a4915bc1ad8a8ad001213057f5df8fc3f9a59adab69451dd6") {
     for (let $i = 0; $i < 13; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "37a6daba1dc720b937e7d2a844af157177f8338140503553968cf8ae1ecf6263";
+    $[0] = "10418ecc7774e31a4915bc1ad8a8ad001213057f5df8fc3f9a59adab69451dd6";
   }
   const {
     children,
@@ -21,7 +21,7 @@ const CollapseControl = t0 => {
     setCollapsed,
     collapsed,
     id
-  } = useContext(CollapseContext);
+  } = use(CollapseContext);
   let t1;
   let t2;
   if ($[1] !== children || $[2] !== collapsed || $[3] !== dataTest || $[4] !== id || $[5] !== setCollapsed) {

package/components/collapse/collapse.js

@@ -1,16 +1,16 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { useState, useId } from 'react';
 import { CollapseContext } from './collapse-context.js';
 import { BASE_ANIMATION_DURATION } from './consts.js';
 import { jsx } from 'react/jsx-runtime';
 
 const Collapse = t0 => {
-  const $ = c(17);
-  if ($[0] !== "3330160d096e3f437f4f27543e39ff405e76a4e1f92b7ab6836337ac8d11cb7e") {
-    for (let $i = 0; $i < 17; $i += 1) {
+  const $ = c(18);
+  if ($[0] !== "dd05ee204290a7a80b9dd7bc0906391032441237b921ff3f0a33117d0cb388ac") {
+    for (let $i = 0; $i < 18; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "3330160d096e3f437f4f27543e39ff405e76a4e1f92b7ab6836337ac8d11cb7e";
+    $[0] = "dd05ee204290a7a80b9dd7bc0906391032441237b921ff3f0a33117d0cb388ac";
   }
   const {
     children,
@@ -32,9 +32,16 @@ const Collapse = t0 => {
   const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
   const id = useId();
   const finalCollapsedValue = collapsed !== null && collapsed !== void 0 ? collapsed : innerCollapsed;
+  const [previousCollapsedValue, setPreviousCollapsedValue] = useState(finalCollapsedValue);
+  const [animate, setAnimate] = useState(false);
+  if (previousCollapsedValue !== finalCollapsedValue) {
+    setPreviousCollapsedValue(finalCollapsedValue);
+    setAnimate(true);
+  }
   let t8;
   if ($[1] !== finalCollapsedValue || $[2] !== onChange) {
     t8 = () => {
+      setAnimate(true);
       setInnerCollapsed(!finalCollapsedValue);
       onChange(!finalCollapsedValue);
     };
@@ -46,48 +53,50 @@ const Collapse = t0 => {
   }
   const setCollapsed = t8;
   let t9;
-  if ($[4] !== disableAnimation || $[5] !== duration || $[6] !== finalCollapsedValue || $[7] !== id || $[8] !== keepMounted || $[9] !== setCollapsed) {
+  if ($[4] !== animate || $[5] !== disableAnimation || $[6] !== duration || $[7] !== finalCollapsedValue || $[8] !== id || $[9] !== keepMounted || $[10] !== setCollapsed) {
     t9 = {
       collapsed: finalCollapsedValue,
       setCollapsed,
       duration,
+      animate,
       disableAnimation,
       keepMounted,
       id
     };
-    $[4] = disableAnimation;
-    $[5] = duration;
-    $[6] = finalCollapsedValue;
-    $[7] = id;
-    $[8] = keepMounted;
-    $[9] = setCollapsed;
-    $[10] = t9;
+    $[4] = animate;
+    $[5] = disableAnimation;
+    $[6] = duration;
+    $[7] = finalCollapsedValue;
+    $[8] = id;
+    $[9] = keepMounted;
+    $[10] = setCollapsed;
+    $[11] = t9;
   } else {
-    t9 = $[10];
+    t9 = $[11];
   }
   let t10;
-  if ($[11] !== children || $[12] !== t9) {
-    t10 = /*#__PURE__*/jsx(CollapseContext.Provider, {
+  if ($[12] !== children || $[13] !== t9) {
+    t10 = /*#__PURE__*/jsx(CollapseContext, {
       value: t9,
       children: children
     });
-    $[11] = children;
-    $[12] = t9;
-    $[13] = t10;
+    $[12] = children;
+    $[13] = t9;
+    $[14] = t10;
   } else {
-    t10 = $[13];
+    t10 = $[14];
   }
   let t11;
-  if ($[14] !== className || $[15] !== t10) {
+  if ($[15] !== className || $[16] !== t10) {
     t11 = /*#__PURE__*/jsx("div", {
       className: className,
       children: t10
     });
-    $[14] = className;
-    $[15] = t10;
-    $[16] = t11;
+    $[15] = className;
+    $[16] = t10;
+    $[17] = t11;
   } else {
-    t11 = $[16];
+    t11 = $[17];
   }
   return t11;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface CollapsibleGroupProps {
+    ref?: React.Ref<HTMLDivElement>;
     avatar?: React.ReactNode;
     title: React.ReactNode;
     subtitle?: React.ReactNode;
@@ -25,5 +26,8 @@ export interface CollapsibleGroupProps {
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     'data-test'?: string | null | undefined;
 }
-declare const CollapsibleGroup: React.ForwardRefExoticComponent<CollapsibleGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleGroup: {
+    ({ 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;