@react-fabric/data 1.0.0-beta.0 → 1.0.0-beta.11

package/src/table/useResizer.ts

@@ -0,0 +1,66 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const useResizer = (
+  colEl: HTMLElement,
+  ghostEl: HTMLElement,
+  callback: (width: number) => void,
+) => {
+  const placeholder = ghostEl.firstElementChild as HTMLElement;
+  const isRtl = getComputedStyle(colEl).direction === "rtl";
+
+  const onResize = (evt: MouseEvent) => {
+    /** ***************** check if reverse enabled of RTL *******************/
+    const box = colEl.getBoundingClientRect();
+    const x = isRtl ? box.left - evt.clientX : evt.clientX - box.right;
+    placeholder.style.width = `${colEl.offsetWidth + x}px`;
+  };
+
+  /** ***************** dettach handlers on mouseup *******************/
+  const onResizeEnd = () => {
+    callback(placeholder.offsetWidth);
+    ghostEl.style.display = "none";
+    document.removeEventListener("mousemove", onResize);
+    document.removeEventListener("mouseup", onResizeEnd);
+  };
+
+  /** ***************** attach handlers *******************/
+  const box = colEl.getBoundingClientRect();
+  if (colEl.parentElement != null) {
+    const parentBox = colEl.parentElement?.getBoundingClientRect();
+    if (isRtl) {
+      placeholder.style.left = "unset";
+      placeholder.style.right = `${box.right - parentBox.right}px`;
+    } else {
+      placeholder.style.right = "unset";
+      placeholder.style.left = `${box.left - parentBox.left}px`;
+    }
+  }
+  placeholder.style.width = `${colEl.offsetWidth}px`;
+  placeholder.style.minWidth = colEl.style.minWidth || "48px";
+  placeholder.style.maxWidth = colEl.style.maxWidth || "75vw";
+  ghostEl.style.display = "block";
+
+  document.addEventListener("mousemove", onResize);
+  document.addEventListener("mouseup", onResizeEnd);
+};

package/src/table/useTableColumns.ts

@@ -22,31 +22,64 @@
  */
 
 import { groupBy } from "@react-fabric/utilities";
-import { useEffect, useState } from "react";
-import { type ColumnType } from "./types";
+import { useEffect, useReducer } from "react";
+import { type TableColumn } from "./types";
 
-export const useTableColumns = (columns: ColumnType[]) => {
-  const [columnMap, setColumnMap] = useState<{
-    start: ColumnType[];
-    end: ColumnType[];
-    cols: ColumnType[];
-  }>({
-    start: [],
-    end: [],
-    cols: [],
-  });
+interface ColumnState {
+  columns: TableColumn[];
+  start: TableColumn[];
+  end: TableColumn[];
+  cols: TableColumn[];
+}
 
-  useEffect(() => {
-    setColumnMap(
-      groupBy(
-        columns.filter((col) => !(col.hideable && col.hidden)),
+type ColumnActions =
+  | { type: "columns"; columns: TableColumn[] }
+  | { type: "hide"; id: string };
+
+export const useTableColumns = (columns: TableColumn[]) => {
+  const [state, dispatch] = useReducer(
+    (state: ColumnState, action: ColumnActions) => {
+      if (action.type === "columns") {
+        state.columns = action.columns;
+      }
+      if (action.type === "hide") {
+        const col = state.columns.find((col) => col.id === action.id);
+        col &&
+          state.columns.splice(state.columns.indexOf(col), 1, {
+            ...col,
+            hidden: col.hidden !== true,
+          });
+      }
+      const {
+        start = [],
+        end = [],
+        cols = [],
+      } = groupBy(
+        state.columns.filter((col) => col.hidden !== true),
         "locked",
         "cols",
-      ) as AnyObject,
-    );
+      );
+      return {
+        ...state,
+        start,
+        end,
+        cols,
+      };
+    },
+    {
+      columns: [],
+      start: [],
+      end: [],
+      cols: [],
+    },
+  );
+
+  useEffect(() => {
+    dispatch({ type: "columns", columns });
   }, [columns]);
 
   return {
-    columnMap,
+    state,
+    onHide: (id: string) => dispatch({ type: "hide", id }),
   };
 };

package/src/table/useVirtualTable.ts

@@ -22,9 +22,24 @@
  */
 
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useRef } from "react";
+import { useCallback, useReducer, useRef } from "react";
 
-export const useVirtualTable = (data: KeyValue[]) => {
+interface DataState {
+  expanded: Key[];
+  checked: Key[];
+  allChecked: 0 | 1 | 2;
+}
+
+type DataAction =
+  | { type: "expand"; key: Key }
+  | { type: "check"; key: Key }
+  | { type: "checkall" };
+
+export const useVirtualTable = (
+  data: KeyValue[],
+  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}
 
@@ -35,6 +50,44 @@ export const useVirtualTable = (data: KeyValue[]) => {
     estimateSize: () => 24,
   });
 
+  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 if (keyProperty) {
+          state.checked = data.map((item) => item[keyProperty]);
+        }
+        onCheckChanged?.(state.checked);
+      }
+      return {
+        ...state,
+        allChecked:
+          state.checked.length === data.length
+            ? 1
+            : state.checked.length
+              ? 2
+              : 0,
+      } as DataState;
+    },
+    {
+      checked: [],
+      expanded: [],
+      allChecked: 0,
+    },
+  );
+
   const virtualItems = virtualizer.getVirtualItems();
 
   const getData = useCallback(
@@ -47,8 +100,14 @@ export const useVirtualTable = (data: KeyValue[]) => {
   return {
     scrollerRef,
     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(