@react-spectrum/s2 0.5.0 → 0.7.0

package/src/TableView.tsx

@@ -32,20 +32,21 @@ import {
   TableHeader as RACTableHeader,
   TableHeaderProps as RACTableHeaderProps,
   TableProps as RACTableProps,
+  Rect,
   ResizableTableContainer,
   RowRenderProps,
   TableBodyRenderProps,
+  TableLayout,
   TableRenderProps,
-  UNSTABLE_TableLayout,
   UNSTABLE_TableLoadingIndicator,
-  UNSTABLE_Virtualizer,
   useSlottedContext,
-  useTableOptions
+  useTableOptions,
+  Virtualizer
 } from 'react-aria-components';
 import {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {colorMix, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
+import {colorMix, focusRing, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
 import {ColumnSize} from '@react-types/table';
 import {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
@@ -58,10 +59,10 @@ import {mergeStyles} from '../style/runtime';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
-import {Rect} from '@react-stately/virtualizer';
+import React, {createContext, forwardRef, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';
 import SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';
+import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLoadMore} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -103,7 +104,9 @@ interface S2TableProps {
   /** The current loading state of the table. */
   loadingState?: LoadingState,
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
-  onLoadMore?: () => any
+  onLoadMore?: () => any,
+  /** Provides the ActionBar to display when rows are selected in the TableView. */
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
@@ -119,7 +122,10 @@ const tableWrapper = style({
   minWidth: 0,
   display: 'flex',
   isolation: 'isolate',
-  disableTapHighlight: true
+  disableTapHighlight: true,
+  position: 'relative',
+  // Clip ActionBar animation.
+  overflow: 'clip'
 });
 
 const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boolean}>({
@@ -135,17 +141,14 @@ const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boo
     isQuiet: 'transparent',
     forcedColors: 'Background'
   },
-  outlineColor: {
-    default: 'gray-300',
-    isFocusVisible: 'focus-ring',
-    forcedColors: 'ButtonBorder'
-  },
-  outlineWidth: {
+  borderColor: 'gray-300',
+  borderStyle: 'solid',
+  borderWidth: {
     default: 1,
-    isQuiet: 0,
-    isFocusVisible: 2
+    isQuiet: 0
   },
-  outlineStyle: 'solid',
+  ...focusRing(),
+  outlineOffset: -1, // Cover the border
   borderRadius: {
     default: '[6px]',
     isQuiet: 'none'
@@ -184,11 +187,7 @@ const ROW_HEIGHTS = {
   }
 };
 
-export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
-  constructor(options) {
-    super({...options, loaderHeight: 60});
-  }
-
+export class S2TableLayout<T> extends TableLayout<T> {
   protected isStickyColumn(node: GridNode<T>): boolean {
     return node.props.isSticky;
   }
@@ -217,6 +216,7 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
     return layoutNode;
   }
 
+  // y is the height of the headers
   protected buildBody(y: number): LayoutNode {
     let layoutNode = super.buildBody(y);
     let {children, layoutInfo} = layoutNode;
@@ -253,9 +253,12 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
   }
 }
 
-export const TableContext = createContext<ContextValue<TableViewProps, DOMRefValue<HTMLDivElement>>>(null);
+export const TableContext = createContext<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
+ */
+export const TableView = forwardRef(function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TableContext);
   let {
     UNSAFE_style,
@@ -275,18 +278,6 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
 
   let domRef = useDOMRef(ref);
   let scale = useScale();
-  let layout = useMemo(() => {
-    return new S2TableLayout({
-      rowHeight: overflowMode === 'wrap'
-        ? undefined
-        : ROW_HEIGHTS[density][scale],
-      estimatedRowHeight: overflowMode === 'wrap'
-      ? ROW_HEIGHTS[density][scale]
-      : undefined,
-      // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap
-      headingHeight: DEFAULT_HEADER_HEIGHT[scale]
-    });
-  }, [overflowMode, density, scale]);
 
   // Starts when the user selects resize from the menu, ends when resizing ends
   // used to control the visibility of the resizer Nubbin
@@ -309,7 +300,7 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   }), [isQuiet, density, overflowMode, loadingState, isInResizeMode, setIsInResizeMode]);
 
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
-  let scrollRef = useRef(null);
+  let scrollRef = useRef<HTMLElement | null>(null);
   let memoedLoadMoreProps = useMemo(() => ({
     isLoading: isLoading,
     onLoadMore
@@ -317,6 +308,8 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   useLoadMore(memoedLoadMoreProps, scrollRef);
   let isCheckboxSelection = props.selectionMode === 'multiple' || props.selectionMode === 'single';
 
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
   return (
     <ResizableTableContainer
       // TODO: perhaps this ref should be attached to the RACTable but it expects a table type ref which isn't true in the virtualized case
@@ -326,12 +319,30 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
       onResizeStart={onResizeStart}
       className={(UNSAFE_className || '') + mergeStyles(tableWrapper, styles)}
       style={UNSAFE_style}>
-      <UNSTABLE_Virtualizer layout={layout}>
+      <Virtualizer
+        layout={S2TableLayout}
+        layoutOptions={{
+          rowHeight: overflowMode === 'wrap'
+            ? undefined
+            : ROW_HEIGHTS[density][scale],
+          estimatedRowHeight: overflowMode === 'wrap'
+          ? ROW_HEIGHTS[density][scale]
+          : undefined,
+          // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap
+          headingHeight: DEFAULT_HEADER_HEIGHT[scale],
+          loaderHeight: 60
+        }}>
         <InternalTableContext.Provider value={context}>
           <RACTable
-            ref={scrollRef}
-            // Fix webkit bug where scrollbars appear above the checkboxes/other table elements
-            style={{WebkitTransform: 'translateZ(0)'}}
+            ref={scrollRef as any}
+            style={{
+              // Fix webkit bug where scrollbars appear above the checkboxes/other table elements
+              WebkitTransform: 'translateZ(0)',
+              // Add padding at the bottom when the action bar is visible so users can scroll to the last items.
+              // Also add scroll padding so navigating with the keyboard doesn't go behind the action bar.
+              paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
+              scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
+            }}
             className={renderProps => table({
               ...renderProps,
               isCheckboxSelection,
@@ -339,12 +350,16 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
             })}
             selectionBehavior="toggle"
             onRowAction={onAction}
-            {...otherProps} />
+            {...otherProps}
+            selectedKeys={selectedKeys}
+            defaultSelectedKeys={undefined}
+            onSelectionChange={onSelectionChange} />
         </InternalTableContext.Provider>
-      </UNSTABLE_Virtualizer>
+      </Virtualizer>
+      {actionBar}
     </ResizableTableContainer>
   );
-}
+});
 
 const centeredWrapper = style({
   display: 'flex',
@@ -356,7 +371,10 @@ const centeredWrapper = style({
 
 export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | 'dependencies'> {}
 
-function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * The body of a `<Table>`, containing the table rows.
+ */
+export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {items, renderEmptyState, children} = props;
   let domRef = useDOMRef(ref);
   let {loadingState} = useContext(InternalTableContext);
@@ -422,13 +440,7 @@ function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLD
       {renderer}
     </RACTableBody>
   );
-}
-
-/**
- * The body of a `<Table>`, containing the table rows.
- */
-let _TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(TableBody);
-export {_TableBody as TableBody};
+});
 
 const cellFocus = {
   outlineStyle: {
@@ -505,7 +517,6 @@ export interface ColumnProps extends RACColumnProps {
  * A column within a `<Table>`.
  */
 export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {
-  let {isHeaderRowHovered} = useContext(InternalTableHeaderContext);
   let {isQuiet} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
   let domRef = useDOMRef(ref);
@@ -513,7 +524,7 @@ export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef
 
   return (
     <RACColumn {...props} ref={domRef} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align, isQuiet})}>
-      {({allowsSorting, sortDirection, isFocusVisible, sort, startResize, isHovered}) => (
+      {({allowsSorting, sortDirection, isFocusVisible, sort, startResize}) => (
         <>
           {/* Note this is mainly for column's without a dropdown menu. If there is a dropdown menu, the button is styled to have a focus ring for simplicity
           (no need to juggle showing this focus ring if focus is on the menu button and not if it is on the resizer) */}
@@ -521,7 +532,7 @@ export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef
           {isFocusVisible && <CellFocusRing />}
           {isColumnResizable ?
             (
-              <ResizableColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} isHovered={isHeaderRowHovered || isHovered} align={align}>
+              <ResizableColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} align={align}>
                 {children}
               </ResizableColumnContents>
             ) : (
@@ -612,9 +623,9 @@ const resizableMenuButtonWrapper = style({
 
 const resizerHandleContainer = style({
   display: {
-    default: 'none',
+    default: '--resizerDisplay',
     isResizing: 'block',
-    isHovered: 'block'
+    isInResizeMode: 'block'
   },
   width: 12,
   height: 'full',
@@ -633,8 +644,7 @@ const resizerHandleContainer = style({
 
 const resizerHandle = style({
   backgroundColor: {
-    default: 'transparent',
-    isHovered: 'gray-300',
+    default: 'gray-300',
     isFocusVisible: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that will use the focusVisible version
     isResizing: lightDark('informative-900', 'informative-700'),
     forcedColors: {
@@ -694,10 +704,10 @@ const nubbin = style({
   }
 });
 
-interface ResizableColumnContentProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sort' | 'sortDirection' | 'startResize' | 'isHovered'>, Pick<ColumnProps, 'align' | 'children'> {}
+interface ResizableColumnContentProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sort' | 'sortDirection' | 'startResize'>, Pick<ColumnProps, 'align' | 'children'> {}
 
 function ResizableColumnContents(props: ResizableColumnContentProps) {
-  let {allowsSorting, sortDirection, sort, startResize, children, isHovered, align} = props;
+  let {allowsSorting, sortDirection, sort, startResize, children, align} = props;
   let {setIsInResizeMode, isInResizeMode} = useContext(InternalTableContext);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   const onMenuSelect = (key) => {
@@ -774,10 +784,10 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
         </Menu>
       </MenuTrigger>
       <div data-react-aria-prevent-focus="true">
-        <ColumnResizer data-react-aria-prevent-focus="true" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isHovered: isInResizeMode || isHovered})}>
+        <ColumnResizer data-react-aria-prevent-focus="true" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isInResizeMode})}>
           {({isFocusVisible, isResizing}) => (
             <>
-              <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isHovered={isHovered} isResizing={isResizing} />
+              <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />
               {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}
             </>
         )}
@@ -787,9 +797,9 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
   );
 }
 
-function ResizerIndicator({isFocusVisible, isHovered, isResizing, isInResizeMode}) {
+function ResizerIndicator({isFocusVisible, isResizing, isInResizeMode}) {
   return (
-    <div className={resizerHandle({isFocusVisible, isHovered: isHovered || isInResizeMode, isResizing})} />
+    <div className={resizerHandle({isFocusVisible, isInResizeMode, isResizing})} />
   );
 }
 
@@ -798,7 +808,14 @@ const tableHeader = style({
   width: 'full',
   backgroundColor: 'gray-75',
   // Attempt to prevent 1px area where you can see scrolled cell content between the table outline and the table header
-  marginTop: '[-1px]'
+  marginTop: '[-1px]',
+  '--resizerDisplay': {
+    type: 'display',
+    value: {
+      default: 'none',
+      isHovered: 'block'
+    }
+  }
 });
 
 const selectAllCheckbox = style({
@@ -826,57 +843,48 @@ const selectAllCheckboxColumn = style({
   backgroundColor: 'gray-75'
 });
 
-let InternalTableHeaderContext = createContext<{isHeaderRowHovered?: boolean}>({isHeaderRowHovered: false});
-
 export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}
 
-function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A header within a `<Table>`, containing the table columns.
+ */
+export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
   let scale = useScale();
   let {selectionBehavior, selectionMode} = useTableOptions();
   let {isQuiet} = useContext(InternalTableContext);
-  let [isHeaderRowHovered, setHeaderRowHovered] = useState(false);
   let domRef = useDOMRef(ref);
 
   return (
-    <InternalTableHeaderContext.Provider value={{isHeaderRowHovered}}>
-      <RACTableHeader
+    <RACTableHeader
+      // @ts-ignore
+      ref={domRef}
+      className={tableHeader}>
+      {/* Add extra columns for selection. */}
+      {selectionBehavior === 'toggle' && (
+        // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
         // @ts-ignore
-        ref={domRef}
-        onHoverChange={setHeaderRowHovered}
-        className={tableHeader}>
-        {/* Add extra columns for selection. */}
-        {selectionBehavior === 'toggle' && (
-          // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
-          // @ts-ignore
-          <RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn({isQuiet})}>
-            {({isFocusVisible}) => (
-              <>
-                {selectionMode === 'single' &&
-                  <>
-                    {isFocusVisible && <CellFocusRing />}
-                    <VisuallyHiddenSelectAllLabel />
-                  </>
-                }
-                {selectionMode === 'multiple' &&
-                  <Checkbox isEmphasized styles={selectAllCheckbox} slot="selection" />
-                }
-              </>
-            )}
-          </RACColumn>
-        )}
-        <Collection items={columns}>
-          {children}
-        </Collection>
-      </RACTableHeader>
-    </InternalTableHeaderContext.Provider>
+        <RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn({isQuiet})}>
+          {({isFocusVisible}) => (
+            <>
+              {selectionMode === 'single' &&
+                <>
+                  {isFocusVisible && <CellFocusRing />}
+                  <VisuallyHiddenSelectAllLabel />
+                </>
+              }
+              {selectionMode === 'multiple' &&
+                <Checkbox isEmphasized styles={selectAllCheckbox} slot="selection" />
+              }
+            </>
+          )}
+        </RACColumn>
+      )}
+      <Collection items={columns}>
+        {children}
+      </Collection>
+    </RACTableHeader>
   );
-}
-
-/**
- * A header within a `<Table>`, containing the table columns.
- */
-let _TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(TableHeader);
-export {_TableHeader as TableHeader};
+});
 
 function VisuallyHiddenSelectAllLabel() {
   let checkboxProps = useSlottedContext(RACCheckboxContext, 'selection');
@@ -1093,7 +1101,10 @@ const row = style<RowRenderProps & S2TableProps>({
 
 export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue'>  {}
 
-function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A row within a `<Table>`.
+ */
+export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {selectionBehavior, selectionMode} = useTableOptions();
   let tableVisualOptions = useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
@@ -1118,16 +1129,4 @@ function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<
       </Collection>
     </RACRow>
   );
-}
-
-/**
- * A row within a `<Table>`.
- */
-let _Row = /*#__PURE__*/ (forwardRef as forwardRefType)(Row);
-export {_Row as Row};
-
-/**
- * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
- */
-const _TableView = forwardRef(TableView);
-export {_TableView as TableView};
+});