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

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/{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;
@@ -15,7 +15,7 @@ export default class Selection {
             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;
@@ -48,18 +44,18 @@
   --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #CC3645 */
   --ring-main-error-hover-components: 188, 48, 62;
   --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #BC303E */
-  --ring-main-warning-components: 229, 109, 23;
-  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E56D17 */
-  --ring-main-warning-hover-components: 206, 97, 23;
-  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #CE6117 */
+  --ring-main-warning-components: 255, 175, 15;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #FFAF0F */
+  --ring-main-warning-hover-components: 223, 147, 3;
+  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #DF9303 */
   --ring-main-purple-components: 131, 77, 240;
   --ring-main-purple-color: rgb(var(--ring-main-purple-components)); /* #834DF0 */
   --ring-main-purple-hover-components: 116, 68, 212;
   --ring-main-purple-hover-color: rgb(var(--ring-main-purple-hover-components)); /* #7444D4 */
   --ring-icon-error-components: 204, 54, 69;
   --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #CC3645 */
-  --ring-icon-warning-components: 229, 109, 23;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #E56D17 */
+  --ring-icon-warning-components: 223, 147, 3;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #DF9303 */
   --ring-icon-success-components: 32, 138, 60;
   --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #208A3C */
   --ring-icon-highlight-components: 255, 175, 15;
@@ -74,10 +70,10 @@
   --ring-error-border-color: rgb(var(--ring-error-border-components)); /* #F2B6BB */
   --ring-error-border-hover-components: 228, 106, 118;
   --ring-error-border-hover-color: rgb(var(--ring-error-border-hover-components)); /* #E46A76 */
-  --ring-warning-border-components: 242, 177, 129;
-  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #F2B181 */
-  --ring-warning-border-hover-components: 236, 143, 76;
-  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #EC8F4C */
+  --ring-warning-border-components: 254, 210, 119;
+  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #FED277 */
+  --ring-warning-border-hover-components: 253, 189, 61;
+  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #FDBD3D */
   --ring-highlight-border-components: 254, 210, 119;
   --ring-highlight-border-color: rgb(var(--ring-highlight-border-components)); /* #FED277 */
   --ring-highlight-border-hover-components: 253, 189, 61;
@@ -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,16 +102,14 @@
   /* 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;
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #2E55A3 */
   --ring-error-components: 204, 54, 69;
   --ring-error-color: rgb(var(--ring-error-components)); /* #CC3645 */
-  --ring-warning-components: 182, 84, 22;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #B65416 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 156, 97, 0;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #9C6100 */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 31, 117, 54;
   --ring-success-color: rgb(var(--ring-success-components)); /* #1F7536 */ /* Prefer using success icon + regular text color */
   --ring-purple-text-components: 131, 77, 240;
@@ -154,8 +146,8 @@
   --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #DFE1E5 */
   --ring-removed-background-components: 250, 212, 216;
   --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #FAD4D8 */
-  --ring-warning-background-components: 252, 230, 214;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FCE6D6 */
+  --ring-warning-background-components: 255, 241, 209;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FFF1D1 */
   --ring-highlight-background-components: 255, 241, 209;
   --ring-highlight-background-color: rgb(var(--ring-highlight-background-components)); /* #FFF1D1 */
   --ring-added-background-components: 197, 229, 204;
@@ -167,13 +159,11 @@
   --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 */
-  --ring-warning-subtle-background-components: 255, 244, 235;
-  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFF4EB */
+  --ring-warning-subtle-background-components: 255, 246, 222;
+  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFF6DE */
   --ring-highlight-subtle-background-components: 255, 246, 222;
   --ring-highlight-subtle-background-color: rgb(var(--ring-highlight-subtle-background-components)); /* #FFF6DE */
   --ring-added-subtle-background-components: 230, 247, 233;
@@ -186,8 +176,8 @@
   --ring-success-container-light-color: rgb(var(--ring-success-container-light-components)); /* #F2FCF3 */
   --ring-error-container-light-components: 255, 242, 243;
   --ring-error-container-light-color: rgb(var(--ring-error-container-light-components)); /* #FFF2F3 */
-  --ring-warning-container-light-components: 255, 248, 243;
-  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #FFF8F3 */
+  --ring-warning-container-light-components: 255, 250, 235;
+  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #FFFAEB */
   --ring-highlight-container-light-components: 255, 250, 235;
   --ring-highlight-container-light-color: rgb(var(--ring-highlight-container-light-components)); /* #FFFAEB */
   --ring-grey-container-light-components: 247, 248, 250;

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;
@@ -39,18 +37,18 @@
   --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #BD5757 */
   --ring-main-error-hover-components: 156, 78, 78;
   --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #9C4E4E */
-  --ring-main-warning-components: 224, 137, 87;
-  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E08957 */
-  --ring-main-warning-hover-components: 199, 125, 85;
-  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #C77D55 */
+  --ring-main-warning-components: 214, 174, 88;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #D6AE58 */
+  --ring-main-warning-hover-components: 186, 151, 82;
+  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #BA9752 */
   --ring-main-purple-components: 149, 90, 224;
   --ring-main-purple-color: rgb(var(--ring-main-purple-components)); /* #955AE0 */
   --ring-main-purple-hover-components: 129, 80, 190;
   --ring-main-purple-hover-color: rgb(var(--ring-main-purple-hover-components)); /* #8150BE */
   --ring-icon-error-components: 227, 119, 116;
   --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #E37774 */
-  --ring-icon-warning-components: 224, 136, 85;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #E08855 */
+  --ring-icon-warning-components: 214, 174, 88;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #D6AE58 */
   --ring-icon-success-components: 95, 173, 101;
   --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5FAD65 */
   --ring-icon-highlight-components: 214, 174, 88;
@@ -65,10 +63,10 @@
   --ring-error-border-color: rgb(var(--ring-error-border-components)); /* #7A4343 */
   --ring-error-border-hover-components: 156, 78, 78;
   --ring-error-border-hover-color: rgb(var(--ring-error-border-hover-components)); /* #9C4E4E */
-  --ring-warning-border-components: 130, 88, 69;
-  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #825845 */
-  --ring-warning-border-hover-components: 163, 107, 78;
-  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #A36B4E */
+  --ring-warning-border-components: 130, 106, 65;
+  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #826A41 */
+  --ring-warning-border-hover-components: 158, 129, 74;
+  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #9E814A */
   --ring-highlight-border-components: 130, 106, 65;
   --ring-highlight-border-color: rgb(var(--ring-highlight-border-components)); /* #826A41 */
   --ring-highlight-border-hover-components: 158, 129, 74;
@@ -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,16 +89,14 @@
   --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;
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #6B9BFA */
   --ring-error-components: 227, 119, 116;
   --ring-error-color: rgb(var(--ring-error-components)); /* #E37774 */
-  --ring-warning-components: 224, 137, 87;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #E08957 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 242, 197, 92;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #F2C55C */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 95, 173, 101;
   --ring-success-color: rgb(var(--ring-success-components)); /* #5FAD65 */ /* Prefer using success icon + regular text color */
   --ring-purple-text-components: 181, 137, 236;
@@ -140,8 +134,8 @@
   --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #4E5157 */
   --ring-removed-background-components: 94, 56, 56;
   --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3838 */
-  --ring-warning-background-components: 97, 68, 56;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #614438 */
+  --ring-warning-background-components: 94, 77, 51;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5E4D33 */
   --ring-highlight-background-components: 94, 77, 51;
   --ring-highlight-background-color: rgb(var(--ring-highlight-background-components)); /* #5E4D33 */
   --ring-added-background-components: 55, 82, 57;
@@ -153,12 +147,11 @@
   --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 */
-  --ring-warning-subtle-background-components: 69, 50, 43;
-  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #45322B */
+  --ring-warning-subtle-background-components: 61, 50, 35;
+  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #3D3223 */
   --ring-highlight-subtle-background-components: 61, 50, 35;
   --ring-highlight-subtle-background-color: rgb(var(--ring-highlight-subtle-background-components)); /* #3D3223 */
   --ring-added-subtle-background-components: 37, 54, 39;
@@ -171,8 +164,8 @@
   --ring-success-container-light-color: rgb(var(--ring-success-container-light-components)); /* #222D25 */
   --ring-error-container-light-components: 54, 38, 39;
   --ring-error-container-light-color: rgb(var(--ring-error-container-light-components)); /* #362627 */
-  --ring-warning-container-light-components: 53, 42, 39;
-  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #352A27 */
+  --ring-warning-container-light-components: 49, 42, 35;
+  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #312A23 */
   --ring-highlight-container-light-components: 49, 42, 35;
   --ring-highlight-container-light-color: rgb(var(--ring-highlight-container-light-components)); /* #312A23 */
   --ring-grey-container-light-components: 43, 45, 48;

package/components/header/header.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value link, active from '../link/link.css';
+@value link, active as linkActive from '../link/link.css';
 
 :root,
 :host {
@@ -41,7 +41,7 @@
     color: var(--ring-header-link-color);
   }
 
-  & .active {
+  & .linkActive {
     color: var(--ring-active-text-color);
   }
 }
@@ -72,7 +72,7 @@
     color: var(--ring-header-link-color);
   }
 
-  & .active {
+  & .linkActive {
     color: var(--ring-active-text-color);
   }
 }

package/components/http/http.d.ts

@@ -20,7 +20,7 @@ export interface RequestParams<RawBody extends boolean = true | false> extends F
 export type RequestParamsWithoutMethod<RawBody extends boolean = boolean> = Omit<RequestParams<RawBody>, 'method'>;
 export interface HTTPAuth {
     requestToken(): Promise<string | null> | string | null;
-    forceTokenUpdate(): Promise<string | null>;
+    forceTokenUpdate(failedToken?: string | null): Promise<string | null>;
 }
 export default class HTTP implements Partial<HTTPAuth> {
     baseUrl: string | null | undefined;
@@ -28,7 +28,7 @@ export default class HTTP implements Partial<HTTPAuth> {
     fetchConfig: RequestInit;
     requestToken?: () => Promise<string | null> | string | null;
     shouldRefreshToken?: (error: string) => boolean;
-    forceTokenUpdate?: () => Promise<string | null>;
+    forceTokenUpdate?: (failedToken?: string | null) => Promise<string | null>;
     constructor(auth?: HTTPAuth, baseUrl?: string | null | undefined, fetchConfig?: RequestInit);
     setAuth: (auth: HTTPAuth) => void;
     setBaseUrl: (baseUrl: string | null | undefined) => void;

package/components/http/http.js

@@ -50,7 +50,7 @@ export default class HTTP {
     setAuth = (auth) => {
         this.requestToken = () => auth.requestToken();
         this.shouldRefreshToken = auth.constructor.shouldRefreshToken;
-        this.forceTokenUpdate = () => auth.forceTokenUpdate();
+        this.forceTokenUpdate = failedToken => auth.forceTokenUpdate(failedToken);
     };
     setBaseUrl = (baseUrl) => {
         this.baseUrl = baseUrl;
@@ -141,7 +141,7 @@ export default class HTTP {
             }
             const shouldRefreshToken = typeof error.data.error === 'string' ? this.shouldRefreshToken?.(error.data.error) : false;
             if (shouldRefreshToken) {
-                token = await this.forceTokenUpdate?.();
+                token = await this.forceTokenUpdate?.(token);
                 response = await this._performRequest(url, token, params);
                 return this._processResponse(response);
             }

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/i18n/i18n.d.ts

@@ -23,6 +23,7 @@ export declare function getTranslations(): Partial<{
     addSecondDate: string;
     addTime: string;
     selectName: string;
+    selectDate: string;
     setDate: string;
     setDateTime: string;
     setPeriod: string;

package/components/i18n/messages.json

@@ -19,6 +19,7 @@
   "addSecondDate": "Add second date",
   "addTime": "Add time",
   "selectName": "Select {{name}}",
+  "selectDate": "Select a date",
   "setDate": "Set a date",
   "setDateTime": "Set date and time",
   "setPeriod": "Set a period",

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;