S2 table (#6778)

* Add Spectrum 2 docs to storybook

* progress on table styles

* fix highlight checkbox rendering and add rounded corners to body

* fix checkbox styles, update to columns, font family

* refactor cell focus ring and add row focus ring

row focus ring needs row render function first

* wrapping up disabled row styles

* empty/loading state brainstorming

* Replace empty state with loading spinner

* add basic sorting

* attempt to add showDivider

this will need changes to RAC table as well....

* Fix select all checkbox click

* add placeholder for DnD and use new icon for sortable column

* update HCM colors

* fix DnD story, removed need for sortDescriptor on context, fix drag button focus visible

also tested moving the sort descriptor in front of the column text andwithout reserving room

* clean up

* switch to box shadow on row for grey row underline and selection focus ring

* update colors/sizes from table specific tokens

* updating lightdark so it works with opacity values

* add row visible focus style and fix empty columnheader focus style for drag/checkbox columns

* initial setup for resizing support

* progress on resizer handle styling and menu icons

* fix more resize bugs and some clean up

* nubbin and more DnD styling

* fix drag indicator so it respects density

* got verdaccio working, updating row background style and confirmed resizers are skipped

* updating loading more to use rowLoader

* use isTableEmpty renderProps from local RAC

* Add virtualizer and begin fixing styles

* add scale, update to column widths, some updates to reflect new token values

* add async loading stories and updates to use background image for table body outline

* fix broken empty state story and more debugging with empty state centering

* move outline to whole table and fix borders and padding for columns

* fix progress circle centering, rows showing up behind column, and scuffed way to curve the last row border

* Support showing the resizer when table header is hovered, fix to table outline, get rid of curved row

* support sticky column cells

* fix sticky positioning for the body loader and row loader

* investigations for sticky column/row selection border, fix for sort icon placement

* making sticky columns cells properly cover cells scrolled beneith them

* fix vertical centering

* lint

* add full height column resize indicator

* hack for show dividers

* add text alignment

* refactor to pass divider and align to cell directly

this avoids us having to expose column props on the cell render props which are tricky to type properly (would need to be a generic). Also fixes some overlapping of the focus rings and the divder and resize indicators

* saving some investigations

* get rid of blue selection outlines and add column header background

* add table focus indicator that is sticky

* HCM and nubbin appearance when triggered via menu

* fixes to icon sizing, illustrations, props in story, font default, and RTL

* adding focus style for empty style and translations

* fix typeahead and load more progress circle positioning

* only expose sort options when avaialble and align resizing column with colum align

* some clean up and notes from investigations

* remove DnD for now

* add more complex story

* fix lint

* fixing infinite load issue

I was applying the scroll ref onto the wrong element causing useLoadMore to trigger indefinitely because the scroll height and the client height of the provided ref were always equal

* increase body focus width, all resizer appears when in resizing mode, fix for premature resizing exit

* forgot to remove extra console.log

* fix strict error

* address review comments and update header background

* make links actually clickable and fix focus ring on link

* fix scroll padding so rows and cells scroll fully into view

* fix dark mode/HCM colors, column min width and tap highlight

* review comments

* fix width/height when determined by flex

* fix lint

* fix checkbox appearing above scrollbar and ipad tap highlight issues

* review comments

* making loader row taller

* fix overflow wrap decreasing row height and add menu min width for small viewports

* clean up context to try to help performance

* update scrollPadding to expected value

chrome behavior is strange because of chrome bug, see https://issues.chromium.org/issues/365913982 which I filed

* fix slow performance when many rows are provided and isQuiet/densitiy is flipped

* add discrete border styles to theme

* Revert "fix slow performance when many rows are provided and isQuiet/densitiy is flipped"

This reverts commit feb0ada.

* fixing lint and tests

* update resizer icon

* update HCM for resizer and add browser bug info

* disable onAction on story by default and add label for single select empty cell

* yarn lock update

* fix lint

* address initial review comments

* make popovers inert when they are transitioning out so table resizing doesnt get canceled

if the user clicks the resize option and hovers another item while the popover is transitioning out it can cause resizing to be canceled. This prevents that case from happening

* add useScale and use it in table instead

* ignore warnings in test for invalid attribute and remove items length check

warning is a compat one for React 19, items check is uneeded due to user error

* forgot the forward ref and add descriptions

* Revert "make popovers inert when they are transitioning out so table resizing doesnt get canceled"

This reverts commit 9cfb896.

* Revert "ignore warnings in test for invalid attribute"

This reverts commit 7006a76.

# Conflicts:
#	packages/react-aria-components/test/ComboBox.test.js
#	packages/react-aria-components/test/Select.test.js

* Use pointerEvents: none in popover during exit animation instead of inert

* Don't expose ResizableTableContainerContext publicly

It has a bunch of internal stuff on it. We don't need the exact height for the resizer, we just need a large enough value that it goes past the end of the table. 100vh should work.

* Use VisuallyHidden from react-aria monopackage

* Revert border style longhands

* lint

---------

Co-authored-by: danilu <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: devongovett

packages/@react-aria/utils/src/useLoadMore.ts

@@ -73,7 +73,7 @@ export function useLoadMore(props: LoadMoreProps, ref: RefObject<HTMLElement | n
     }
 
     lastItems.current = items;
-  }, [isLoading, onLoadMore, props, ref]);
+  }, [isLoading, onLoadMore, props, ref, items]);
 
   // TODO: maybe this should still just return scroll props?
   // Test against case where the ref isn't defined when this is called

packages/@react-aria/virtualizer/src/VirtualizerItem.tsx

