@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/src/table/useVirtualTable.ts

@@ -21,37 +21,59 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useReducer, useRef } from "react";
+import { compareValues, debounce, groupBy } from "@react-fabric/utilities";
+import {
+  defaultRangeExtractor,
+  type Range,
+  useVirtualizer,
+} from "@tanstack/react-virtual";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
 
-interface DataState {
-  expanded: Key[];
-  checked: Key[];
+interface DataState<T = KeyValue> {
+  data: T[];
+  items: T[];
+  grouped: KeyValue<T[]>;
+  groups: AnyObject[];
+  expanded: AnyObject[];
+  checked: AnyObject[];
   allChecked: 0 | 1 | 2;
 }
 
 type DataAction =
-  | { type: "expand"; key: Key }
-  | { type: "check"; key: Key }
+  | { type: "updateState"; checked: AnyObject[] }
+  | { type: "groupExpand"; key: AnyObject }
+  | { type: "reset"; key: AnyObject; data: AnyObject[] }
+  | { type: "expand"; key: AnyObject }
+  | { type: "check"; key: AnyObject }
   | { type: "checkall" };
 
-export const useVirtualTable = (
-  data: KeyValue[],
-  keyProperty?: Key,
-  onCheckChanged?: (checked: Key[]) => void,
+export const useVirtualTable = <T extends KeyValue = KeyValue>(
+  data: T[],
+  options: {
+    checked?: AnyObject[];
+    keyProperty: keyof T;
+    groupProperty?: keyof T;
+    loading?: boolean;
+    total: number;
+    onLoadMore?: (startIndex: number) => void;
+    onCheckChanged?: (checked: AnyObject[]) => 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}
 
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const virtualizer = useVirtualizer({
-    count: data.length,
-    getScrollElement: () => scrollerRef.current,
-    estimateSize: () => 24,
-  });
-
   const [state, dispatch] = useReducer(
-    (state: DataState, action: DataAction) => {
+    (state: DataState<T>, action: DataAction) => {
+      if (action.type === "updateState") {
+        state.checked = action.checked;
+      }
       if (action.type === "expand") {
         if (state.expanded.includes(action.key))
           state.expanded.splice(state.expanded.indexOf(action.key), 1);
@@ -61,51 +83,160 @@ export const useVirtualTable = (
         if (state.checked.includes(action.key))
           state.checked.splice(state.checked.indexOf(action.key), 1);
         else state.checked.push(action.key);
-        onCheckChanged?.(state.checked);
+        options.onCheckChanged?.(state.checked);
       }
       if (action.type === "checkall") {
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else if (keyProperty) {
-          state.checked = data.map((item) => item[keyProperty]);
+        } else if (options.keyProperty) {
+          state.checked = state.data.map((item) => item[options.keyProperty]);
+        }
+        options.onCheckChanged?.(state.checked);
+      }
+      const checkList = state.data.filter((hit) =>
+        state.checked.includes(hit[options.keyProperty]),
+      );
+      if (action.type === "groupExpand") {
+        const group = state.groups.find((group) => group.key === action.key);
+        if (group) {
+          group.open = !group.open;
+          state.groups = state.groups.slice();
+          state.items = state.groups
+            .map((group) => [
+              group,
+              group.open ? state.grouped[group.key] : undefined,
+            ])
+            .flat(2)
+            .filter(Boolean) as any;
+        }
+      }
+      if (action.type === "reset") {
+        state.data = action.data;
+        if (action.key) {
+          state.grouped = groupBy<T>(state.data, action.key);
+          state.groups = Object.keys(state.grouped)
+            .sort(compareValues("asc"))
+            .map((group) => ({
+              __GROUP__: true,
+              open: true,
+              key: group,
+              items: state.grouped[group],
+              itemCount: state.grouped[group].length,
+            }));
+          state.items = state.groups
+            .map((group) => [group, ...state.grouped[group.key]])
+            .flat() as any;
+        } else {
+          state.items = state.data;
         }
-        onCheckChanged?.(state.checked);
       }
       return {
         ...state,
         allChecked:
-          state.checked.length === data.length
+          checkList.length === state.data.length
             ? 1
             : state.checked.length
               ? 2
               : 0,
-      } as DataState;
+      } as DataState<T>;
     },
     {
+      data,
+      items: [],
+      grouped: {},
+      groups: [],
       checked: [],
       expanded: [],
       allChecked: 0,
     },
   );
 
+  const activeStickyIndexRef = useRef(0);
+  const stickyIndexes = useMemo<number[]>(
+    () =>
+      state.items
+        .map((hit, idx) => ("__GROUP__" in hit ? idx : undefined))
+        .filter(Boolean) as number[],
+    [state.items],
+  );
+  const isActiveSticky = (index: number) =>
+    activeStickyIndexRef.current === index;
+
+  const [hasActiveSticky, setHasActiveSticky] = useState(false);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: state.items.length,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: () => 32,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        activeStickyIndexRef.current =
+          [...stickyIndexes]
+            .reverse()
+            .find((index) => range.startIndex > index) ?? 0;
+
+        setHasActiveSticky(range.startIndex !== activeStickyIndexRef.current);
+
+        const next = new Set([
+          activeStickyIndexRef.current,
+          ...defaultRangeExtractor(range),
+        ]);
+
+        return [...next];
+      },
+      [stickyIndexes],
+    ),
+  });
+
   const virtualItems = virtualizer.getVirtualItems();
 
   const getData = useCallback(
     (index: number) => {
-      return data[index];
+      return state.items[index];
     },
-    [data],
+    [state.items],
   );
 
