Forward Ref Assertion (#103)

* Escape Entities
* Type Assert The Forward Ref
* Remove references to version 2 in the readme
* Update the test workflow
* Case Sensisitve for Linux

Author: jameskerr

.github/workflows/test.yml

@@ -13,4 +13,5 @@ jobs:
           node-version: "16.x"
           registry-url: "https://registry.npmjs.org"
       - run: yarn
-      - run: yarn workspace react-arborist build
+      - run: yarn build
+      - run: yarn build:showcase

README.md

@@ -17,18 +17,13 @@ Here is a Gmail sidebar clone built with react-arborist.
 - Inline renaming
 - Virtualized rendering
 - Custom styling
-
-**New Features in Version 2**
-
 - Keyboard navigation
 - Aria attributes
 - Tree filtering
 - Selection synchronization
-- More callbacks (onScroll, onActivate, onSelect)
+- Callbacks (onScroll, onActivate, onSelect)
 - Controlled or uncontrolled trees
 
-> These docs are for version 2. It contains breaking changes. Here is the [v1.2.0 README](https://github.com/brimdata/react-arborist/tree/4fe9659d2c4cbd57582294330863d4fd7e7af74b).
-
 ## Installation
 
 ```

packages/react-arborist/src/components/tree.tsx

@@ -8,7 +8,7 @@ import { TreeProps } from "../types/tree-props";
 import { IdObj } from "../types/utils";
 import { useValidatedProps } from "../hooks/use-validated-props";
 
-export const Tree = forwardRef(function Tree<T>(
+function TreeComponent<T>(
   props: TreeProps<T>,
   ref: React.Ref<TreeApi<T> | undefined>
 ) {
@@ -21,4 +21,8 @@ export const Tree = forwardRef(function Tree<T>(
       <DragPreviewContainer />
     </TreeProvider>
   );
-});
+}
+
+export const Tree = forwardRef(TreeComponent) as <T>(
+  props: TreeProps<T> & { ref?: React.ForwardedRef<TreeApi<T> | undefined> }
+) => ReturnType<typeof TreeComponent>;

packages/showcase/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export && open out",
+    "build": "next build && next export",
     "start": "next start",
     "lint": "next lint"
   },

packages/showcase/pages/gmail.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { CursorProps, NodeApi, NodeRendererProps, Tree } from "react-arborist";
 import { gmailData, GmailItem } from "../data/gmail";
 import * as icons from "react-icons/md";
-import styles from "../styles/gmail.module.css";
+import styles from "../styles/Gmail.module.css";
 import { FillFlexParent } from "../components/fill-flex-parent";
 import { SiGmail } from "react-icons/si";
 import { BsTree } from "react-icons/bs";
@@ -69,7 +69,10 @@ export default function GmailSidebar() {
             <li>Try to drag Inbox into Categories (not allowed)</li>
             <li>Move focus with the arrow keys</li>
             <li>Toggle folders (press spacebar)</li>
-            <li>Rename (press enter, only allowed on items in 'Categories')</li>
+            <li>
+              Rename (press enter, only allowed on items in {"'"}Categories{"'"}
+              )
+            </li>
             <li>Create a new item (press A)</li>
             <li>Create a new folder (press shift+A)</li>
             <li>Delete items (press delete)</li>

packages/showcase/pages/index.tsx

@@ -2,7 +2,7 @@ import type { NextPage } from "next";
 import Image from "next/image";
 import Head from "next/head";
 import Link from "next/link";
-import styles from "../styles/home.module.css";
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (