adobe · LFDanLu · Mar 8, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
@@ -45,8 +45,11 @@ export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
 export {useLoadMore} from './useLoadMore';
+export {UNSTABLE_useLoadMoreSentinel} from './useLoadMoreSentinel';
 export {inertValue} from './inertValue';
 export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
 export {isCtrlKeyPressed} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';
+
+export type {LoadMoreSentinelProps} from './useLoadMoreSentinel';
diff --git a/packages/@react-aria/utils/src/useLoadMoreSentinel.ts b/packages/@react-aria/utils/src/useLoadMoreSentinel.ts
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type {AsyncLoadable} from '@react-types/shared';
+import {getScrollParent} from './getScrollParent';
+import {RefObject, useRef} from 'react';
+import {useEffectEvent} from './useEffectEvent';
+import {useLayoutEffect} from './useLayoutEffect';
+
+export interface LoadMoreSentinelProps extends AsyncLoadable {
+  /**
+   * The amount of offset from the bottom of your scrollable region that should trigger load more.
+   * Uses a percentage value relative to the scroll body's client height. Load more is then triggered
+   * when your current scroll position's distance from the bottom of the currently loaded list of items is less than
+   * or equal to the provided value. (e.g. 1 = 100% of the scroll region's height).
+   * @default 1
+   */
+  scrollOffset?: number
+  // TODO: Maybe include a scrollRef option so the user can provide the scrollParent to compare against instead of having us look it up
+}
+
+export function UNSTABLE_useLoadMoreSentinel(props: LoadMoreSentinelProps, ref: RefObject<HTMLElement | null>): void {
+  let {isLoading, onLoadMore, scrollOffset = 1} = props;
+
+  let sentinelObserver = useRef<IntersectionObserver>(null);
+
+  let triggerLoadMore = useEffectEvent((entries: IntersectionObserverEntry[]) => {
+    // Use "isIntersecting" over an equality check of 0 since it seems like there is cases where
+    // a intersection ratio of 0 can be reported when isIntersecting is actually true
+    for (let entry of entries) {
+      if (entry.isIntersecting && !isLoading && onLoadMore) {
+        onLoadMore();
+      }
+    }
+  });
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      // TODO: problem with S2's Table loading spinner. Now that we use the isLoading provided to the sentinel in the layout to adjust the height of the loader,
+      // we are getting space reserved for the loadMore spinner when doing initial loading and rendering empty state at the same time. We can somewhat fix this by providing isLoading={loadingState === 'loadingMore'}
+      // which will mean the layout won't reserve space for the loader for initial loads, but that breaks the load more behavior (specifically, auto load more to fill scrollOffset. Scroll to load more seems broken to after initial load).
+      // We need to tear down and set up a new IntersectionObserver to force a check if the sentinel is "in view", see  https://codesandbox.io/p/sandbox/magical-swanson-dhgp89?file=%2Fsrc%2FApp.js%3A21%2C21
+      // I've actually fixed this via a ListLayout change (TableLayout extends this) where I check "collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader')"
+      // as well as isLoading, but it feels pretty opinionated/implementation specifc
+      sentinelObserver.current = new IntersectionObserver(triggerLoadMore, {root: getScrollParent(ref?.current) as HTMLElement, rootMargin: `0px ${100 * scrollOffset}% ${100 * scrollOffset}% ${100 * scrollOffset}%`});
+      sentinelObserver.current.observe(ref.current);
+    }
+
+    return () => {
+      if (sentinelObserver.current) {
+        sentinelObserver.current.disconnect();
+      }
+    };
+  }, [isLoading, triggerLoadMore, ref, scrollOffset]);
+}
diff --git a/packages/@react-spectrum/s2/intl/ar-AE.json b/packages/@react-spectrum/s2/intl/ar-AE.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "تم تحديد الكل",
   "breadcrumbs.more": "المزيد من العناصر",
   "button.pending": "قيد الانتظار",
