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

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

@@ -1,5 +1,5 @@
 import { c } from 'react/compiler-runtime';
-import { useState, use } from 'react';
+import React__default, { useState, use } from 'react';
 import classNames from 'classnames';
 import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
@@ -15,17 +15,18 @@ import '../global/memoize.js';
 import '../collapse/consts.js';
 import '../global/data-tests.js';
 import '../global/dom.js';
+import '../global/parse-css-duration.js';
 import '../collapse/utils.js';
 
-var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","focused":"ring-collapsible-group-focused","header":"ring-collapsible-group-header","headerButton":"ring-collapsible-group-headerButton","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
+var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","focused":"ring-collapsible-group-focused","header":"ring-collapsible-group-header","heading":"ring-collapsible-group-heading","headerButton":"ring-collapsible-group-headerButton","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
 
 function CollapsibleGroupHeaderContent(t0) {
   const $ = c(16);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
+  if ($[0] !== "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd") {
     for (let $i = 0; $i < 16; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+    $[0] = "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd";
   }
   const {
     avatar,
@@ -120,11 +121,11 @@ function CollapsibleGroupHeaderContent(t0) {
 }
 function CollapsibleGroupHeader(t0) {
   const $ = c(16);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
+  if ($[0] !== "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd") {
     for (let $i = 0; $i < 16; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+    $[0] = "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd";
   }
   let avatar;
   let buttonProps;
@@ -193,11 +194,11 @@ function CollapsibleGroupHeader(t0) {
 }
 function CollapsibleGroupHeaderStatic(t0) {
   const $ = c(5);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
+  if ($[0] !== "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd") {
     for (let $i = 0; $i < 5; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+    $[0] = "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd";
   }
   const {
     avatar,
@@ -224,12 +225,12 @@ function CollapsibleGroupHeaderStatic(t0) {
   return t1;
 }
 const CollapsibleGroup = t0 => {
-  const $ = c(29);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
-    for (let $i = 0; $i < 29; $i += 1) {
+  const $ = c(33);
+  if ($[0] !== "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd") {
+    for (let $i = 0; $i < 33; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+    $[0] = "541af245e7b946a00fb862bbdbeef43dd124294e4c71865b955620d61a2591dd";
   }
   const {
     ref,
@@ -243,6 +244,8 @@ const CollapsibleGroup = t0 => {
     onChange: t3,
     disableAnimation: t4,
     interactive: t5,
+    keepMounted: t6,
+    headingLevel,
     "data-test": dataTest
   } = t0;
   const defaultExpanded = t1 === undefined ? false : t1;
@@ -250,13 +253,14 @@ const CollapsibleGroup = t0 => {
   const onChange = t3 === undefined ? _temp : t3;
   const disableAnimation = t4 === undefined ? false : t4;
   const interactive = t5 === undefined ? true : t5;
+  const keepMounted = t6 === undefined ? false : t6;
   const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
   const isExpanded = expanded !== null && expanded !== void 0 ? expanded : innerExpanded;
-  let t6;
+  let t7;
   if ($[1] !== expanded || $[2] !== onChange) {
-    t6 = collapsed => {
+    t7 = collapsed => {
       const nextExpanded = !collapsed;
       if (expanded == null) {
         setInnerExpanded(nextExpanded);
@@ -265,28 +269,28 @@ const CollapsibleGroup = t0 => {
     };
     $[1] = expanded;
     $[2] = onChange;
-    $[3] = t6;
+    $[3] = t7;
   } else {
-    t6 = $[3];
+    t7 = $[3];
   }
-  const handleChange = t6;
-  let t7;
+  const handleChange = t7;
+  let t8;
   if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = event => {
+    t8 = event => {
       const nextTarget = event.relatedTarget;
       if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
         return;
       }
       setFocused(false);
     };
-    $[4] = t7;
+    $[4] = t8;
   } else {
-    t7 = $[4];
+    t8 = $[4];
   }
-  const onBlur = t7;
-  let t8;
+  const onBlur = t8;
+  let t9;
   if ($[5] !== className || $[6] !== focused || $[7] !== hovered || $[8] !== isExpanded) {
-    t8 = classNames(styles.expand, className, {
+    t9 = classNames(styles.expand, className, {
       [styles.hovered]: hovered,
       [styles.expanded]: isExpanded,
       [styles.focused]: focused
@@ -295,16 +299,14 @@ const CollapsibleGroup = t0 => {
     $[6] = focused;
     $[7] = hovered;
     $[8] = isExpanded;
-    $[9] = t8;
+    $[9] = t9;
   } else {
-    t8 = $[9];
+    t9 = $[9];
   }
-  const classes = t8;
-  const t9 = !defaultExpanded;
-  const t10 = expanded == null ? null : !expanded;
-  let t11;
+  const classes = t9;
+  let t10;
   if ($[10] !== avatar || $[11] !== interactive || $[12] !== subtitle || $[13] !== title) {
-    t11 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
+    t10 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
       avatar: avatar,
       titleContent: title,
       subtitle: subtitle,
@@ -321,60 +323,76 @@ const CollapsibleGroup = t0 => {
     $[11] = interactive;
     $[12] = subtitle;
     $[13] = title;
-    $[14] = t11;
+    $[14] = t10;
   } else {
-    t11 = $[14];
+    t10 = $[14];
   }
-  let t12;
-  if ($[15] !== children) {
-    t12 = /*#__PURE__*/jsx(CollapseContent, {
+  const header = t10;
+  const t11 = !defaultExpanded;
+  const t12 = expanded == null ? null : !expanded;
+  let t13;
+  if ($[15] !== header || $[16] !== headingLevel) {
+    t13 = headingLevel != null ? /*#__PURE__*/React__default.createElement(`h${headingLevel}`, {
+      className: styles.heading
+    }, header) : header;
+    $[15] = header;
+    $[16] = headingLevel;
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== children) {
+    t14 = /*#__PURE__*/jsx(CollapseContent, {
       children: /*#__PURE__*/jsx("div", {
         className: styles.body,
         children: children
       })
     });
-    $[15] = children;
-    $[16] = t12;
+    $[18] = children;
+    $[19] = t14;
   } else {
-    t12 = $[16];
+    t14 = $[19];
   }
-  let t13;
-  if ($[17] !== disableAnimation || $[18] !== handleChange || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t9) {
-    t13 = /*#__PURE__*/jsxs(Collapse, {
-      defaultCollapsed: t9,
-      collapsed: t10,
+  let t15;
+  if ($[20] !== disableAnimation || $[21] !== handleChange || $[22] !== keepMounted || $[23] !== t11 || $[24] !== t12 || $[25] !== t13 || $[26] !== t14) {
+    t15 = /*#__PURE__*/jsxs(Collapse, {
+      defaultCollapsed: t11,
+      collapsed: t12,
       onChange: handleChange,
       disableAnimation: disableAnimation,
+      keepMounted: keepMounted,
       className: styles.collapseRoot,
-      children: [t11, t12]
+      children: [t13, t14]
     });
-    $[17] = disableAnimation;
-    $[18] = handleChange;
-    $[19] = t10;
-    $[20] = t11;
-    $[21] = t12;
-    $[22] = t9;
-    $[23] = t13;
+    $[20] = disableAnimation;
+    $[21] = handleChange;
+    $[22] = keepMounted;
+    $[23] = t11;
+    $[24] = t12;
+    $[25] = t13;
+    $[26] = t14;
+    $[27] = t15;
   } else {
-    t13 = $[23];
+    t15 = $[27];
   }
-  let t14;
-  if ($[24] !== classes || $[25] !== dataTest || $[26] !== ref || $[27] !== t13) {
-    t14 = /*#__PURE__*/jsx("div", {
+  let t16;
+  if ($[28] !== classes || $[29] !== dataTest || $[30] !== ref || $[31] !== t15) {
+    t16 = /*#__PURE__*/jsx("div", {
       ref: ref,
       className: classes,
       "data-test": dataTest,
-      children: t13
+      children: t15
     });
-    $[24] = classes;
-    $[25] = dataTest;
-    $[26] = ref;
-    $[27] = t13;
-    $[28] = t14;
+    $[28] = classes;
+    $[29] = dataTest;
+    $[30] = ref;
+    $[31] = t15;
+    $[32] = t16;
   } else {
-    t14 = $[28];
+    t16 = $[32];
   }
-  return t14;
+  return t16;
 };
 CollapsibleGroup.displayName = 'CollapsibleGroup';
 function _temp() {}

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

@@ -93,6 +93,7 @@ class DateInput extends React.PureComponent {
       locale
     } = this.props;
     const {
+      messages,
       translate
     } = this.context;
     let displayText = '';
@@ -105,7 +106,7 @@ class DateInput extends React.PureComponent {
     } else if (name === 'time') {
       displayText = time || '';
     }
-    const placeholder = ((_translations$addFirs, _translations$addSeco, _translations$addTime, _translations$selectN) => {
+    const placeholder = ((_translations$addFirs, _translations$addSeco, _translations$addTime, _ref, _ref2, _ref3, _translations$selectD) => {
       switch (name) {
         case 'from':
           return fromPlaceholder || ((_translations$addFirs = translations?.addFirstDate) !== null && _translations$addFirs !== void 0 ? _translations$addFirs : translate('addFirstDate'));
@@ -114,7 +115,7 @@ class DateInput extends React.PureComponent {
         case 'time':
           return timePlaceholder || ((_translations$addTime = translations?.addTime) !== null && _translations$addTime !== void 0 ? _translations$addTime : translate('addTime'));
         default:
-          return ((_translations$selectN = translations?.selectName) !== null && _translations$selectN !== void 0 ? _translations$selectN : translate('selectName')).replace('%name%', name).replace('{{name}}', name);
+          return ((_ref = (_ref2 = (_ref3 = (_translations$selectD = translations?.selectDate) !== null && _translations$selectD !== void 0 ? _translations$selectD : translations?.selectName) !== null && _ref3 !== void 0 ? _ref3 : messages.selectDate) !== null && _ref2 !== void 0 ? _ref2 : messages.selectName) !== null && _ref !== void 0 ? _ref : translate('selectDate')).replace('%name%', name).replace('{{name}}', name);
       }
     })();
     const classes = classNames(styles.filter, name !== 'time' && styles[`${name}Input`], divider && (name === 'from' || name === 'time') && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');

package/components/expand/collapsible-group.js

@@ -16,6 +16,7 @@ import '../collapse/consts.js';
 import '../collapse/collapse-content.js';
 import '../global/data-tests.js';
 import '../global/dom.js';
+import '../global/parse-css-duration.js';
 import '../collapse/utils.js';
 
 const warnDeprecation = deprecate(() => {}, '`CollapsibleGroup` from `@jetbrains/ring-ui/components/expand/collapsible-group` is deprecated and will be removed in Ring UI 8.0. Import it from `@jetbrains/ring-ui/components/collapsible-group/collapsible-group` instead.');

package/components/header/header.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/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/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 };