@react-spectrum/table 3.10.1-nightly.4028 → 3.10.1-nightly.4036

package/src/TableViewWrapper.tsx

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2023 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 {AriaLabelingProps, DOMProps, DOMRef, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
+import type {ColumnSize, TableProps} from '@react-types/table';
+import type {DragAndDropHooks} from '@react-spectrum/dnd';
+import React, {Key, ReactElement} from 'react';
+import {tableNestedRows} from '@react-stately/flags';
+import {TableView} from './TableView';
+import {TreeGridTableView} from './TreeGridTableView';
+
+export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionProps, DOMProps, AriaLabelingProps, StyleProps {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * @default 'regular'
+   */
+  density?: 'compact' | 'regular' | 'spacious',
+  /**
+   * Sets the overflow behavior for the cell contents.
+   * @default 'truncate'
+   */
+  overflowMode?: 'wrap' | 'truncate',
+  /** Whether the TableView should be displayed with a quiet style. */
+  isQuiet?: boolean,
+  /** Sets what the TableView should render when there is no content to display. */
+  renderEmptyState?: () => JSX.Element,
+  /** Handler that is called when a user performs an action on a row. */
+  onAction?: (key: Key) => void,
+  /**
+   * Handler that is called when a user starts a column resize.
+   */
+  onResizeStart?: (widths: Map<Key, ColumnSize>) => void,
+  /**
+   * Handler that is called when a user performs a column resize.
+   * Can be used with the width property on columns to put the column widths into
+   * a controlled state.
+   */
+  onResize?: (widths: Map<Key, ColumnSize>) => void,
+  /**
+   * Handler that is called after a user performs a column resize.
+   * Can be used to store the widths of columns for another future session.
+   */
+  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void,
+  /**
+   * The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the TableView.
+   * @version beta
+   */
+  dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks'],
+  /**
+   * Whether the TableView should support expandable rows. Requires the feature flag to be enabled first, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows.
+   * @version alpha
+   * @private
+   */
+  UNSTABLE_allowsExpandableRows?: boolean,
+  /**
+   * The currently expanded keys in the collection (controlled). Requires the feature flag to be
+   * enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows.
+   * @version alpha
+   * @private
+   */
+  UNSTABLE_expandedKeys?: 'all' | Iterable<Key>,
+  /**
+   * The initial expanded keys in the collection (uncontrolled). Requires the feature flag to be
+   * enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows.
+   * @version alpha
+   * @private
+   */
+  UNSTABLE_defaultExpandedKeys?: 'all' | Iterable<Key>,
+  /**
+   * Handler that is called when items are expanded or collapsed. Requires the feature flag to be
+   * enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows.
+   * @version alpha
+   * @private
+   */
+  UNSTABLE_onExpandedChange?: (keys: Set<Key>) => any
+}
+
+function TableViewWrapper<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<HTMLDivElement>) {
+  let {UNSTABLE_allowsExpandableRows, ...otherProps} = props;
+  if (tableNestedRows() && UNSTABLE_allowsExpandableRows) {
+    return <TreeGridTableView {...otherProps} ref={ref} />;
+  } else {
+    return <TableView {...otherProps} ref={ref} />;
+  }
+}
+
+/**
+ * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
+ */
+const _TableViewWrapper = React.forwardRef(TableViewWrapper) as <T>(props: SpectrumTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
+
+export {_TableViewWrapper as TableView};

package/src/TreeGridTableView.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2023 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 {DOMRef} from '@react-types/shared';
+import React, {ReactElement, useState} from 'react';
+import {SpectrumTableProps} from './TableViewWrapper';
+import {TableViewBase} from './TableViewBase';
+import {UNSTABLE_useTreeGridState} from '@react-stately/table';
+
+export interface TreeGridTableProps<T> extends Omit<SpectrumTableProps<T>, 'UNSTABLE_allowsExpandableRows'> {}
+
+function TreeGridTableView<T extends object>(props: TreeGridTableProps<T>, ref: DOMRef<HTMLDivElement>) {
+  let {
+    selectionStyle,
+    dragAndDropHooks
+  } = props;
+  let [showSelectionCheckboxes, setShowSelectionCheckboxes] = useState(selectionStyle !== 'highlight');
+  let isTableDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
+  let state = UNSTABLE_useTreeGridState({
+    ...props,
+    showSelectionCheckboxes,
+    showDragButtons: isTableDraggable,
+    selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
+  });
+
+  // If the selection behavior changes in state, we need to update showSelectionCheckboxes here due to the circular dependency...
+  let shouldShowCheckboxes = state.selectionManager.selectionBehavior !== 'replace';
+  if (shouldShowCheckboxes !== showSelectionCheckboxes) {
+    setShowSelectionCheckboxes(shouldShowCheckboxes);
+  }
+
+  return (
+    <TableViewBase {...props} state={state} ref={ref} />
+  );
+}
+
+const _TreeGridTableView = React.forwardRef(TreeGridTableView) as <T>(props: TreeGridTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
+export {_TreeGridTableView as TreeGridTableView};

package/src/index.ts

@@ -12,7 +12,7 @@
 
 /// <reference types="css-module-types" />
 
-export {TableView} from './TableView';
+export {TableView} from './TableViewWrapper';
 import {Column} from '@react-stately/table';
 import {SpectrumColumnProps} from '@react-types/table';
 
@@ -29,4 +29,4 @@ export {
 } from '@react-stately/table';
 
 export type {SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-types/table';
-export type {SpectrumTableProps} from './TableView';
+export type {SpectrumTableProps} from './TableViewWrapper';

package/src/table.css

@@ -34,6 +34,13 @@
 .react-spectrum-Table-cell {
   display: flex;
   align-items: center;
+
+  &.react-spectrum-Table-cell--hasExpandCollapseButton {
+    display: grid;
+    grid-template-columns: var(--spectrum-global-dimension-size-400) 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "expand-button contents";
+  }
 }
 
 .react-spectrum-Table-cellWrapper > .react-spectrum-Table-cell {