@jetbrains/ring-ui-built 7.0.123 → 8.0.0-beta.10

package/components/icon/icon.js

@@ -4,7 +4,7 @@ import deprecate from 'util-deprecate';
 import { Color, Size } from './icon.constants.js';
 import { s as styles, I as IconSVG } from '../_helpers/icon-svg.js';
 import { jsx } from 'react/jsx-runtime';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 
 const warnSize = deprecate(() => {}, `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.
@@ -54,7 +54,6 @@ class Icon extends PureComponent {
       className,
       size,
       color,
-      loading,
       glyph: Glyph,
       width,
       height,
@@ -64,9 +63,7 @@ class Icon extends PureComponent {
     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 /*#__PURE__*/jsx("span", {
       "data-test": "ring-icon",
       ...restProps,

package/components/icon/index.js

@@ -4,6 +4,6 @@ import 'react';
 import 'classnames';
 import 'util-deprecate';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import 'react/jsx-runtime';

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/input/input.js

@@ -13,12 +13,12 @@ export { I as Input, S as Size, I as default } from '../_helpers/input.js';
 import 'react/jsx-runtime';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
 import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';
 import '../icon/icon.constants.js';
+import 'util-deprecate';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../global/configuration.js';
 import '../i18n/i18n.js';

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