@@ -58,8 +58,12 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
   }
 
   let rectStyles = {
-    top: layoutInfo.rect.y - (parent ? parent.rect.y : 0),
-    [xProperty]: layoutInfo.rect.x - (parent ? parent.rect.x : 0),
+    // TODO: For layoutInfos that are sticky that have parents with overflow visible, their "top" will be relative to the to the nearest scrolling container
+    // which WON'T be the parent since the parent has overflow visible. This means we shouldn't offset the height by the parent's position
+    // Not 100% about this change here since it is quite ambigious what the scrolling container maybe and how its top is positioned with respect to the
+    // calculated layoutInfo.y here
+    top: layoutInfo.rect.y - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.y : 0),
+    [xProperty]: layoutInfo.rect.x - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.x : 0),
     width: layoutInfo.rect.width,
     height: layoutInfo.rect.height
   };

packages/@react-spectrum/s2/intl/ar-AE.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "حدد خيارًا...",
   "slider.maximum": "أقصى",
   "slider.minimum": "أدنى",
+  "table.loading": "جارٍ التحميل...",
+  "table.loadingMore": "جارٍ تحميل المزيد...",
+  "table.resizeColumn": "تغيير حجم العمود",
+  "table.sortAscending": "فرز بترتيب تصاعدي",
+  "table.sortDescending": "فرز بترتيب تنازلي",
   "tag.actions": "الإجراءات",
   "tag.hideButtonLabel": "إظهار أقل",
   "tag.noTags": "بدون",

packages/@react-spectrum/s2/intl/bg-BG.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "Изберете опция",
   "slider.maximum": "Максимум",
   "slider.minimum": "Минимум",
+  "table.loading": "Зареждане...",
+  "table.loadingMore": "Зареждане на още...",
+  "table.resizeColumn": "Преоразмеряване на колона",
+  "table.sortAscending": "Възходящо сортиране",
+  "table.sortDescending": "Низходящо сортиране ",
   "tag.actions": "Действия",
   "tag.hideButtonLabel": "Показване на по-малко",
   "tag.noTags": "Нито един",

packages/@react-spectrum/s2/intl/cs-CZ.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "Vyberte vhodnou možnost...",
   "slider.maximum": "Maximum",
   "slider.minimum": "Minimum",
+  "table.loading": "Načítání...",
+  "table.loadingMore": "Načítání dalších...",
+  "table.resizeColumn": "Změnit velikost sloupce",
+  "table.sortAscending": "Seřadit vzestupně",
+  "table.sortDescending": "Seřadit sestupně",
   "tag.actions": "Akce",
   "tag.hideButtonLabel": "Zobrazit méně",
   "tag.noTags": "Žádný",

packages/@react-spectrum/s2/intl/da-DK.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "Vælg en mulighed ...",
   "slider.maximum": "Maksimum",
   "slider.minimum": "Minimum",
+  "table.loading": "Indlæser ...",
+  "table.loadingMore": "Indlæser flere ...",
+  "table.resizeColumn": "Tilpas størrelse på kolonne",
+  "table.sortAscending": "Sorter stigende",
+  "table.sortDescending": "Sorter faldende",
   "tag.actions": "Handlinger",
   "tag.hideButtonLabel": "Vis mindre",
   "tag.noTags": "Ingen",

packages/@react-spectrum/s2/intl/de-DE.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "Option auswählen...",
   "slider.maximum": "Maximum",
   "slider.minimum": "Minimum",
+  "table.loading": "Laden...",
+  "table.loadingMore": "Mehr laden ...",
+  "table.resizeColumn": "Spaltengröße ändern",
+  "table.sortAscending": "Aufsteigend sortieren",
+  "table.sortDescending": "Absteigend sortieren",
   "tag.actions": "Aktionen",
   "tag.hideButtonLabel": "Weniger zeigen",
   "tag.noTags": "Keine",

packages/@react-spectrum/s2/intl/el-GR.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "Επιλέξτε…",
   "slider.maximum": "Μέγιστο",
   "slider.minimum": "Ελάχιστο",
+  "table.loading": "Φόρτωση...",
+  "table.loadingMore": "Φόρτωση περισσότερων...",
+  "table.resizeColumn": "Αλλαγή μεγέθους στήλης",
+  "table.sortAscending": "Ταξινόμηση κατά αύξουσα σειρά",
+  "table.sortDescending": "Ταξινόμηση κατά φθίνουσα σειρά",
   "tag.actions": "Ενέργειες",
   "tag.hideButtonLabel": "Εμφάνιση λιγότερων",
   "tag.noTags": "Κανένα",

packages/@react-spectrum/s2/intl/en-US.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "Select…",
   "slider.minimum": "Minimum",
   "slider.maximum": "Maximum",
+  "table.loading": "Loading…",
+  "table.loadingMore": "Loading more…",
+  "table.sortAscending": "Sort Ascending",
+  "table.sortDescending": "Sort Descending",
+  "table.resizeColumn": "Resize column",
   "tag.showAllButtonLabel": "Show all ({tagCount, number})",
   "tag.hideButtonLabel": "Show less",
   "tag.actions": "Actions",

packages/@react-spectrum/s2/intl/es-ES.json

@@ -15,6 +15,11 @@
   "picker.placeholder": "Seleccione una opción…",
   "slider.maximum": "Máximo",
   "slider.minimum": "Mínimo",
+  "table.loading": "Cargando…",
+  "table.loadingMore": "Cargando más…",
+  "table.resizeColumn": "Cambiar el tamaño de la columna",
+  "table.sortAscending": "Orden de subida",
+  "table.sortDescending": "Orden de bajada",
   "tag.actions": "Acciones",
   "tag.hideButtonLabel": "Mostrar menos",
   "tag.noTags": "Ninguno",