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

package/babel.config.js

@@ -1,5 +1,3 @@
-const browserslist = require('browserslist');
-
 module.exports = function config(api) {
   api.cache(true);
 
@@ -8,16 +6,10 @@ module.exports = function config(api) {
       [
         'babel-plugin-react-compiler',
         {
-          target: '18', // should be the minimal supported version from peerDependencies
+          target: '19', // should be the minimal supported version from peerDependencies
           panicThreshold: 'all_errors',
         },
       ],
-      [
-        'babel-plugin-transform-define',
-        {
-          SUPPORTED_BROWSERS: browserslist(),
-        },
-      ],
     ],
     presets: [
       [

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

@@ -10,9 +10,9 @@ export const reactRoot = createRoot(containerElement);
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+    reactRoot.render(<ControlsHeightContext value={getGlobalControlsHeight()}>
       <AuthDialog {...props}/>
-    </ControlsHeightContext.Provider>);
+    </ControlsHeightContext>);
 }
 export default function showAuthDialog(props = {}) {
     renderAuthDialog({

package/components/avatar/avatar-info.js

@@ -3,13 +3,11 @@ import { Size } from './avatar-size';
 import styles from './avatar.css';
 export 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,
 };
 export default function AvatarInfo({ size, children }) {

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,14 +4,10 @@
 export 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,15 +1,12 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import deprecate from 'util-deprecate';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';
 import { getPixelRatio } from '../global/dom';
-import memoize from '../global/memoize';
 import FallbackAvatar from './fallback-avatar';
 import { Size } from './avatar-size';
 import AvatarInfo from './avatar-info';
 import styles from './avatar.css';
 export { Size };
-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.`));
 export default class Avatar extends PureComponent {
     static defaultProps = {
         dpr: getPixelRatio(),
@@ -28,9 +25,6 @@ export default class Avatar extends PureComponent {
     };
     render() {
         const { size, url, dpr, style, round, subavatar, subavatarSize, username, info, 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

@@ -31,12 +31,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: { x: 2, y: 10 },
@@ -69,13 +63,6 @@ const SizesSquare = {
         letterSpacing: 1,
         underscore: { x: 5, y: 32, width: 15, 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: { x: 4, y: 28 },
@@ -92,13 +79,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',
@@ -136,14 +116,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',

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

@@ -6,7 +6,7 @@ import { fontSizes } from '../avatar/avatar-info';
 import styles from './avatar-stack.css';
 export default function AvatarStack({ children, className, size = Size.Size20, extraItems, dropdownMenuProps, ...restProps }) {
     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;
     return (<div className={classNames(styles.avatarStack, className, sizeClass, {
             [styles.hovered]: dropdownOpen,
         })} {...restProps} style={{ height: size, ...restProps.style }}>

package/components/button/button.css

@@ -235,12 +235,12 @@
 }
 
 .primaryBlock {
-  --ring-button-default-background-color: var(--ring-button-primary-background-color);
+  --ring-button-default-background-color: var(--ring-main-color);
   --ring-button-hover-background-color: var(--ring-main-hover-color);
-  --ring-button-pressed-background-color: var(--ring-button-primary-background-color);
-  --ring-button-active-background-color: var(--ring-button-primary-background-color);
+  --ring-button-pressed-background-color: var(--ring-main-color);
+  --ring-button-active-background-color: var(--ring-main-color);
   --ring-button-active-hover-background-color: var(--ring-main-hover-color);
-  --ring-button-active-pressed-background-color: var(--ring-button-primary-background-color);
+  --ring-button-active-pressed-background-color: var(--ring-main-color);
   --ring-button-disabled-background-color: var(--ring-border-hover-color);
   --ring-button-pressed-border-color: var(--ring-button-primary-border-color);
   --ring-button-active-border-color: var(--ring-button-primary-border-color);

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

@@ -3,13 +3,11 @@ import * as React from 'react';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-down';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
-import deprecate from 'util-deprecate';
 import Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickable-link';
 import { ControlsHeightContext } from '../global/controls-height';
 import { getButtonClasses } from './button.classes';
 import styles from './button.css';
-const warnText = deprecate(() => { }, 'Button: "text" prop is deprecated and will be removed in 8.0. Use inline instead.');
 function removeLinkProps(props) {
     const { download, href, hrefLang, media, ping, target, type, referrerPolicy, onConditionalClick, onPlainLeftClick, activeClassName, ...restProps } = props;
     return restProps;
@@ -30,13 +28,10 @@ export class Button extends PureComponent {
     render() {
         const { 
         // Modifiers
-        active, danger, delayed, loader, primary, success, error, secondary, ghost, short, text, dropdown, height, 
+        active, danger, delayed, loader, primary, success, error, secondary, ghost, short, dropdown, height, 
         // Props
         icon, iconRight, iconSize, iconClassName, iconRightClassName, iconSuppressSizeWarning, className, children, inline, disabled, ...props } = this.props;
-        const isInline = inline ?? text ?? !!icon;
-        if (text) {
-            warnText();
-        }
+        const isInline = inline ?? !!icon;
         const classes = getButtonClasses({
             ...this.props,
             inline: isInline,

package/components/button-group/button-group.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value button as buttonClass, active as buttonActive, flat from '../button/button.css';
+@value button, active as buttonActive, flat from '../button/button.css';
 
 :root,
 :host {
@@ -37,7 +37,7 @@
   --ring-button-group-button-border-color: var(--ring-border-disabled-color);
 }
 
-.buttonGroup .buttonClass {
+.buttonGroup .button {
   position: relative;
 
   transition: none;
@@ -47,7 +47,7 @@
     0 -1px var(--ring-button-group-button-border-color) inset;
 }
 
-.buttonGroup .buttonClass[disabled] {
+.buttonGroup .button[disabled] {
   /* stylelint-disable selector-max-specificity */
   &::before,
   &::after {
@@ -75,8 +75,8 @@
   /* stylelint-enable */
 }
 
-.buttonGroup > .buttonClass:first-child,
-.buttonGroup > :first-child .buttonClass {
+.buttonGroup > .button:first-child,
+.buttonGroup > :first-child .button {
   box-shadow:
     0 1px var(--ring-button-group-button-border-color) inset,
     0 -1px var(--ring-button-group-button-border-color) inset,
@@ -88,8 +88,8 @@
   }
 }
 
-.buttonGroup > .buttonClass:last-child,
-.buttonGroup > :last-child .buttonClass {
+.buttonGroup > .button:last-child,
+.buttonGroup > :last-child .button {
   box-shadow:
     0 1px var(--ring-button-group-button-border-color) inset,
     0 -1px var(--ring-button-group-button-border-color) inset,
@@ -101,8 +101,8 @@
   }
 }
 
-.buttonGroup > .buttonClass:only-child,
-.buttonGroup > :only-child .buttonClass {
+.buttonGroup > .button:only-child,
+.buttonGroup > :only-child .button {
   box-shadow:
     0 1px var(--ring-button-group-button-border-color) inset,
     0 -1px var(--ring-button-group-button-border-color) inset,
@@ -116,15 +116,15 @@
 }
 
 /* stylelint-disable selector-max-specificity */
-.buttonGroup .buttonClass.buttonClass:hover:not(:disabled),
-.buttonGroup .buttonClass.buttonClass:active:not(:disabled) {
+.buttonGroup .button.button:hover:not(:disabled),
+.buttonGroup .button.button:active:not(:disabled) {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
-.buttonGroup .buttonClass.buttonClass:focus-visible {
+.buttonGroup .button.button:focus-visible {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
@@ -133,14 +133,14 @@
     0 0 0 1px var(--ring-border-hover-color);
 }
 
-.buttonGroup .buttonClass.buttonClass.buttonActive {
+.buttonGroup .button.button.buttonActive {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
-.buttonGroup .buttonClass:focus-visible.buttonActive {
+.buttonGroup .button:focus-visible.buttonActive {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
@@ -149,7 +149,7 @@
     0 0 0 1px var(--ring-border-hover-color);
 }
 
-.buttonGroup .buttonClass.buttonActive[disabled] {
+.buttonGroup .button.buttonActive[disabled] {
   box-shadow: var(--ring-button-shadow) var(--ring-border-hover-color);
 }
 /* stylelint-enable */
@@ -159,17 +159,17 @@
   composes: buttonGroup from '../button-toolbar/button-toolbar.css';
 }
 
-.common button:not(:where(.buttonClass)) {
+.common button {
   border-radius: 0;
 }
 
-.common .buttonClass {
+.common .button {
   --ring-button-border-radius-left: 0;
   --ring-button-border-radius-right: 0;
 }
 
 .split button,
-.split .buttonClass {
+.split .button {
   margin: 0 0 0 -1px;
 }
 
@@ -192,8 +192,8 @@
   border-bottom-left-radius: var(--ring-border-radius);
 }
 
-.common > .buttonClass:first-child,
-.common > :first-child .buttonClass {
+.common > .button:first-child,
+.common > :first-child .button {
   --ring-button-border-radius-left: var(--ring-border-radius);
 
   margin: 0;
@@ -204,8 +204,8 @@
   border-bottom-right-radius: var(--ring-border-radius);
 }
 
-.common > .buttonClass:last-child,
-.common > :last-child .buttonClass {
+.common > .button:last-child,
+.common > :last-child .button {
   --ring-button-border-radius-right: var(--ring-border-radius);
 }
 
@@ -218,7 +218,7 @@
 }
 
 .common {
-  & .buttonClass {
+  & .button {
     position: relative;
     z-index: var(--ring-button-group-default-z-index);
 

package/components/button-toolbar/button-toolbar.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value button as buttonClass from '../button/button.css';
+@value button from '../button/button.css';
 
 .buttonToolbar {
   display: inline-block;
@@ -13,7 +13,7 @@
 
 .buttonToolbar > button,
 .buttonToolbar > :global(.ring-button-group),
-.buttonToolbar > .buttonClass,
+.buttonToolbar > .button,
 .buttonToolbar > .buttonGroup,
 .buttonToolbar > .split,
 .buttonToolbar > .buttonToolbar {

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/collapse/collapse-content.js

@@ -1,30 +1,23 @@
-import React, { useState, useEffect, useRef, useContext } from 'react';
+import React, { useState, useEffect, useRef, use } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
+import { parseCssDuration } from '../global/parse-css-duration';
 import { toPx } from './utils';
 import CollapseContext from './collapse-context';
 import { COLLAPSE_CONTENT_TEST_ID, COLLAPSE_CONTENT_CONTAINER_TEST_ID } from './consts';
 import styles from './collapse.css';
-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.version.split('.')[0]));
 const isFullyCollapsed = (collapsed, initialContentHeight) => collapsed && initialContentHeight <= DEFAULT_HEIGHT;
 /**
  * @name CollapseContent
  */
 export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest, }) => {
-    const { collapsed, duration, id, disableAnimation, keepMounted } = useContext(CollapseContext);
+    const { collapsed, duration, id, animate, disableAnimation, keepMounted } = use(CollapseContext);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
     const [initialContentHeight] = useState(minHeight);
@@ -51,8 +44,7 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
         // Armed once per collapse toggle from the --duration committed to the DOM — the value
         // the running transition actually uses — so it can neither undercut a transition started
         // from a stale height nor be restarted by content resizes or duration changes mid-collapse
-        // TODO merge with global/parse-css-duration when this lands in develop-8.0
-        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);
@@ -77,9 +69,8 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
             observer.observe(contentRef.current);
         }
     }, []);
-    const calculatedDuration = duration + contentHeight * DURATION_FACTOR;
     const style = {
-        '--duration': `${calculatedDuration}ms`,
+        '--duration': `${duration}ms`,
         height,
         opacity: collapsed && !minHeight ? HIDDEN : VISIBLE,
     };
@@ -91,12 +82,12 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
     // This includes a minHeight preview: content clipped below it must not take focus,
     // and inert cannot be applied any more granularly than to the whole subtree
     const contentInert = collapsed;
-    return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
+    return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: animate && !disableAnimation })} style={style}>
       <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)} 
     // visibility: hidden removes the fully collapsed content from the tab order and accessibility
     // tree, but descendants can override it with visibility: visible — inert cannot be escaped.
     // Both are rendered in JSX so server-rendered collapsed markup is protected before hydration.
-    style={contentHidden ? { visibility: 'hidden' } : undefined} inert={contentInert ? INERT : undefined}>
+    style={contentHidden ? { visibility: 'hidden' } : undefined} inert={contentInert}>
         {keepMounted || contentVisible ? children : null}
       </div>
       {fadeShouldBeVisible && <div className={styles.fade}/>}

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

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

package/components/collapse/collapse-control.js

@@ -1,4 +1,4 @@
-import { useContext, cloneElement } from 'react';
+import { use, cloneElement } from 'react';
 import * as React from 'react';
 import dataTests from '../global/data-tests';
 import { CollapseContext } from './collapse-context';
@@ -7,7 +7,7 @@ import { COLLAPSE_CONTROL_TEST_ID } from './consts';
  * @name CollapseControl
  */
 export const CollapseControl = ({ children, 'data-test': dataTest }) => {
-    const { setCollapsed, collapsed, id } = useContext(CollapseContext);
+    const { setCollapsed, collapsed, id } = use(CollapseContext);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const child = typeof children === 'function' ? children(collapsed) : children;
     return (<p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>

package/components/collapse/collapse.css

@@ -7,8 +7,14 @@
 
 .transition {
   transition:
-    height var(--duration) ease-in-out 0s,
-    opacity var(--duration) ease-in-out 0s;
+    height var(--duration) cubic-bezier(0.2, 0, 0, 1) 0s,
+    opacity var(--duration) cubic-bezier(0.2, 0, 0, 1) 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .transition {
+    transition: none;
+  }
 }
 
 .summary {

package/components/collapse/collapse.js

@@ -9,21 +9,29 @@ export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disable
     const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
     const id = useId();
     const finalCollapsedValue = collapsed ?? innerCollapsed;
+    const [previousCollapsedValue, setPreviousCollapsedValue] = useState(finalCollapsedValue);
+    const [animate, setAnimate] = useState(false);
+    if (previousCollapsedValue !== finalCollapsedValue) {
+        setPreviousCollapsedValue(finalCollapsedValue);
+        setAnimate(true);
+    }
     const setCollapsed = () => {
+        setAnimate(true);
         setInnerCollapsed(!finalCollapsedValue);
         onChange(!finalCollapsedValue);
     };
     return (<div className={className}>
-      <CollapseContext.Provider value={{
+      <CollapseContext value={{
             collapsed: finalCollapsedValue,
             setCollapsed,
             duration,
+            animate,
             disableAnimation,
             keepMounted,
             id,
         }}>
         {children}
-      </CollapseContext.Provider>
+      </CollapseContext>
     </div>);
 };
 export default Collapse;

package/components/collapsible-group/collapsible-group.css

@@ -25,7 +25,7 @@
   box-shadow: var(--ring-popup-shadow);
 }
 
-.focused {
+.expand:has(.headerButton:focus-visible) {
   box-shadow: 0 0 0 2px var(--ring-border-hover-color), var(--ring-popup-shadow);
 }
 

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;