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

package/components/global/intersection-observer-context.d.ts

@@ -0,0 +1,46 @@
+import { type RefObject } from 'react';
+/**
+ * Provides access to a shared `IntersectionObserver` instance
+ * via the {@link IntersectionObserverContext} context.
+ *
+ * @see IntersectionObserverContext
+ */
+export interface IntersectionObserverHandle {
+    /**
+     * Starts observing an element.
+     *
+     * Returns a cleanup function that stops observing it.
+     */
+    observe(element: Element, isIntersecting: (isIntersecting: boolean) => void): () => void;
+}
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
+ *   <YourComponent />
+ * </IntersectionObserverContext>
+ *
+ * function YourComponent() {
+ *   // Contains the current isIntersecting value
+ *   const isIntersecting = useIsIntersecting(elementRef);
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
+ *   })
+ * }
+ * ```
+ */
+export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle>;
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
+export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle;
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
+export declare function useIsIntersecting(elementRef: RefObject<Element | null>): boolean;

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

@@ -0,0 +1,91 @@
+import { createContext, use, useEffect, useState } from 'react';
+/**
+ * @internal
+ */
+const noopIntersectionObserverHandle = {
+    observe: () => () => { },
+};
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
+ *   <YourComponent />
+ * </IntersectionObserverContext>
+ *
+ * function YourComponent() {
+ *   // Contains the current isIntersecting value
+ *   const isIntersecting = useIsIntersecting(elementRef);
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
+ *   })
+ * }
+ * ```
+ */
+export const IntersectionObserverContext = createContext(noopIntersectionObserverHandle);
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
+export function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
+    const [handle, setHandle] = useState(noopIntersectionObserverHandle);
+    useEffect(() => {
+        const root = rootRef?.current;
+        const callbacksByElement = new Map();
+        const observer = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const callbacks = callbacksByElement.get(entry.target);
+                callbacks?.forEach(cb => cb(entry.isIntersecting));
+            }
+        }, {
+            root,
+            rootMargin: rootMargin != null ? `${rootMargin}px` : undefined,
+            scrollMargin: scrollMargin != null ? `${scrollMargin}px` : undefined,
+        });
+        setHandle({
+            observe(element, onChange) {
+                if (!callbacksByElement.has(element)) {
+                    callbacksByElement.set(element, []);
+                    observer.observe(element);
+                }
+                callbacksByElement.get(element).push(onChange);
+                return () => {
+                    const callbacks = callbacksByElement.get(element);
+                    if (!callbacks)
+                        return;
+                    const index = callbacks.indexOf(onChange);
+                    if (index !== -1) {
+                        callbacks.splice(index, 1);
+                    }
+                    if (!callbacks.length) {
+                        callbacksByElement.delete(element);
+                        observer.unobserve(element);
+                    }
+                };
+            },
+        });
+        return () => {
+            observer.disconnect();
+            setHandle(noopIntersectionObserverHandle);
+        };
+    }, [rootRef, rootMargin, scrollMargin]);
+    return handle;
+}
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
+export function useIsIntersecting(elementRef) {
+    const handle = use(IntersectionObserverContext);
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        return handle.observe(element, setIsIntersecting);
+    }, [handle, elementRef]);
+    return isIntersecting;
+}

package/components/global/is-within-interactive-element.d.ts

@@ -0,0 +1,6 @@
+/**
+ * If this function returns `false`, the event may be interpreted as a click
+ * or tap on a "empty space" rather than on an interactive element such as
+ * a button or a link.
+ */
+export declare function isWithinInteractiveElement(target: EventTarget | null): boolean;

package/components/global/is-within-interactive-element.js

