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

package/components/collapse/collapse-content.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, use } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
+import { parseCssDuration } from '../global/parse-css-duration';
 import { toPx } from './utils';
 import CollapseContext from './collapse-context';
 import { COLLAPSE_CONTENT_TEST_ID, COLLAPSE_CONTENT_CONTAINER_TEST_ID } from './consts';
@@ -10,11 +11,14 @@ const DURATION_FACTOR = 0.5;
 const DEFAULT_HEIGHT = 0;
 const VISIBLE = 1;
 const HIDDEN = 0;
+// margin for the hide fallback timer, so it fires only if transitionend never did
+const HIDE_FALLBACK_EXTRA_DELAY = 100;
+const isFullyCollapsed = (collapsed, initialContentHeight) => collapsed && initialContentHeight <= DEFAULT_HEIGHT;
 /**
  * @name CollapseContent
  */
 export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest, }) => {
-    const { collapsed, duration, id, disableAnimation } = use(CollapseContext);
+    const { collapsed, duration, id, disableAnimation, keepMounted } = use(CollapseContext);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
     const [initialContentHeight] = useState(minHeight);
@@ -23,20 +27,41 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
     const height = toPx(nextHeight);
     const [shouldHideContent, setShouldHideContent] = useState(collapsed && minHeight <= DEFAULT_HEIGHT);
     useEffect(() => {
-        function onTransitionEnd() {
+        const container = containerRef.current;
+        function finalizeCollapse() {
             if (initialContentHeight <= DEFAULT_HEIGHT) {
                 setShouldHideContent(collapsed);
             }
         }
-        const container = containerRef.current;
+        function onTransitionEnd(event) {
+            // transitionend bubbles: only the container's own height transition finalizes the collapse
+            if (event.target === container && event.propertyName === 'height') {
+                finalizeCollapse();
+            }
+        }
         container?.addEventListener('transitionend', onTransitionEnd);
+        // fallback for suppressed or cancelled transitions (e.g. `transition: none` overrides),
+        // which emit no transitionend and would otherwise leave the content interactive forever.
+        // Armed once per collapse toggle from the --duration committed to the DOM — the value
+        // the running transition actually uses — so it can neither undercut a transition started
+        // from a stale height nor be restarted by content resizes or duration changes mid-collapse
+        const cssDuration = parseCssDuration(container?.style.getPropertyValue('--duration') || '');
+        const fallbackTimeout = window.setTimeout(finalizeCollapse, cssDuration + HIDE_FALLBACK_EXTRA_DELAY);
         return () => {
             container?.removeEventListener('transitionend', onTransitionEnd);
+            window.clearTimeout(fallbackTimeout);
         };
     }, [collapsed, initialContentHeight]);
+    // render-phase state adjustments (not effects): the React Compiler lint forbids
+    // setState-in-effect, and https://react.dev/learn/you-might-not-need-an-effect
+    // documents this pattern for resetting state when props change
     if (!collapsed && shouldHideContent) {
         setShouldHideContent(false);
     }
+    // without a transition there is no transitionend to wait for, so hide immediately
+    if (disableAnimation && !shouldHideContent && isFullyCollapsed(collapsed, initialContentHeight)) {
+        setShouldHideContent(true);
+    }
     useEffect(() => {
         if (contentRef.current) {
             const observer = new ResizeObserver(() => {
@@ -52,10 +77,20 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
         opacity: collapsed && !minHeight ? HIDDEN : VISIBLE,
     };
     const fadeShouldBeVisible = Boolean(minHeight && collapsed);
-    const shouldRenderContent = disableAnimation ? !collapsed : !shouldHideContent;
+    const contentVisible = !shouldHideContent;
+    const contentHidden = Boolean(keepMounted) && !contentVisible;
+    // interaction is blocked as soon as the panel collapses (matching aria-expanded), while
+    // visibility waits for the animation to finish so the content stays painted meanwhile.
+    // This includes a minHeight preview: content clipped below it must not take focus,
+    // and inert cannot be applied any more granularly than to the whole subtree
+    const contentInert = collapsed;
     return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
-      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
-        {shouldRenderContent ? children : null}
+      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)} 
+    // visibility: hidden removes the fully collapsed content from the tab order and accessibility
+    // tree, but descendants can override it with visibility: visible — inert cannot be escaped.
+    // Both are rendered in JSX so server-rendered collapsed markup is protected before hydration.
+    style={contentHidden ? { visibility: 'hidden' } : undefined} inert={contentInert}>
+        {keepMounted || contentVisible ? children : null}
       </div>
       {fadeShouldBeVisible && <div className={styles.fade}/>}
     </div>);

package/components/collapse/collapse-context.d.ts

@@ -2,6 +2,7 @@ interface CollapseContextInterface {
     collapsed: boolean;
     duration: number;
     disableAnimation: boolean;
+    keepMounted?: boolean;
     setCollapsed: () => void;
     id: string;
 }

package/components/collapse/collapse-context.js

@@ -4,6 +4,7 @@ export const CollapseContext = createContext({
     collapsed: true,
     duration: BASE_ANIMATION_DURATION,
     disableAnimation: false,
+    keepMounted: false,
     setCollapsed: () => { },
     id: '',
 });

package/components/collapse/collapse.d.ts

@@ -4,6 +4,15 @@ interface Props {
     onChange?: (collapsed: boolean) => void;
     duration?: number;
     disableAnimation?: boolean;
+    /**
+     * Keep children mounted while collapsed (hidden via `visibility: hidden`
+     * and the `inert` attribute) instead of unmounting them, preserving their state.
+     * Note: hidden form controls still participate in form validation
+     * and submission — disable them while collapsed if needed.
+     * Content rendered through portals (e.g. Popup) escapes the hidden
+     * wrapper and is not hidden — close overlays on collapse.
+     */
+    keepMounted?: boolean;
     className?: string;
     defaultCollapsed?: boolean;
     collapsed?: boolean | null;

package/components/collapse/collapse.js

@@ -5,7 +5,7 @@ import { BASE_ANIMATION_DURATION } from './consts';
 /**
  * @name Collapse
  */
-export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { }, defaultCollapsed = true, collapsed = null, }) => {
+export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, keepMounted = false, className = '', onChange = () => { }, defaultCollapsed = true, collapsed = null, }) => {
     const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
     const id = useId();
     const finalCollapsedValue = collapsed ?? innerCollapsed;
@@ -19,6 +19,7 @@ export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disable
             setCollapsed,
             duration,
             disableAnimation,
+            keepMounted,
             id,
         }}>
         {children}

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

