@jetbrains/ring-ui 8.0.0-beta.2 → 8.0.0-beta.4

package/babel.config.js

@@ -8,7 +8,7 @@ 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',
         },
       ],

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/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,4 +1,4 @@
-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';
@@ -14,7 +14,7 @@ const HIDDEN = 0;
  * @name CollapseContent
  */
 export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest, }) => {
-    const { collapsed, duration, id, disableAnimation } = useContext(CollapseContext);
+    const { collapsed, duration, id, disableAnimation } = use(CollapseContext);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
     const [initialContentHeight] = useState(minHeight);

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.js

@@ -14,7 +14,7 @@ export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disable
         onChange(!finalCollapsedValue);
     };
     return (<div className={className}>
-      <CollapseContext.Provider value={{
+      <CollapseContext value={{
             collapsed: finalCollapsedValue,
             setCollapsed,
             duration,
@@ -22,7 +22,7 @@ export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disable
             id,
         }}>
         {children}
-      </CollapseContext.Provider>
+      </CollapseContext>
     </div>);
 };
 export default Collapse;

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

@@ -0,0 +1,138 @@
+@import '../global/variables.css';
+
+.expand .collapseRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.expand {
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--ring-line-color);
+  border-radius: var(--ring-border-radius-large);
+  outline: none;
+  background: var(--ring-content-background-color);
+}
+
+.hovered {
+  box-shadow: var(--ring-popup-shadow);
+}
+
+.expanded {
+  box-shadow: var(--ring-popup-shadow);
+}
+
+.focused {
+  box-shadow: 0 0 0 2px var(--ring-border-hover-color), var(--ring-popup-shadow);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 1.5);
+
+  height: 28px;
+}
+
+.headerButton {
+  display: block;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: calc(var(--ring-unit) * 1.5);
+
+  cursor: pointer;
+  text-align: left;
+
+  color: inherit;
+
+  border: 0;
+  background: transparent;
+
+  font: inherit;
+}
+
+.headerButton:focus-visible {
+  outline: none;
+}
+
+.headerStatic {
+  display: block;
+
+  padding: calc(var(--ring-unit) * 1.5);
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  flex: 1;
+
+  min-width: 0;
+}
+
+.avatarGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  flex-shrink: 0;
+}
+
+.title {
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  font-weight: var(--ring-font-weight-bold);
+  line-height: var(--ring-line-height);
+}
+
+.subtitleGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  min-width: 0;
+}
+
+.subtitle {
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.subtitleChevron {
+  color: var(--ring-secondary-color);
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+
+  flex-shrink: 0;
+  justify-content: center;
+
+  width: calc(var(--ring-unit) * 3);
+  height: calc(var(--ring-unit) * 3);
+
+  border-radius: calc(var(--ring-unit) / 2);
+  background: var(--ring-secondary-background-color);
+}
+
+.toggleIcon {
+  color: var(--ring-secondary-color);
+}
+
+.body {
+  padding: 0 calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 1.5);
+
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface CollapsibleGroupProps {
+    ref?: React.Ref<HTMLDivElement>;
+    avatar?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string | null | undefined;
+    defaultExpanded?: boolean;
+    expanded?: boolean | null | undefined;
+    onChange?: (expanded: boolean) => void;
+    disableAnimation?: boolean;
+    interactive?: boolean;
+    '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;
+    displayName: string;
+};
+export default CollapsibleGroup;

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

@@ -0,0 +1,73 @@
+import React, { use, useState } from 'react';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-12px-down';
+import Icon from '../icon/icon';
+import Collapse from '../collapse/collapse';
+import CollapseContent from '../collapse/collapse-content';
+import { CollapseContext } from '../collapse/collapse-context';
+import styles from './collapsible-group.css';
+function CollapsibleGroupHeaderContent({ avatar, titleContent, subtitle }) {
+    const { collapsed } = use(CollapseContext);
+    return (<span className={styles.header}>
+      <span className={styles.headerContent}>
+        <span className={styles.avatarGroup}>
+          {avatar}
+          <span className={styles.title}>{titleContent}</span>
+        </span>
+        {subtitle ? (<span className={styles.subtitleGroup}>
+            <Icon className={styles.subtitleChevron} glyph={chevronRightIcon} aria-hidden/>
+            <span className={styles.subtitle}>{subtitle}</span>
+          </span>) : null}
+      </span>
+      <span className={styles.toggle} aria-hidden>
+        <Icon className={styles.toggleIcon} glyph={collapsed ? chevronRightIcon : chevronDownIcon}/>
+      </span>
+    </span>);
+}
+function CollapsibleGroupHeader({ avatar, titleContent, subtitle, ...buttonProps }) {
+    const { setCollapsed, collapsed, id } = use(CollapseContext);
+    return (<button type='button' {...buttonProps} className={styles.headerButton} onClick={setCollapsed} aria-controls={`collapse-content-${id}`} aria-expanded={!collapsed}>
+      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
+    </button>);
+}
+function CollapsibleGroupHeaderStatic({ avatar, titleContent, subtitle }) {
+    return (<span className={styles.headerStatic}>
+      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
+    </span>);
+}
+const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, 'data-test': dataTest, }) => {
+    const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const isExpanded = expanded ?? innerExpanded;
+    const handleChange = (collapsed) => {
+        const nextExpanded = !collapsed;
+        if (expanded == null) {
+            setInnerExpanded(nextExpanded);
+        }
+        onChange(nextExpanded);
+    };
+    const onBlur = (event) => {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+            return;
+        }
+        setFocused(false);
+    };
+    const classes = classNames(styles.expand, className, {
+        [styles.hovered]: hovered,
+        [styles.expanded]: isExpanded,
+        [styles.focused]: focused,
+    });
+    return (<div ref={ref} className={classes} data-test={dataTest}>
+      <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} className={styles.collapseRoot}>
+        {interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={onBlur}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>)}
+        <CollapseContent>
+          <div className={styles.body}>{children}</div>
+        </CollapseContent>
+      </Collapse>
+    </div>);
+};
+CollapsibleGroup.displayName = 'CollapsibleGroup';
+export default CollapsibleGroup;

