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

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext, useState } from 'react';
+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';
@@ -8,7 +8,7 @@ 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 } = useContext(CollapseContext);
+    const { collapsed } = use(CollapseContext);
     return (<span className={styles.header}>
       <span className={styles.headerContent}>
         <span className={styles.avatarGroup}>
@@ -26,7 +26,7 @@ function CollapsibleGroupHeaderContent({ avatar, titleContent, subtitle }) {
     </span>);
 }
 function CollapsibleGroupHeader({ avatar, titleContent, subtitle, ...buttonProps }) {
-    const { setCollapsed, collapsed, id } = useContext(CollapseContext);
+    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>);
@@ -36,10 +36,9 @@ function CollapsibleGroupHeaderStatic({ avatar, titleContent, subtitle }) {
       <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
     </span>);
 }
-const CollapsibleGroup = forwardRef(({ avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, keepMounted = false, headingLevel, 'data-test': dataTest, }, ref) => {
+const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, keepMounted = false, headingLevel, '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;
@@ -48,27 +47,19 @@ const CollapsibleGroup = forwardRef(({ avatar, title, subtitle, children, classN
         }
         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,
     });
-    const header = 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}/>);
+    const header = interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>);
     return (<div ref={ref} className={classes} data-test={dataTest}>
-        <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} keepMounted={keepMounted} className={styles.collapseRoot}>
-          {headingLevel != null ? React.createElement(`h${headingLevel}`, { className: styles.heading }, header) : header}
-          <CollapseContent>
-            <div className={styles.body}>{children}</div>
-          </CollapseContent>
-        </Collapse>
-      </div>);
-});
+      <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} keepMounted={keepMounted} className={styles.collapseRoot}>
+        {headingLevel != null ? React.createElement(`h${headingLevel}`, { className: styles.heading }, header) : header}
+        <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/contenteditable/contenteditable.js

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { getTrustedHTML } from '../global/configuration';
 /**
  * @name ContentEditable
  */
@@ -24,7 +23,7 @@ class ContentEditableBase extends Component {
         return (<div {...props} ref={inputRef} 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        disabled={disabled} role='textbox' tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html: getTrustedHTML(__html) }}/>);
+        disabled={disabled} role='textbox' tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html }}/>);
     }
 }
 const ContentEditable = ({ children, ...props }) => (<ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>);

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

@@ -3,9 +3,9 @@
  */
 import { Component } from 'react';
 import { type FocusSensorOuterProps } from '../global/focus-sensor-hoc';
