@react-spectrum/table 3.0.0-beta.1 → 3.0.0-nightly-641446f65-240905

package/src/TableViewLayout.ts

@@ -0,0 +1,95 @@
+/*
+ * 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 {DropTarget} from '@react-types/shared';
+import {GridNode} from '@react-types/grid';
+import {LayoutInfo, Rect} from '@react-stately/virtualizer';
+import {LayoutNode, TableLayout} from '@react-stately/layout';
+
+export class TableViewLayout<T> extends TableLayout<T> {
+  private isLoading: boolean = false;
+
+  protected buildCollection(): LayoutNode[] {
+    let loadingState = this.collection.body.props.loadingState;
+    this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+    return super.buildCollection();
+  }
+
+  protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {
+    let res = super.buildColumn(node, x, y);
+    res.layoutInfo.allowOverflow = true; // for resizer nubbin
+    return res;
+  }
+
+  protected buildBody(): LayoutNode {
+    let node = super.buildBody(0);
+    let {children, layoutInfo} = node;
+    let width = node.layoutInfo.rect.width;
+
+    if (this.isLoading) {
+      // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
+      let rect = new Rect(40, children.length === 0 ? 40 : layoutInfo.rect.maxY, (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
+      let loader = new LayoutInfo('loader', 'loader', rect);
+      loader.parentKey = layoutInfo.key;
+      loader.isSticky = children.length === 0;
+      let node = {
+        layoutInfo: loader,
+        validRect: loader.rect
+      };
+      children.push(node);
+      this.layoutNodes.set(loader.key, node);
+      layoutInfo.rect.height = loader.rect.maxY;
+      width = Math.max(width, rect.width);
+    } else if (children.length === 0) {
+      let rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
+      let empty = new LayoutInfo('empty', 'empty', rect);
+      empty.parentKey = layoutInfo.key;
+      empty.isSticky = true;
+      let node = {
+        layoutInfo: empty,
+        validRect: empty.rect
+      };
+      children.push(node);
+      layoutInfo.rect.height = empty.rect.maxY;
+      width = Math.max(width, rect.width);
+    }
+
+    return node;
+  }
+
+  protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
+    let res = super.buildRow(node, x, y);
+    res.layoutInfo.rect.height += 1; // for bottom border
+    return res;
+  }
+
+  protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode {
+    let res = super.buildCell(node, x, y);
+    if (node.column?.props.hideHeader) {
+      res.layoutInfo.allowOverflow = true;
+    }
+    return res;
+  }
+
+  protected getEstimatedRowHeight(): number {
+    return super.getEstimatedRowHeight() + 1; // for bottom border
+  }
+
+  protected isStickyColumn(node: GridNode<T>) {
+    return node.props?.isDragButtonCell || node.props?.isSelectionCell;
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+    // Offset for height of header row
+    y -= this.virtualizer.layout.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height;
+    return super.getDropTargetFromPoint(x, y, isValidDropTarget);
+  }
+}

package/src/TableViewWrapper.tsx

@@ -0,0 +1,106 @@
+/*
+ * 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, DisabledBehavior, DOMProps, DOMRef, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
+import type {ColumnSize, TableProps} from '@react-types/table';
+import type {DragAndDropHooks} from '@react-spectrum/dnd';
+import React, {JSX, 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,
+  /**
+   * Whether `disabledKeys` applies to all interactions, or only selection.
+   * @default "selection"
+   */
+  disabledBehavior?: DisabledBehavior,
+  /** 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/cursors/Cur_MoveHorizontal_9_9.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-1 0 31 32">
+  <filter id="shadow">
+    <feDropShadow dx="0" dy="0.5" stdDeviation="1.2" flood-opacity="0.7"/>
+  </filter>
+  <g filter="url(#shadow)" transform="translate(.5 0)">
+    <path fill="#fff" d="M9.5,2a.5.5,0,0,1,.5.5V9h3V7.2505A.25014.25014,0,0,1,13.24978,7h.00152a.246.246,0,0,1,.15875.05847L16,9.5l-2.58995,2.44153A.24611.24611,0,0,1,13.2513,12,.25016.25016,0,0,1,13,11.751V10H10v6.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V10H5v1.7495A.25014.25014,0,0,1,4.75022,12H4.7487A.246.246,0,0,1,4.59,11.94153L2,9.5,4.59,7.05847A.246.246,0,0,1,4.7487,7,.25016.25016,0,0,1,5,7.249V9H8V2.5A.5.5,0,0,1,8.5,2Zm0-1h-1A1.5,1.5,0,0,0,7,2.5V8H6V7.32389a1.33,1.33,0,0,0-.4816-1.05444,1.23962,1.23962,0,0,0-1.56876.021l-.02344.01953-.0222.02088L.92812,9.13618A.5.5,0,0,0,.90726,9.843l.02086.02085L3.904,12.66919l.02221.02088.02345.01965a1.23986,1.23986,0,0,0,1.56836.02116A1.3294,1.3294,0,0,0,6,11.6765V11H7v5.5A1.5,1.5,0,0,0,8.5,18h1A1.5,1.5,0,0,0,11,16.5V11h1v.67757a1.32792,1.32792,0,0,0,.482,1.05347,1.24,1.24,0,0,0,1.56839-.02144l.02343-.01953.02221-.02088,2.97588-2.80537a.5.5,0,0,0,.02086-.70679l-.02086-.02085L14.096,6.33081l-.02221-.02087-.02345-.01965A1.24978,1.24978,0,0,0,12,7.2505V8H11V2.5A1.5,1.5,0,0,0,9.5,1Z"/>
+    <path d="M10,16.5V10h3v1.7495a.25.25,0,0,0,.41.19206L16,9.5,13.41,7.05842A.25.25,0,0,0,13,7.2505V9H10V2.5A.5.5,0,0,0,9.5,2h-1a.5.5,0,0,0-.5.5V9H5V7.2505a.25.25,0,0,0-.41-.19206L2,9.5l2.59,2.44158A.25.25,0,0,0,5,11.7495V10H8v6.5a.5.5,0,0,0,.5.5h1A.5.5,0,0,0,10,16.5Z"/>
+  </g>
+</svg>

package/src/cursors/Cur_MoveToLeft_9_9.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-1 0 31 32">
+  <filter id="shadow">
+    <feDropShadow dx="0" dy="0.5" stdDeviation="1.2" flood-opacity="0.7"/>
+  </filter>
+  <g filter="url(#shadow)" transform="translate(.5 0)">
+    <path d="M9.5,2c.27614,0,.5,.22388,.5,.5v14c0,.27612-.22386,.5-.5,.5h-1c-.27614,0-.5-.22388-.5-.5v-6.5h-3v1.74951c0,.14893-.12215,.25049-.2513,.25049-.05457,0-.1104-.01819-.15875-.05847l-2.58995-2.44153,2.58995-2.44153c.04837-.04028,.10419-.05847,.15875-.05847,.12914,0,.2513,.10156,.2513,.25049v1.74951h3V2.5c0-.27612,.22386-.5,.5-.5h1Zm0-1h-1c-.82843,0-1.5,.67157-1.5,1.5v5.5h-1v-.67611c0-.40436-.1629-.80555-.48159-1.05444-.4961-.38744-1.14015-.33635-1.56876,.02095l-.02344,.01953-.0222,.02087L.92811,9.13618c-.20937,.19737-.20937,.53028,0,.72765l2.97589,2.80537,.0222,.02087,.02345,.01965c.42839,.35694,1.07208,.40833,1.56837,.02116,.31886-.24875,.48198-.64994,.48198-1.05435v-.67652s.99999,0,.99999,0v5.5c0,.82843,.67157,1.5,1.5,1.5h1c.82843,0,1.5-.67157,1.5-1.5V2.5c0-.82843-.67157-1.5-1.5-1.5Z" fill="#fff" />
+    <path d="M10,16.5V2.5c0-.27614-.22386-.5-.5-.5h-1c-.27614,0-.5,.22386-.5,.5v6.5h-3v-1.74952c0-.21196-.24721-.32775-.41005-.19206l-2.58995,2.44158,2.58995,2.44158c.16283,.13569,.41005,.0199,.41005-.19206v-1.74952h3v6.5c0,.27614,.22386,.5,.5,.5h1c.27614,0,.5-.22386,.5-.5Z"/>
+  </g>
+</svg>

package/src/cursors/Cur_MoveToRight_9_9.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-1 0 31 32">
+  <filter id="shadow">
+    <feDropShadow dx="0" dy="0.5" stdDeviation="1.2" flood-opacity="0.7"/>
+  </filter>
+  <g filter="url(#shadow)" transform="translate(.5 0)">
+    <path d="M9.5,2c.27614,0,.5,.22388,.5,.5v6.5h3v-1.74951c0-.14893,.12215-.25049,.2513-.25049,.05457,0,.1104,.01819,.15875,.05847l2.58995,2.44153-2.58995,2.44153c-.04837,.04028-.10419,.05847-.15875,.05847-.12914,0-.2513-.10156-.2513-.25049v-1.74951h-3v6.5c0,.27612-.22386,.5-.5,.5h-1c-.27614,0-.5-.22388-.5-.5V2.5c0-.27612,.22386-.5,.5-.5h1Zm0-1h-1c-.82843,0-1.5,.67157-1.5,1.5v14c0,.82843,.67157,1.5,1.5,1.5h1c.82843,0,1.5-.67157,1.5-1.5v-5.5h1v.67757c0,.40416,.1632,.80501,.48197,1.05347,.49639,.3869,1.14001,.33571,1.56838-.02144l.02344-.01953,.0222-.02087,2.97589-2.80537c.20937-.19737,.20937-.53028,0-.72765l-2.97589-2.80537-.0222-.02087-.02345-.01965c-.22456-.18713-.5083-.29028-.79895-.29028-.3208,0-.62624,.12134-.86003,.34167-.24872,.23438-.39136,.56567-.39136,.90881v.74951h-1V2.5c0-.82843-.67157-1.5-1.5-1.5Z" fill="#fff" />
+    <path d="M10,16.5v-6.5h3v1.74952c0,.21196,.24721,.32775,.41005,.19206l2.58995-2.44158-2.58995-2.44158c-.16283-.13569-.41005-.0199-.41005,.19206v1.74952h-3V2.5c0-.27614-.22386-.5-.5-.5h-1c-.27614,0-.5,.22386-.5,.5v14c0,.27614,.22386,.5,.5,.5h1c.27614,0,.5-.22386,.5-.5Z"/>
+  </g>
+</svg>

package/src/index.ts

@@ -12,8 +12,9 @@
 
 /// <reference types="css-module-types" />
 
-export * from './TableView';
+export {TableView} from './TableViewWrapper';
 import {Column} from '@react-stately/table';
+import {JSX} from 'react';
 import {SpectrumColumnProps} from '@react-types/table';
 
 // Override TS for Column to support spectrum specific props.
@@ -27,3 +28,6 @@ export {
   Row,
   Cell
 } from '@react-stately/table';
+
+export type {SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-types/table';
+export type {SpectrumTableProps} from './TableViewWrapper';

package/src/table.css

@@ -10,6 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
+ .react-spectrum-Table {
+  --spectrum-table-droptarget-background-color: var(--spectrum-alias-highlight-selected);
+  --spectrum-table-dropindicator-border-color: var(--spectrum-dropzone-border-color-selected-hover);
+  --spectrum-table-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);
+
+  --spectrum-table-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);
+  --spectrum-table-dropindicator-border-size: var(--spectrum-dropindicator-border-size);
+
+  --spectrum-table-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);
+
+  --spectrum-table-item-draghandle-border-color-key-focus: var(--spectrum-table-item-border-color-key-focus);
+ }
+
 .react-spectrum-Table {
   user-select: none;
   display: flex;
@@ -27,11 +40,18 @@
   height: 100%;
 }
 
+.react-spectrum-Table-cell--alignStart {
+  text-align: start;
+  justify-content: flex-start;
+}
+
 .react-spectrum-Table-cell--alignCenter {
+  text-align: center;
   justify-content: center;
 }
 
 .react-spectrum-Table-cell--alignEnd {
+  text-align: end;
   justify-content: flex-end;
 }
 
@@ -42,3 +62,174 @@
   width: 100%;
   height: 100%;
 }
+
+.react-spectrum-Table-row-dragPreview {
+  --spectrum-table-row-badge-text-color: var(--spectrum-global-color-static-white);
+  --spectrum-table-row-badge-background-color: var(--spectrum-global-color-blue-400);
+
+  width: var(--spectrum-global-dimension-size-2400);
+  border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);
+  border-radius: var(--spectrum-alias-border-radius-regular);
+  background-color: var(--spectrum-table-background-color);
+
+  /* forced-color-adjust: none, so that background-color style will render */
+  forced-color-adjust: none;
+
+  &::after {
+    box-shadow: none;
+  }
+
+  .react-spectrum-Table-cell {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.react-spectrum-Table-row-dragPreview--multiple {
+    position: relative;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      z-index: -1;
+      top: 4px;
+      inset-inline-start: 4px;
+      width: 100%;
+      height: 100%;
+      border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);
+      border-radius: var(--spectrum-alias-border-radius-regular);
+      background-color: var(--spectrum-table-background-color);
+
+      /* forced-color-adjust: none, so that box-shadow style will render */
+      forced-color-adjust: none;
+    }
+  }
+
+  .react-spectrum-Table-row-badge {
+    color: var(--spectrum-table-row-badge-text-color);
+    background: var(--spectrum-table-row-badge-background-color);
+    padding: 0 var(--spectrum-global-dimension-size-100);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    margin-inline-end: var(--spectrum-global-dimension-size-100);
+    margin-top: auto;
+    margin-bottom: auto;
+    height: fit-content;
+  }
+}
+
+.react-spectrum-Table-body {
+  &.react-spectrum-Table-body--dropTarget {
+    border-color: var(--spectrum-table-dropindicator-border-color);
+    background-color: var(--spectrum-alias-highlight-selected);
+    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+
+    /* forced-color-adjust: none, so that box-shadow style will render */
+    forced-color-adjust: none;
+  }
+}
+
+.react-spectrum-Table-InsertionIndicator {
+  z-index: 3;
+  width: calc(100% - (2 * var(--spectrum-table-dropindicator-circle-size)));
+  inset-inline-start: var(--spectrum-table-dropindicator-circle-size);
+  position: absolute;
+  outline: none;
+
+  &.react-spectrum-Table-InsertionIndicator--dropTarget {
+    background: var(--spectrum-table-dropindicator-border-color);
+    border-bottom: 2px solid var(--spectrum-table-dropindicator-border-color);
+
+    /* forced-color-adjust: none, so that background color
+    will render border for insertion indicator. */
+    forced-color-adjust: none;
+
+    &:before {
+      left: calc(var(--spectrum-table-dropindicator-circle-size) * -1);
+    }
+
+    &:after {
+      right: calc(var(--spectrum-table-dropindicator-circle-size) * -1);
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: calc(var(--spectrum-table-dropindicator-circle-size) * -1 / 2 + var(--spectrum-table-dropindicator-border-size) / 2);
+      width: var(--spectrum-table-dropindicator-circle-size);
+      height: var(--spectrum-table-dropindicator-circle-size);
+      border-radius: 50%;
+      border: var(--spectrum-table-dropindicator-border-size) solid;
+      box-sizing: border-box;
+      border-color: var(--spectrum-table-dropindicator-circle-border-color);
+      background-color: var(--spectrum-table-background-color);
+      z-index: 5;
+
+      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */
+      forced-color-adjust: none;
+    }
+  }
+}
+
+.react-spectrum-Table-headCell {
+  &.react-spectrum-Table-dragButtonHeadCell {
+    padding: 0;
+    height: inherit;
+  }
+}
+
+.react-spectrum-Table-cell {
+  &.react-spectrum-Table-dragButtonCell {
+    padding: var(--spectrum-global-dimension-size-40);
+
+    .react-spectrum-Table-dragButton {
+      border-radius: var(--spectrum-alias-border-radius-regular);
+      padding: var(--spectrum-global-dimension-size-10);
+
+      &:focus-visible {
+        box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
+        outline: none;
+
+        /* forced-color-adjust: none, so that box-shadow style will render */
+        forced-color-adjust: none;
+      }
+
+      svg {
+        margin: auto 0;
+        display: block;
+        padding: var(--spectrum-global-dimension-size-40);
+      }
+    }
+  }
+}
+
+.react-spectrum-Table-row {
+  &.react-spectrum-Table-row--dropTarget {
+    border: 1px var(--spectrum-table-dropindicator-border-color);
+    box-shadow: inset 2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
+      inset -2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
+      inset 0 -3px 0 0 var(--spectrum-table-dropindicator-border-color),
+      inset 0 2px 0 0 var(--spectrum-table-dropindicator-border-color);
+
+    /* forced-color-adjust: none, so that box-shadow style will render */
+    forced-color-adjust: none;
+  }
+
+  .react-spectrum-Table-cellWrapper.react-spectrum-Table-cellWrapper--dropTarget {
+    background-color: var(--spectrum-table-droptarget-background-color);
+  }
+}
+
+@media (forced-colors: active) {
+  .react-spectrum-Table,
+  .react-spectrum-Table-row {
+    --spectrum-table-droptarget-background-color: var(--spectrum-alias-global-color-transparent);
+    --spectrum-table-dropindicator-border-color: Highlight;
+    --spectrum-dropzone-border-color-selected-hover: Highlight;
+    --spectrum-table-dropindicator-circle-border-color: Highlight;
+    --spectrum-table-dropzone-border-color-selected-hover: Highlight;
+    --spectrum-table-row-badge-text-color: HighlightText;
+    --spectrum-table-row-badge-background-color: Highlight;
+  }
+}