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

package/src/tree/TreeNode.tsx

@@ -21,9 +21,17 @@
  * 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,
+  CoreIcons,
+  getBadgeProps,
+  getIconProps,
+  Icon,
+} from "@react-fabric/core";
+import { isEmpty, isString } 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,36 +43,49 @@ 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(() => {
@@ -82,12 +103,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={CoreIcons.spinner} className="animate-spin text-muted" />
+        </div>
+      )}
+      {!node.leaf && !node.childFiltered && !node.loading && (
         <div className="flex-initial w-6">
           <Icon
             rtlFlip
@@ -116,48 +143,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

@@ -31,13 +31,54 @@ import {
 } 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 { 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={CoreIcons.file} />}
+ *   defaultNodeIcon={<Icon icon={CoreIcons.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 +86,9 @@ export const TreePanel = <T extends KeyValue>({
   checked,
   checkable,
   noLines,
-  renderer,
   searchable,
   selectable,
+  multiple,
   matcher,
   filterPlaceholder,
   defaultLeafIcon,
@@ -55,15 +96,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 +124,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({
@@ -99,11 +158,17 @@ export const TreePanel = <T extends KeyValue>({
     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,6 +177,7 @@ export const TreePanel = <T extends KeyValue>({
       >
         {searchable && (
           <Search
+            value={query}
             onSearch={onFilter}
             allowClear
             placeholder={filterPlaceholder}
@@ -151,12 +217,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>

package/src/tree/types.ts

@@ -21,22 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import {
   type BadgeType,
   type ChildProp,
   type CssProp,
   type Elements,
-  type IconProps,
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 
-interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
+interface TreeBaseNode<T> extends CssProp, TestProps {
   id: string;
   /**
    * display label
    */
   label: Elements<JSX.Element>;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * full text to be used for querying purposes
    */
@@ -60,14 +64,14 @@ export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> &
   (
     | { leaf: true; children?: never }
     | {
-        leaf?: false;
+        leaf?: boolean;
         children?: Array<TreeNodeType<T>>;
         open?: boolean;
         iconOpen?: string;
       }
   );
 
-export interface InternalNode extends IconProps, CssProp, TestProps {
+export interface InternalNode extends CssProp, TestProps {
   id: string;
   label: Elements<JSX.Element>;
   queryable?: string;
@@ -84,6 +88,7 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
   loaded: boolean;
   parent?: string;
   empty?: boolean;
+  icon?: IconProps;
   errored?: string;
   selected?: true;
   childSelected?: true;
@@ -96,22 +101,59 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
 export interface TreeNodeProps extends ChildProp {
   node: InternalNode;
   expanders: [string, string];
-  defaultNodeIcon?: string;
-  defaultLeafIcon?: string;
+  defaultNodeIcon?: Elements<JSX.Element>;
+  defaultLeafIcon?: Elements<JSX.Element>;
   noLines?: boolean;
   selectable?: true | "leafOnly";
   checkable?: true | "leafOnly";
+  leafClassName?: string;
+  nodeClassName?: string;
   onToggle: (id: string) => void;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, shiftKey?: boolean) => void;
   onChecked: (id: string) => void;
+  onClick?: (id: string, node: any) => void;
 }
 
 export interface TreeRef {
   select: (id: string) => void;
   open: (id: string) => void;
+  openAndLoad: (list: string[]) => void;
 }
 
-export interface TreePanelProps<T extends KeyValue = KeyValue>
+export type TreePanelProps<T extends KeyValue = KeyValue> =
+  BaseTreePanelProps<T> &
+    (
+      | {
+          /**
+           * enable multi select
+           */
+          multiple?: never | false;
+          /**
+           * selected item id
+           */
+          selected?: string;
+          /**
+           * callback on selection of tree node
+           */
+          onSelect?: (id: string, data: T) => void;
+        }
+      | {
+          /**
+           * enable multi select
+           */
+          multiple: true;
+          /**
+           * selected item id
+           */
+          selected?: string[];
+          /**
+           * callback on selection of tree node
+           */
+          onSelect?: (id: string[], data: T) => void;
+        }
+    );
+
+interface BaseTreePanelProps<T extends KeyValue = KeyValue>
   extends TestProps,
     RefProp<TreeRef> {
   items?: Array<TreeNodeType<T>>;
@@ -128,13 +170,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
    */
   selectable?: true | "leafOnly";
   /**
-   * enable checkable
+   * enable multi select
    */
-  checkable?: true | "leafOnly";
+  multiple?: boolean;
   /**
-   * selected item id
+   * enable checkable
    */
-  selected?: string;
+  checkable?: true | "leafOnly";
   /**
    * checked items
    */
@@ -165,21 +207,34 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
     | Array<TreeNodeType<T>>
     | undefined;
   /**
-   * callback on selection of tree node
+   * callback to load tree using search query
    */
-  onSelect?: (id: string) => void;
+  onQuery?: (query: string) => void;
   /**
-   * callback on change of checked list
+   * callback on click of tree node
    */
-  onChecked?: (leafs: string[], nodes: string[]) => void;
+  onClick?: (id: string, data: T) => void;
   /**
-   * item label renderer
+   * callback on change of checked list
+   * @param leafs - list of checked leaf nodes
+   * @param nodes - list of checked nodes
+   * @param partials - list of partially checked nodes
    */
-  renderer?: (data: T) => JSX.Element;
+  onChecked?: (leafs: string[], nodes: string[], partials: string[]) => void;
   /**
    * item filter matcher
    */
   matcher?: (data: T, query: string) => boolean;
+
+  sorter?: false | ((a: T, b: T) => number);
+  makeLabel?: (node: T) => Elements<JSX.Element>;
+  makeIcon?: (node: T) => Elements<JSX.Element>;
+
+  defaultExpanded?: string[];
+  onExpandToggle?: (id: string[]) => void;
+
+  leafClassName?: string;
+  nodeClassName?: string;
 }
 
 export const iconExpandAll =