+  "combobox.noResults": "لا توجد نتائج",
   "contextualhelp.help": "مساعدة",
   "contextualhelp.info": "معلومات",
   "dialog.alert": "تنبيه",

diff --git a/packages/@react-spectrum/s2/intl/bg-BG.json b/packages/@react-spectrum/s2/intl/bg-BG.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Всички избрани",
   "breadcrumbs.more": "Още елементи",
   "button.pending": "недовършено",
+  "combobox.noResults": "Няма резултати",
   "contextualhelp.help": "Помощ",
   "contextualhelp.info": "Информация",
   "dialog.alert": "Сигнал",

diff --git a/packages/@react-spectrum/s2/intl/cs-CZ.json b/packages/@react-spectrum/s2/intl/cs-CZ.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Vybráno vše",
   "breadcrumbs.more": "Další položky",
   "button.pending": "čeká na vyřízení",
+  "combobox.noResults": "Žádné výsledky",
   "contextualhelp.help": "Nápověda",
   "contextualhelp.info": "Informace",
   "dialog.alert": "Výstraha",

diff --git a/packages/@react-spectrum/s2/intl/da-DK.json b/packages/@react-spectrum/s2/intl/da-DK.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Alle valgt",
   "breadcrumbs.more": "Flere elementer",
   "button.pending": "afventende",
+  "combobox.noResults": "Ingen resultater",
   "contextualhelp.help": "Hjælp",
   "contextualhelp.info": "Oplysninger",
   "dialog.alert": "Advarsel",

diff --git a/packages/@react-spectrum/s2/intl/de-DE.json b/packages/@react-spectrum/s2/intl/de-DE.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Alles ausgewählt",
   "breadcrumbs.more": "Weitere Elemente",
   "button.pending": "Ausstehend",
+  "combobox.noResults": "Keine Ergebnisse",
   "contextualhelp.help": "Hilfe",
   "contextualhelp.info": "Informationen",
   "dialog.alert": "Warnhinweis",

diff --git a/packages/@react-spectrum/s2/intl/el-GR.json b/packages/@react-spectrum/s2/intl/el-GR.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Επιλέχθηκαν όλα",
   "breadcrumbs.more": "Περισσότερα στοιχεία",
   "button.pending": "σε εκκρεμότητα",
+  "combobox.noResults": "Χωρίς αποτέλεσμα",
   "contextualhelp.help": "Βοήθεια",
   "contextualhelp.info": "Πληροφορίες",
   "dialog.alert": "Ειδοποίηση",

diff --git a/packages/@react-spectrum/s2/intl/en-US.json b/packages/@react-spectrum/s2/intl/en-US.json
@@ -5,6 +5,7 @@
   "actionbar.actions": "Actions",
   "actionbar.actionsAvailable": "Actions available.",
   "button.pending": "pending",
+  "combobox.noResults": "No results",
   "contextualhelp.info": "Information",
   "contextualhelp.help": "Help",
   "dialog.dismiss": "Dismiss",
@@ -36,4 +37,4 @@
   "toast.clearAll": "Clear all",
   "toast.collapse": "Collapse",
   "toast.showAll": "Show all"
-}
+}
diff --git a/packages/@react-spectrum/s2/intl/es-ES.json b/packages/@react-spectrum/s2/intl/es-ES.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Todos seleccionados",
   "breadcrumbs.more": "Más elementos",
   "button.pending": "pendiente",
+  "combobox.noResults": "Sin resultados",
   "contextualhelp.help": "Ayuda",
   "contextualhelp.info": "Información",
   "dialog.alert": "Alerta",

diff --git a/packages/@react-spectrum/s2/intl/et-EE.json b/packages/@react-spectrum/s2/intl/et-EE.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Kõik valitud",
   "breadcrumbs.more": "Veel üksusi",
   "button.pending": "ootel",