@@ -0,0 +1,26 @@
+const interactiveSelector = [
+    'a',
+    'button',
+    'details',
+    'input',
+    'label',
+    'option',
+    'select',
+    'summary',
+    'textarea',
+    '[contenteditable]',
+    '[role="button"]',
+    '[role="checkbox"]',
+    '[role="link"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+].join();
+/**
+ * If this function returns `false`, the event may be interpreted as a click
+ * or tap on a "empty space" rather than on an interactive element such as
+ * a button or a link.
+ */
+export function isWithinInteractiveElement(target) {
+    return target instanceof Element && target.closest(interactiveSelector) != null;
+}

package/components/global/is-within-navigable-element.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns whether the event target is within an element that is expected to
+ * handle keyboard navigation itself, so container-level keyboard shortcuts
+ * should generally be ignored.
+ */
+export declare function isWithinNavigableElement(target: EventTarget | null): boolean;

package/components/global/is-within-navigable-element.js

@@ -0,0 +1,27 @@
+const navigableSelector = [
+    'input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="reset"]):not([type="submit"])',
+    'textarea',
+    'select',
+    '[contenteditable]',
+    '[role="combobox"]',
+    '[role="grid"]',
+    '[role="listbox"]',
+    '[role="menu"]',
+    '[role="menubar"]',
+    '[role="radiogroup"]',
+    '[role="searchbox"]',
+    '[role="slider"]',
+    '[role="spinbutton"]',
+    '[role="tablist"]',
+    '[role="textbox"]',
+    '[role="tree"]',
+    '[role="treegrid"]',
+].join();
+/**
+ * Returns whether the event target is within an element that is expected to
+ * handle keyboard navigation itself, so container-level keyboard shortcuts
+ * should generally be ignored.
+ */
+export function isWithinNavigableElement(target) {
+    return target instanceof Element && target.closest(navigableSelector) != null;
+}

package/components/global/parse-css-duration.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Parses a CSS duration string (e.g., "500ms", "2s") and returns the duration in milliseconds.
+ * Returns the `defaultVal` if the input string is not a valid CSS duration.
+ */
+export declare function parseCssDuration(duration: string, defaultVal?: number): number;

package/components/global/parse-css-duration.js

@@ -0,0 +1,13 @@
+/**
+ * Parses a CSS duration string (e.g., "500ms", "2s") and returns the duration in milliseconds.
+ * Returns the `defaultVal` if the input string is not a valid CSS duration.
+ */
+export function parseCssDuration(duration, defaultVal = 0) {
+    const match = duration.match(/(\d+(\.\d+)?)(s|ms)/);
+    if (!match)
+        return defaultVal;
+    const value = parseFloat(match[1]);
+    const unit = match[3];
+    // eslint-disable-next-line no-magic-numbers
+    return unit === 's' ? value * 1000 : value;
+}

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/global/schedule-with-cleanup.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Schedules a timeout and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export declare function setTimeoutWithCleanup(callback: () => void, delay?: number): () => void;
+/**
+ * Schedules an animation frame and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export declare function requestAnimationFrameWithCleanup(callback: () => void): () => void;

package/components/global/schedule-with-cleanup.js

@@ -0,0 +1,34 @@
+/**
+ * Schedules a timeout and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export function setTimeoutWithCleanup(callback, delay = 0) {
+    let timerId = window.setTimeout(() => {
+        callback();
+        timerId = null;
+    }, delay);
+    return () => {
+        if (timerId != null) {
+            window.clearTimeout(timerId);
+            timerId = null;
+        }
+    };
+}
+/**
+ * Schedules an animation frame and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export function requestAnimationFrameWithCleanup(callback) {
+    let rafId = requestAnimationFrame(() => {
+        callback();
+        rafId = null;
+    });
+    return () => {
+        if (rafId != null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    };
+}

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

@@ -4,7 +4,7 @@
 export interface SelectionItem {
     id: string | number;
 }
-export interface TableSelectionConfig<T extends object> {
+export interface TableSelectionConfig<T> {
     data?: readonly T[] | undefined;
     selected?: Set<T> | undefined;
     focused?: T | null | undefined;
@@ -17,7 +17,7 @@ export interface CloneWithConfig<T> {
     selected?: Set<T> | readonly T[] | null | undefined;
     focused?: T | null | undefined;
 }
-export default class Selection<T extends object> {
+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 extends object> {
     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/{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;
@@ -11,11 +11,11 @@ export default class Selection {
     _isItemSelectable;
     constructor({ data = [], selected = new Set(), focused = null, getKey = (item) => {
         // Default behavior stays backward compatible: use item's "id" if present
-        if ('id' in item) {
+        if (item && typeof item === 'object' && 'id' in item) {
             return item.id;
         }
         // If there's no id provided on item and no getKey supplied, fail fast with a clear message
-        throw new Error('Selection: getKey is required when items have no "id" property');
+        throw new Error('TableSelection: getKey is required when items have no "id" property');
     }, getChildren = () => [], isItemSelectable = () => true, } = {}) {
         this._rawData = data;
         this._getChildren = getChildren;

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/global/variables.css

@@ -20,8 +20,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #ebecf0 */
   --ring-border-selected-disabled-components: 201, 204, 214;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #c9ccd6 */
-  --ring-border-disabled-active-components: var(--ring-border-hover-components);
-  --ring-border-disabled-active-color: var(--ring-border-hover-color); /* TODO: remove in 8.0 in favor of --ring-border-hover-color */
   --ring-icon-disabled-components: 168, 173, 189;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #A8ADBD */
   --ring-border-hover-components: 160, 189, 248;
@@ -36,8 +34,6 @@
   --ring-icon-hover-color: rgb(var(--ring-icon-hover-components)); /* #5a5d6b */
   --ring-main-components: 51, 105, 214;
   --ring-main-color: rgb(var(--ring-main-components)); /* #3369D6 */
-  --ring-action-link-components: var(--ring-link-components);
-  --ring-action-link-color: var(--ring-link-color); /* #315FBD */ /* TODO: remove in 8.0 in favor of --ring-link-color */
   --ring-main-hover-components: 49, 95, 189;
   --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #315FBD */
   --ring-main-success-components: 31, 128, 57;
@@ -94,8 +90,6 @@
   --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.1);
   --ring-popup-secondary-shadow-color: rgba(var(--ring-popup-border-components), 0.04);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
