Add custom cursor icons back (#3649)

* Add custom cursor icons for column resizing back

.parcelrc

@@ -6,6 +6,7 @@
     "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"],
     "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "data-url:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
     "*.{md,mdx}": ["parcel-transformer-mdx-docs"],
     "*.svg": ["@parcel/transformer-svg-react"],
     "*.css": ["...", "parcel-transformer-css-env"],

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -497,19 +497,6 @@ svg.spectrum-Table-sortedIcon {
   }
 }
 
-.resize-ew,
-.spectrum-Table-columnResizer--ewresize {
-  cursor: ew-resize !important;
-}
-.resize-e,
-.spectrum-Table-columnResizer--eresize {
-  cursor: e-resize !important;
-}
-.resize-w,
-.spectrum-Table-columnResizer--wresize {
-  cursor: w-resize !important;
-}
-
 @media (forced-colors: active) {
   .spectrum-Table-row {
     &:focus-ring {

packages/@react-spectrum/table/src/Resizer.tsx

@@ -9,6 +9,7 @@ import intlMessages from '../intl/*.json';
 import {mergeProps} from '@react-aria/utils';
 import React, {Key, RefObject, useEffect, useState} from 'react';
 import ReactDOM from 'react-dom';
+import rspStyles from './table.css';
 import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useTableColumnResize} from '@react-aria/table';
@@ -25,9 +26,9 @@ interface ResizerProps<T> {
 }
 
 let CURSOR_CLASSES = {
-  w: classNames(styles, 'resize-w'),
-  e: classNames(styles, 'resize-e'),
-  ew: classNames(styles, 'resize-ew')
+  w: classNames(rspStyles, 'resize-w'),
+  e: classNames(rspStyles, 'resize-e'),
+  ew: classNames(rspStyles, 'resize-ew')
 };
 
 function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
@@ -116,11 +117,11 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
           className={classNames(
             styles,
             'spectrum-Table-columnResizer',
-            {
-              'spectrum-Table-columnResizer--ewresize': !(isEResizable && isWResizable),
-              'spectrum-Table-columnResizer--eresize': direction === 'rtl' ? isWResizable : isEResizable,
-              'spectrum-Table-columnResizer--wresize': direction === 'rtl' ? isEResizable : isWResizable
-            }
+            classNames(rspStyles, {
+              'react-spectrum-Table-columnResizer--ewresize': !(isEResizable && isWResizable),
+              'react-spectrum-Table-columnResizer--eresize': direction === 'rtl' ? isWResizable : isEResizable,
+              'react-spectrum-Table-columnResizer--wresize': direction === 'rtl' ? isEResizable : isWResizable
+            })
           )}
           {...resizerProps}>
           <VisuallyHidden>

packages/@react-spectrum/table/src/table.css

@@ -49,3 +49,16 @@
   width: 100%;
   height: 100%;
 }
+
+.resize-ew,
+.react-spectrum-Table-columnResizer--ewresize {
+  cursor: url('data-url:./cursors/Cur_MoveHorizontal_9_9.svg'), ew-resize !important;
+}
+.resize-e,
+.react-spectrum-Table-columnResizer--eresize {
+  cursor: url('data-url:./cursors/Cur_MoveToRight_9_9.svg'), e-resize !important;
+}
+.resize-w,
+.react-spectrum-Table-columnResizer--wresize {
+  cursor: url('data-url:./cursors/Cur_MoveToLeft_9_9.svg'), w-resize !important;
+}