+  "combobox.noResults": "Tulemusi pole",
   "contextualhelp.help": "Spikker",
   "contextualhelp.info": "Teave",
   "dialog.alert": "Teade",

diff --git a/packages/@react-spectrum/s2/intl/fi-FI.json b/packages/@react-spectrum/s2/intl/fi-FI.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Kaikki valittu",
   "breadcrumbs.more": "Lisää kohteita",
   "button.pending": "odottaa",
+  "combobox.noResults": "Ei tuloksia",
   "contextualhelp.help": "Ohje",
   "contextualhelp.info": "Tiedot",
   "dialog.alert": "Hälytys",

diff --git a/packages/@react-spectrum/s2/intl/fr-FR.json b/packages/@react-spectrum/s2/intl/fr-FR.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Toute la sélection",
   "breadcrumbs.more": "Plus d’éléments",
   "button.pending": "En attente",
+  "combobox.noResults":  "Aucun résultat",
   "contextualhelp.help": "Aide",
   "contextualhelp.info": "Informations",
   "dialog.alert": "Alerte",

diff --git a/packages/@react-spectrum/s2/intl/he-IL.json b/packages/@react-spectrum/s2/intl/he-IL.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "כל הפריטים שנבחרו",
   "breadcrumbs.more": "פריטים נוספים",
   "button.pending": "ממתין ל",
+  "combobox.noResults": "אין תוצאות",
   "contextualhelp.help": "עזרה",
   "contextualhelp.info": "מידע",
   "dialog.alert": "התראה",

diff --git a/packages/@react-spectrum/s2/intl/hr-HR.json b/packages/@react-spectrum/s2/intl/hr-HR.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Sve odabrano",
   "breadcrumbs.more": "Više stavki",
   "button.pending": "u tijeku",
+  "combobox.noResults": "Nema rezultata",
   "contextualhelp.help": "Pomoć",
   "contextualhelp.info": "Informacije",
   "dialog.alert": "Upozorenje",

diff --git a/packages/@react-spectrum/s2/intl/hu-HU.json b/packages/@react-spectrum/s2/intl/hu-HU.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Mind kijelölve",
   "breadcrumbs.more": "További elemek",
   "button.pending": "függőben levő",
+  "combobox.noResults": "Nincsenek találatok",
   "contextualhelp.help": "Súgó",
   "contextualhelp.info": "Információ",
   "dialog.alert": "Figyelmeztetés",

diff --git a/packages/@react-spectrum/s2/intl/it-IT.json b/packages/@react-spectrum/s2/intl/it-IT.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Tutti selezionati",
   "breadcrumbs.more": "Altri elementi",
   "button.pending": "in sospeso",
+  "combobox.noResults": "Nessun risultato",
   "contextualhelp.help": "Aiuto",
   "contextualhelp.info": "Informazioni",
   "dialog.alert": "Avviso",

diff --git a/packages/@react-spectrum/s2/intl/ja-JP.json b/packages/@react-spectrum/s2/intl/ja-JP.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "すべてを選択",
   "breadcrumbs.more": "その他の項目",
   "button.pending": "保留",
+  "combobox.noResults": "結果なし",
   "contextualhelp.help": "ヘルプ",
   "contextualhelp.info": "情報",
   "dialog.alert": "アラート",

diff --git a/packages/@react-spectrum/s2/intl/ko-KR.json b/packages/@react-spectrum/s2/intl/ko-KR.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "모두 선택됨",
   "breadcrumbs.more": "기타 항목",
   "button.pending": "보류 중",
+  "combobox.noResults": "결과 없음",
   "contextualhelp.help": "도움말",
   "contextualhelp.info": "정보",
   "dialog.alert": "경고",

diff --git a/packages/@react-spectrum/s2/intl/lt-LT.json b/packages/@react-spectrum/s2/intl/lt-LT.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Pasirinkta viskas",
   "breadcrumbs.more": "Daugiau elementų",
   "button.pending": "laukiama",
