@jetbrains/ring-ui-built 7.0.115 → 8.0.0-beta.2

package/components/_helpers/table.js

@@ -1,3 +1,3 @@
-var style = {"row":"ring-table-row","dragHandle":"ring-table-dragHandle","tableWrapper":"ring-table-tableWrapper","table":"ring-table-table","userSelectNone":"ring-table-userSelectNone","headerCell":"ring-table-headerCell ring-global-font-smaller-lower ring-global-font-smaller ring-global-font-lower ring-global-font","headerCellSorted":"ring-table-headerCellSorted","headerCellSortable":"ring-table-headerCellSortable","sorter":"ring-table-sorter","sortedUp":"ring-table-sortedUp","icon":"ring-table-icon","caption":"ring-table-caption","tableHead":"ring-table-tableHead","subHeaderSticky":"ring-table-subHeaderSticky","disabledHover":"ring-table-disabledHover","rowSelected":"ring-table-rowSelected","rowFocused":"ring-table-rowFocused","cell":"ring-table-cell ring-global-ellipsis","loadingOverlay":"ring-table-loadingOverlay","wideFirstColumn":"ring-table-wideFirstColumn","cellUnlimited":"ring-table-cellUnlimited","cellRight":"ring-table-cellRight","metaColumn":"ring-table-metaColumn","headerMetaColumn":"ring-table-headerMetaColumn","visibleDragHandle":"ring-table-visibleDragHandle","rowCollapseExpandButton":"ring-table-rowCollapseExpandButton","draggingRow":"ring-table-draggingRow","draggingTable":"ring-table-draggingTable","tableMessage":"ring-table-tableMessage"};
+var styles = {"table":"ring-table-table","headerRow":"ring-table-headerRow","headerCell":"ring-table-headerCell","spacerRow":"ring-table-spacerRow","spacerCell":"ring-table-spacerCell","row":"ring-table-row","clickableRow":"ring-table-clickableRow","selectedRow":"ring-table-selectedRow","cell":"ring-table-cell","headerButton":"ring-table-headerButton","deleteColumnButton":"ring-table-deleteColumnButton"};
 
-export { style as s };
+export { styles as s };

package/components/_helpers/table2.js

@@ -0,0 +1,3 @@
+var style = {"row":"ring-table-row","dragHandle":"ring-table-dragHandle","tableWrapper":"ring-table-tableWrapper","table":"ring-table-table","userSelectNone":"ring-table-userSelectNone","headerCell":"ring-table-headerCell ring-global-font-smaller-lower ring-global-font-smaller ring-global-font-lower ring-global-font","headerCellSorted":"ring-table-headerCellSorted","headerCellSortable":"ring-table-headerCellSortable","sorter":"ring-table-sorter","sortedUp":"ring-table-sortedUp","icon":"ring-table-icon","caption":"ring-table-caption","tableHead":"ring-table-tableHead","subHeaderSticky":"ring-table-subHeaderSticky","disabledHover":"ring-table-disabledHover","rowSelected":"ring-table-rowSelected","rowFocused":"ring-table-rowFocused","cell":"ring-table-cell ring-global-ellipsis","loadingOverlay":"ring-table-loadingOverlay","wideFirstColumn":"ring-table-wideFirstColumn","cellUnlimited":"ring-table-cellUnlimited","cellRight":"ring-table-cellRight","metaColumn":"ring-table-metaColumn","headerMetaColumn":"ring-table-headerMetaColumn","visibleDragHandle":"ring-table-visibleDragHandle","rowCollapseExpandButton":"ring-table-rowCollapseExpandButton","draggingRow":"ring-table-draggingRow","draggingTable":"ring-table-draggingTable","tableMessage":"ring-table-tableMessage"};
+
+export { style as s };

package/components/data-list/data-list.d.ts

@@ -3,9 +3,9 @@
  */
 import { Component } from 'react';
 import { type FocusSensorOuterProps } from '../global/focus-sensor-hoc';
