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

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

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/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/column-animation.js

@@ -0,0 +1,133 @@
+import { c } from 'react/compiler-runtime';
+import { 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';
+
+const reorderExpectationTimeout = 1000;
+function useColumnAnimation(t0) {
+  const $ = c(17);
+  if ($[0] !== "3136e2b54bc66931abc9531e502b09d39738e25670fb1469ab6b7e91fc803e97") {
+    for (let $i = 0; $i < 17; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "3136e2b54bc66931abc9531e502b09d39738e25670fb1469ab6b7e91fc803e97";
+  }
+  const {
+    disabled,
+    tableRef,
+    columns
+  } = t0;
+  const [columnAnimation, setColumnAnimation] = useState(null);
+  const pendingColumnReorder = useRef(null);
+  let t1;
+  if ($[1] !== columns || $[2] !== disabled) {
+    t1 = reorderSpec => {
+      if (disabled) {
+        return;
+      }
+      const timerId = window.setTimeout(() => {
+        pendingColumnReorder.current = null;
+      }, reorderExpectationTimeout);
+      pendingColumnReorder.current = {
+        ...reorderSpec,
+        timerId,
+        columns
+      };
+    };
+    $[1] = columns;
+    $[2] = disabled;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const expectColumnReorder = t1;
+  let t2;
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => () => {
+      if (pendingColumnReorder.current) {
+        window.clearTimeout(pendingColumnReorder.current.timerId);
+        pendingColumnReorder.current = null;
+      }
+    };
+    t3 = [];
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t2 = $[4];
+    t3 = $[5];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[6] !== columns || $[7] !== tableRef) {
+    t4 = () => {
+      const table = tableRef.current;
+      if (!table || !pendingColumnReorder.current || columns === pendingColumnReorder.current.columns) {
+        return;
+      }
+      const {
+        fromIndex,
+        insertionIndex
+      } = pendingColumnReorder.current;
+      pendingColumnReorder.current = null;
+      const columnIndex = fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex;
+      return requestAnimationFrameWithCleanup(() => setColumnAnimation(prev => prev == null ? {
+        columnIndex,
+        phase: "initial",
+        cellClassName: styles.animatedColumnInitial
+      } : prev));
+    };
+    t5 = [columns, tableRef];
+    $[6] = columns;
+    $[7] = tableRef;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t4 = $[8];
+    t5 = $[9];
+  }
+  useEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[10] !== columnAnimation || $[11] !== tableRef) {
+    t6 = () => {
+      if (columnAnimation?.phase === "initial") {
+        return requestAnimationFrameWithCleanup(() => setColumnAnimation(prev_0 => prev_0 === columnAnimation ? {
+          ...prev_0,
+          phase: "fade-out",
+          cellClassName: styles.animatedColumnFadeOut
+        } : prev_0));
+      }
+      if (columnAnimation?.phase === "fade-out") {
+        const fadeOutMs = parseCssDuration(window.getComputedStyle(tableRef.current).getPropertyValue("--animated-column-fade-out-duration"));
+        return setTimeoutWithCleanup(() => setColumnAnimation(prev_1 => prev_1 === columnAnimation ? null : prev_1), fadeOutMs);
+      }
+    };
+    t7 = [columnAnimation, tableRef];
+    $[10] = columnAnimation;
+    $[11] = tableRef;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t6 = $[12];
+    t7 = $[13];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[14] !== columnAnimation || $[15] !== expectColumnReorder) {
+    t8 = {
+      columnAnimation,
+      expectColumnReorder
+    };
+    $[14] = columnAnimation;
+    $[15] = expectColumnReorder;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  return t8;
+}
+
+export { useColumnAnimation };