@react-spectrum/table 3.17.11 → 3.18.0

package/src/TableViewLayout.ts

@@ -1,102 +0,0 @@
-/*
- * 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';
-import {TableCollection} from '@react-stately/table';
-
-export class TableViewLayout<T> extends TableLayout<T> {
-  private isLoading: boolean = false;
-
-  protected buildCollection(): LayoutNode[] {
-    let collection = this.virtualizer!.collection as TableCollection<T>;
-    let loadingState = 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;
-    if (!children) {
-      throw new Error('Missing children in LayoutInfo');
-    }
-
-    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;
-      empty.allowOverflow = 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>): boolean {
-    return (node.props?.isDragButtonCell || node.props?.isSelectionCell) ?? false;
-  }
-
-  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
-    // Offset for height of header row
-    y -= this.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height ?? 0;
-    return super.getDropTargetFromPoint(x, y, isValidDropTarget);
-  }
-}

package/src/TableViewWrapper.tsx

@@ -1,103 +0,0 @@
-/*
- * 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<NoInfer<T>>['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
-}
-
-/**
- * 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(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} />;
-  }
-}) as <T>(props: SpectrumTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-export {TableViewWrapper as TableView};

package/src/TreeGridTableView.tsx

@@ -1,44 +0,0 @@
-/*
- * 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'> {}
-
-export const TreeGridTableView = React.forwardRef(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} />
-  );
-}) as <T>(props: TreeGridTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;

package/src/cursors/Cur_MoveHorizontal_9_9.svg

@@ -1,10 +0,0 @@
-<?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

@@ -1,10 +0,0 @@
-<?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

@@ -1,10 +0,0 @@
-<?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/table.css

@@ -1,235 +0,0 @@
-/*
- * Copyright 2020 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.
- */
-
- .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;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-}
-
-.react-spectrum-Table-cell {
-  display: flex;
-  align-items: center;
-}
-
-.react-spectrum-Table-cellWrapper > .react-spectrum-Table-cell {
-  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;
-}
-
-.react-spectrum-Table-centeredWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  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;
-  }
-}