[FOR REVIEW ONLY] Column resizing controlled WIP

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

@@ -86,6 +86,32 @@ svg.spectrum-Table-sortedIcon {
   }
 }
 
+.spectrum-Table-columnResizer {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  right: 0px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 3;
+
+  &::after {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    display: block;
+    box-sizing: border-box;
+    width: 1px;
+    height: 100%;
+    background-color: red;
+  }
+}
+
 .spectrum-Table-cell--alignCenter {
   text-align: center;
 }
@@ -236,6 +262,14 @@ svg.spectrum-Table-sortedIcon {
   border-inline-end-width: var(--spectrum-table-divider-border-size);
 }
 
+.spectrum-Table-cell--divider {
+  &.is-resizable {
+    &:hover {
+      border-inline-end-width: 3px;
+    }
+  }
+}
+
 .spectrum-Table-row {
   position: relative;
   cursor: default;

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

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+// import {snapValueToStep} from '@react-aria/utils';
+import {useMove} from '@react-aria/interactions';
+import {useRef} from 'react';
+
+export function useTableColumnResize(state, item): any {
+  const stateRef = useRef(null);
+  stateRef.current = state;
+
+  const columnResizeWidthRef = useRef(null);
+  const {moveProps} = useMove({
+    onMoveStart() {
+      stateRef.current.setCurrentResizeColumn(item);
+      stateRef.current.addResizedColumn(item.key);
+      columnResizeWidthRef.current = stateRef.current.getColumnWidth(item.key);
+    },
+    onMove({deltaX}) {
+      columnResizeWidthRef.current += deltaX;
+      stateRef.current.setResizeDelta(columnResizeWidthRef.current);
+    },
+    onMoveEnd() {
+      stateRef.current.setCurrentResizeColumn();
+      columnResizeWidthRef.current = 0;
+    }
+  });
+
+  return {
+    resizerProps: moveProps
+  };
+}

packages/@react-spectrum/slider/src/SliderThumb.tsx

@@ -46,6 +46,8 @@ export function SliderThumb(props: SliderThumbProps) {
   let {direction} = useLocale();
   let cssDirection = direction === 'rtl' ? 'right' : 'left';
 
+  console.log('SliderThumb.tsx', state.isThumbDragging(index));
+
   return (
     <FocusRing within focusRingClass={classNames(styles, 'is-focused')}>
       <div

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

@@ -0,0 +1,13 @@
+import {classNames} from '@react-spectrum/utils';
+import React from 'react';
+import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
+import {useTableColumnResize} from '@react-aria/table/src/useTableColumnResize';
+
+
+export default function Resizer(props) {
+  const {state, item} = props;
+  let {resizerProps} = useTableColumnResize(state, item);
+  return (
+    <div {...resizerProps} className={classNames(styles, 'spectrum-Table-columnResizer')} />
+  );
+}