package/components/confirm-service/confirm-service.js

@@ -8,9 +8,9 @@ export const reactRoot = createRoot(containerElement);
  */
 function renderConfirm(props) {
     const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
-    reactRoot.render(<ControlsHeightContext.Provider value={buttonsHeight}>
+    reactRoot.render(<ControlsHeightContext value={buttonsHeight}>
       <Confirm {...restProps}/>
-    </ControlsHeightContext.Provider>);
+    </ControlsHeightContext>);
 }
 export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight, }) {
     return new Promise((resolve, reject) => {

package/components/data-list/data-list.d.ts

@@ -5,7 +5,7 @@ import { Component } from 'react';
 import { type FocusSensorOuterProps } from '../global/focus-sensor-hoc';
 import { type SelectionShortcutsAddProps, type SelectionShortcutsOuterProps } from '../legacy-table/selection-shortcuts-hoc';
 import { type DisableHoverAddProps } from '../legacy-table/disable-hover-hoc';
-import { type SelectionItem } from '../legacy-table/selection';
+import { type SelectionItem } from '../global/table-selection';
 import { type FormattedItem, moreLessButtonStates } from './item';
 export interface DataListBaseProps<T extends SelectionItem> {
     data: readonly T[];

package/components/data-list/data-list.mock.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type SelectionItem } from '../legacy-table/selection';
+import { type SelectionItem } from '../global/table-selection';
 export interface Item extends SelectionItem {
     title: ReactNode;
     collapsible?: boolean;

package/components/data-list/item.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent, type ReactNode } from 'react';
-import { type SelectionItem } from '../legacy-table/selection';
+import { type SelectionItem } from '../global/table-selection';
 import type Selection from './selection';
 export declare enum moreLessButtonStates {
     UNUSED = 0,

package/components/data-list/selection.d.ts

@@ -1,4 +1,4 @@
-import TableSelection, { type CloneWithConfig, type SelectionItem, type TableSelectionConfig } from '../legacy-table/selection';
+import TableSelection, { type CloneWithConfig, type SelectionItem, type TableSelectionConfig } from '../global/table-selection';
 interface DataListSelectionConfig<T extends SelectionItem> extends TableSelectionConfig<T> {
     partialSelected?: Set<T> | undefined;
 }

package/components/data-list/selection.js

@@ -1,4 +1,4 @@
-import TableSelection from '../legacy-table/selection';
+import TableSelection from '../global/table-selection';
 export default class Selection extends TableSelection {
     _partialSelected;
     constructor({ partialSelected = new Set(), ...props }) {

package/components/date-picker/months.js

@@ -29,9 +29,9 @@ const intersectionObserverRootMargin = units.cellSize * 2;
 export default function Months(props) {
     const { scrollDate, setScrollDate, locale } = props;
     const { containerRef, items } = useScrollBehavior(scrollDate, setScrollDate, locale, 'monthsScroll', scrollArith, scheduleScroll);
-    return (<IntersectionObserverContext.Provider value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
+    return (<IntersectionObserverContext value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
       <div className={styles.months} ref={containerRef} data-test='ring-date-popup--months'>
         {items.map(month => (<Month {...props} month={month} key={+month}/>))}
       </div>
-    </IntersectionObserverContext.Provider>);
+    </IntersectionObserverContext>);
 }

package/components/date-picker/use-scroll-behavior.js

@@ -1,11 +1,10 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from 'react';
 import units, { isSafariOnIPhone, scrollerReRenderDelayIPhone } from './consts';
-import useEventCallback from '../global/use-event-callback';
 export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDateSource, arith, scheduleScroll) {
     const [items, setItems] = useState(() => arith.getItems(scrollDate.date));
     const [scrollTop, setScrollTop] = useState(() => arith.getScrollTop(items, scrollDate.date, locale));
     const containerRef = useRef(null);
-    const syncSelfState = useEventCallback((newScrollDate) => {
+    const syncSelfState = useEffectEvent((newScrollDate) => {
         const newScrollTopOnExistingItems = arith.getScrollTop(items, newScrollDate, locale);
         if (isNearEdge(newScrollTopOnExistingItems, containerRef.current)) {
             const { newItems, newScrollTop } = arith.getItemsAndScrollTop(newScrollDate, locale);
@@ -28,7 +27,7 @@ export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScr
         if (scrollDate.source === selfScrollDateSource)
             return;
         syncSelfState(scrollDate.date);
-    }, [scrollDate, selfScrollDateSource, syncSelfState]);
+    }, [scrollDate, selfScrollDateSource]);
     const ignoreNextScrollEventRef = useRef(true);
     useLayoutEffect(function setContainerScrollFromState() {
         const container = containerRef.current;
@@ -38,7 +37,7 @@ export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScr
         container.scrollTop = scrollTop;
     }, [items, scrollTop]);
     const updateStateTimerRef = useRef(null);
-    const handleScroll = useEventCallback(() => {
+    const handleScroll = useEffectEvent(() => {
         scheduleScroll(() => {
             if (updateStateTimerRef.current != null) {
                 window.clearTimeout(updateStateTimerRef.current);
@@ -83,7 +82,7 @@ export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScr
                 updateStateTimerRef.current = null;
             }
         };
-    }, [handleScroll]);
+    }, []);
     return { containerRef, items };
 }
 function isNearEdge(scrollTop, container) {

package/components/date-picker/years.js

@@ -87,11 +87,11 @@ export default function Years({ scrollDate, setScrollDate }) {
         }, yearsAnimationDuration);
     }, [localScrollDate.date, setScrollDate]);
     const { containerRef, items } = useScrollBehavior(localScrollDate, syncCalendarScrollDate, undefined, 'yearsScroll', scrollArith, scheduleScroll);
-    return (<IntersectionObserverContext.Provider value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
+    return (<IntersectionObserverContext value={useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin)}>
       <div className={styles.years} ref={containerRef} data-test='ring-date-popup--years'>
         {items.map(year => (<Year year={year} scrollDate={localScrollDate.date} handleYearClick={handleYearClick} key={+year}/>))}
       </div>
-    </IntersectionObserverContext.Provider>);
+    </IntersectionObserverContext>);
 }
 function Year({ year, scrollDate, handleYearClick, }) {
     const buttonRef = useRef(null);

package/components/dialog/dialog.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
-import TabTrap, { type TabTrapProps } from '../tab-trap/tab-trap';
+import { type TabTrapObject, type TabTrapProps } from '../tab-trap/tab-trap';
 import type { ShortcutsScopeOptions } from '../shortcuts/core';
 export interface DialogProps extends Partial<TabTrapProps> {
     show: boolean;
@@ -43,7 +43,7 @@ export default class Dialog extends PureComponent<DialogProps> {
         esc: (event: KeyboardEvent) => void;
     };
     dialog?: HTMLElement | null;
-    dialogRef: (tabTrap: TabTrap | null) => void;
+    dialogRef: (tabTrapObj: TabTrapObject | null) => void;
     nativeDialog: React.RefObject<HTMLDialogElement | null>;
     render(): false | React.JSX.Element;
 }

package/components/dialog/dialog.js

@@ -104,8 +104,8 @@ export default class Dialog extends PureComponent {
         };
     };
     dialog;
-    dialogRef = (tabTrap) => {
-        this.dialog = tabTrap && tabTrap.node;
+    dialogRef = (tabTrapObj) => {
+        this.dialog = tabTrapObj && tabTrapObj.node;
     };
     nativeDialog = createRef();
     render() {

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type HTMLAttributes, type SyntheticEvent, type Ref, type ReactNode } from 'react';
+import { type ReactElement, type HTMLAttributes, type SyntheticEvent, type ReactNode } from 'react';
 import { type SelectHandlerParams } from '../list/list';
 import { type AnchorProps, type DropdownAttrs, type DropdownChildrenFunction } from '../dropdown/dropdown';
 import PopupMenu, { type PopupMenuAttrs } from '../popup-menu/popup-menu';
@@ -10,6 +10,7 @@ export interface DropdownAnchorWrapperProps extends AnchorProps {
 }
 type OnSelectHandler<T> = ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
 export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
+    ref?: React.Ref<PopupMenu<T> | null>;
     anchor: ReactElement | ReactNode[] | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
     data?: readonly ListDataItem<T>[] | undefined;
     ariaLabel?: string | null | undefined;
@@ -17,9 +18,8 @@ export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anc
     menuProps?: PopupMenuAttrs<T> | null | undefined;
     children?: DropdownChildrenFunction;
 }
-declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
-    ref?: Ref<PopupMenu>;
-}) => ReactElement | null) & {
+declare function DropdownMenu<T = unknown>({ ref, id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }: DropdownMenuProps<T>): import("react").JSX.Element;
+declare const _default: typeof DropdownMenu & {
     ListProps: {
         Type: typeof import("../list/consts").Type;
         Dimension: {

package/components/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { forwardRef, cloneElement, useState, } from 'react';
+import { cloneElement, useState, } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
 import PopupMenu from '../popup-menu/popup-menu';
@@ -31,11 +31,11 @@ function renderDropdownMenuChildren({ children, popupMenuProps }) {
     }
     return (popupProps) => children({ ...popupProps, ...popupMenuProps });
 }
-const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }, forwardedRef) {
+function DropdownMenu({ ref, id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }) {
     const [uid] = useState(() => getUID('dropdown-menu-list'));
     const listId = id || uid;
     const popupMenuProps = {
-        ref: forwardedRef,
+        ref,
         id: listId,
         ariaLabel: ariaLabel || defaultAriaLabel,
         closeOnSelect: true,
@@ -51,5 +51,5 @@ const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, d
         {renderDropdownMenuChildren({ children, popupMenuProps })}
       </Dropdown>
     </ActiveItemContext.Provider>);
-});
+}
 export default Object.assign(DropdownMenu, { ListProps: List.ListProps });