-import { type SelectionShortcutsAddProps, type SelectionShortcutsOuterProps } from '../table/selection-shortcuts-hoc';
-import { type DisableHoverAddProps } from '../table/disable-hover-hoc';
-import { type SelectionItem } from '../table/selection';
+import { type SelectionShortcutsAddProps, type SelectionShortcutsOuterProps } from '../legacy-table/selection-shortcuts-hoc';
+import { type DisableHoverAddProps } from '../legacy-table/disable-hover-hoc';
+import { type SelectionItem } from '../global/table-selection';
 import { type FormattedItem, moreLessButtonStates } from './item';
 export interface DataListBaseProps<T extends SelectionItem> {
     data: readonly T[];
@@ -20,7 +20,7 @@ export interface DataListBaseProps<T extends SelectionItem> {
 type FocusableProps<T extends SelectionItem> = DataListBaseProps<T> & DisableHoverAddProps & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsAddProps<T>;
 export type DataListContainerProps<T extends SelectionItem> = DataListBaseProps<T> & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsOuterProps<T>;
 export default class DataListContainer<T extends SelectionItem> extends Component<DataListContainerProps<T>> {
-    DataList: import("react").ComponentClass<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>, any>;
+    DataList: import("react").ComponentClass<import("../legacy-table/disable-hover-hoc").DisableHoverProps<import("../legacy-table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>, any>;
     render(): import("react").JSX.Element;
 }
 export {};

package/components/data-list/data-list.js

@@ -4,8 +4,8 @@
 import { PureComponent, Component } from 'react';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc';
-import selectionShortcutsHOC from '../table/selection-shortcuts-hoc';
-import disableHoverHOC from '../table/disable-hover-hoc';
+import selectionShortcutsHOC from '../legacy-table/selection-shortcuts-hoc';
+import disableHoverHOC from '../legacy-table/disable-hover-hoc';
 import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
 import Loader from '../loader/loader';

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type SelectionItem } from '../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 '../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 '../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 '../table/selection';
+import TableSelection from '../global/table-selection';
 export default class Selection extends TableSelection {
     _partialSelected;
     constructor({ partialSelected = new Set(), ...props }) {

package/components/date-picker/month.d.ts

@@ -1,9 +1,7 @@
 import { type Locale } from 'date-fns';
 import { type MonthsProps } from './consts';
-import { type IntersectionObserverHandle } from './use-intersection-observer';
 export interface MonthProps extends MonthsProps {
     month: Date;
-    intersectionObserverHandle: IntersectionObserverHandle | null;
 }
 export default function Month(props: MonthProps): import("react").JSX.Element;
 export declare function getMonthHeight(monthStart: Date | number, locale: Locale | undefined): number;

package/components/date-picker/month.js

@@ -4,14 +4,14 @@ import { getDaysInMonth, setDate } from 'date-fns';
 import { useRef } from 'react';
 import Day from './day';
 import units, { WEEK, getWeekStartsOn } from './consts';
-import { useVisibility } from './use-intersection-observer';
+import { useIsIntersecting } from '../global/intersection-observer-context';
 import styles from './date-picker.css';
 export default function Month(props) {
-    const { month, locale, intersectionObserverHandle } = props;
+    const { month, locale } = props;
     const containerRef = useRef(null);
-    const visible = useVisibility(intersectionObserverHandle, containerRef);
-    return (<div className={styles.month} ref={containerRef} style={visible ? {} : { height: getMonthHeight(month, locale) }}>
-      {visible && (<>
+    const isIntersecting = useIsIntersecting(containerRef);
+    return (<div className={styles.month} ref={containerRef} style={isIntersecting ? {} : { height: getMonthHeight(month, locale) }}>
+      {isIntersecting && (<>
           <span className={styles.monthTitle}>{format(month, 'LLLL', { locale })}</span>
 
           {Array.from({ length: getPaddingCellsNum(month, locale) }, (_, i) => (<Day {...props} day={new Date(0)} empty key={`e_${i}`}/>))}

package/components/date-picker/months.js

@@ -5,7 +5,7 @@ import units from './consts';
 import { ScrollArith } from './scroll-arith';
 import { useScrollBehavior } from './use-scroll-behavior';
 import scheduleRAF from '../global/schedule-raf';
-import { useIntersectionObserver } from './use-intersection-observer';
+import { useIntersectionObserverHandle, IntersectionObserverContext } from '../global/intersection-observer-context';
 import styles from './date-picker.css';
 function getMonthHeightWithMargin(date, locale) {
     return units.unit * 2 + getMonthHeight(date, locale);
@@ -23,14 +23,15 @@ const scheduleScroll = scheduleRAF();
  *
  * To avoid an unpainted gap at the viewport boundary, the next month must be reported
  * as visible slightly before it actually enters the viewport. We achieve this by
- * extending the IntersectionObserver scrollMargin.
+ * extending the IntersectionObserver rootMargin.
  */
-const intersectionObserverScrollMargin = units.cellSize * 2;
+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);
-    const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
-    return (<div className={styles.months} ref={containerRef} data-test='ring-date-popup--months'>
-      {items.map(month => (<Month {...props} month={month} key={+month} intersectionObserverHandle={intersectionObserverHandle}/>))}
-    </div>);
+    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>);
 }

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

@@ -12,7 +12,7 @@ import { ScrollArith } from './scroll-arith';
 import { useScrollBehavior } from './use-scroll-behavior';
 import { animateDate } from './animate-date';
 import scheduleRAF from '../global/schedule-raf';
-import { useIntersectionObserver, useVisibility } from './use-intersection-observer';
+import { IntersectionObserverContext, useIntersectionObserverHandle, useIsIntersecting, } from '../global/intersection-observer-context';
 import styles from './date-picker.css';
 const { yearHeight } = units;
 const scrollArith = new ScrollArith({
@@ -25,7 +25,7 @@ const scheduleScroll = scheduleRAF();
 /**
  * Reduces "empty" years during fast scrolling.
  */
-const intersectionObserverScrollMargin = units.calHeight / 2;
+const intersectionObserverRootMargin = units.calHeight / 2;
 export default function Years({ scrollDate, setScrollDate }) {
     const [localScrollDate, setLocalScrollDate] = useState(scrollDate);
     const syncCleanupRef = useRef(null);
@@ -87,15 +87,16 @@ export default function Years({ scrollDate, setScrollDate }) {
         }, yearsAnimationDuration);
     }, [localScrollDate.date, setScrollDate]);
     const { containerRef, items } = useScrollBehavior(localScrollDate, syncCalendarScrollDate, undefined, 'yearsScroll', scrollArith, scheduleScroll);
-    const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
-    return (<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} intersectionObserverHandle={intersectionObserverHandle}/>))}
-    </div>);
+    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>);
 }
-function Year({ year, scrollDate, handleYearClick, intersectionObserverHandle, }) {
+function Year({ year, scrollDate, handleYearClick, }) {
     const buttonRef = useRef(null);
-    const visible = useVisibility(intersectionObserverHandle, buttonRef);
-    return (<button type='button' ref={buttonRef} key={+year} disabled={!visible} className={classNames(styles.year, visible && isSameYear(year, scrollDate) && styles.currentYear, visible && isThisYear(year) && styles.today)} onClick={visible ? () => handleYearClick(year) : undefined}>
-      {visible ? format(year, 'yyyy') : '\u00A0'}
+    const isIntersecting = useIsIntersecting(buttonRef);
+    return (<button type='button' ref={buttonRef} key={+year} disabled={!isIntersecting} className={classNames(styles.year, isIntersecting && isSameYear(year, scrollDate) && styles.currentYear, isIntersecting && isThisYear(year) && styles.today)} onClick={isIntersecting ? () => handleYearClick(year) : undefined}>
+      {isIntersecting ? format(year, 'yyyy') : '\u00A0'}
     </button>);
 }

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, useLayoutEffect } 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 };
@@ -63,13 +62,13 @@ export const EditableHeading = (props) => {
     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();
         }
@@ -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;

package/components/global/compose-refs.d.ts

@@ -1,2 +1,3 @@
 import { type Ref } from 'react';
-export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void>;
+export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => () => void>;
+export declare function useComposedRef<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;

package/components/global/compose-refs.js

@@ -1,14 +1,30 @@
+import { useMemo } from 'react';
 import memoizeOne from 'memoize-one';
 function composeRefs(...refs) {
-    return (value) => refs.forEach(ref => {
-        if (typeof ref === 'function') {
-            ref(value);
-        }
-        else if (ref) {
-            ref.current = value;
-        }
-    });
+    return (value) => {
+        const cleanups = [];
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                const cleanup = ref(value);
+                if (typeof cleanup === 'function') {
+                    cleanups.push(cleanup);
+                }
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        });
+        return () => cleanups.forEach(cleanup => cleanup());
+    };
 }
 export function createComposedRef() {
     return memoizeOne((composeRefs));
 }
+export function useComposedRef(...refs) {
+    /**
+     * The React Compiler doesn't allow non-literal arrays in useMemo
+     * dependency lists, so we still use memoizeOne under the hood.
+     */
+    const composer = useMemo(() => createComposedRef(), []);
+    return composer(...refs);
+}

package/components/global/configuration.d.ts

@@ -3,14 +3,9 @@ export declare enum ControlsHeight {
     M = "M",
     L = "L"
 }
-export interface RingUITrustedTypePolicy {
-    createHTML(html: string): TrustedHTML;
-}
 export interface RingUIConfiguration {
     controlsHeight?: ControlsHeight;
     popupsCssPositioning?: boolean;
-    trustedTypePolicy?: RingUITrustedTypePolicy | null;
 }
 export declare function configure(config: RingUIConfiguration): void;
 export declare function getConfiguration(): Required<RingUIConfiguration>;
-export declare function getTrustedHTML(html: string): string | TrustedHTML;

package/components/global/configuration.js

@@ -7,7 +7,6 @@ export var ControlsHeight;
 const globalConfiguration = {
     controlsHeight: ControlsHeight.M,
     popupsCssPositioning: true,
-    trustedTypePolicy: null,
 };
 export function configure(config) {
     if (config.controlsHeight !== undefined) {
@@ -16,13 +15,7 @@ export function configure(config) {
     if (config.popupsCssPositioning !== undefined) {
         globalConfiguration.popupsCssPositioning = config.popupsCssPositioning;
     }
-    if (config.trustedTypePolicy !== undefined) {
-        globalConfiguration.trustedTypePolicy = config.trustedTypePolicy;
-    }
 }
 export function getConfiguration() {
     return { ...globalConfiguration };
 }
-export function getTrustedHTML(html) {
-    return globalConfiguration.trustedTypePolicy?.createHTML(html) ?? html;
-}

package/components/global/create-stateful-context.js

@@ -1,16 +1,16 @@
-import { createContext, memo, useContext, useEffect, useState } from 'react';
+import { createContext, memo, use, useEffect, useState } from 'react';
 export default function createStatefulContext(initialValue, name = '') {
     const ValueContext = createContext(initialValue);
     const UpdateContext = createContext(() => { });
     function Provider({ children }) {
         const [value, update] = useState(initialValue);
-        return (<ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>{children}</UpdateContext.Provider>
-      </ValueContext.Provider>);
+        return (<ValueContext value={value}>
+        <UpdateContext value={update}>{children}</UpdateContext>
+      </ValueContext>);
     }
     Provider.displayName = `${name}Provider`;
     function useUpdate(value, skipUpdate) {
-        const update = useContext(UpdateContext);
+        const update = use(UpdateContext);
         useEffect(() => {
             if (!skipUpdate) {
                 update(value);

package/components/global/focus-with-temporary-tabindex.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+export declare function focusWithTemporaryTabIndex(element: HTMLElement): void;

package/components/global/focus-with-temporary-tabindex.js

@@ -0,0 +1,21 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+export function focusWithTemporaryTabIndex(element) {
+    if (!element.hasAttribute('tabindex')) {
+        element.tabIndex = 0;
+        function onBlur() {
+            element.removeAttribute('tabindex');
+            element.removeEventListener('blur', onBlur);
+        }
+        element.addEventListener('blur', onBlur);
+    }
+    element.focus();
+}