+  "combobox.noResults": "Be rezultatų",
   "contextualhelp.help": "Žinynas",
   "contextualhelp.info": "Informacija",
   "dialog.alert": "Įspėjimas",

diff --git a/packages/@react-spectrum/s2/intl/lv-LV.json b/packages/@react-spectrum/s2/intl/lv-LV.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Atlasīts viss",
   "breadcrumbs.more": "Vairāk vienumu",
   "button.pending": "gaida",
+  "combobox.noResults": "Nav rezultātu",
   "contextualhelp.help": "Palīdzība",
   "contextualhelp.info": "Informācija",
   "dialog.alert": "Brīdinājums",

diff --git a/packages/@react-spectrum/s2/intl/nb-NO.json b/packages/@react-spectrum/s2/intl/nb-NO.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Alle er valgt",
   "breadcrumbs.more": "Flere elementer",
   "button.pending": "avventer",
+  "combobox.noResults": "Ingen resultater",
   "contextualhelp.help": "Hjelp",
   "contextualhelp.info": "Informasjon",
   "dialog.alert": "Varsel",

diff --git a/packages/@react-spectrum/s2/intl/nl-NL.json b/packages/@react-spectrum/s2/intl/nl-NL.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Alles geselecteerd",
   "breadcrumbs.more": "Meer items",
   "button.pending": "in behandeling",
+  "combobox.noResults": "Geen resultaten",
   "contextualhelp.help": "Help",
   "contextualhelp.info": "Informatie",
   "dialog.alert": "Melding",

diff --git a/packages/@react-spectrum/s2/intl/pl-PL.json b/packages/@react-spectrum/s2/intl/pl-PL.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Wszystkie zaznaczone",
   "breadcrumbs.more": "Więcej elementów",
   "button.pending": "oczekujące",
+  "combobox.noResults": "Brak wyników",
   "contextualhelp.help": "Pomoc",
   "contextualhelp.info": "Informacja",
   "dialog.alert": "Ostrzeżenie",

diff --git a/packages/@react-spectrum/s2/intl/pt-BR.json b/packages/@react-spectrum/s2/intl/pt-BR.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Todos selecionados",
   "breadcrumbs.more": "Mais itens",
   "button.pending": "pendente",
+  "combobox.noResults": "Nenhum resultado",
   "contextualhelp.help": "Ajuda",
   "contextualhelp.info": "Informações",
   "dialog.alert": "Alerta",

diff --git a/packages/@react-spectrum/s2/intl/pt-PT.json b/packages/@react-spectrum/s2/intl/pt-PT.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Tudo selecionado",
   "breadcrumbs.more": "Mais artigos",
   "button.pending": "pendente",
+  "combobox.noResults": "Sem resultados",
   "contextualhelp.help": "Ajuda",
   "contextualhelp.info": "Informação",
   "dialog.alert": "Alerta",

diff --git a/packages/@react-spectrum/s2/intl/ro-RO.json b/packages/@react-spectrum/s2/intl/ro-RO.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Toate elementele selectate",
   "breadcrumbs.more": "Mai multe articole",
   "button.pending": "în așteptare",
+  "combobox.noResults": "Niciun rezultat",
   "contextualhelp.help": "Ajutor",
   "contextualhelp.info": "Informații",
   "dialog.alert": "Alertă",

diff --git a/packages/@react-spectrum/s2/intl/ru-RU.json b/packages/@react-spectrum/s2/intl/ru-RU.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Выбрано все",
   "breadcrumbs.more": "Дополнительные элементы",
   "button.pending": "в ожидании",
+  "combobox.noResults": "Результаты отсутствуют",
   "contextualhelp.help": "Справка",
   "contextualhelp.info": "Информация",
   "dialog.alert": "Предупреждение",

