Col resize hit area increase

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

@@ -21,6 +21,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Table {
+  position: relative;
   border-collapse: separate;
   border-spacing: 0;
   outline: none;
@@ -45,6 +46,9 @@ svg.spectrum-Table-sortedIcon {
   border-right-width: 1px;
   border-right-style: solid;
   flex: 0 0 auto;
+  padding-bottom: 1px;
+  margin-bottom: -1px;
+  z-index: 1;
 }
 .spectrum-Table-headCellContents {
   display: inline-block;
@@ -94,17 +98,24 @@ svg.spectrum-Table-sortedIcon {
     }
     .spectrum-Table-headCellButton {
       box-sizing: border-box;
-      padding: var(--spectrum-table-header-padding-y) var(--spectrum-table-header-padding-x);
+      padding: var(--spectrum-table-header-padding-y) 0 var(--spectrum-table-header-padding-y) var(--spectrum-table-header-padding-x);
+
+      /* truncate text with ellipsis */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 }
 
 .spectrum-Table-columnResizer {
   display: flex;
-  flex: 0 0 auto;
-  justify-content: flex-end;
+  position: absolute;
+  /* -9 aligns us with already existing cell dividers inside the table itself */
+  inset-inline-end: -9px;
+  justify-content: center;
   box-sizing: border-box;
-  inline-size: 10px;
+  inline-size: 20px;
   block-size: 100%;
   user-select: none;
 
@@ -119,11 +130,22 @@ svg.spectrum-Table-sortedIcon {
   &:active,
   &.focus-ring {
     outline: none;
-    &::after {
-      inline-size: 2px;
-    }
   }
 }
+.spectrum-Table-columnResizerPlaceholder {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  inline-size: 10px;
+  block-size: 100%;
+  user-select: none;
+}
+.spectrum-Table-bodyResizeIndicator {
+  display: none;
+  position: absolute;
+  width: 2px;
+  height: 100%;
+  top: 0px;
+}
 
 .spectrum-Table-cell--alignCenter {
   text-align: center;
@@ -160,6 +182,9 @@ svg.spectrum-Table-sortedIcon {
   &.is-drop-target {
     @inherit: %drop-target;
   }
+  &.spectrum-Table-body--resizerAtTableEdge {
+    border-start-end-radius: 0;
+  }
 }
 
 /* The tbody tag doesn't allow setting a border-radius, so these hacks are to make that work
@@ -404,3 +429,37 @@ svg.spectrum-Table-sortedIcon {
 .spectrum-Table-checkbox {
   vertical-align: super;
 }
+
+.spectrum-Table-colResizeIndicator {
+  display: none;
+  height: calc(100% + 1px);
+  width: 2px;
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  pointer-events: none;
+  &.spectrum-Table-colResizeIndicator--visible {
+    display: block;
+  }
+}
+.spectrum-Table-colResizeNubbin {
+  display: none;
+  position: absolute;
+  top: 0px;
+  width: 16px;
+  height: 16px;
+  inset-inline-start: -7px;
+  &.spectrum-Table-colResizeNubbin--visible {
+    display: block;
+  }
+}
+
+.resize-ew * {
+  cursor: col-resize !important;
+}
+.resize-e * {
+  cursor: e-resize !important;
+}
+.resize-w * {
+  cursor: w-resize !important;
+}

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

@@ -288,10 +288,21 @@ tbody.spectrum-Table-body {
     background-color: var(--spectrum-table-divider-border-color);
   }
 
+  /* don't want the divider to add to the resizer's width since it's */
   &:active,
   &:focus-ring {
     &::after {
-      background-color: var(--spectrum-global-color-blue-400);
+      background-color: unset;
     }
   }
 }
+
+.spectrum-Table-colResizeIndicator {
+  &.spectrum-Table-colResizeIndicator--resizing {
+    background-color: var(--spectrum-global-color-blue-600);
+  }
+}
+.spectrum-Table-colResizeNubbin {}
+.spectrum-Table-bodyResizeIndicator {
+  background-color: var(--spectrum-global-color-blue-600);
+}

packages/@react-aria/table/src/useTableColumnResize.ts

@@ -11,7 +11,7 @@
  */
 
 import {ChangeEvent, RefObject, useCallback, useRef} from 'react';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, MoveEndEvent, MoveMoveEvent} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
 import {focusWithoutScrolling, mergeProps, useId} from '@react-aria/utils';
 import {getColumnHeaderId} from './utils';
@@ -31,14 +31,14 @@ export interface AriaTableColumnResizeProps<T> {
   column: GridNode<T>,
   label: string,
   triggerRef: RefObject<HTMLDivElement>,
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  onMove: (e: MoveMoveEvent) => void,
+  onMoveEnd: (e: MoveEndEvent) => void
 }
 
 export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: TableState<T>, columnState: TableColumnResizeState<T>, ref: RefObject<HTMLInputElement>): TableColumnResizeAria {
   let {column: item, triggerRef, isDisabled} = props;
   const stateRef = useRef<TableColumnResizeState<T>>(null);
-  // keep track of what the cursor on the body is so it can be restored back to that when done resizing
-  const cursor = useRef<string | null>(null);
   stateRef.current = columnState;
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   let id = useId();
@@ -58,31 +58,33 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   const {moveProps} = useMove({
     onMoveStart() {
       columnResizeWidthRef.current = stateRef.current.getColumnWidth(item.key);
-      cursor.current = document.body.style.cursor;
+      stateRef.current.onColumnResizeStart(item);
     },
-    onMove({deltaX, pointerType}) {
+    onMove(e) {
+      let {deltaX, deltaY, pointerType} = e;
       if (direction === 'rtl') {
         deltaX *= -1;
       }
+      if (pointerType === 'keyboard') {
+        if (deltaY !== 0 && deltaX === 0) {
+          deltaX = deltaY * -1;
+        }
+        deltaX *= 10;
+      }
       // if moving up/down only, no need to resize
       if (deltaX !== 0) {
-        if (pointerType === 'keyboard') {
-          deltaX *= 10;
-        }
         columnResizeWidthRef.current += deltaX;
         stateRef.current.onColumnResize(item, columnResizeWidthRef.current);
-        if (stateRef.current.getColumnMinWidth(item.key) >= stateRef.current.getColumnWidth(item.key)) {
-          document.body.style.setProperty('cursor', direction === 'rtl' ? 'w-resize' : 'e-resize');
-        } else if (stateRef.current.getColumnMaxWidth(item.key) <= stateRef.current.getColumnWidth(item.key)) {
-          document.body.style.setProperty('cursor', direction === 'rtl' ? 'e-resize' : 'w-resize');
-        } else {
-          document.body.style.setProperty('cursor', 'col-resize');
-        }
+        props.onMove(e);
       }
     },
-    onMoveEnd() {
+    onMoveEnd(e) {
+      let {pointerType} = e;
       columnResizeWidthRef.current = 0;
-      document.body.style.cursor = cursor.current;
+      props.onMoveEnd(e);
+      if (pointerType === 'mouse') {
+        stateRef.current.onColumnResizeEnd(item);
+      }
     }
   });
   let min = Math.floor(stateRef.current.getColumnMinWidth(item.key));

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

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2022 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 React from 'react';
+
+
+// TODO resize with scale? colors should be variables
+export function Nubbin() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <g id="Group_175838" data-name="Group 175838">
+        <g id="Ellipse_10104" data-name="Ellipse 10104" fill="var(--spectrum-global-color-blue-600)" stroke="var(--spectrum-global-color-blue-600)" strokeWidth="2">
+          <circle cx="8" cy="8" r="8" stroke="none" />
+          <circle cx="8" cy="8" r="7" fill="none" />
+        </g>
+      </g>
+      <path id="Path_104166" data-name="Path 104166" d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(2116 7385.763)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
+      <path id="Path_104167" data-name="Path 104167" d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(-2100 -7369.763) rotate(180)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
+    </svg>
+  );
+}

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

@@ -4,8 +4,10 @@ import {FocusRing} from '@react-aria/focus';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {RefObject} from 'react';
+import {MoveMoveEvent} from '@react-types/shared';
+import React, {RefObject, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
+import {TableColumnResizeState} from '@react-stately/table';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useTableColumnResize} from '@react-aria/table';
 import {useTableContext} from './TableView';
@@ -14,16 +16,41 @@ import {VisuallyHidden} from '@react-aria/visually-hidden';
 interface ResizerProps<T> {
   column: GridNode<T>,
   showResizer: boolean,
-  triggerRef: RefObject<HTMLDivElement>
+  triggerRef: RefObject<HTMLDivElement>,
+  onMoveResizer: (e: MoveMoveEvent) => void
 }
 
 function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   let {column, showResizer} = props;
   let {state, columnState, isEmpty} = useTableContext();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {direction} = useLocale();
+  const stateRef = useRef<TableColumnResizeState<T>>(null);
+  stateRef.current = columnState;
 
-  let {inputProps, resizerProps} = useTableColumnResize({...props, label: stringFormatter.format('columnResizer'), isDisabled: isEmpty}, state, columnState, ref);
+  let {inputProps, resizerProps} = useTableColumnResize({
+    ...props,
+    label: stringFormatter.format('columnResizer'),
+    isDisabled: isEmpty,
+    onMove: (e) => {
+      document.body.classList.remove(classNames(styles, 'resize-ew'));
+      document.body.classList.remove(classNames(styles, 'resize-e'));
+      document.body.classList.remove(classNames(styles, 'resize-w'));
+      if (stateRef.current.getColumnMinWidth(column.key) >= stateRef.current.getColumnWidth(column.key)) {
+        document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-w') : classNames(styles, 'resize-e'));
+      } else if (stateRef.current.getColumnMaxWidth(column.key) <= stateRef.current.getColumnWidth(column.key)) {
+        document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-e') : classNames(styles, 'resize-w'));
+      } else {
+        document.body.classList.add(classNames(styles, 'resize-ew'));
+      }
+      props.onMoveResizer(e);
+    },
+    onMoveEnd: () => {
+      document.body.classList.remove(classNames(styles, 'resize-ew'));
+      document.body.classList.remove(classNames(styles, 'resize-e'));
+      document.body.classList.remove(classNames(styles, 'resize-w'));
+    }
+  }, state, columnState, ref);
 
   let style = {
     cursor: undefined,
@@ -40,20 +67,27 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   }
 
   return (
-    <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
+    <>
+      <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
+        <div
+          role="presentation"
+          style={style}
+          className={classNames(styles, 'spectrum-Table-columnResizer')}
+          {...resizerProps}>
+          <VisuallyHidden>
+            <input
+              ref={ref}
+              type="range"
+              {...inputProps} />
+          </VisuallyHidden>
+        </div>
+      </FocusRing>
+      {/* Placeholder so that the title doesn't intersect with space reserved by the resizer when it appears. */}
       <div
+        aria-hidden
         role="presentation"
-        style={style}
-        className={classNames(styles, 'spectrum-Table-columnResizer')}
-        {...resizerProps}>
-        <VisuallyHidden>
-          <input
-            ref={ref}
-            type="range"
-            {...inputProps} />
-        </VisuallyHidden>
-      </div>
-    </FocusRing>
+        className={classNames(styles, 'spectrum-Table-columnResizerPlaceholder')} />
+    </>
   );
 }