-  --ring-pinned-shadow-components: 108, 112, 126;
-  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */ /* TODO remove in 8.0 */
   --ring-button-danger-hover-components: 219, 59, 75;
   --ring-button-danger-hover-color: rgb(var(--ring-button-danger-hover-components)); /* #DB3B4B */
   --ring-button-primary-border-components: 46, 85, 163;
@@ -108,8 +102,6 @@
   /* Text */
   --ring-search-components: 112, 156, 245;
   --ring-search-color: rgb(var(--ring-search-components)); /* #709CF5 */
-  --ring-hint-components: 46, 85, 163;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #2E55A3 */ /* TODO: remove in 8.0 */
   --ring-link-components: 49, 95, 189;
   --ring-link-color: rgb(var(--ring-link-components)); /* #315FBD */
   --ring-link-hover-components: 46, 85, 163;
@@ -167,8 +159,6 @@
   --ring-disabled-selected-background-components: 235, 236, 240;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #EBECF0 */
   --ring-button-danger-active-color: var(--ring-error-container-light-color); /* #FAD4D8 */
-  --ring-button-loader-background: rgba(var(--ring-white-text-components), 0.4); /* TODO remove in 8.0 */
-  --ring-button-primary-background-color: var(--ring-main-color); /* TODO remove in 8.0 */
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */
   --ring-removed-subtle-background-components: 255, 235, 236;
   --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #FFEBEC */

package/components/global/variables.interface.d.ts