+  useEffect(() => {
+    dispatch({ type: "reset", key: options.groupProperty, data });
+  }, [data, options.groupProperty]);
+
+  useEffect(() => {
+    dispatch({ type: "updateState", checked: options.checked ?? [] });
+  }, [options.checked]);
+
+  useEffect(() => {
+    if (options.onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const canLoadPrevPage =
+        firstItem !== undefined && state.items[firstItem] === null;
+      const canLoadNextPage =
+        lastItem !== undefined &&
+        lastItem === state.items.length - 1 &&
+        state.items.length < options.total;
+      const db = debounce(options.onLoadMore);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!options.loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
+      return () => db.cancel();
+    }
+  }, [options.onLoadMore, virtualItems]);
+
   return {
     scrollerRef,
     items: virtualItems,
     checkState: state,
     getData,
     virtualizer,
+    hasActiveSticky,
+    isActiveSticky,
     top: virtualizer.range?.startIndex,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleGroupExpand: (key: Key) => dispatch({ type: "groupExpand", key }),
     toggleExpand: (key: Key) => dispatch({ type: "expand", key }),
     toggleChecked: (key: Key) => dispatch({ type: "check", key }),
     toggleAllChecked: () => dispatch({ type: "checkall" }),

package/src/tree/TreeNode.tsx

@@ -21,9 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Badge, CoreIcons, getBadgeProps, Icon } from "@react-fabric/core";
+import { Badge, getBadgeProps, getIconProps, Icon } from "@react-fabric/core";
+import { isEmpty, isString, isTrue } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { isValidElement, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { type TreeNodeProps } from "./types";
 
 export const TreeNode = ({
@@ -35,40 +37,53 @@ export const TreeNode = ({
   defaultLeafIcon,
   defaultNodeIcon,
   onToggle,
+  onClick,
   onSelect,
   onChecked,
   children,
+  leafClassName,
+  nodeClassName,
 }: TreeNodeProps) => {
+  const { t } = useTranslation("data");
   const badgeProps = useMemo(() => {
     return getBadgeProps(node.badge);
   }, [node.badge]);
 
   const filler = useMemo(() => {
-    return node.lines.slice(noLines ? 1 : 0).map((line, idx) => (
-      <svg
+    return node.lines.slice(1).map((line, idx) => (
+      <div
         key={idx}
-        viewBox="0 0 24 24"
-        className="flex-initial w-6 fill-tint-200"
-      >
-        {line === 0 && <path d="" />}
-        {!noLines && line === 1 && <path d="M7.45 26.1v-28.2h1.1v28.2h-1.1z" />}
-        {!noLines && line === 2 && (
-          <path d="M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z" />
-        )}
-        {!noLines && line === 3 && (
-          <path d="M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z" />
+        className={classNames(
+          "flex-initial self-stretch flex items-center w-6 relative",
+          !noLines &&
+            line > 0 &&
+            "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-0.5 before:scale-x-[.625]",
+          !noLines && line !== 2 && "before:h-full",
         )}
-      </svg>
+      >
+        <svg viewBox="0 0 24 24" className="fill-tint-200 rtl:-scale-x-100">
+          {line === 0 && <path d="" />}
+          {!noLines && line === 1 && (
+            <path d="M7.45 26.1v-28.2h1.1v28.2h-1.1z" />
+          )}
+          {!noLines && line === 2 && (
+            <path d="M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z" />
+          )}
+          {!noLines && line === 3 && (
+            <path d="M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z" />
+          )}
+        </svg>
+      </div>
     ));
   }, [noLines, node.lines]);
 
   const nodeIcon = useMemo(() => {
     if (node.icon) return node.icon;
-    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+    return { icon: node.leaf ? defaultLeafIcon : defaultNodeIcon };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
 
   const canCheck = useMemo(() => {
-    return checkable === true || (checkable === "leafOnly" && node.leaf);
+    return isTrue(checkable) || (checkable === "leafOnly" && node.leaf);
   }, [node.leaf, checkable]);
 
   const canSelect = useMemo(() => {
@@ -82,12 +97,18 @@ export const TreeNode = ({
     <div
       role="treeitem"
       aria-selected={node.selected}
-      className="flex flex-nowrap"
+      className={classNames("flex flex-nowrap items-center")}
       data-testid={node["data-testid"]}
       data-test-value={node["data-test-value"]}
+      data-id={node.id}
     >
       {filler}
-      {!node.leaf && !node.childFiltered && (
+      {node.loading && (
+        <div className="flex-initial w-6">
+          <Icon icon="icon-[svg-spinners--eclipse]" className="text-muted" />
+        </div>
+      )}
+      {!node.leaf && !node.childFiltered && !node.loading && (
         <div className="flex-initial w-6">
           <Icon
             rtlFlip
@@ -103,10 +124,10 @@ export const TreeNode = ({
             onClick={() => !node.disabled && onChecked(node.id)}
             icon={
               node.checked === 2
-                ? CoreIcons.checkboxInt
+                ? "icon-[mdi--checkbox-intermediate]"
                 : node.checked === 1
-                  ? CoreIcons.checkboxOn
-                  : CoreIcons.checkboxOff
+                  ? "icon-[mdi--checkbox-marked]"
+                  : "icon-[mdi--checkbox-blank-outline]"
             }
             className={classNames(
               node.disabled
@@ -116,48 +137,61 @@ export const TreeNode = ({
           />
         </div>
       )}
-      <div
-        role="none"
-        className={classNames(
-          "group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 items-center overflow-hidden select-none",
-          node.childSelected && "font-medium",
-          canSelect && "hover:bg-primary-50 cursor-pointer",
-        )}
-        data-selected={node.selected}
-        onClick={() =>
-          canSelect
-            ? onSelect(node.id)
-            : canCheck
-              ? onChecked(node.id)
-              : onToggle(node.id)
-        }
-      >
-        {nodeIcon && (
-          <div className="flex-content w-6">
-            <Icon
-              icon={nodeIcon}
-              bg={node.iconBg}
-              color={node.iconColor}
-              rtlFlip={node.rtlFlip}
-            />
+      {!node.empty && (
+        <div
+          role="none"
+          className={classNames(
+            "group/tool data-selected:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
+            node.childSelected && "font-medium",
+            node.disabled && "text-muted opacity-65",
+            node.className,
+            node.leaf ? leafClassName : nodeClassName,
+            !node.disabled &&
+              (canSelect || onClick) &&
+              "hover:bg-primary-50 cursor-pointer",
+          )}
+          data-selected={node.selected}
+          onClick={
+            node.disabled
+              ? undefined
+              : (e) => {
+                  onClick?.(node.id, node.data);
+                  canSelect
+                    ? onSelect(node.id, e.shiftKey)
+                    : canCheck
+                      ? onChecked(node.id)
+                      : onToggle(node.id);
+                }
+          }
+        >
+          {nodeIcon && (
+            <div className="flex-content max-w-6 me-1 self-center leading-none">
+              {isValidElement(nodeIcon) && nodeIcon}
+              {isString(nodeIcon) && <Icon {...getIconProps(nodeIcon)} />}
+            </div>
+          )}
+          {node.childSelected && !node.open && (
+            <span className=" flex-content text-primary-500">•</span>
+          )}
+          <div role="none" className="flex-1 truncate">
+            {children}
           </div>
-        )}
-        {node.childSelected && !node.open && (
-          <span className=" flex-content text-primary-500">•</span>
-        )}
-        <div role="none" className="flex-1 truncate">
-          {children}
+          {!isEmpty(node.badge) && (
+            <Badge
+              {...badgeProps}
+              className={classNames(
+                "me-1 self-center flex-content bg-opacity-50",
+                badgeProps.className,
+              )}
+            />
+          )}
         </div>
-        {node.badge && (
-          <Badge
-            {...badgeProps}
-            className={classNames(
-              "me-1 self-center flex-content bg-opacity-50",
-              badgeProps.className,
-            )}
-          />
-        )}
-      </div>
+      )}
+      {node.empty && (
+        <div className="text-muted text-sm select-none">
+          {t("tree.noItems")}
+        </div>
+      )}
     </div>
   );
 };

package/src/tree/TreePanel.tsx

@@ -21,23 +21,57 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Button,
-  ButtonGroup,
-  CoreIcons,
-  Header,
-  Icon,
-  Section,
-} from "@react-fabric/core";
+import { Button, ButtonGroup, Header, Icon, Section } from "@react-fabric/core";
 import { Search } from "@react-fabric/form";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useImperativeHandle, useMemo, useRef } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { TreeNode } from "./TreeNode";
-import { iconCollapseAll, iconExpandAll, type TreePanelProps } from "./types";
+import { type TreePanelProps } from "./types";
 import { useTree } from "./useTree";
 
 // TODO: implement keyboard handler for navigating tree
 
+/**
+ * TreePanel component renders a virtualized tree structure with support for
+ * selection, expansion, and filtering. It allows for custom rendering of tree
+ * nodes and supports checkable nodes.
+ *
+ * @param {TreePanelProps<T>} props - The properties for the TreePanel component.
+ * @returns {JSX.Element} The rendered TreePanel component.
+ * @template T - The type of items in the tree, extending KeyValue.
+ *
+ * @example
+ * ```jsx
+ * <TreePanel
+ *   items={items}
+ *   selected={selectedItem}
+ *   checked={checkedItems}
+ *   checkable={true}
+ *   renderer={(item) => <span>{item.name}</span>}
+ *   searchable={true}
+ *   selectable={true}
+ *   matcher={(item, query) => item.name.toLowerCase().includes(query.toLowerCase())}
+ *   filterPlaceholder="Search..."
+ *   defaultLeafIcon={<Icon icon="icon-[mdi--file]" />}
+ *   defaultNodeIcon={<Icon icon="icon-[mdi--folder]" />}
+ *   expander="caret"
+ *   onChecked={(checkedItems) => console.log(checkedItems)}
+ *   onLoad={(id) => console.log(`Load children for ${id}`)}
+ *   onQuery={(query) => console.log(`Query: ${query}`)}
+ *   onSelect={(selectedItem) => console.log(selectedItem)}
+ *   onClick={(item) => console.log(`Clicked on ${item.id}`)}
+ *   sorter={(a, b) => a.label.localeCompare(b.label)}
+ *   makeLabel={(item) => item.name}
+ *   makeIcon={(item) => item.icon ? <Icon icon={item.icon} /> : null}
+ *   defaultExpanded={["root"]}
+ *   onExpandToggle={(id, expanded) => console.log(`Toggle expand for ${id}: ${expanded}`)}
+ *   leafClassName="leaf-node"
+ *   nodeClassName="tree-node"
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-treepanel--docs}
+ */
 export const TreePanel = <T extends KeyValue>({
   ref,
   items,
@@ -45,9 +79,9 @@ export const TreePanel = <T extends KeyValue>({
   checked,
   checkable,
   noLines,
-  renderer,
   searchable,
   selectable,
+  multiple,
   matcher,
   filterPlaceholder,
   defaultLeafIcon,
@@ -55,15 +89,27 @@ export const TreePanel = <T extends KeyValue>({
   expander = "box",
   onChecked,
   onLoad,
+  onQuery,
   onSelect,
+  onClick,
+  sorter,
+  makeLabel,
+  makeIcon,
+  defaultExpanded,
+  onExpandToggle,
+  leafClassName,
+  nodeClassName,
   ...aria
 }: TreePanelProps<T>) => {
   const {
     tree,
+    query,
+    selected: currentSelected,
     toggleExpand,
     toggleCheck,
     expandAll,
     collapseAll,
+    expandAndLoad,
     select,
     expand,
     onFilter,
@@ -71,10 +117,16 @@ export const TreePanel = <T extends KeyValue>({
     items,
     checked,
     selected,
+    multiple,
     matcher,
+    sorter,
+    onLoad,
+    onQuery,
     onSelect,
     onChecked,
-  });
+    defaultExpanded,
+    onExpandToggle,
+  } as any);
 
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
@@ -87,23 +139,29 @@ export const TreePanel = <T extends KeyValue>({
 
   const expanders = useMemo<[string, string]>(() => {
     if (expander === "caret")
-      return [CoreIcons.caretRight, CoreIcons.caretDown];
+      return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
     if (expander === "chevron")
-      return [CoreIcons.chevronRight, CoreIcons.chevronDown];
+      return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
     if (expander === "folder")
-      return [CoreIcons.folderClosed, CoreIcons.folderOpen];
-    return [CoreIcons.expand, CoreIcons.collapse];
+      return ["icon-[mdi--folder-outline]", "icon-[mdi--folder-open-outline]"];
+    return ["icon-[mdi--plus-box-outline]", "icon-[mdi--minus-box-outline]"];
   }, [expander]);
 
   useImperativeHandle(
     ref,
     () => ({
       open: (id: string) => expand(id),
-      select: (id: string) => expand(id),
+      openAndLoad: (list: string[]) => expandAndLoad(list),
+      select: (id: string) => select(id),
     }),
     [],
   );
 
+  useEffect(() => {
+    const index = tree.findIndex((n) => n.id === currentSelected);
+    virtualizer.scrollToIndex(index, { align: "auto" });
+  }, [currentSelected]);
+
   return (
     <Section>
       <Header
@@ -112,24 +170,27 @@ export const TreePanel = <T extends KeyValue>({
       >
         {searchable && (
           <Search
+            value={query}
             onSearch={onFilter}
             allowClear
             placeholder={filterPlaceholder}
             {...{ noBorder: true }}
-            decorateStart={<Icon icon={CoreIcons.filter} className="p-1" />}
+            decorateStart={
+              <Icon icon="icon-[mdi--filter-variant]" className="p-1" />
+            }
           />
         )}
         <ButtonGroup variant="link" className="m-0">
           <Button
             size="sm"
             aria-label="expand all"
-            icon={iconExpandAll}
+            icon="icon-[mdi--arrow-expand-vertical]"
             onClick={expandAll}
           />
           <Button
             size="sm"
             aria-label="collapse all"
-            icon={iconCollapseAll}
+            icon="icon-[mdi--arrow-collapse-vertical]"
             onClick={collapseAll}
           />
         </ButtonGroup>
@@ -151,12 +212,17 @@ export const TreePanel = <T extends KeyValue>({
                 checkable={checkable}
                 selectable={selectable}
                 defaultLeafIcon={defaultLeafIcon}
-                defaultNodeIcon={defaultNodeIcon}
+                defaultNodeIcon={
+                  makeIcon?.(tree[index].data) ?? defaultNodeIcon
+                }
                 onToggle={toggleExpand}
                 onChecked={toggleCheck}
                 onSelect={select}
+                onClick={onClick}
+                leafClassName={leafClassName}
+                nodeClassName={nodeClassName}
               >
-                {(tree[index].data && renderer?.(tree[index].data)) ||
+                {(tree[index].data && makeLabel?.(tree[index].data)) ??
                   tree[index].label}
               </TreeNode>
             </div>