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

package/src/table/Table.tsx

@@ -23,7 +23,7 @@
 
 import { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { useImperativeHandle, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { AddColumn } from "./AddColumn";
 import { BodyCell } from "./BodyCell";
@@ -36,6 +36,7 @@ import { useTableColumns } from "./useTableColumns";
 import { useVirtualTable } from "./useVirtualTable";
 
 export const Table = <T extends KeyValue = KeyValue>({
+  ref,
   data,
   columns,
   keyProperty,
@@ -64,6 +65,7 @@ export const Table = <T extends KeyValue = KeyValue>({
     totalSize,
     measureElement,
   } = useVirtualTable(data, keyProperty, fireCheckChanged);
+  const refBody = useRef<HTMLDivElement>(null);
 
   const wrapperStart = useMemo(
     () => "bg-inherit sticky start-0 flex flex-nowrap z-1",
@@ -74,6 +76,32 @@ export const Table = <T extends KeyValue = KeyValue>({
     [],
   );
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      hilight: (row: number) => {
+        refBody.current
+          ?.querySelectorAll<HTMLElement>(`.datatable-row[data-hilight="true"]`)
+          .forEach((el) => el && (el.dataset.hilight = undefined));
+        const el = refBody.current?.querySelector<HTMLElement>(
+          `[data-row="${row}"]`,
+        );
+        el?.scrollIntoView({ behavior: "smooth", block: "center" });
+        el && (el.dataset.hilight = "true");
+      },
+      unhilight: () => {
+        refBody.current
+          ?.querySelectorAll<HTMLElement>(`.datatable-row[data-hilight="true"]`)
+          .forEach((el) => el && (el.dataset.hilight = undefined));
+      },
+      scrollTo: (row: number) => {
+        const el = refBody.current?.querySelector(`[data-row="${row}"]`);
+        el?.scrollIntoView({ behavior: "smooth" });
+      },
+    }),
+    [],
+  );
+
   return (
     <TableProvider>
       <div
@@ -116,6 +144,7 @@ export const Table = <T extends KeyValue = KeyValue>({
           <div
             className="area-content flex flex-col flex-nowrap"
             style={{ height: totalSize() }}
+            ref={refBody}
           >
             <div style={{ height: items[0]?.start }} />
             {items.map(({ index, key }) => {
@@ -124,13 +153,14 @@ export const Table = <T extends KeyValue = KeyValue>({
                 <div
                   key={key}
                   role="none"
+                  data-row={index}
                   className={classNames(
-                    "flex flex-nowrap",
+                    "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
                     index % 2 ? "bg-even" : "bg-odd",
                     onRowClick && "hover:bg-primary-50 active:bg-primary-100",
                   )}
                   onClick={() =>
-                    checkableRows && !onRowClick
+                    checkableRows && keyProperty && !onRowClick
                       ? toggleChecked(data[keyProperty])
                       : onRowClick?.(data)
                   }
@@ -138,7 +168,7 @@ export const Table = <T extends KeyValue = KeyValue>({
                   ref={measureElement}
                 >
                   <div className={wrapperStart}>
-                    {checkableRows && (
+                    {checkableRows && keyProperty && (
                       <CheckboxCell
                         onClick={() => toggleChecked(data[keyProperty])}
                         state={

package/src/table/types.ts

@@ -24,6 +24,7 @@
 import {
   type CssProp,
   type IconProps,
+  type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
@@ -36,7 +37,7 @@ export interface ColumnType<T = KeyValue>
   extends CssProp,
     IconProps,
     TestProps {
-  id: keyof T;
+  id: keyof T | string;
   label?: string;
   actions?: ReactElement;
   align?: "start" | "center" | "end";
@@ -62,10 +63,16 @@ export interface ColumnType<T = KeyValue>
   renderer?: (value: AnyObject, data: T) => void;
 }
 
-export interface TableProps<T = KeyValue> {
+export interface TableRef {
+  hilight: (row: number) => void;
+  unhilight: () => void;
+  scrollTo: (row: number) => void;
+}
+
+export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   columns: Array<ColumnType<T>>;
   data: T[];
-  keyProperty: keyof T;
+  keyProperty?: keyof T;
   /**
    * checkable rows
    */

package/src/table/useVirtualTable.ts

@@ -33,8 +33,8 @@ type DataAction = { 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}
@@ -56,11 +56,11 @@ export const useVirtualTable = (
       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:

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,
   };
 };