diff --git a/packages/@react-spectrum/s2/intl/sk-SK.json b/packages/@react-spectrum/s2/intl/sk-SK.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Všetky vybraté položky",
   "breadcrumbs.more": "Ďalšie položky",
   "button.pending": "čakajúce",
+  "combobox.noResults": "Žiadne výsledky",
   "contextualhelp.help": "Pomoc",
   "contextualhelp.info": "Informácie",
   "dialog.alert": "Upozornenie",

diff --git a/packages/@react-spectrum/s2/intl/sl-SI.json b/packages/@react-spectrum/s2/intl/sl-SI.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Izbrano vse",
   "breadcrumbs.more": "Več elementov",
   "button.pending": "v teku",
+  "combobox.noResults": "Ni rezultatov",
   "contextualhelp.help": "Pomoč",
   "contextualhelp.info": "Informacije",
   "dialog.alert": "Opozorilo",

diff --git a/packages/@react-spectrum/s2/intl/sr-SP.json b/packages/@react-spectrum/s2/intl/sr-SP.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Sve je izabrano",
   "breadcrumbs.more": "Više stavki",
   "button.pending": "nerešeno",
+  "combobox.noResults": "Nema rezultata",
   "contextualhelp.help": "Pomoć",
   "contextualhelp.info": "Informacije",
   "dialog.alert": "Upozorenje",

diff --git a/packages/@react-spectrum/s2/intl/sv-SE.json b/packages/@react-spectrum/s2/intl/sv-SE.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Alla markerade",
   "breadcrumbs.more": "Fler artiklar",
   "button.pending": "väntande",
+  "combobox.noResults": "Inga resultat",
   "contextualhelp.help": "Hjälp",
   "contextualhelp.info": "Information",
   "dialog.alert": "Varning",

diff --git a/packages/@react-spectrum/s2/intl/tr-TR.json b/packages/@react-spectrum/s2/intl/tr-TR.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Tümü seçildi",
   "breadcrumbs.more": "Daha fazla öğe",
   "button.pending": "beklemede",
+  "combobox.noResults": "Sonuç yok",
   "contextualhelp.help": "Yardım",
   "contextualhelp.info": "Bilgiler",
   "dialog.alert": "Uyarı",

diff --git a/packages/@react-spectrum/s2/intl/uk-UA.json b/packages/@react-spectrum/s2/intl/uk-UA.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "Усе вибрано",
   "breadcrumbs.more": "Більше елементів",
   "button.pending": "в очікуванні",
+  "combobox.noResults": "Результатів немає",
   "contextualhelp.help": "Довідка",
   "contextualhelp.info": "Інформація",
   "dialog.alert": "Сигнал тривоги",

diff --git a/packages/@react-spectrum/s2/intl/zh-CN.json b/packages/@react-spectrum/s2/intl/zh-CN.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "全选",
   "breadcrumbs.more": "更多项目",
   "button.pending": "待处理",
+  "combobox.noResults": "无结果",
   "contextualhelp.help": "帮助",
   "contextualhelp.info": "信息",
   "dialog.alert": "警报",

diff --git a/packages/@react-spectrum/s2/intl/zh-TW.json b/packages/@react-spectrum/s2/intl/zh-TW.json
@@ -6,6 +6,7 @@
   "actionbar.selectedAll": "已選取所有項目",
   "breadcrumbs.more": "更多項目",
   "button.pending": "待處理",
+  "combobox.noResults": "無任何結果",
   "contextualhelp.help": "說明",
   "contextualhelp.info": "資訊",
   "dialog.alert": "警示",

diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
@@ -136,6 +136,7 @@
     "@react-aria/interactions": "^3.25.0",
     "@react-aria/live-announcer": "^3.4.2",
     "@react-aria/overlays": "^3.27.0",
+    "@react-aria/separator": "^3.4.8",
     "@react-aria/utils": "^3.28.2",
     "@react-spectrum/utils": "^3.12.4",
     "@react-stately/layout": "^4.2.2",