package/components/editable-heading/editable-heading.d.ts

@@ -29,5 +29,4 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | H
     translations?: EditableHeadingTranslations;
 };
 export declare const EditableHeading: (props: EditableHeadingProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => React.JSX.Element>;
-export default _default;
+export default EditableHeading;

package/components/editable-heading/editable-heading.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useEffectEvent, useLayoutEffect } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
@@ -6,7 +6,6 @@ import Button from '../button/button';
 import { Size } from '../input/input';
 import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
-import useEventCallback from '../global/use-event-callback';
 import inputStyles from '../input/input.css';
 import styles from './editable-heading.css';
 export { Levels };
@@ -46,36 +45,30 @@ export const EditableHeading = (props) => {
     });
     const headingClasses = classNames(styles.heading, headingClassName, size !== Size.AUTO && styles[`size${size}`]);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, size !== Size.AUTO && inputStyles[`size${size}`], level !== Levels.H4 && styles[`level${level}`], inputClassName);
-    const stretch = (el) => {
-        if (!el || !el.style) {
-            return;
-        }
-        el.style.height = '0';
-        const { paddingTop, paddingBottom } = window.getComputedStyle(el);
-        el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
-    };
-    const checkValue = (el) => {
+    const checkValue = React.useCallback((el) => {
         if (multiline && el && el.scrollHeight >= el.clientHeight) {
-            stretch(el);
+            el.style.height = '0';
+            const { paddingTop, paddingBottom } = window.getComputedStyle(el);
+            el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
         }
-    };
-    const checkOverflow = (el) => {
+    }, [multiline]);
+    const checkOverflow = React.useCallback((el) => {
         const scrollHeight = el.scrollHeight || 0;
         const clientHeight = el.clientHeight || 0;
         const scrollTop = el.scrollTop || 0;
         setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
         setIsOverflow(scrollHeight > clientHeight);
-    };
+    }, []);
     const onHeadingMouseDown = () => {
         setIsMouseDown(true);
     };
