On hold - V3 splitview followup

.storybook-v3/webpack.config.js

@@ -68,7 +68,7 @@ module.exports = ({config}, env) => {
           include: path.resolve(__dirname, '../')
         },
         {
-          test: /packages\/.*\.css$/,
+          test: /\.css$/,
           use: [
             'style-loader',
             {
@@ -89,7 +89,7 @@ module.exports = ({config}, env) => {
               }
             }
           ],
-          include: path.resolve(__dirname, '../')
+          include: path.resolve(__dirname, '../packages')
         },
         {
           test: /\.css$/,

packages/@react-aria/interactions/src/index.ts

@@ -12,6 +12,7 @@
 
 export * from './usePress';
 export * from './useInteractOutside';
+export * from './useMoveable';
 export * from './Pressable';
 export * from './PressResponder';
 export * from './useKeyboard';

packages/@react-aria/interactions/src/useMoveable.ts

@@ -0,0 +1,151 @@
+import {AllHTMLAttributes, MutableRefObject, useRef} from 'react';
+import {flipAxis, orientation, point} from '@react-types/shared';
+
+interface UseMoveableProps {
+  containerRef: MutableRefObject<HTMLElement>,
+  flipAxis?: flipAxis,
+  onHover?: (hovered: boolean) => void,
+  onDrag?: (dragging: boolean) => void,
+  onPositionChange?: (relativePosition: point) => void,
+  onIncrement?: (axis: orientation) => void,
+  onDecrement?: (axis: orientation) => void,
+  onIncrementToMax?: () => void,
+  onDecrementToMin?: () => void,
+  onCollapseToggle?: () => void
+}
+
+// handles movement in x and y either as
+// relative position of cursor to a container
+// or as keyboard events
+
+export function useMoveable({containerRef, flipAxis, onHover, onDrag, onPositionChange, onIncrement, onDecrement, onIncrementToMax, onDecrementToMin, onCollapseToggle}: UseMoveableProps): AllHTMLAttributes<HTMLElement> {
+  let getPosition = (e):point => ({x: e.clientX, y: e.clientY});
+  let calculateCoordinateDistances = (element, position:point):point => {
+    let rect = element.getBoundingClientRect();
+    switch (flipAxis) {
+      case 'x':
+        return {x: position.x - rect.left, y: rect.bottom - position.y};
+      case 'y':
+        return {x: rect.right - position.x, y: position.y - rect.top};
+      case 'xy':
+        return {x: rect.right - position.x, y: rect.bottom - position.y};
+      default:
+        return {x: position.x - rect.left, y: position.y - rect.top};
+    }
+  };
+  let getNextDistance = (e):point => {
+    let mousePosition = getPosition(e);
+    let nextOffset = calculateCoordinateDistances(containerRef.current, mousePosition);
+    return nextOffset;
+  };
+  let dragging = useRef<boolean>(false);
+  let prevPosition = useRef<point>({x: 0, y: 0});
+
+  let onMouseDragged = (e) => {
+    e.preventDefault();
+    let nextOffset = getNextDistance(e);
+    if (!dragging.current) {
+      dragging.current = true;
+      if (onDrag) {
+        onDrag(true);
+      }
+      if (onPositionChange) {
+        onPositionChange(nextOffset);
+      }
+    }
+    if (prevPosition.current === nextOffset) {
+      return;
+    }
+    prevPosition.current = nextOffset;
+    if (onPositionChange) {
+      onPositionChange(nextOffset);
+    }
+  };
+
+  let onMouseUp = (e) => {
+    dragging.current = false;
+    let nextOffset = getNextDistance(e);
+    if (onDrag) {
+      onDrag(false);
+    }
+    if (onPositionChange) {
+      onPositionChange(nextOffset);
+    }
+    window.removeEventListener('mouseup', onMouseUp, false);
+    window.removeEventListener('mousemove', onMouseDragged, false);
+  };
+
+  let onMouseDown = () => {
+    window.addEventListener('mousemove', onMouseDragged, false);
+    window.addEventListener('mouseup', onMouseUp, false);
+  };
+
+  let onMouseEnter = () => {
+    if (onHover) {
+      onHover(true);
+    }
+  };
+
+  let onMouseOut = () => {
+    if (onHover) {
+      onHover(false);
+    }
+  };
+
+  let onKeyDown = (e) => {
+    switch (e.key) {
+      case 'Left':
+      case 'ArrowLeft':
+        if (onDecrement && (!flipAxis || !flipAxis.includes('y'))) {
+          onDecrement('horizontal');
+        } else if (onIncrement && (flipAxis && flipAxis.includes('y'))) {
+          onIncrement('horizontal');
+        }
+        break;
+      case 'Up':
+      case 'ArrowUp':
+        if (onDecrement && (!flipAxis || !flipAxis.includes('x'))) {
+          onDecrement('vertical');
+        } else if (onIncrement && (flipAxis && flipAxis.includes('x'))) {
+          onIncrement('vertical');
+        }
+        break;
+      case 'Right':
+      case 'ArrowRight':
+        if (onIncrement && (!flipAxis || !flipAxis.includes('y'))) {
+          onIncrement('horizontal');
+        } else if (onDecrement && (flipAxis && flipAxis.includes('y'))) {
+          onDecrement('horizontal');
+        }
+        break;
+      case 'Down':
+      case 'ArrowDown':
+        if (onIncrement && (!flipAxis || !flipAxis.includes('x'))) {
+          onIncrement('vertical');
+        } else if (onDecrement && (flipAxis && flipAxis.includes('x'))) {
+          onDecrement('vertical');
+        }
+        break;
+      case 'Home':
+        if (onDecrementToMin) {
+          onDecrementToMin();
+        }
+        e.preventDefault();
+        break;
+      case 'End':
+        if (onIncrementToMax) {
+          onIncrementToMax();
+        }
+        e.preventDefault();
+        break;
+      case 'Enter':
+        if (onCollapseToggle) {
+          onCollapseToggle();
+        }
+        e.preventDefault();
+        break;
+    }
+  };
+
+  return {onMouseDown, onMouseEnter, onMouseOut, onKeyDown};
+}

packages/@react-aria/splitview/package.json

@@ -18,9 +18,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/interactions": "^3.0.0-rc.2",
     "@react-aria/utils": "^3.0.0-alpha.1",
+    "@react-stately/splitview": "^3.0.0-alpha.1",
     "@react-types/shared": "^3.0.0-alpha.1",
-    "@react-stately/splitview": "^3.0.0-alpha.1"
+    "@react-types/splitview": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"

packages/@react-aria/splitview/src/useSplitView.ts

@@ -10,29 +10,44 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain} from '@react-aria/utils';
-import {HTMLAttributes, useEffect, useRef} from 'react';
-import {SplitViewAriaProps, SplitViewState} from '@react-types/shared';
-import {useDrag1D} from '@react-aria/utils';
-import {useId} from '@react-aria/utils';
+import {AllHTMLAttributes, MouseEventHandler, MutableRefObject, useEffect, useRef} from 'react';
+import {chain, useId} from '@react-aria/utils';
+import {direction, orientation, SplitViewState} from '@react-types/shared';
+import {useMoveable} from '@react-aria/interactions';
 
