Merge branch 'master' into bl-fix-133

.github/workflows/deploy-to-github-pages.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.15.0
+          node-version: 20
           cache: npm
 
       - name: Install dependencies

.github/workflows/pr-gate.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.15.0
+          node-version: 20
           cache: "npm"
       - run: npm ci
       - run: npm run lint

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-accessible-treeview",
   "description": "A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "author": "lissitz (https://github.com/lissitz)",
   "main": "dist/react-accessible-treeview.cjs.js",
   "module": "dist/react-accessible-treeview.esm.js",

src/TreeView/index.tsx

@@ -34,6 +34,7 @@ import {
   isBranchNotSelectedAndHasOnlySelectedChild,
   getOnSelectTreeAction,
   getBranchNodesToExpand,
+  IFlatMetadata,
 } from "./utils";
 import { Node } from "./node";
 import {
@@ -506,9 +507,9 @@ export interface ITreeViewOnLoadDataProps {
   treeState: ITreeViewState;
 }
 
-export interface ITreeViewProps {
+export interface ITreeViewProps<M extends IFlatMetadata = IFlatMetadata> {
   /** Tree data*/
-  data: INode[];
+  data: INode<M>[];
   /** Function called when a node changes its selected state */
   onSelect?: (props: ITreeViewOnSelectProps) => void;
   /** Function called when a single node is manually selected/unselected. */
@@ -521,7 +522,7 @@ export interface ITreeViewProps {
   /** className to add to the outermost ul */
   className?: string;
   /** Render prop for the node */
-  nodeRenderer: (props: INodeRendererProps) => React.ReactNode;
+  nodeRenderer: (props: INodeRendererProps<M>) => React.ReactNode;
   /** Indicates what action will be performed on a node which informs the correct aria-* properties to use on the node (aria-checked if using checkboxes, aria-selected if not). */
   nodeAction?: NodeAction;
   /** Array with the ids of the default expanded nodes */
@@ -557,8 +558,8 @@ export interface ITreeViewProps {
   focusedId?: NodeId;
 }
 
-const TreeView = React.forwardRef<HTMLUListElement, ITreeViewProps>(
-  function TreeView(
+const TreeView = React.forwardRef(
+function TreeView<M extends IFlatMetadata = IFlatMetadata>(
     {
       data,
       selectedIds,
@@ -583,8 +584,8 @@ const TreeView = React.forwardRef<HTMLUListElement, ITreeViewProps>(
       focusedId,
       onBlur,
       ...other
-    },
-    ref
+    }: ITreeViewProps<M>,
+    ref: React.ForwardedRef<HTMLUListElement>
   ) {
     validateTreeViewData(data);
     const nodeRefs = useRef({});
@@ -652,7 +653,7 @@ const TreeView = React.forwardRef<HTMLUListElement, ITreeViewProps>(
           <Node
             key={`${x}-${typeof x}`}
             data={data}
-            element={getTreeNode(data, x)}
+            element={getTreeNode(data, x) as INode<M>}
             setsize={getTreeParent(data).children.length}
             posinset={index + 1}
             level={1}
@@ -673,9 +674,12 @@ const TreeView = React.forwardRef<HTMLUListElement, ITreeViewProps>(
           />
         ))}
       </ul>
-    );
-  }
-);
+    )
+  })
+
+
+
+
 
 const handleKeyDown = ({
   data,
@@ -979,6 +983,7 @@ const handleKeyDown = ({
   }
 };
 
+
 TreeView.propTypes = {
   /** Tree data*/
   data: PropTypes.array.isRequired,

src/TreeView/node.tsx

@@ -22,13 +22,14 @@ import {
   noop,
   propagatedIds,
   getOnSelectTreeAction,
+  IFlatMetadata,
 } from "./utils";
 import { baseClassNames, clickActions, treeTypes } from "./constants";
 
-export interface INodeProps {
-  element: INode;
+export interface INodeProps<M extends IFlatMetadata = IFlatMetadata> {
+  element: INode<M>;
   dispatch: React.Dispatch<TreeViewAction>;
-  data: INode[];
+  data: INode<M>[];
   nodeAction: NodeAction;
   selectedIds: Set<NodeId>;
   tabbableId: NodeId;
@@ -40,7 +41,7 @@ export interface INodeProps {
   nodeRefs: INodeRefs;
   leafRefs: INodeRefs;
   baseClassNames: typeof baseClassNames;
-  nodeRenderer: (props: INodeRendererProps) => React.ReactNode;
+  nodeRenderer: (props: INodeRendererProps<M>) => React.ReactNode;
   setsize: number;
   posinset: number;
   level: number;
@@ -53,8 +54,8 @@ export interface INodeProps {
   propagateSelectUpwards: boolean;
 }
 
-export interface INodeGroupProps
-  extends Omit<INodeProps, "setsize" | "posinset"> {
+export interface INodeGroupProps<M extends IFlatMetadata = IFlatMetadata>
+  extends Omit<INodeProps<M>, "setsize" | "posinset"> {
   getClasses: (className: string) => string;
   /** don't send this. The NodeGroup render function, determines it for you */
   setsize?: undefined;
@@ -65,15 +66,15 @@ export interface INodeGroupProps
 /**
  * It's convenient to pass props down to the child, but we don't want to pass everything since it would create incorrect values for setsize and posinset
  */
-const removeIrrelevantGroupProps = (
-  nodeProps: INodeProps
-): Omit<INodeGroupProps, "getClasses"> => {
+const removeIrrelevantGroupProps = <M extends IFlatMetadata = IFlatMetadata,>(
+  nodeProps: INodeProps<M>
+): Omit<INodeGroupProps<M>, "getClasses"> => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { setsize, posinset, ...rest } = nodeProps;
   return rest;
 };
 
-export const Node = (props: INodeProps) => {
+export const Node = <M extends IFlatMetadata = IFlatMetadata>(props: INodeProps<M>) => {
   const {
     element,
     dispatch,
@@ -311,15 +312,15 @@ export const Node = (props: INodeProps) => {
   );
 };
 
-export const NodeGroup = ({
+export const NodeGroup = <M extends IFlatMetadata = IFlatMetadata>({
   data,
   element,
   expandedIds,
   getClasses,
   baseClassNames,
   level,
   ...rest
-}: INodeGroupProps) => (
+}: INodeGroupProps<M>) => (
   <ul role="group" className={getClasses(baseClassNames.nodeGroup)}>
     {expandedIds.has(element.id) &&
       element.children.length > 0 &&

src/TreeView/types.ts

@@ -33,9 +33,9 @@ export type EventCallback = <T, E>(
     metadata?: M;
   }
 
-  export interface INodeRendererProps {
+  export interface INodeRendererProps<M extends IFlatMetadata = IFlatMetadata> {
     /** The object that represents the rendered node */
-    element: INode;
+    element: INode<M>;
     /** A function which gives back the props to pass to the node */
     getNodeProps: (args?: {
       onClick?: EventCallback;

src/TreeView/utils.ts

@@ -307,15 +307,15 @@ export type IFlatMetadata = Record<
   string | number | boolean | undefined | null
 >;
 
-interface ITreeNode<M extends IFlatMetadata> {
+interface ITreeNode<M extends IFlatMetadata = IFlatMetadata> {
   id?: NodeId;
   name: string;
   isBranch?: boolean;
   children?: ITreeNode<M>[];
   metadata?: M;
 }
 
-export const flattenTree = <M extends IFlatMetadata>(
+export const flattenTree = <M extends IFlatMetadata = IFlatMetadata>(
   tree: ITreeNode<M>
 ): INode<M>[] => {
   let internalCount = 0;
@@ -515,8 +515,8 @@ export const getOnSelectTreeAction = (
   return treeTypes.toggleSelect;
 };
 
-export const getTreeParent = (data: INode[]): INode => {
-  const parentNode: INode | undefined = data.find(
+export const getTreeParent = <M extends IFlatMetadata = IFlatMetadata>(data: INode<M>[]): INode<M> => {
+  const parentNode: INode<M> | undefined = data.find(
     (node) => node.parent === null
   );
 
@@ -527,7 +527,7 @@ export const getTreeParent = (data: INode[]): INode => {
   return parentNode;
 };
 
-export const getTreeNode = (data: INode[], id: NodeId): INode => {
+export const getTreeNode = <M extends IFlatMetadata = IFlatMetadata>(data: INode<M>[], id: NodeId): INode<M> => {
   const treeNode = data.find((node) => node.id === id);
 
   if (treeNode == null) {

website/package.json

@@ -17,7 +17,7 @@
     "@reach/tooltip": "^0.2.2",
     "classnames": "^2.2.6",
     "react": "^16.8.4",
-    "react-accessible-treeview": "^2.9.1",
+    "react-accessible-treeview": "^2.10.0",
     "react-dom": "^16.8.4",
     "react-icons": "^3.7.0"
   },