@@ -19,11 +19,9 @@ export interface RingCSSProperties {
     '--ring-popup-border-color'?: Property.BorderColor;
     '--ring-popup-shadow-color'?: Property.Color;
     '--ring-message-shadow-color'?: Property.Color;
-    '--ring-pinned-shadow-color'?: Property.Color;
     '--ring-button-danger-hover-color'?: Property.Color;
     '--ring-button-primary-border-color'?: Property.Color;
     '--ring-search-color'?: Property.Color;
-    '--ring-hint-color'?: Property.Color;
     '--ring-link-color'?: Property.Color;
     '--ring-link-hover-color'?: Property.Color;
     '--ring-error-color'?: Property.Color;
@@ -49,8 +47,6 @@ export interface RingCSSProperties {
     '--ring-disabled-background-color'?: Property.BackgroundColor;
     '--ring-disabled-selected-background-color'?: Property.BackgroundColor;
     '--ring-button-danger-active-color'?: Property.BackgroundColor;
-    '--ring-button-loader-background'?: Property.BackgroundColor;
-    '--ring-button-primary-background-color'?: Property.BackgroundColor;
     '--ring-code-background-color'?: Property.BackgroundColor;
     '--ring-code-color'?: Property.Color;
     '--ring-code-comment-color'?: Property.Color;

package/components/global/variables_dark.css

@@ -15,8 +15,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4E5157 */
   --ring-border-selected-disabled-components: 90, 93, 99;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #5A5D63 */
-  --ring-border-disabled-active-components: var(--ring-border-hover-components);
-  --ring-border-disabled-active-color: var(--ring-border-hover-color); /* TODO: remove in 8.0 in favor of --ring-border-hover-color */
   --ring-icon-disabled-components: 111, 115, 122;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #6F737A */
   --ring-border-hover-components: 55, 95, 173;
@@ -82,8 +80,6 @@
   --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
   --ring-popup-secondary-shadow-color: rgba(0, 0, 0, 0.37);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
-  --ring-pinned-shadow-components: 0, 0, 0;
-  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */ /* TODO remove in 8.0 */
   --ring-button-danger-hover-color: var(--ring-error-color);
   --ring-button-primary-border-components: 153, 187, 255;
   --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #99BBFF */
@@ -93,8 +89,6 @@
   --ring-dialog-shadow: 0 4px 16px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
 
   /* Text */
-  --ring-hint-components: 134, 138, 145;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #868A91 */ /* TODO: remove in 8.0 */
   --ring-link-components: 153, 187, 255;
   --ring-link-color: rgb(var(--ring-link-components)); /* #99BBFF */
   --ring-link-hover-components: 107, 155, 250;
@@ -153,7 +147,6 @@
   --ring-disabled-selected-background-components: 67, 69, 74;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #43454A */
   --ring-button-danger-active-color: var(--ring-error-container-light-color); /* #5E3838 */
-  --ring-button-primary-background-color: var(--ring-main-color); /* TODO remove in 8.0 */
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #2B2D3050 */
   --ring-removed-subtle-background-components: 64, 41, 41;
   --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #402929 */

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>;
 };

package/components/icon/icon-svg.js

@@ -1,7 +1,6 @@
 // Inspired by https://github.com/sairion/svg-inline-react
 import { memo } from 'react';
 import classNames from 'classnames';
-import { getTrustedHTML } from '../global/configuration';
 import memoize from '../global/memoize';
 import styles from './icon.css';
 function convertReactSVGDOMProperty(str) {
@@ -28,7 +27,7 @@ function extractSVGProps(svgNode) {
 }
 const getSVGFromSource = memoize((src) => {
     const svgContainer = document.createElement('div');
-    svgContainer.innerHTML = getTrustedHTML(src);
+    svgContainer.innerHTML = src;
     const svg = svgContainer.firstElementChild;
     if (svg.remove) {
         svg.remove();
@@ -52,7 +51,7 @@ function IconSVG({ src, className, ...rest }) {
     }, className);
     const { props, html } = getSVGFromSource(src);
     return (<svg {...props} {...rest} className={glyphClasses} dangerouslySetInnerHTML={{
-            __html: getTrustedHTML(html),
+            __html: html,
         }}/>);
 }
 export default memo(IconSVG);

package/components/icon/icon.css

@@ -11,11 +11,6 @@
 
   pointer-events: none;
 
-  /* TODO remove in 8.0 */
-  &[width='10'] {
-    vertical-align: -1px;
-  }
-
   &[width='12'] {
     vertical-align: -1px;
   }
@@ -71,25 +66,3 @@
 .white {
   color: var(--ring-white-text-color);
 }
-
-.loading {
-  animation-name: icon-loading;
-  animation-duration: 1200ms;
-  animation-iteration-count: infinite;
-}
-
-@keyframes icon-loading {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.9);
-
-    opacity: 0.5;
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}

package/components/icon/icon.d.ts

@@ -19,7 +19,6 @@ export interface IconProps extends HTMLAttributes<HTMLElement> {
      * @deprecated Use icons with appropriate intrinsic sizes instead
      */
     width?: number | undefined;
-    loading?: boolean | null | undefined;
     suppressSizeWarning?: boolean | null | undefined;
 }
 export default class Icon extends PureComponent<IconProps> {

package/components/icon/icon.js

@@ -43,13 +43,11 @@ export default class Icon extends PureComponent {
         return undefined;
     }
     render() {
-        const { className, size, color, loading, glyph: Glyph, width, height, suppressSizeWarning, ...restProps } = this.props;
+        const { className, size, color, glyph: Glyph, width, height, suppressSizeWarning, ...restProps } = this.props;
         if (!Glyph) {
             return null;
         }
-        const classes = classNames(styles.icon, color && styles[color], {
-            [styles.loading]: loading,
-        }, className);
+        const classes = classNames(styles.icon, color && styles[color], className);
         return (<span data-test='ring-icon' {...restProps} className={classes}>
         {typeof Glyph === 'string' ? (<IconSVG src={Glyph} style={this.getStyle()}/>) : (<Glyph className={styles.glyph} style={this.getStyle()}/>)}
       </span>);

package/components/input/input.d.ts

@@ -69,7 +69,7 @@ export declare class Input extends PureComponent<InputProps> {
     stretch(el: HTMLElement | null | undefined): void;
     adapt(): void;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => () => void>;
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;