-interface AriaSplitViewProps {
-  containerProps: HTMLAttributes<HTMLElement>,
-  handleProps: HTMLAttributes<HTMLElement>,
-  primaryPaneProps: HTMLAttributes<HTMLElement>
+export interface SplitViewAriaProps {
+  id?: string,
+  onMouseDown?: MouseEventHandler,
+  allowsResizing?: boolean,
+  allowsCollapsing?: boolean,
+  orientation?: orientation,
+  primaryPane?: 0 | 1,
+  primaryMinSize?: number,
+  primaryMaxSize?: number,
+  secondaryMinSize?: number,
+  secondaryMaxSize?: number,
+  'aria-label'?: string,
+  'aria-labelledby'?: string,
+  containerRef?: MutableRefObject<HTMLDivElement>
 }
 
-export function useSplitView(props: SplitViewAriaProps, state: SplitViewState): AriaSplitViewProps {
+export interface AriaSplitViewProps {
+  handleProps: AllHTMLAttributes<HTMLElement>,
+  primaryPaneProps: AllHTMLAttributes<HTMLElement>
+}
+
+export function useSplitView(props: SplitViewAriaProps, state: SplitViewState, textDirection: direction): AriaSplitViewProps {
   let {
     containerRef,
     id: providedId,
-    primaryPane = 0,
-    primaryMinSize = 304,
-    primaryMaxSize = Infinity,
-    secondaryMinSize = 304,
-    secondaryMaxSize = Infinity,
-    orientation = 'horizontal' as 'horizontal',
+    primaryPane,
+    primaryMinSize,
+    primaryMaxSize,
+    secondaryMinSize,
+    secondaryMaxSize,
+    orientation = 'horizontal',
     allowsResizing = true,
+    allowsCollapsing,
     onMouseDown: propsOnMouseDown
   } = props;
   let {containerState, handleState} = state;
@@ -62,23 +77,39 @@ export function useSplitView(props: SplitViewAriaProps, state: SplitViewState):
     };
   }, [containerRef, containerState, primaryMinSize, primaryMaxSize, secondaryMinSize, secondaryMaxSize, orientation, size]);
 
