@jetbrains/ring-ui 8.0.0-beta.1 → 8.0.0-beta.3

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/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/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 } 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 };
@@ -69,13 +68,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/expand/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;
@@ -12,5 +13,8 @@ export interface CollapsibleGroupProps {
     interactive?: boolean;
     '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, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
+    displayName: string;
+};
 export default CollapsibleGroup;

package/components/expand/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,7 +36,7 @@ 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, 'data-test': dataTest, }, ref) => {
+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);
@@ -61,13 +61,13 @@ const CollapsibleGroup = forwardRef(({ avatar, title, subtitle, children, classN
         [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>);
-});
+      <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/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/intersection-observer-context.d.ts

@@ -3,9 +3,9 @@ import { type RefObject } from 'react';
  * Usage:
  *
  * ```tsx
- * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
  *   <YourComponent />
- * </IntersectionObserverContext.Provider>
+ * </IntersectionObserverContext>
  *
  * function YourComponent() {
  *   // Contains the current isIntersecting value

package/components/global/intersection-observer-context.js

@@ -1,11 +1,11 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, use, useEffect, useState } from 'react';
 /**
  * Usage:
  *
  * ```tsx
- * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
  *   <YourComponent />
- * </IntersectionObserverContext.Provider>
+ * </IntersectionObserverContext>
  *
  * function YourComponent() {
  *   // Contains the current isIntersecting value
@@ -51,7 +51,7 @@ export function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin)
     return handle;
 }
 export function useIsIntersecting(elementRef) {
-    const handle = useContext(IntersectionObserverContext);
+    const handle = use(IntersectionObserverContext);
     const [isIntersecting, setIsIntersecting] = useState(false);
     useEffect(() => {
         const element = elementRef.current;
@@ -62,7 +62,7 @@ export function useIsIntersecting(elementRef) {
     return isIntersecting;
 }
 export function useIsIntersectingListener(elementRef, onChange) {
-    const handle = useContext(IntersectionObserverContext);
+    const handle = use(IntersectionObserverContext);
     useEffect(() => {
         const element = elementRef.current;
         if (!element || !handle)

package/components/global/rerender-hoc.d.ts

@@ -1,4 +1,4 @@
-import { Component, type PropsWithoutRef } from 'react';
+import { Component, type Ref, type PropsWithoutRef } from 'react';
 export interface RerenderableComponent<P, S> extends Component<P, S> {
     node?: HTMLElement | null;
 }
@@ -7,4 +7,6 @@ export interface RerenderableComponentClass<P, S> {
 }
 export default function rerenderHOC<P extends {}, C extends Component<P, unknown>>(ComposedComponent: {
     new (props: P): C;
-}): import("react").ForwardRefExoticComponent<PropsWithoutRef<P> & import("react").RefAttributes<C>>;
+}): ({ ref, ...props }: PropsWithoutRef<P> & {
+    ref?: Ref<C>;
+}) => import("react").JSX.Element;

package/components/global/rerender-hoc.js

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from 'react';
+import { Component } from 'react';
 import { createComposedRef } from './compose-refs';
 export default function rerenderHOC(ComposedComponent) {
     class Rerenderer extends Component {
@@ -9,7 +9,7 @@ export default function rerenderHOC(ComposedComponent) {
             return (<ComposedComponent {...this.state} ref={instance => ref(instance ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
         }
     }
-    return forwardRef(function RerendererForwardRef(props, ref) {
-        return <Rerenderer props={props} forwardedRef={ref}/>;
-    });
+    return function RerendererForwardRef({ ref, ...props }) {
+        return <Rerenderer props={props} forwardedRef={ref ?? null}/>;
+    };
 }

package/components/{legacy-table/selection.d.ts → global/table-selection.d.ts}

@@ -17,7 +17,7 @@ export interface CloneWithConfig<T> {
     selected?: Set<T> | readonly T[] | null | undefined;
     focused?: T | null | undefined;
 }
-export default class Selection<T> {
+export default class TableSelection<T> {
     protected _rawData: readonly T[];
     protected _getChildren: (item: T) => readonly T[];
     protected _data: Set<T>;
@@ -28,19 +28,19 @@ export default class Selection<T> {
     constructor({ data, selected, focused, getKey, getChildren, isItemSelectable, }?: TableSelectionConfig<T>);
     protected _buildData(data: readonly T[] | null | undefined): Set<T>;
     protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
-    cloneWith({ data, selected, focused }: CloneWithConfig<T>): Selection<T>;
-    focus(value: T | null | undefined): Selection<T>;
-    moveUp(): Selection<T> | undefined;
-    moveDown(): Selection<T> | undefined;
-    moveStart(): Selection<T> | undefined;
-    moveEnd(): Selection<T> | undefined;
-    select(value?: T | null): Selection<T>;
-    deselect(value?: T | null): Selection<T>;
-    toggleSelection(value?: T | null): Selection<T>;
-    selectAll(): Selection<T>;
-    resetFocus(): Selection<T>;
-    resetSelection(): Selection<T>;
-    reset(): Selection<T>;
+    cloneWith({ data, selected, focused }: CloneWithConfig<T>): TableSelection<T>;
+    focus(value: T | null | undefined): TableSelection<T>;
+    moveUp(): TableSelection<T> | undefined;
+    moveDown(): TableSelection<T> | undefined;
+    moveStart(): TableSelection<T> | undefined;
+    moveEnd(): TableSelection<T> | undefined;
+    select(value?: T | null): TableSelection<T>;
+    deselect(value?: T | null): TableSelection<T>;
+    toggleSelection(value?: T | null): TableSelection<T>;
+    selectAll(): TableSelection<T>;
+    resetFocus(): TableSelection<T>;
+    resetSelection(): TableSelection<T>;
+    reset(): TableSelection<T>;
     isFocused(value: T | null): boolean;
     isSelected(value: T | null): boolean;
     getFocused(): T | null;

package/components/{legacy-table/selection.js → global/table-selection.js}

@@ -1,7 +1,7 @@
 /**
  * @deprecated SelectionItem is deprecated. Use your own item type and provide a `getKey` function instead if there is no `id` identifier in your item type.
  */
-export default class Selection {
+export default class TableSelection {
     _rawData;
     _getChildren;
     _data;

package/components/global/theme.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement, type FunctionComponent } from 'react';
+import { type HTMLAttributes, type Ref, type ReactElement, type FunctionComponent } from 'react';
 declare enum Theme {
     AUTO = "auto",
     LIGHT = "light",
@@ -18,11 +18,12 @@ export interface WithThemeClassesProps {
 export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
 type WrapperType = FunctionComponent<HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+export interface ThemeProviderProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
     theme?: Theme;
     passToPopups?: boolean;
     WrapperComponent?: WrapperType;
     target?: HTMLElement;
 }
-export declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLElement>>;
+export declare function ThemeProvider({ ref, ...props }: ThemeProviderProps): import("react").JSX.Element;
 export default Theme;

package/components/global/theme.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, forwardRef, createContext, } from 'react';
+import { useState, useEffect, createContext, } from 'react';
 import classNames from 'classnames';
 import defaultStyles from './variables.css';
 import styles from './variables_dark.css';
@@ -47,9 +47,9 @@ export function applyTheme(theme, container) {
         container.classList.add(defaultStyles.light);
     }
 }
-const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
-    return <div {...props} ref={ref}/>;
-});
+function DefaultWrapper(props) {
+    return <div {...props}/>;
+}
 function ThemeProviderInner({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, wrapperRef, ...restProps }) {
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
@@ -60,13 +60,13 @@ function ThemeProviderInner({ theme = Theme.AUTO, className, passToPopups, child
         }
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
-    return (<ThemeContext.Provider value={themeValue}>
+    return (<ThemeContext value={themeValue}>
       <WrapperComponent ref={wrapperRef} className={target ? undefined : classNames(className, themeClasses)} {...restProps}>
         {children}
       </WrapperComponent>
-    </ThemeContext.Provider>);
+    </ThemeContext>);
 }
-export const ThemeProvider = forwardRef(function ThemeProvider(props, ref) {
+export function ThemeProvider({ ref, ...props }) {
     return <ThemeProviderInner {...props} wrapperRef={ref}/>;
-});
+}
 export default Theme;

package/components/i18n/i18n-context.js

@@ -9,5 +9,5 @@ export const I18nContextHolder = ({ children, messages }) => {
     useEffect(() => {
         setTranslations(messages);
     }, [messages]);
-    return <I18nContext.Provider value={{ messages, translate }}>{children}</I18nContext.Provider>;
+    return <I18nContext value={{ messages, translate }}>{children}</I18nContext>;
 };