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

package/components/data-list/title.js

@@ -13,7 +13,7 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';

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

@@ -14,7 +14,7 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';

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

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { format } from 'date-fns/format';
@@ -72,10 +72,9 @@ 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';
 import './years.js';
 import 'date-fns/addYears';
 import 'date-fns/getYear';

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

@@ -24,7 +24,7 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
 import '../global/configuration.js';
@@ -50,10 +50,9 @@ 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';
 import '../global/schedule-raf.js';
 import 'date-fns/addYears';
 import 'date-fns/getYear';

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

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { format } from 'date-fns/format';

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

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { useState } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';

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

@@ -1,11 +1,11 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { format } from 'date-fns/format';
 import { getDay } from 'date-fns/getDay';
 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

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { addMonths } from 'date-fns/addMonths';
 import { startOfMonth } from 'date-fns/startOfMonth';
 import Month, { getMonthHeight } from './month.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';
@@ -26,7 +26,6 @@ import 'date-fns/startOfDay';
 import 'date-fns/add';
 import '../global/sniffer.js';
 import 'sniffr';
-import '../global/use-event-callback.js';
 
 function getMonthHeightWithMargin(date, locale) {
   return units.unit * 2 + getMonthHeight(date, locale);
@@ -44,16 +43,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] !== "b514d0ab3a898922fd1a8992e74c2054d3bf131f57e16e7ad928f67f5c608db9") {
+    for (let $i = 0; $i < 12; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "4aa546d8594d34e20d23ddb1ac60f352dda8d4f0089b69b199ba5199e1f35dd5";
+    $[0] = "b514d0ab3a898922fd1a8992e74c2054d3bf131f57e16e7ad928f67f5c608db9";
   }
   const {
     scrollDate,
@@ -64,46 +63,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, {
+      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/use-intersection-observer.js

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { useState, useEffect } from 'react';
 
 function useIntersectionObserver(containerRef, t0) {

package/components/date-picker/use-scroll-behavior.js

@@ -1,19 +1,18 @@
-import { c } from 'react-compiler-runtime';
-import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { c } from 'react/compiler-runtime';
+import { useState, useRef, useEffectEvent, useEffect, useLayoutEffect } from 'react';
 import units, { isSafariOnIPhone, scrollerReRenderDelayIPhone } from './consts.js';
-import useEventCallback from '../global/use-event-callback.js';
 import 'date-fns/add';
 import 'date-fns';
 import '../global/sniffer.js';
 import 'sniffr';
 
 function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDateSource, arith, scheduleScroll) {
-  const $ = c(39);
-  if ($[0] !== "5ce72fbec5594f0e31b7b5703cf53349d817d9722b565bfa743aaa359a97033d") {
-    for (let $i = 0; $i < 39; $i += 1) {
+  const $ = c(38);
+  if ($[0] !== "a3a62d0eaf68edc8b0ddbd21981a78487012d4433139cd433e355b8f989ab2de") {
+    for (let $i = 0; $i < 38; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "5ce72fbec5594f0e31b7b5703cf53349d817d9722b565bfa743aaa359a97033d";
+    $[0] = "a3a62d0eaf68edc8b0ddbd21981a78487012d4433139cd433e355b8f989ab2de";
   }
   let t0;
   if ($[1] !== arith || $[2] !== scrollDate.date) {
@@ -60,7 +59,7 @@ function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDate
   } else {
     t2 = $[12];
   }
-  const syncSelfState = useEventCallback(t2);
+  const syncSelfState = useEffectEvent(t2);
   const didMountRef = useRef(false);
   let t3;
   if ($[13] !== scrollDate.date || $[14] !== scrollDate.source || $[15] !== selfScrollDateSource || $[16] !== syncSelfState) {
@@ -87,19 +86,18 @@ function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDate
     t3 = $[17];
   }
   let t4;
-  if ($[18] !== scrollDate || $[19] !== selfScrollDateSource || $[20] !== syncSelfState) {
-    t4 = [scrollDate, selfScrollDateSource, syncSelfState];
+  if ($[18] !== scrollDate || $[19] !== selfScrollDateSource) {
+    t4 = [scrollDate, selfScrollDateSource];
     $[18] = scrollDate;
     $[19] = selfScrollDateSource;
-    $[20] = syncSelfState;
-    $[21] = t4;
+    $[20] = t4;
   } else {
-    t4 = $[21];
+    t4 = $[20];
   }
   useEffect(t3, t4);
   const ignoreNextScrollEventRef = useRef(true);
   let t5;
-  if ($[22] !== scrollTop) {
+  if ($[21] !== scrollTop) {
     t5 = function setContainerScrollFromState() {
       const container_0 = containerRef.current;
       if (!container_0) {
@@ -108,24 +106,24 @@ function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDate
       ignoreNextScrollEventRef.current = true;
       container_0.scrollTop = scrollTop;
     };
-    $[22] = scrollTop;
-    $[23] = t5;
+    $[21] = scrollTop;
+    $[22] = t5;
   } else {
-    t5 = $[23];
+    t5 = $[22];
   }
   let t6;
-  if ($[24] !== items || $[25] !== scrollTop) {
+  if ($[23] !== items || $[24] !== scrollTop) {
     t6 = [items, scrollTop];
-    $[24] = items;
-    $[25] = scrollTop;
-    $[26] = t6;
+    $[23] = items;
+    $[24] = scrollTop;
+    $[25] = t6;
   } else {
-    t6 = $[26];
+    t6 = $[25];
   }
   useLayoutEffect(t5, t6);
   const updateStateTimerRef = useRef(null);
   let t7;
-  if ($[27] !== arith || $[28] !== items || $[29] !== locale || $[30] !== onContainerScroll || $[31] !== scheduleScroll || $[32] !== selfScrollDateSource) {
+  if ($[26] !== arith || $[27] !== items || $[28] !== locale || $[29] !== onContainerScroll || $[30] !== scheduleScroll || $[31] !== selfScrollDateSource) {
     t7 = () => {
       scheduleScroll(() => {
         if (updateStateTimerRef.current != null) {
@@ -164,20 +162,19 @@ function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDate
         }
       });
     };
-    $[27] = arith;
-    $[28] = items;
-    $[29] = locale;
-    $[30] = onContainerScroll;
-    $[31] = scheduleScroll;
-    $[32] = selfScrollDateSource;
-    $[33] = t7;
+    $[26] = arith;
+    $[27] = items;
+    $[28] = locale;
+    $[29] = onContainerScroll;
+    $[30] = scheduleScroll;
+    $[31] = selfScrollDateSource;
+    $[32] = t7;
   } else {
-    t7 = $[33];
+    t7 = $[32];
   }
-  const handleScroll = useEventCallback(t7);
+  const handleScroll = useEffectEvent(t7);
   let t8;
-  let t9;
-  if ($[34] !== handleScroll) {
+  if ($[33] !== handleScroll) {
     t8 = () => {
       const container_2 = containerRef.current;
       if (!container_2) {
@@ -192,25 +189,29 @@ function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDate
         }
       };
     };
-    t9 = [handleScroll];
-    $[34] = handleScroll;
-    $[35] = t8;
-    $[36] = t9;
+    $[33] = handleScroll;
+    $[34] = t8;
+  } else {
+    t8 = $[34];
+  }
+  let t9;
+  if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = [];
+    $[35] = t9;
   } else {
-    t8 = $[35];
-    t9 = $[36];
+    t9 = $[35];
   }
   useEffect(t8, t9);
   let t10;
-  if ($[37] !== items) {
+  if ($[36] !== items) {
     t10 = {
       containerRef,
       items
     };
-    $[37] = items;
-    $[38] = t10;
+    $[36] = items;
+    $[37] = t10;
   } else {
-    t10 = $[38];
+    t10 = $[37];
   }
   return t10;
 }

package/components/date-picker/weekdays.js

@@ -1,5 +1,5 @@
 import 'core-js/modules/es.array.includes.js';
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import classNames from 'classnames';
 import { getDay } from 'date-fns/getDay';
 import { format } from 'date-fns/format';

package/components/date-picker/years.js

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';
@@ -13,14 +13,13 @@ 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';
 import 'date-fns';
 import '../global/sniffer.js';
 import 'sniffr';
-import '../global/use-event-callback.js';
 
 const {
   yearHeight
@@ -35,14 +34,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] !== "d83f39ae52d8a31382391108984551694ebcf0097c6e55663ca967ea74179702") {
+    for (let $i = 0; $i < 25; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "aa5edf1b8146bb2f5048c50f376e591fc6fc5fcb5e70e35dc076528241c541c9";
+    $[0] = "d83f39ae52d8a31382391108984551694ebcf0097c6e55663ca967ea74179702";
   }
   const {
     scrollDate,
@@ -153,81 +152,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, {
+      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] !== "d83f39ae52d8a31382391108984551694ebcf0097c6e55663ca967ea74179702") {
     for (let $i = 0; $i < 24; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "aa5edf1b8146bb2f5048c50f376e591fc6fc5fcb5e70e35dc076528241c541c9";
+    $[0] = "d83f39ae52d8a31382391108984551694ebcf0097c6e55663ca967ea74179702";
   }
   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 +250,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 {