-  let draggableProps = useDrag1D({
+  // LTR vs RTL flip across the y axis, they never flip across the x axis
+  let flipAxis;
+  if (textDirection === 'rtl') {
+    if (orientation === 'horizontal' && !reverse) {
+      flipAxis = 'y';
+    } else if (orientation === 'vertical' && reverse) {
+      flipAxis = 'x';
+    }
+  } else {
+    if (orientation === 'horizontal' && reverse) {
+      flipAxis = 'y';
+    } else if (orientation === 'vertical' && reverse) {
+      flipAxis = 'x';
+    }
+  }
+  let draggableProps = useMoveable({
     containerRef,
-    reverse,
-    orientation,
+    flipAxis,
     onHover: (hovered) => handleState.setHover(hovered),
     onDrag: (dragging) => handleState.setDragging(dragging),
     onPositionChange: (position) => handleState.setOffset(position),
-    onIncrement: () => handleState.increment(),
-    onDecrement: () => handleState.decrement(),
+    onIncrement: (axis) => handleState.increment(axis),
+    onDecrement: (axis) => handleState.decrement(axis),
     onIncrementToMax: () => handleState.incrementToMax(),
     onDecrementToMin: () => handleState.decrementToMin(),
     onCollapseToggle: () => handleState.collapseToggle()
   });
 
   let ariaValueMin = 0;
   let ariaValueMax = 100;
-  let ariaValueNow = (handleState.offset - containerState.minPos) / (containerState.maxPos - containerState.minPos) * 100 | 0;
+  let ariaValueNow = allowsCollapsing ?
+    (handleState.offset / containerState.maxPos * 100) | 0 :
+    ((handleState.offset - containerState.minPos) / (containerState.maxPos - containerState.minPos) * 100) | 0;
 
   let onMouseDown = allowsResizing ? chain(draggableProps.onMouseDown, propsOnMouseDown) : undefined;
   let onMouseEnter = allowsResizing ? draggableProps.onMouseEnter : undefined;
@@ -87,9 +118,6 @@ export function useSplitView(props: SplitViewAriaProps, state: SplitViewState):
   let tabIndex = allowsResizing ? 0 : undefined;
 
   return {
-    containerProps: {
-      id
-    },
     handleProps: {
       tabIndex,
       'aria-valuenow': ariaValueNow,

packages/@react-aria/utils/src/index.ts

@@ -14,8 +14,6 @@ export * from './useId';
 export * from './chain';
 export * from './mergeProps';
 export * from './number';
-export * from './getOffset';
-export * from './useDrag1D';
 export * from './useLabels';
 export * from './useUpdateEffect';
 export * from './focusWithoutScrolling';

packages/@react-spectrum/splitview/package.json

@@ -29,12 +29,14 @@
     "url": "https://github.com/adobe-private/react-spectrum-v3"
   },
   "dependencies": {
-    "@adobe/focus-ring-polyfill": "^0.x",
     "@babel/runtime": "^7.6.2",
+    "@react-aria/focus": "^3.0.0-rc.2",
+    "@react-aria/i18n": "^3.0.0-rc.2",
     "@react-aria/splitview": "^3.0.0-alpha.1",
-    "@react-spectrum/utils": "^3.0.0-alpha.1",
+    "@react-spectrum/utils": "^3.0.0-rc.2",
     "@react-stately/splitview": "^3.0.0-alpha.1",
-    "@react-types/shared": "^3.0.0-alpha.1"
+    "@react-types/shared": "^3.0.0-rc.2",
+    "@react-types/splitview": "^3.0.0-rc.1"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"