@jetbrains/ring-ui-built 8.0.0-beta.3 → 8.0.0-beta.5

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

@@ -2,6 +2,14 @@ import { c } from 'react/compiler-runtime';
 import { useState, useEffect, use, createContext } from 'react';
 
 /**
+ * @internal
+ */
+const noopIntersectionObserverHandle = {
+  observe: () => () => {}
+};
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
  * Usage:
  *
  * ```tsx
@@ -12,33 +20,38 @@ import { useState, useEffect, use, createContext } from 'react';
  * function YourComponent() {
  *   // Contains the current isIntersecting value
  *   const isIntersecting = useIsIntersecting(elementRef);
- *   // Or, to get updates instead:
- *   useIsIntersectingListener(elementRef, newIsIntersecting => {
- *     // ...
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
  *   })
  * }
  * ```
  */
-const IntersectionObserverContext = /*#__PURE__*/createContext(null);
+const IntersectionObserverContext = /*#__PURE__*/createContext(noopIntersectionObserverHandle);
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
 function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
   const $ = c(6);
-  if ($[0] !== "dfabcb1b8108e1a7f2a2e74a1ab9f1d1069e1f7ab04eda46b950789426c929c9") {
+  if ($[0] !== "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35") {
     for (let $i = 0; $i < 6; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "dfabcb1b8108e1a7f2a2e74a1ab9f1d1069e1f7ab04eda46b950789426c929c9";
+    $[0] = "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35";
   }
-  const [handle, setHandle] = useState(null);
+  const [handle, setHandle] = useState(noopIntersectionObserverHandle);
   let t0;
   let t1;
   if ($[1] !== rootMargin || $[2] !== rootRef || $[3] !== scrollMargin) {
     t0 = () => {
       const root = rootRef?.current;
-      const elementToOnChange = new Map();
+      const callbacksByElement = new Map();
       const observer = new IntersectionObserver(entries => {
         for (const entry of entries) {
-          const onChange = elementToOnChange.get(entry.target);
-          onChange?.(entry.isIntersecting);
+          const callbacks = callbacksByElement.get(entry.target);
+          callbacks?.forEach(cb => cb(entry.isIntersecting));
         }
       }, {
         root,
@@ -46,18 +59,31 @@ function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
         scrollMargin: scrollMargin != null ? `${scrollMargin}px` : undefined
       });
       setHandle({
-        observe(element, onChange_0) {
-          elementToOnChange.set(element, onChange_0);
-          observer.observe(element);
+        observe(element, onChange) {
+          if (!callbacksByElement.has(element)) {
+            callbacksByElement.set(element, []);
+            observer.observe(element);
+          }
+          callbacksByElement.get(element).push(onChange);
           return () => {
-            elementToOnChange.delete(element);
-            observer.unobserve(element);
+            const callbacks_0 = callbacksByElement.get(element);
+            if (!callbacks_0) {
+              return;
+            }
+            const index = callbacks_0.indexOf(onChange);
+            if (index !== -1) {
+              callbacks_0.splice(index, 1);
+            }
+            if (!callbacks_0.length) {
+              callbacksByElement.delete(element);
+              observer.unobserve(element);
+            }
           };
         }
       });
       return () => {
         observer.disconnect();
-        setHandle(null);
+        setHandle(noopIntersectionObserverHandle);
       };
     };
     t1 = [rootRef, rootMargin, scrollMargin];
@@ -73,13 +99,16 @@ function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
   useEffect(t0, t1);
   return handle;
 }
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
 function useIsIntersecting(elementRef) {
   const $ = c(5);
-  if ($[0] !== "dfabcb1b8108e1a7f2a2e74a1ab9f1d1069e1f7ab04eda46b950789426c929c9") {
+  if ($[0] !== "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35") {
     for (let $i = 0; $i < 5; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "dfabcb1b8108e1a7f2a2e74a1ab9f1d1069e1f7ab04eda46b950789426c929c9";
+    $[0] = "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35";
   }
   const handle = use(IntersectionObserverContext);
   const [isIntersecting, setIsIntersecting] = useState(false);
@@ -88,12 +117,12 @@ function useIsIntersecting(elementRef) {
   if ($[1] !== elementRef || $[2] !== handle) {
     t0 = () => {
       const element = elementRef.current;
-      if (!element || !handle) {
+      if (!element) {
         return;
       }
       return handle.observe(element, setIsIntersecting);
     };
-    t1 = [handle, elementRef, setIsIntersecting];
+    t1 = [handle, elementRef];
     $[1] = elementRef;
     $[2] = handle;
     $[3] = t0;
@@ -105,36 +134,5 @@ function useIsIntersecting(elementRef) {
   useEffect(t0, t1);
   return isIntersecting;
 }
-function useIsIntersectingListener(elementRef, onChange) {
-  const $ = c(6);
-  if ($[0] !== "dfabcb1b8108e1a7f2a2e74a1ab9f1d1069e1f7ab04eda46b950789426c929c9") {
-    for (let $i = 0; $i < 6; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "dfabcb1b8108e1a7f2a2e74a1ab9f1d1069e1f7ab04eda46b950789426c929c9";
-  }
-  const handle = use(IntersectionObserverContext);
-  let t0;
-  let t1;
-  if ($[1] !== elementRef || $[2] !== handle || $[3] !== onChange) {
-    t0 = () => {
-      const element = elementRef.current;
-      if (!element || !handle) {
-        return;
-      }
-      return handle.observe(element, onChange);
-    };
-    t1 = [handle, elementRef, onChange];
-    $[1] = elementRef;
-    $[2] = handle;
-    $[3] = onChange;
-    $[4] = t0;
-    $[5] = t1;
-  } else {
-    t0 = $[4];
-    t1 = $[5];
-  }
-  useEffect(t0, t1);
-}
 
-export { IntersectionObserverContext, useIntersectionObserverHandle, useIsIntersecting, useIsIntersectingListener };
+export { IntersectionObserverContext, useIntersectionObserverHandle, useIsIntersecting };

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,11 @@
+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.
+ */
+function isWithinInteractiveElement(target) {
+  return target instanceof Element && target.closest(interactiveSelector) != null;
+}
+
+export { isWithinInteractiveElement };

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,11 @@
+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.
+ */
+function isWithinNavigableElement(target) {
+  return target instanceof Element && target.closest(navigableSelector) != null;
+}
+
+export { isWithinNavigableElement };

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,14 @@
+/**
+ * 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.
+ */
+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;
+}
+
+export { parseCssDuration };

package/components/global/rerender-hoc.js

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import { createComposedRef } from './compose-refs.js';
 import { jsx } from 'react/jsx-runtime';
+import 'react/compiler-runtime';
 import 'memoize-one';
 
 function rerenderHOC(ComposedComponent) {

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,36 @@
+/**
+ * Schedules a timeout and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+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.
+ */
+function requestAnimationFrameWithCleanup(callback) {
+  let rafId = requestAnimationFrame(() => {
+    callback();
+    rafId = null;
+  });
+  return () => {
+    if (rafId != null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+}
+
+export { requestAnimationFrameWithCleanup, setTimeoutWithCleanup };

package/components/global/table-selection.js

@@ -19,7 +19,7 @@ class TableSelection {
         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

package/components/global/theme.js

@@ -1,5 +1,5 @@
 import 'react/compiler-runtime';
 import 'react';
 import 'classnames';
-export { G as GLOBAL_DARK_CLASS_NAME, a as ThemeContext, b as ThemeProvider, W as WithThemeClasses, c as applyTheme, T as default, u as useTheme, e as useThemeClasses } from '../_helpers/theme.js';
+export { G as GLOBAL_DARK_CLASS_NAME, b as ThemeContext, a as ThemeProvider, W as WithThemeClasses, c as applyTheme, T as default, u as useTheme, e as useThemeClasses } from '../_helpers/theme.js';
 import 'react/jsx-runtime';

package/components/header/header.js

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import classNames from 'classnames';
-import { T as Theme, b as ThemeProvider } from '../_helpers/theme.js';
+import { T as Theme, a as ThemeProvider } from '../_helpers/theme.js';
 import { s as styles } from '../_helpers/header.js';
 import { jsx } from 'react/jsx-runtime';
 export { default as Logo } from './logo.js';
@@ -79,10 +79,16 @@ import '../alert-service/alert-service.js';
 import 'react-dom/client';
 import '../alert/alert.js';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../loader-inline/loader-inline.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import '../auth/auth.js';
 import '../auth/window-flow.js';

package/components/header/smart-profile.js

@@ -9,8 +9,9 @@ import '../global/get-uid.js';
 import '../alert/alert.js';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -29,6 +30,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 import '../avatar/avatar.js';

package/components/heading/heading.js

@@ -2,7 +2,7 @@ import { c } from 'react/compiler-runtime';
 import { memo, useEffect } from 'react';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
-import { s as styles } from '../_helpers/heading.js';
+import { h as headingStyles } from '../_helpers/heading.js';
 import { jsx } from 'react/jsx-runtime';
 
 var Levels;
@@ -46,7 +46,7 @@ const HeadingMemo = /*#__PURE__*/memo(function Heading(t0) {
   const level = t1 === undefined ? Levels.H1 : t1;
   let t2;
   if ($[6] !== className) {
-    t2 = classNames(styles.heading, className);
+    t2 = classNames(headingStyles.heading, className);
     $[6] = className;
     $[7] = t2;
   } else {
@@ -183,7 +183,7 @@ const H4 = /*#__PURE__*/memo(function H4(t0) {
   let t1;
   if ($[5] !== bold || $[6] !== className) {
     t1 = classNames(className, {
-      [styles.bold]: bold
+      [headingStyles.bold]: bold
     });
     $[5] = bold;
     $[6] = className;

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

@@ -54,7 +54,7 @@ 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;
@@ -170,7 +170,7 @@ 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/i18n.js

@@ -18,6 +18,7 @@ var addFirstDate = "Add first date";
 var addSecondDate = "Add second date";
 var addTime = "Add time";
 var selectName = "Select {{name}}";
+var selectDate = "Select a date";
 var setDate = "Set a date";
 var setDateTime = "Set date and time";
 var setPeriod = "Set a period";
@@ -70,6 +71,7 @@ var defaultMessages = {
 	addSecondDate: addSecondDate,
 	addTime: addTime,
 	selectName: selectName,
+	selectDate: selectDate,
 	setDate: setDate,
 	setDateTime: setDateTime,
 	setPeriod: setPeriod,

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;

package/components/internal/reorder-animation-context.js

@@ -0,0 +1,159 @@
+import { c } from 'react/compiler-runtime';
+import { createContext, useState, useRef, useEffect } from 'react';
+import { parseCssDuration } from '../global/parse-css-duration.js';
+import { requestAnimationFrameWithCleanup, setTimeoutWithCleanup } from '../global/schedule-with-cleanup.js';
+import { s as styles } from '../_helpers/table.js';
+
+/** How long to wait for the data to change after {@link expectReorder} is called. */
+const pendingReorderTimeoutMs = 1000;
+const ReorderAnimationContext = /*#__PURE__*/createContext({
+  reorderAnimation: null,
+  expectReorder: () => {}
+});
+function useReorderAnimationContextValue(t0) {
+  const $ = c(20);
+  if ($[0] !== "669a1fb3f5ac9a1cdad72a7fc204b97d9b35bce2182bb3bb8f0bd0acb524b958") {
+    for (let $i = 0; $i < 20; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "669a1fb3f5ac9a1cdad72a7fc204b97d9b35bce2182bb3bb8f0bd0acb524b958";
+  }
+  const {
+    noColumnReorderAnimation,
+    noItemReorderAnimation,
+    tableRef,
+    data,
+    columns
+  } = t0;
+  const [reorderAnimation, setReorderAnimation] = useState(null);
+  const pendingReorderRef = useRef(null);
+  let t1;
+  if ($[1] !== columns || $[2] !== data || $[3] !== noColumnReorderAnimation || $[4] !== noItemReorderAnimation) {
+    t1 = function expectReorder(reorderSpec) {
+      const isColumn = reorderSpec.direction === "columns";
+      if (isColumn && noColumnReorderAnimation || !isColumn && noItemReorderAnimation) {
+        return;
+      }
+      if (pendingReorderRef.current) {
+        window.clearTimeout(pendingReorderRef.current.timerId);
+      }
+      const timerId = window.setTimeout(() => {
+        pendingReorderRef.current = null;
+      }, pendingReorderTimeoutMs);
+      pendingReorderRef.current = {
+        ...reorderSpec,
+        timerId,
+        columns,
+        data
+      };
+    };
+    $[1] = columns;
+    $[2] = data;
+    $[3] = noColumnReorderAnimation;
+    $[4] = noItemReorderAnimation;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const expectReorder = t1;
+  let t2;
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => () => {
+      if (pendingReorderRef.current) {
+        window.clearTimeout(pendingReorderRef.current.timerId);
+        pendingReorderRef.current = null;
+      }
+    };
+    t3 = [];
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t2 = $[6];
+    t3 = $[7];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[8] !== columns || $[9] !== data || $[10] !== tableRef) {
+    t4 = () => {
+      const table = tableRef.current;
+      const pendingReorder = pendingReorderRef.current;
+      if (!table || !pendingReorder) {
+        return;
+      }
+      const {
+        direction,
+        data: pendingData,
+        columns: pendingColumns
+      } = pendingReorder;
+      const isColumn_0 = direction === "columns";
+      if (isColumn_0 && columns === pendingColumns || !isColumn_0 && data === pendingData) {
+        return;
+      }
+      pendingReorderRef.current = null;
+      const {
+        fromIndex,
+        insertionIndex
+      } = pendingReorder;
+      const index = fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex;
+      return requestAnimationFrameWithCleanup(() => setReorderAnimation(prev => prev == null ? {
+        direction,
+        index,
+        phase: "initial",
+        className: styles.reorderAnimationInitial
+      } : prev));
+    };
+    t5 = [data, columns, tableRef];
+    $[8] = columns;
+    $[9] = data;
+    $[10] = tableRef;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t4 = $[11];
+    t5 = $[12];
+  }
+  useEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[13] !== reorderAnimation || $[14] !== tableRef) {
+    t6 = () => {
+      if (reorderAnimation?.phase === "initial") {
+        return requestAnimationFrameWithCleanup(() => setReorderAnimation(prev_0 => prev_0 === reorderAnimation ? {
+          ...prev_0,
+          phase: "fade-out",
+          className: styles.reorderAnimationFadeOut
+        } : prev_0));
+      }
+      if (reorderAnimation?.phase === "fade-out") {
+        const fadeOutMs = parseCssDuration(window.getComputedStyle(tableRef.current).getPropertyValue("--reorder-animation-fade-out-duration"));
+        return setTimeoutWithCleanup(() => setReorderAnimation(prev_1 => prev_1 === reorderAnimation ? null : prev_1), fadeOutMs);
+      }
+    };
+    t7 = [reorderAnimation, tableRef];
+    $[13] = reorderAnimation;
+    $[14] = tableRef;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t6 = $[15];
+    t7 = $[16];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[17] !== expectReorder || $[18] !== reorderAnimation) {
+    t8 = {
+      reorderAnimation,
+      expectReorder
+    };
+    $[17] = expectReorder;
+    $[18] = reorderAnimation;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  return t8;
+}
+
+export { ReorderAnimationContext, useReorderAnimationContextValue };