@@ -37,6 +37,12 @@
   height: 28px;
 }
 
+.heading {
+  margin: 0;
+
+  font: inherit;
+}
+
 .headerButton {
   display: block;
 

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

@@ -11,10 +11,23 @@ export interface CollapsibleGroupProps {
     onChange?: (expanded: boolean) => void;
     disableAnimation?: boolean;
     interactive?: boolean;
+    /**
+     * Keep children mounted while collapsed (hidden via `visibility: hidden`
+     * and the `inert` attribute) instead of unmounting them, preserving their state.
+     * Note: hidden form controls still participate in form validation
+     * and submission — disable them while collapsed if needed.
+     * Content rendered through portals (e.g. Popup) escapes the hidden
+     * wrapper and is not hidden — close overlays on collapse.
+     */
+    keepMounted?: boolean;
+    /**
+     * Wraps the header in an <h2>–<h6> to keep the document outline.
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     'data-test'?: string | null | undefined;
 }
 declare const CollapsibleGroup: {
-    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
+    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, keepMounted, headingLevel, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default CollapsibleGroup;

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

@@ -36,7 +36,7 @@ function CollapsibleGroupHeaderStatic({ avatar, titleContent, subtitle }) {
       <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
     </span>);
 }
-const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, 'data-test': dataTest, }) => {
+const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, keepMounted = false, headingLevel, 'data-test': dataTest, }) => {
     const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
@@ -60,9 +60,10 @@ const CollapsibleGroup = ({ ref, avatar, title, subtitle, children, className, d
         [styles.expanded]: isExpanded,
         [styles.focused]: focused,
     });
+    const header = interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={onBlur}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>);
     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}/>)}
+      <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} keepMounted={keepMounted} className={styles.collapseRoot}>
+        {headingLevel != null ? React.createElement(`h${headingLevel}`, { className: styles.heading }, header) : header}
         <CollapseContent>
           <div className={styles.body}>{children}</div>
         </CollapseContent>

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

@@ -34,6 +34,7 @@ export interface DateInputTranslations {
     addSecondDate?: string;
     addTime?: string;
     selectName?: string;
+    selectDate?: string;
 }
 export interface DateSpecificPopupProps {
     withTime?: false | undefined;

package/components/date-picker/date-input.js

@@ -47,7 +47,7 @@ export default class DateInput extends React.PureComponent {
     };
     render() {
         const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale, } = this.props;
-        const { translate } = this.context;
+        const { messages, translate } = this.context;
         let displayText = '';
         if (active && hoverDate) {
             displayText = displayFormat(hoverDate, locale);
@@ -70,7 +70,11 @@ export default class DateInput extends React.PureComponent {
                 case 'time':
                     return timePlaceholder || (translations?.addTime ?? translate('addTime'));
                 default:
-                    return (translations?.selectName ?? translate('selectName'))
+                    return (translations?.selectDate ??
+                        translations?.selectName ??
+                        messages.selectDate ??
+                        messages.selectName ??
+                        translate('selectDate'))
                         .replace('%name%', name)
                         .replace('{{name}}', name);
             }

package/components/expand/collapsible-group.css

@@ -27,6 +27,10 @@
   composes: header from '../collapsible-group/collapsible-group.css';
 }
 
+.heading {
+  composes: heading from '../collapsible-group/collapsible-group.css';
+}
+
 .headerButton {
   composes: headerButton from '../collapsible-group/collapsible-group.css';
 }

package/components/global/variables.css

@@ -48,18 +48,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 +74,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;
@@ -116,8 +116,8 @@
   --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 +154,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;
@@ -172,8 +172,8 @@
   --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 +186,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_dark.css

@@ -39,18 +39,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 +65,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;
@@ -101,8 +101,8 @@
   --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 +140,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;
@@ -157,8 +157,8 @@
   --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 +171,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.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/table/default-item-renderer.d.ts

@@ -32,6 +32,12 @@ export interface DefaultItemRendererProps {
      * and track the visibility yourself.
      */
     noItemVirtualization?: boolean;
+    /**
+     * When set to `true`, does not report the item's boundaries to the reorder system.
+     * Useful when you include `DefaultItemRenderer` as a part of a custom row renderer
+     * that registers boundaries itself.
+     */
+    noReorderLayout?: boolean;
 }
 /**
  * Standard component for rendering a table row.
@@ -46,4 +52,4 @@ export interface DefaultItemRendererProps {
  * accessible controls, such as checkboxes or buttons with accessible
  * labels.
  */
-export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;
+export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, noReorderLayout, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;

package/components/table/default-item-renderer.js

@@ -1,9 +1,11 @@
 import { use, useCallback, useRef } from 'react';
 import classNames from 'classnames';
-import { ColumnAnimationContext, TablePropsContext } from './table-const';
+import { TablePropsContext } from './table-const';
 import { useComposedRef } from '../global/compose-refs';
 import { useItemVirtualization } from './item-virtualization';
 import { TableCell, TableRow } from './table-primitives';
+import { ReorderAnimationContext } from './internal/reorder-animation-context';
+import { useReorderItemLayout } from './reorder-item-layout';
 import styles from './table.css';
 /**
  * Standard component for rendering a table row.
@@ -18,7 +20,7 @@ import styles from './table.css';
  * accessible controls, such as checkboxes or buttons with accessible
  * labels.
  */
-export function DefaultItemRenderer({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, ref: userRef, className, ...restProps }) {
+export function DefaultItemRenderer({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, noReorderLayout, ref: userRef, className, ...restProps }) {
     const localRef = useRef(null);
     const composedRef = useComposedRef(userRef, localRef);
     useItemVirtualization({
@@ -33,18 +35,29 @@ export function DefaultItemRenderer({ index, keyboardFocusable, clickable, selec
             ? element.getBoundingClientRect().height
             : undefined, [noItemVirtualization]),
     });
+    useReorderItemLayout({
+        disabled: noReorderLayout,
+        index,
+        getBounds: () => {
+            const r = localRef.current?.getBoundingClientRect();
+            return { start: r?.top ?? 0, end: r?.bottom ?? 0 };
+        },
+    });
     const tableProps = use(TablePropsContext);
     if (!tableProps) {
         return null;
     }
-    const animatedColumn = use(ColumnAnimationContext);
+    const { reorderAnimation } = use(ReorderAnimationContext);
+    const isAnimatedItem = reorderAnimation?.direction === 'items' && reorderAnimation.index === index;
+    const animatedColumnIndex = reorderAnimation?.direction === 'columns' ? reorderAnimation.index : undefined;
+    const animateClassName = reorderAnimation?.className;
     const { data, columns } = tableProps;
     const item = data[index];
     const indentSize = 24;
-    return (<TableRow ref={composedRef} keyboardFocusable={keyboardFocusable} className={classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow)} {...restProps}>
+    return (<TableRow ref={composedRef} keyboardFocusable={keyboardFocusable} className={classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow, isAnimatedItem && animateClassName)} {...restProps}>
       {columns.map((column, columnIndex) => {
             const { key, tdClassName, indent } = column;
-            return (<TableCell key={key} className={classNames(columnIndex === animatedColumn?.columnIndex && animatedColumn.cellClassName, typeof tdClassName === 'function' ? tdClassName(item, index, data) : tdClassName)} style={indent && level != null && level > 0 ? { paddingInlineStart: `${level * indentSize}px` } : undefined}>
+            return (<TableCell key={key} className={classNames(columnIndex === animatedColumnIndex && animateClassName, typeof tdClassName === 'function' ? tdClassName(item, index, data) : tdClassName)} style={indent && level != null && level > 0 ? { paddingInlineStart: `${level * indentSize}px` } : undefined}>
             {column.renderCell?.(item, index, data) ?? getDefaultCellValue(item, columnIndex, key)}
           </TableCell>);
         })}

package/components/table/internal/reorder-animation-context.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import type { Column } from '../table-props';
+import type { ReorderAnimation } from '../reorder-animation';
+export interface ReorderSpec {
+    direction: 'columns' | 'items';
+    fromIndex: number;
+    insertionIndex: number;
+}
+interface ReorderAnimationContextValue {
+    reorderAnimation: ReorderAnimation | null;
+    expectReorder: (reorderSpec: ReorderSpec) => void;
+}
+export declare const ReorderAnimationContext: import("react").Context<ReorderAnimationContextValue>;
+export declare function useReorderAnimationContextValue<T>({ noColumnReorderAnimation, noItemReorderAnimation, tableRef, data, columns, }: {
+    noColumnReorderAnimation: boolean | undefined;
+    noItemReorderAnimation: boolean | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    data: readonly T[];
+    columns: readonly Column<T>[];
+}): ReorderAnimationContextValue;
+export {};