@react-fabric/data 1.0.0-beta.8 → 1.0.1

package/src/tree/TreeNode.tsx

@@ -21,12 +21,13 @@
  * 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 classNames from "classnames";
-import { useMemo } from "react";
+import { Badge, getBadgeProps, getIconProps, Icon } from "@react-fabric/core";
+import { cn, isEmpty, isString, isTrue } from "@react-fabric/utilities";
+import { isValidElement, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { type TreeNodeProps } from "./types";
 
-export const TreeNode = ({
+export function TreeNode<T extends KeyValue>({
   node,
   noLines,
   expanders,
@@ -35,129 +36,133 @@ export const TreeNode = ({
   defaultLeafIcon,
   defaultNodeIcon,
   onToggle,
+  onClick,
   onSelect,
   onChecked,
   children,
-}: TreeNodeProps) => {
+  leafClassName,
+  nodeClassName,
+}: TreeNodeProps<T>) {
+  const { t } = useTranslation("data");
   const badgeProps = useMemo(() => {
-    return getBadgeProps(node.badge);
+    return getBadgeProps(node.badge) as KeyValue;
   }, [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
+        // eslint-disable-next-line @eslint-react/no-array-index-key
         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={cn(
+          "flex-initial self-stretch flex items-center w-6 relative",
+          !noLines &&
+            line > 0 &&
+            "before:absolute before:top-0 before:inset-s-[calc(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;
-  }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
+    return { icon: node.leaf ? defaultLeafIcon : defaultNodeIcon };
+  }, [defaultLeafIcon, defaultNodeIcon, node.icon, node.leaf]);
 
   const canCheck = useMemo(() => {
-    return checkable === true || (checkable === "leafOnly" && node.leaf);
+    return isTrue(checkable) || (checkable === "leafOnly" && node.leaf);
   }, [node.leaf, checkable]);
 
   const canSelect = useMemo(() => {
-    return (
-      !node.disabled &&
-      (selectable === true || (selectable === "leafOnly" && node.leaf))
-    );
+    return !node.disabled && (selectable === true || (selectable === "leafOnly" && node.leaf));
   }, [node.leaf, node.disabled, selectable]);
 
   return (
     <div
       role="treeitem"
       aria-selected={node.selected}
-      className="flex flex-nowrap"
+      className={cn("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
-            rtlFlip
-            onClick={() => !node.leaf && onToggle(node.id)}
-            icon={node.open ? expanders[1] : expanders[0]}
-            className="text-tint-600 hover:text-primary-600"
-          />
+          <Icon icon="icon-[svg-spinners--eclipse]" className="text-muted" />
         </div>
       )}
+      {!node.leaf && !node.childFiltered && !node.loading && (
+        <button type="button" className="flex-initial w-6" onClick={() => !node.leaf && onToggle(node.id)}>
+          <Icon rtlFlip icon={node.open ? expanders[1] : expanders[0]} className="text-tint-600 hover:text-primary-600" />
+        </button>
+      )}
       {canCheck && (
-        <div className="flex-initial w-6">
+        <button type="button" className="flex-initial w-6" onClick={() => !node.disabled && onChecked(node.id)}>
           <Icon
-            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
-                ? "text-muted"
-                : "text-primary-500 hover:text-primary-600",
-            )}
+            className={cn(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")}
           />
-        </div>
+        </button>
       )}
-      <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={cn(
+            "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);
+                  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                  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={cn("me-1 self-center flex-content bg-opacity-50", badgeProps.className as string)}
+            />
+          )}
         </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,33 +21,61 @@
  * 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, Layout } 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
 
-export const TreePanel = <T extends KeyValue>({
+/**
+ * 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.
+ *
+ * @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"
+ * />
+ * ```
+ */
+export function TreePanel<T extends KeyValue>({
   ref,
   items,
   selected,
   checked,
   checkable,
   noLines,
-  renderer,
   searchable,
   selectable,
+  multiple,
   matcher,
   filterPlaceholder,
   defaultLeafIcon,
@@ -55,25 +83,43 @@ export const TreePanel = <T extends KeyValue>({
   expander = "box",
   onChecked,
   onLoad,
+  onQuery,
   onSelect,
+  onClick,
+  sorter,
+  makeLabel,
+  makeIcon,
+  defaultExpanded,
+  onExpandToggle,
+  leafClassName,
+  nodeClassName,
   ...aria
-}: TreePanelProps<T>) => {
+}: TreePanelProps<T>) {
   const {
     tree,
+    query,
+    selected: currentSelected,
     toggleExpand,
     toggleCheck,
     expandAll,
     collapseAll,
+    expandAndLoad,
     select,
     expand,
     onFilter,
-  } = useTree({
+  } = useTree<T>({
     items,
     checked,
     selected,
+    multiple,
     matcher,
+    sorter,
+    onLoad,
+    onQuery,
     onSelect,
     onChecked,
+    defaultExpanded,
+    onExpandToggle,
   });
 
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -86,60 +132,48 @@ export const TreePanel = <T extends KeyValue>({
   const virtualItems = virtualizer.getVirtualItems();
 
   const expanders = useMemo<[string, string]>(() => {
-    if (expander === "caret")
-      return [CoreIcons.caretRight, CoreIcons.caretDown];
-    if (expander === "chevron")
-      return [CoreIcons.chevronRight, CoreIcons.chevronDown];
-    if (expander === "folder")
-      return [CoreIcons.folderClosed, CoreIcons.folderOpen];
-    return [CoreIcons.expand, CoreIcons.collapse];
+    if (expander === "caret") return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
+    if (expander === "chevron") return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
+    if (expander === "folder") 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),
     }),
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
     [],
   );
 
+  useEffect(() => {
+    const index = tree.findIndex((n) => n.id === currentSelected);
+    virtualizer.scrollToIndex(index, { align: "auto" });
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [currentSelected]);
+
   return (
-    <Section>
-      <Header
-        flex
-        className="items-center p-px justify-end overflow-hidden border-b"
-      >
+    <Layout>
+      <Header flex className="items-center p-px justify-end overflow-hidden border-b">
         {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}
-            onClick={expandAll}
-          />
-          <Button
-            size="sm"
-            aria-label="collapse all"
-            icon={iconCollapseAll}
-            onClick={collapseAll}
-          />
+          <Button size="sm" aria-label="expand all" icon="icon-[mdi--arrow-expand-vertical]" onClick={expandAll} />
+          <Button size="sm" aria-label="collapse all" icon="icon-[mdi--arrow-collapse-vertical]" onClick={collapseAll} />
         </ButtonGroup>
       </Header>
-      <div
-        ref={scrollerRef}
-        role="tree"
-        className="area-content overflow-auto p-1"
-        {...aria}
-      >
+      <div ref={scrollerRef} role="tree" className="area-content overflow-auto p-1" {...aria}>
         <div style={{ height: virtualizer.getTotalSize() }}>
           <div style={{ height: virtualItems[0]?.start }} />
           {virtualItems.map(({ index, key }) => (
@@ -151,18 +185,20 @@ 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].label}
+                {(tree[index].data && makeLabel?.(tree[index].data)) ?? tree[index].label}
               </TreeNode>
             </div>
           ))}
         </div>
       </div>
-    </Section>
+    </Layout>
   );
-};
+}