@react-fabric/data 1.0.0-beta.1 → 1.0.0-beta.12

package/src/table/types.ts

@@ -23,7 +23,9 @@
 
 import {
   type CssProp,
+  type Elements,
   type IconProps,
+  type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
@@ -32,12 +34,13 @@ export const COL_MIN_WIDTH = "3rem";
 export const COL_MAX_WIDTH = "64rem";
 export const COL_DEFAULT_WIDTH = "12rem";
 
-export interface ColumnType<T = KeyValue>
+export interface TableColumn<T = KeyValue>
   extends CssProp,
     IconProps,
     TestProps {
-  id: keyof T;
+  id: keyof T | string;
   label?: string;
+  tooltip?: string;
   actions?: ReactElement;
   align?: "start" | "center" | "end";
   locked?: "start" | "end";
@@ -59,13 +62,21 @@ export interface ColumnType<T = KeyValue>
     | "time"
     | "unknown";
   format?: string;
-  renderer?: (value: AnyObject, data: T) => void;
+  valueMap?: KeyValue;
+  renderer?: (value: AnyObject, data: T, index: number) => Elements<AnyObject>;
 }
 
-export interface TableProps<T = KeyValue> {
-  columns: Array<ColumnType<T>>;
+export interface TableRef {
+  hilight: (row: number) => void;
+  unhilight: () => void;
+  scrollTo: (row: number) => void;
+}
+
+export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
+  columns: Array<TableColumn<T>>;
   data: T[];
-  keyProperty: keyof T;
+  keyProperty?: keyof T;
+  emptyDisplay?: ReactElement;
   /**
    * checkable rows
    */
@@ -81,4 +92,10 @@ export interface TableProps<T = KeyValue> {
   hideableColumns?: boolean;
 
   onRowClick?: (data: T) => void;
+
+  initialScroll?: number;
+  onScroll?: (firstItem: number) => void;
+
+  canExpand?: (record: T) => boolean;
+  children?: (record: T) => Elements<AnyObject>;
 }

package/src/table/useTableColumns.ts

@@ -23,20 +23,20 @@
 
 import { groupBy } from "@react-fabric/utilities";
 import { useEffect, useReducer } from "react";
-import { type ColumnType } from "./types";
+import { type TableColumn } from "./types";
 
 interface ColumnState {
-  columns: ColumnType[];
-  start: ColumnType[];
-  end: ColumnType[];
-  cols: ColumnType[];
+  columns: TableColumn[];
+  start: TableColumn[];
+  end: TableColumn[];
+  cols: TableColumn[];
 }
 
 type ColumnActions =
-  | { type: "columns"; columns: ColumnType[] }
+  | { type: "columns"; columns: TableColumn[] }
   | { type: "hide"; id: string };
 
-export const useTableColumns = (columns: ColumnType[]) => {
+export const useTableColumns = (columns: TableColumn[]) => {
   const [state, dispatch] = useReducer(
     (state: ColumnState, action: ColumnActions) => {
       if (action.type === "columns") {

package/src/table/useVirtualTable.ts

@@ -25,16 +25,20 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { useCallback, useReducer, useRef } from "react";
 
 interface DataState {
+  expanded: Key[];
   checked: Key[];
   allChecked: 0 | 1 | 2;
 }
 
-type DataAction = { type: "check"; key: Key } | { type: "checkall" };
+type DataAction =
+  | { type: "expand"; key: Key }
+  | { type: "check"; key: Key }
+  | { type: "checkall" };
 
 export const useVirtualTable = (
   data: KeyValue[],
-  keyProperty: Key,
-  onCheckChanged: (checked: Key[]) => void,
+  keyProperty?: Key,
+  onCheckChanged?: (checked: Key[]) => void,
 ) => {
   // TODO: refactor data into item list, apply grouping if groupColumn provided
   // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
@@ -48,19 +52,25 @@ export const useVirtualTable = (
 
   const [state, dispatch] = useReducer(
     (state: DataState, action: DataAction) => {
+      if (action.type === "expand") {
+        if (state.expanded.includes(action.key))
+          state.expanded.splice(state.expanded.indexOf(action.key), 1);
+        else state.expanded.push(action.key);
+      }
       if (action.type === "check") {
         if (state.checked.includes(action.key))
           state.checked.splice(state.checked.indexOf(action.key), 1);
         else state.checked.push(action.key);
+        onCheckChanged?.(state.checked);
       }
       if (action.type === "checkall") {
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else {
+        } else if (keyProperty) {
           state.checked = data.map((item) => item[keyProperty]);
         }
+        onCheckChanged?.(state.checked);
       }
-      onCheckChanged(state.checked);
       return {
         ...state,
         allChecked:
@@ -73,6 +83,7 @@ export const useVirtualTable = (
     },
     {
       checked: [],
+      expanded: [],
       allChecked: 0,
     },
   );
@@ -91,8 +102,11 @@ export const useVirtualTable = (
     items: virtualItems,
     checkState: state,
     getData,
+    virtualizer,
+    top: virtualizer.range?.startIndex,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleExpand: (key: Key) => dispatch({ type: "expand", key }),
     toggleChecked: (key: Key) => dispatch({ type: "check", key }),
     toggleAllChecked: () => dispatch({ type: "checkall" }),
   };

package/src/tree/TreePanel.tsx

@@ -31,7 +31,7 @@ import {
 } from "@react-fabric/core";
 import { Search } from "@react-fabric/form";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useMemo, useRef } from "react";
+import { useImperativeHandle, useMemo, useRef } from "react";
 import { TreeNode } from "./TreeNode";
 import { iconCollapseAll, iconExpandAll, type TreePanelProps } from "./types";
 import { useTree } from "./useTree";
@@ -39,6 +39,7 @@ import { useTree } from "./useTree";
 // TODO: implement keyboard handler for navigating tree
 
 export const TreePanel = <T extends KeyValue>({
+  ref,
   items,
   selected,
   checked,
@@ -64,6 +65,7 @@ export const TreePanel = <T extends KeyValue>({
     expandAll,
     collapseAll,
     select,
+    expand,
     onFilter,
   } = useTree({
     items,
@@ -93,6 +95,15 @@ export const TreePanel = <T extends KeyValue>({
     return [CoreIcons.expand, CoreIcons.collapse];
   }, [expander]);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (id: string) => expand(id),
+      select: (id: string) => expand(id),
+    }),
+    [],
+  );
+
   return (
     <Section>
       <Header

package/src/tree/types.ts

@@ -27,6 +27,7 @@ import {
   type CssProp,
   type Elements,
   type IconProps,
+  type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 
@@ -105,8 +106,14 @@ export interface TreeNodeProps extends ChildProp {
   onChecked: (id: string) => void;
 }
 
+export interface TreeRef {
+  select: (id: string) => void;
+  open: (id: string) => void;
+}
+
 export interface TreePanelProps<T extends KeyValue = KeyValue>
-  extends TestProps {
+  extends TestProps,
+    RefProp<TreeRef> {
   items?: Array<TreeNodeType<T>>;
   /**
    * make tree searchable

package/src/tree/useTree.ts

@@ -203,6 +203,10 @@ export const useTree = <T extends KeyValue>({
     dispatch({ type: "select", id });
   }, []);
 
+  const expand = useCallback((id: string) => {
+    dispatch({ type: "expand", id });
+  }, []);
+
   const expandAll = useCallback(() => {
     dispatch({ type: "expandAll" });
   }, []);
@@ -222,6 +226,7 @@ export const useTree = <T extends KeyValue>({
     collapseAll,
     toggleCheck,
     select,
+    expand,
     onFilter,
   };
 };

package/src/virtual/Gallery.tsx

@@ -22,6 +22,7 @@
  */
 
 import { Skeleton, useDebounce, useEffectDebugger } from "@react-fabric/core";
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { debounce } from "@react-fabric/utilities";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import classNames from "classnames";
@@ -47,7 +48,7 @@ export interface VirtualGalleryRef {
   unhilight: () => void;
 }
 
-export interface VirtualGalleryProps<T> {
+export interface VirtualGalleryProps<T> extends TestProps {
   children: (props: {
     data: T;
     index: number;
@@ -108,6 +109,7 @@ const _VirtualGallery = <T extends KeyValue>({
   onLoadMore,
   onScroll,
   galleryRef,
+  ...aria
 }: VirtualGalleryProps<T>) => {
   const count = useDeferredValue(items.length);
   const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
@@ -275,6 +277,7 @@ const _VirtualGallery = <T extends KeyValue>({
       className={classNames(
         "area-content bg-base overflow-auto contain-strict",
       )}
+      {...aria}
     >
       <div
         className={classNames(

package/src/virtual/List.tsx

@@ -29,6 +29,7 @@
  */
 
 import { Skeleton, useDebounce } from "@react-fabric/core";
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { debounce } from "@react-fabric/utilities";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import classNames from "classnames";
@@ -54,7 +55,7 @@ export interface VirtualListRef {
   unhilight: () => void;
 }
 
-export interface VirtualListProps<T> {
+export interface VirtualListProps<T> extends TestProps {
   children: (props: {
     data: T;
     index: number;
@@ -120,6 +121,7 @@ const _VirtualList = <T extends KeyValue>({
   onLoadMore,
   onScroll,
   listRef,
+  ...aria
 }: VirtualListProps<T>) => {
   const count = useDeferredValue(items.length);
   const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
@@ -258,6 +260,7 @@ const _VirtualList = <T extends KeyValue>({
       className={classNames(
         "area-content bg-base overflow-auto contain-strict",
       )}
+      {...aria}
     >
       <div
         className={classNames(