-    const onMouseMove = useEventCallback(() => {
+    const onMouseMove = useEffectEvent(() => {
         if (!isMouseDown) {
             return;
         }
         setIsInSelectionMode(true);
     });
-    const onMouseUp = useEventCallback(() => {
+    const onMouseUp = useEffectEvent(() => {
         if (isMouseDown && !isInSelectionMode && !disabled) {
             onEdit();
         }
@@ -101,6 +94,12 @@ export const EditableHeading = (props) => {
         setIsInFocus(false);
         onBlur?.(e);
     };
+    useLayoutEffect(() => {
+        if (multiline && isEditing && textAreaRef.current) {
+            checkValue(textAreaRef.current);
+            checkOverflow(textAreaRef.current);
+        }
+    }, [checkOverflow, checkValue, isEditing, multiline]);
     useEffect(() => {
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('mouseup', onMouseUp);
@@ -108,7 +107,7 @@ export const EditableHeading = (props) => {
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
         };
-    }, [onMouseMove, onMouseUp]);
+    }, []);
     return (<>
       <div className={classes}>
         {!disabled && isEditing ? (<>
@@ -140,4 +139,4 @@ export const EditableHeading = (props) => {
       {isEditing && error && (<div className={classNames(styles.errorText, size !== Size.AUTO && inputStyles[`size${size}`])}>{error}</div>)}
     </>);
 };
-export default React.memo(EditableHeading);
+export default EditableHeading;