-import { type SelectionShortcutsAddProps, type SelectionShortcutsOuterProps } from '../table/selection-shortcuts-hoc';
-import { type DisableHoverAddProps } from '../table/disable-hover-hoc';
-import { type SelectionItem } from '../table/selection';
+import { type SelectionShortcutsAddProps, type SelectionShortcutsOuterProps } from '../legacy-table/selection-shortcuts-hoc';
+import { type DisableHoverAddProps } from '../legacy-table/disable-hover-hoc';
+import { type SelectionItem } from '../legacy-table/selection';
 import { type FormattedItem, moreLessButtonStates } from './item';
 export interface DataListBaseProps<T extends SelectionItem> {
     data: readonly T[];
@@ -20,7 +20,7 @@ export interface DataListBaseProps<T extends SelectionItem> {
 type FocusableProps<T extends SelectionItem> = DataListBaseProps<T> & DisableHoverAddProps & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsAddProps<T>;
 export type DataListContainerProps<T extends SelectionItem> = DataListBaseProps<T> & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsOuterProps<T>;
 export default class DataListContainer<T extends SelectionItem> extends Component<DataListContainerProps<T>> {
-    DataList: import("react").ComponentClass<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>, any>;
+    DataList: import("react").ComponentClass<import("../legacy-table/disable-hover-hoc").DisableHoverProps<import("../legacy-table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>, any>;
     render(): import("react").JSX.Element;
 }
 export {};

package/components/data-list/data-list.js

@@ -1,8 +1,8 @@
 import { Component, PureComponent } from 'react';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc.js';
-import selectionShortcutsHOC from '../table/selection-shortcuts-hoc.js';
-import disableHoverHOC from '../table/disable-hover-hoc.js';
+import selectionShortcutsHOC from '../legacy-table/selection-shortcuts-hoc.js';
+import disableHoverHOC from '../legacy-table/disable-hover-hoc.js';
 import getUID from '../global/get-uid.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import Loader from '../loader/loader.js';

package/components/data-list/data-list.mock.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type SelectionItem } from '../table/selection';
+import { type SelectionItem } from '../legacy-table/selection';
 export interface Item extends SelectionItem {
     title: ReactNode;
     collapsible?: boolean;

package/components/data-list/item.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent, type ReactNode } from 'react';
-import { type SelectionItem } from '../table/selection';
+import { type SelectionItem } from '../legacy-table/selection';
 import type Selection from './selection';
 export declare enum moreLessButtonStates {
     UNUSED = 0,

package/components/data-list/selection.d.ts

@@ -1,4 +1,4 @@
-import TableSelection, { type CloneWithConfig, type SelectionItem, type TableSelectionConfig } from '../table/selection';
+import TableSelection, { type CloneWithConfig, type SelectionItem, type TableSelectionConfig } from '../legacy-table/selection';
 interface DataListSelectionConfig<T extends SelectionItem> extends TableSelectionConfig<T> {
     partialSelected?: Set<T> | undefined;
 }

package/components/data-list/selection.js

@@ -1,5 +1,5 @@
 import 'core-js/modules/es.array.includes.js';
-import Selection$1 from '../table/selection.js';
+import Selection$1 from '../legacy-table/selection.js';
 
 class Selection extends Selection$1 {
   _partialSelected;

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

@@ -72,7 +72,7 @@ import 'date-fns/getDate';
 import 'date-fns/isToday';
 import './consts.js';
 import 'date-fns/add';
-import './use-intersection-observer.js';
+import '../global/intersection-observer-context.js';
 import './scroll-arith.js';
 import './use-scroll-behavior.js';
 import '../global/use-event-callback.js';

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

@@ -50,7 +50,7 @@ import 'date-fns/isToday';
 import 'date-fns/add';
 import '../global/sniffer.js';
 import 'sniffr';
-import './use-intersection-observer.js';
+import '../global/intersection-observer-context.js';
 import './scroll-arith.js';
 import './use-scroll-behavior.js';
 import '../global/use-event-callback.js';

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

@@ -1,9 +1,7 @@
 import { type Locale } from 'date-fns';
 import { type MonthsProps } from './consts';
-import { type IntersectionObserverHandle } from './use-intersection-observer';
 export interface MonthProps extends MonthsProps {
     month: Date;
-    intersectionObserverHandle: IntersectionObserverHandle | null;
 }
 export default function Month(props: MonthProps): import("react").JSX.Element;
 export declare function getMonthHeight(monthStart: Date | number, locale: Locale | undefined): number;

package/components/date-picker/month.js

@@ -5,7 +5,7 @@ import { getDaysInMonth, setDate } from 'date-fns';
 import { useRef, createElement } from 'react';
 import Day from './day.js';
 import units, { getWeekStartsOn, WEEK } from './consts.js';
-import { useVisibility } from './use-intersection-observer.js';
+import { useIsIntersecting } from '../global/intersection-observer-context.js';
 import { s as styles } from '../_helpers/date-picker.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.includes.js';
@@ -23,34 +23,33 @@ import 'sniffr';
 
 function Month(props) {
   const $ = c(13);
-  if ($[0] !== "2f6fe4553edaada7486df2c003273bf4ae27149a404d6c91c9c721f7d6c02b8b") {
+  if ($[0] !== "f69b6ec913368865656f465501e81a8f3fab6df87b3d741c6b878c75ad08c0c9") {
     for (let $i = 0; $i < 13; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "2f6fe4553edaada7486df2c003273bf4ae27149a404d6c91c9c721f7d6c02b8b";
+    $[0] = "f69b6ec913368865656f465501e81a8f3fab6df87b3d741c6b878c75ad08c0c9";
   }
   const {
     month,
-    locale,
-    intersectionObserverHandle
+    locale
   } = props;
   const containerRef = useRef(null);
-  const visible = useVisibility(intersectionObserverHandle, containerRef);
+  const isIntersecting = useIsIntersecting(containerRef);
   let t0;
-  if ($[1] !== locale || $[2] !== month || $[3] !== visible) {
-    t0 = visible ? {} : {
+  if ($[1] !== isIntersecting || $[2] !== locale || $[3] !== month) {
+    t0 = isIntersecting ? {} : {
       height: getMonthHeight(month, locale)
     };
-    $[1] = locale;
-    $[2] = month;
-    $[3] = visible;
+    $[1] = isIntersecting;
+    $[2] = locale;
+    $[3] = month;
     $[4] = t0;
   } else {
     t0 = $[4];
   }
   let t1;
-  if ($[5] !== locale || $[6] !== month || $[7] !== props || $[8] !== visible) {
-    t1 = visible && /*#__PURE__*/jsxs(Fragment, {
+  if ($[5] !== isIntersecting || $[6] !== locale || $[7] !== month || $[8] !== props) {
+    t1 = isIntersecting && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx("span", {
         className: styles.monthTitle,
         children: format(month, "LLLL", {
@@ -72,10 +71,10 @@ function Month(props) {
         key: i_0
       }))]
     });
-    $[5] = locale;
-    $[6] = month;
-    $[7] = props;
-    $[8] = visible;
+    $[5] = isIntersecting;
+    $[6] = locale;
+    $[7] = month;
+    $[8] = props;
     $[9] = t1;
   } else {
     t1 = $[9];

package/components/date-picker/months.js

@@ -6,7 +6,7 @@ import units from './consts.js';
 import { ScrollArith } from './scroll-arith.js';
 import { useScrollBehavior } from './use-scroll-behavior.js';
 import scheduleRAF from '../global/schedule-raf.js';
-import { useIntersectionObserver } from './use-intersection-observer.js';
+import { useIntersectionObserverHandle, IntersectionObserverContext } from '../global/intersection-observer-context.js';
 import { s as styles } from '../_helpers/date-picker.js';
 import { createElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -44,16 +44,16 @@ const scheduleScroll = scheduleRAF();
  *
  * To avoid an unpainted gap at the viewport boundary, the next month must be reported
  * as visible slightly before it actually enters the viewport. We achieve this by
- * extending the IntersectionObserver scrollMargin.
+ * extending the IntersectionObserver rootMargin.
  */
-const intersectionObserverScrollMargin = units.cellSize * 2;
+const intersectionObserverRootMargin = units.cellSize * 2;
 function Months(props) {
-  const $ = c(11);
-  if ($[0] !== "4aa546d8594d34e20d23ddb1ac60f352dda8d4f0089b69b199ba5199e1f35dd5") {
-    for (let $i = 0; $i < 11; $i += 1) {
+  const $ = c(12);
+  if ($[0] !== "3a35ff495c6e9b775eb682d77f791841d2ec4d5f8b99fec4a5000c17ec4e2117") {
+    for (let $i = 0; $i < 12; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "4aa546d8594d34e20d23ddb1ac60f352dda8d4f0089b69b199ba5199e1f35dd5";
+    $[0] = "3a35ff495c6e9b775eb682d77f791841d2ec4d5f8b99fec4a5000c17ec4e2117";
   }
   const {
     scrollDate,
@@ -64,46 +64,55 @@ function Months(props) {
     containerRef,
     items
   } = useScrollBehavior(scrollDate, setScrollDate, locale, "monthsScroll", scrollArith, scheduleScroll);
-  const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
-  let t0;
-  if ($[1] !== intersectionObserverHandle || $[2] !== items || $[3] !== props) {
-    let t1;
-    if ($[5] !== intersectionObserverHandle || $[6] !== props) {
-      t1 = month => /*#__PURE__*/createElement(Month, {
+  const t0 = useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin);
+  let t1;
+  if ($[1] !== items || $[2] !== props) {
+    let t2;
+    if ($[4] !== props) {
+      t2 = month => /*#__PURE__*/createElement(Month, {
         ...props,
         month: month,
-        key: +month,
-        intersectionObserverHandle: intersectionObserverHandle
+        key: +month
       });
-      $[5] = intersectionObserverHandle;
-      $[6] = props;
-      $[7] = t1;
+      $[4] = props;
+      $[5] = t2;
     } else {
-      t1 = $[7];
+      t2 = $[5];
     }
-    t0 = items.map(t1);
-    $[1] = intersectionObserverHandle;
-    $[2] = items;
-    $[3] = props;
-    $[4] = t0;
+    t1 = items.map(t2);
+    $[1] = items;
+    $[2] = props;
+    $[3] = t1;
   } else {
-    t0 = $[4];
+    t1 = $[3];
   }
-  let t1;
-  if ($[8] !== containerRef || $[9] !== t0) {
-    t1 = /*#__PURE__*/jsx("div", {
+  let t2;
+  if ($[6] !== containerRef || $[7] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
       className: styles.months,
       ref: containerRef,
       "data-test": "ring-date-popup--months",
-      children: t0
+      children: t1
+    });
+    $[6] = containerRef;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== t0 || $[10] !== t2) {
+    t3 = /*#__PURE__*/jsx(IntersectionObserverContext.Provider, {
+      value: t0,
+      children: t2
     });
-    $[8] = containerRef;
     $[9] = t0;
-    $[10] = t1;
+    $[10] = t2;
+    $[11] = t3;
   } else {
-    t1 = $[10];
+    t3 = $[11];
   }
-  return t1;
+  return t3;
 }
 
 export { Months as default };

package/components/date-picker/years.js

@@ -13,7 +13,7 @@ import { ScrollArith } from './scroll-arith.js';
 import { useScrollBehavior } from './use-scroll-behavior.js';
 import { animateDate } from './animate-date.js';
 import scheduleRAF from '../global/schedule-raf.js';
-import { useIntersectionObserver, useVisibility } from './use-intersection-observer.js';
+import { useIntersectionObserverHandle, IntersectionObserverContext, useIsIntersecting } from '../global/intersection-observer-context.js';
 import { s as styles } from '../_helpers/date-picker.js';
 import { jsx } from 'react/jsx-runtime';
 import 'date-fns/add';
@@ -35,14 +35,14 @@ const scheduleScroll = scheduleRAF();
 /**
  * Reduces "empty" years during fast scrolling.
  */
-const intersectionObserverScrollMargin = units.calHeight / 2;
+const intersectionObserverRootMargin = units.calHeight / 2;
 function Years(t0) {
-  const $ = c(24);
-  if ($[0] !== "aa5edf1b8146bb2f5048c50f376e591fc6fc5fcb5e70e35dc076528241c541c9") {
-    for (let $i = 0; $i < 24; $i += 1) {
+  const $ = c(25);
+  if ($[0] !== "7e95fee5be468c0469f1cdfc188c2b13e855e290b93af773b0ec1e248249baca") {
+    for (let $i = 0; $i < 25; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "aa5edf1b8146bb2f5048c50f376e591fc6fc5fcb5e70e35dc076528241c541c9";
+    $[0] = "7e95fee5be468c0469f1cdfc188c2b13e855e290b93af773b0ec1e248249baca";
   }
   const {
     scrollDate,
@@ -153,81 +153,89 @@ function Years(t0) {
     containerRef,
     items
   } = useScrollBehavior(localScrollDate, syncCalendarScrollDate, undefined, "yearsScroll", scrollArith, scheduleScroll);
-  const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
-  let t7;
-  if ($[12] !== handleYearClick || $[13] !== intersectionObserverHandle || $[14] !== items || $[15] !== localScrollDate.date) {
-    let t8;
-    if ($[17] !== handleYearClick || $[18] !== intersectionObserverHandle || $[19] !== localScrollDate.date) {
-      t8 = year_0 => /*#__PURE__*/jsx(Year, {
+  const t7 = useIntersectionObserverHandle(containerRef, intersectionObserverRootMargin);
+  let t8;
+  if ($[12] !== handleYearClick || $[13] !== items || $[14] !== localScrollDate.date) {
+    let t9;
+    if ($[16] !== handleYearClick || $[17] !== localScrollDate.date) {
+      t9 = year_0 => /*#__PURE__*/jsx(Year, {
         year: year_0,
         scrollDate: localScrollDate.date,
-        handleYearClick: handleYearClick,
-        intersectionObserverHandle: intersectionObserverHandle
+        handleYearClick: handleYearClick
       }, +year_0);
-      $[17] = handleYearClick;
-      $[18] = intersectionObserverHandle;
-      $[19] = localScrollDate.date;
-      $[20] = t8;
+      $[16] = handleYearClick;
+      $[17] = localScrollDate.date;
+      $[18] = t9;
     } else {
-      t8 = $[20];
+      t9 = $[18];
     }
-    t7 = items.map(t8);
+    t8 = items.map(t9);
     $[12] = handleYearClick;
-    $[13] = intersectionObserverHandle;
-    $[14] = items;
-    $[15] = localScrollDate.date;
-    $[16] = t7;
+    $[13] = items;
+    $[14] = localScrollDate.date;
+    $[15] = t8;
   } else {
-    t7 = $[16];
+    t8 = $[15];
   }
-  let t8;
-  if ($[21] !== containerRef || $[22] !== t7) {
-    t8 = /*#__PURE__*/jsx("div", {
+  let t9;
+  if ($[19] !== containerRef || $[20] !== t8) {
+    t9 = /*#__PURE__*/jsx("div", {
       className: styles.years,
       ref: containerRef,
       "data-test": "ring-date-popup--years",
-      children: t7
+      children: t8
+    });
+    $[19] = containerRef;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== t7 || $[23] !== t9) {
+    t10 = /*#__PURE__*/jsx(IntersectionObserverContext.Provider, {
+      value: t7,
+      children: t9
     });
-    $[21] = containerRef;
     $[22] = t7;
-    $[23] = t8;
+    $[23] = t9;
+    $[24] = t10;
   } else {
-    t8 = $[23];
+    t10 = $[24];
   }
-  return t8;
+  return t10;
 }
 function Year(t0) {
   const $ = c(24);
-  if ($[0] !== "aa5edf1b8146bb2f5048c50f376e591fc6fc5fcb5e70e35dc076528241c541c9") {
+  if ($[0] !== "7e95fee5be468c0469f1cdfc188c2b13e855e290b93af773b0ec1e248249baca") {
     for (let $i = 0; $i < 24; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "aa5edf1b8146bb2f5048c50f376e591fc6fc5fcb5e70e35dc076528241c541c9";
+    $[0] = "7e95fee5be468c0469f1cdfc188c2b13e855e290b93af773b0ec1e248249baca";
   }
   const {
     year,
     scrollDate,
-    handleYearClick,
-    intersectionObserverHandle
+    handleYearClick
   } = t0;
   const buttonRef = useRef(null);
-  const visible = useVisibility(intersectionObserverHandle, buttonRef);
+  const isIntersecting = useIsIntersecting(buttonRef);
   const t1 = +year;
-  const t2 = !visible;
+  const t2 = !isIntersecting;
   let t3;
-  if ($[1] !== scrollDate || $[2] !== visible || $[3] !== year) {
-    t3 = visible && isSameYear(year, scrollDate) && styles.currentYear;
-    $[1] = scrollDate;
-    $[2] = visible;
+  if ($[1] !== isIntersecting || $[2] !== scrollDate || $[3] !== year) {
+    t3 = isIntersecting && isSameYear(year, scrollDate) && styles.currentYear;
+    $[1] = isIntersecting;
+    $[2] = scrollDate;
     $[3] = year;
     $[4] = t3;
   } else {
     t3 = $[4];
   }
   let t4;
-  if ($[5] !== visible || $[6] !== year) {
-    t4 = visible && isThisYear(year) && styles.today;
-    $[5] = visible;
+  if ($[5] !== isIntersecting || $[6] !== year) {
+    t4 = isIntersecting && isThisYear(year) && styles.today;
+    $[5] = isIntersecting;
     $[6] = year;
     $[7] = t4;
   } else {
@@ -243,19 +251,19 @@ function Year(t0) {
     t5 = $[10];
   }
   let t6;
-  if ($[11] !== handleYearClick || $[12] !== visible || $[13] !== year) {
-    t6 = visible ? () => handleYearClick(year) : undefined;
+  if ($[11] !== handleYearClick || $[12] !== isIntersecting || $[13] !== year) {
+    t6 = isIntersecting ? () => handleYearClick(year) : undefined;
     $[11] = handleYearClick;
-    $[12] = visible;
+    $[12] = isIntersecting;
     $[13] = year;
     $[14] = t6;
   } else {
     t6 = $[14];
   }
   let t7;
-  if ($[15] !== visible || $[16] !== year) {
-    t7 = visible ? format(year, "yyyy") : "\xA0";
-    $[15] = visible;
+  if ($[15] !== isIntersecting || $[16] !== year) {
+    t7 = isIntersecting ? format(year, "yyyy") : "\xA0";
+    $[15] = isIntersecting;
     $[16] = year;
     $[17] = t7;
   } else {

package/components/global/intersection-observer-context.d.ts

@@ -0,0 +1,26 @@
+import { type RefObject } from 'react';
+/**
+ * Usage:
+ *
+ * ```tsx
+ * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ *   <YourComponent />
+ * </IntersectionObserverContext.Provider>
+ *
+ * function YourComponent() {
+ *   // Contains the current isIntersecting value
+ *   const isIntersecting = useIsIntersecting(elementRef);
+ *   // Or, to get updates instead:
+ *   useIsIntersectingListener(elementRef, newIsIntersecting => {
+ *     // ...
+ *   })
+ * }
+ * ```
+ */
+export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle | null>;
+export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle | null;
+export interface IntersectionObserverHandle {
+    observe(element: Element, setIsIntersecting: (isIntersecting: boolean) => void): () => void;
+}
+export declare function useIsIntersecting(elementRef: RefObject<Element | null>): boolean;
+export declare function useIsIntersectingListener(elementRef: RefObject<Element | null>, onChange: (isIntersecting: boolean) => void): void;

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

@@ -0,0 +1,140 @@
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect, createContext, useContext } from 'react';
+
+/**
+ * Usage:
+ *
+ * ```tsx
+ * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ *   <YourComponent />
+ * </IntersectionObserverContext.Provider>
+ *
+ * function YourComponent() {
+ *   // Contains the current isIntersecting value
+ *   const isIntersecting = useIsIntersecting(elementRef);
+ *   // Or, to get updates instead:
+ *   useIsIntersectingListener(elementRef, newIsIntersecting => {
+ *     // ...
+ *   })
+ * }
+ * ```
+ */
+const IntersectionObserverContext = /*#__PURE__*/createContext(null);
+function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
+  const $ = c(6);
+  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+    for (let $i = 0; $i < 6; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+  }
+  const [handle, setHandle] = useState(null);
+  let t0;
+  let t1;
+  if ($[1] !== rootMargin || $[2] !== rootRef || $[3] !== scrollMargin) {
+    t0 = () => {
+      const root = rootRef?.current;
+      const elementToOnChange = new Map();
+      const observer = new IntersectionObserver(entries => {
+        for (const entry of entries) {
+          const onChange = elementToOnChange.get(entry.target);
+          onChange?.(entry.isIntersecting);
+        }
+      }, {
+        root,
+        rootMargin: rootMargin != null ? `${rootMargin}px` : undefined,
+        scrollMargin: scrollMargin != null ? `${scrollMargin}px` : undefined
+      });
+      setHandle({
+        observe(element, onChange_0) {
+          elementToOnChange.set(element, onChange_0);
+          observer.observe(element);
+          return () => {
+            elementToOnChange.delete(element);
+            observer.unobserve(element);
+          };
+        }
+      });
+      return () => {
+        observer.disconnect();
+        setHandle(null);
+      };
+    };
+    t1 = [rootRef, rootMargin, scrollMargin];
+    $[1] = rootMargin;
+    $[2] = rootRef;
+    $[3] = scrollMargin;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t0 = $[4];
+    t1 = $[5];
+  }
+  useEffect(t0, t1);
+  return handle;
+}
+function useIsIntersecting(elementRef) {
+  const $ = c(5);
+  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+    for (let $i = 0; $i < 5; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+  }
+  const handle = useContext(IntersectionObserverContext);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  let t0;
+  let t1;
+  if ($[1] !== elementRef || $[2] !== handle) {
+    t0 = () => {
+      const element = elementRef.current;
+      if (!element || !handle) {
+        return;
+      }
+      return handle.observe(element, setIsIntersecting);
+    };
+    t1 = [handle, elementRef, setIsIntersecting];
+    $[1] = elementRef;
+    $[2] = handle;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  useEffect(t0, t1);
+  return isIntersecting;
+}
+function useIsIntersectingListener(elementRef, onChange) {
+  const $ = c(6);
+  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+    for (let $i = 0; $i < 6; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+  }
+  const handle = useContext(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 };