Initial implementation of collections API and Tree

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

@@ -22,6 +22,9 @@ governing permissions and limitations under the License.
   padding: 0;
   user-select: none;
   outline: none;
+
+  height: 500px;
+  width: 200px;
 }
 
 .spectrum-TreeView-item {
@@ -70,7 +73,7 @@ governing permissions and limitations under the License.
     content: '';
 
     position: absolute;
-    left: calc(0 + var(--spectrum-treeview-item-border-size));
+    left: var(--spectrum-treeview-item-border-size);
     right: 0;
     z-index: -1; /* make sure we don't block clicks on chevron */
 
@@ -165,3 +168,8 @@ governing permissions and limitations under the License.
 /* topdoc
 {{ treeview/treeview-disabled.yml }}
 */
+
+.spectrum-TreeView-heading {
+  padding: calc(calc(var(--spectrum-treeview-item-margin-y) * 2) + var(--spectrum-treeview-item-padding-y)) 10px;
+  font-weight: bold;
+}

packages/@react-aria/collections/index.ts

@@ -0,0 +1 @@
+export * from './src';

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

@@ -0,0 +1,29 @@
+{
+  "name": "@react-aria/collections",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-stately/collections": "^3.0.0-alpha.1",
+    "@react-types/shared": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@react-aria/collections/src/CollectionView.tsx

@@ -0,0 +1,62 @@
+import {Collection, Layout, LayoutInfo} from '@react-stately/collections';
+import {DOMProps} from '@react-types/shared';
+import React, {CSSProperties} from 'react';
+import {ScrollView} from './ScrollView';
+import {useCollectionState} from '@react-stately/collections';
+
+interface CollectionViewProps<T, V> extends DOMProps {
+  children: (type: string, content: T) => V,
+  layout: Layout<T>,
+  collection: Collection<T>
+}
+
+export function CollectionView<T, V>(props: CollectionViewProps<T, V>) {
+  let {children: renderView, layout, collection, ...otherProps} = props;
+  let {
+    visibleViews,
+    visibleRect,
+    setVisibleRect,
+    contentSize,
+    isAnimating,
+    collectionManager
+  } = useCollectionState({
+    layout,
+    collection,
+    renderView,
+    renderWrapper: (reusableView) => (
+      <div key={reusableView.key} role="presentation" style={layoutInfoToStyle(reusableView.layoutInfo)}>
+        {reusableView.rendered}
+      </div>
+      )
+  });
+
+  return (
+    <ScrollView 
+      {...otherProps}
+      innerStyle={isAnimating ? {transition: `none ${collectionManager.transitionDuration}ms`} : undefined}
+      contentSize={contentSize}
+      visibleRect={visibleRect}
+      onVisibleRectChange={setVisibleRect}>
+      {visibleViews}
+    </ScrollView>
+  );
+}
+
+function layoutInfoToStyle(layoutInfo: LayoutInfo): CSSProperties {
+  return {
+    position: 'absolute',
+    overflow: 'hidden',
+    top: layoutInfo.rect.y,
+    left: layoutInfo.rect.x,
+    transition: 'all',
+    WebkitTransition: 'all',
+    WebkitTransitionDuration: 'inherit',
+    transitionDuration: 'inherit',
+    width: layoutInfo.rect.width + 'px',
+    height: layoutInfo.rect.height + 'px',
+    opacity: layoutInfo.opacity,
+    zIndex: layoutInfo.zIndex,
+    transform: layoutInfo.transform,
+    contain: 'size layout style paint'
+  };
+}

packages/@react-aria/collections/src/ScrollView.tsx

@@ -0,0 +1,103 @@
+import {DOMProps} from '@react-types/shared';
+import {flushSync} from 'react-dom';
+import React, {CSSProperties, ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {Rect, Size} from '@react-stately/collections';
+
+interface ScrollViewProps extends DOMProps {
+  contentSize: Size,
+  visibleRect: Rect,
+  onVisibleRectChange: (rect: Rect) => void,
+  children: ReactNode,
+  innerStyle: CSSProperties
+}
+
+export function ScrollView(props: ScrollViewProps) {
+  let {contentSize, visibleRect, onVisibleRectChange, children, innerStyle, ...otherProps} = props;
+  let ref = useRef<HTMLDivElement>();
+  let state = useRef({
+    scrollTop: 0,
+    scrollLeft: 0,
+    scrollEndTime: 0,
+    scrollTimeout: null,
+    width: 0,
+    height: 0
+  }).current;
+
+  let [isScrolling, setScrolling] = useState(false);
+  let onScroll = useCallback((e) => {
+    flushSync(() => {
+      state.scrollTop = e.currentTarget.scrollTop;
+      state.scrollLeft = e.currentTarget.scrollLeft;
+      onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
+
+      if (!isScrolling) {
+        setScrolling(true);
+      }
+
+      // So we don't constantly call clearTimeout and setTimeout,
+      // keep track of the current timeout time and only reschedule
+      // the timer when it is getting close.
+      let now = Date.now();
+      if (state.scrollEndTime <= now + 50) {
+        state.scrollEndTime = now + 300;
+
+        clearTimeout(state.scrollTimeout);
+        state.scrollTimeout = setTimeout(() => {
+          setScrolling(false);
+          state.scrollTimeout = null;
+        }, 300);
+      }
+    });
+  }, [isScrolling, onVisibleRectChange, state.height, state.scrollEndTime, state.scrollLeft, state.scrollTimeout, state.scrollTop, state.width]);
+
+  useEffect(() => {
+    // TODO: resize observer
+    // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+    let updateSize = () => {
+      let dom = ref.current;
+      if (!dom) {
+        return;
+      }
+
+      let w = dom.offsetWidth;
+      let h = dom.offsetHeight;
+
+      if (state.width !== w || state.height !== h) {
+        state.width = w;
+        state.height = h;
+        onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));
+      }
+    };
+
+    updateSize();
+    window.addEventListener('resize', updateSize, false);
+    return () => {
+      window.removeEventListener('resize', updateSize, false);
+    };
+  }, [onVisibleRectChange, state.height, state.scrollLeft, state.scrollTop, state.width]);
+
+  useLayoutEffect(() => {
+    let dom = ref.current;
+    if (!dom) {
+      return;
+    }
+
+    if (visibleRect.x !== state.scrollLeft) {
+      state.scrollLeft = visibleRect.x;
+      dom.scrollLeft = visibleRect.x;
+    }
+
+    if (visibleRect.y !== state.scrollTop) {
+      state.scrollTop = visibleRect.y;
+      dom.scrollTop = visibleRect.y;
+    }
+  }, [state.scrollLeft, state.scrollTop, visibleRect.x, visibleRect.y]);
+
+  return (
+    <div {...otherProps} style={{position: 'relative', overflow: 'auto'}} ref={ref} onScroll={onScroll}>
+      <div style={{width: contentSize.width, height: contentSize.height, pointerEvents: isScrolling ? 'none' : 'auto', ...innerStyle}}>
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './CollectionView';

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

@@ -1,7 +1,6 @@
 {
   "name": "@react-aria/tooltip",
   "version": "3.0.0-alpha.1",
-  "main": "dist/main.js",
   "description": "Spectrum UI components in React",
   "main": "dist/main.js",
   "module": "dist/module.js",

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

@@ -0,0 +1,31 @@
+{
+  "name": "@react-aria/tree",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/useTooltip.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "devDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1 @@
+export * from './useTree';

packages/@react-aria/tree/src/useTree.ts

@@ -0,0 +1,5 @@
+// import React from 'react';
+
+export function useTree() {
+  return {};
+}

packages/@react-spectrum/tree/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

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

@@ -0,0 +1,44 @@
+{
+  "name": "@react-spectrum/tree",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-stately/tree": "^3.0.0-alpha.1",
+    "@spectrum-icons/ui": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1",
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}