@expcat/tigercat-react 0.0.1

package/dist/chunk-C5EFBJBR.js

@@ -0,0 +1,540 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Tree.tsx
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+var ExpandIcon = ({
+  expanded,
+  hasChildren
+}) => {
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIndentClasses });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: tigercatCore.getTreeNodeExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4V4z" })
+    }
+  );
+};
+var LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: tigercatCore.treeLoadingClasses,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    children: spinnerSvg.elements.map((el, index) => {
+      if (el.type === "circle") return /* @__PURE__ */ jsxRuntime.jsx("circle", { ...el.attrs }, index);
+      if (el.type === "path") return /* @__PURE__ */ jsxRuntime.jsx("path", { ...el.attrs }, index);
+      return null;
+    })
+  }
+);
+var Tree = ({
+  treeData = [],
+  selectionMode,
+  checkable = false,
+  showIcon = true,
+  showLine = false,
+  defaultExpandedKeys = [],
+  defaultSelectedKeys = [],
+  defaultCheckedKeys = [],
+  expandedKeys: controlledExpandedKeys,
+  selectedKeys: controlledSelectedKeys,
+  checkedKeys: controlledCheckedKeys,
+  defaultExpandAll = false,
+  checkStrictly = false,
+  checkStrategy = "all",
+  selectable = true,
+  multiple = false,
+  loadData,
+  filterValue = "",
+  filterFn,
+  autoExpandParent = true,
+  blockNode = false,
+  emptyText = "No data",
+  ariaLabel = "Tree",
+  onExpand,
+  onSelect,
+  onCheck,
+  onNodeClick,
+  onNodeExpand,
+  onNodeCollapse,
+  className
+}) => {
+  const itemRefs = react.useRef(/* @__PURE__ */ new Map());
+  const effectiveSelectable = react.useMemo(() => {
+    if (selectionMode !== void 0) {
+      return selectionMode !== "none";
+    }
+    return selectable;
+  }, [selectionMode, selectable]);
+  const effectiveMultiple = react.useMemo(() => {
+    if (selectionMode !== void 0) {
+      return selectionMode === "multiple";
+    }
+    return multiple;
+  }, [selectionMode, multiple]);
+  const [internalExpandedKeys, setInternalExpandedKeys] = react.useState(() => {
+    if (controlledExpandedKeys !== void 0) {
+      return new Set(controlledExpandedKeys);
+    }
+    if (defaultExpandAll) {
+      return new Set(tigercatCore.getAllKeys(treeData));
+    }
+    if (defaultExpandedKeys && defaultExpandedKeys.length > 0) {
+      return new Set(defaultExpandedKeys);
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  const [internalSelectedKeys, setInternalSelectedKeys] = react.useState(
+    () => new Set(controlledSelectedKeys !== void 0 ? controlledSelectedKeys : defaultSelectedKeys)
+  );
+  const [internalCheckedState, setInternalCheckedState] = react.useState(() => {
+    if (controlledCheckedKeys !== void 0) {
+      if (Array.isArray(controlledCheckedKeys)) {
+        return tigercatCore.calculateCheckedState(treeData, controlledCheckedKeys, checkStrictly);
+      }
+      return controlledCheckedKeys;
+    }
+    return tigercatCore.calculateCheckedState(treeData, defaultCheckedKeys, checkStrictly);
+  });
+  const [loadingNodes, setLoadingNodes] = react.useState(/* @__PURE__ */ new Set());
+  const [filteredNodeKeys, setFilteredNodeKeys] = react.useState(/* @__PURE__ */ new Set());
+  const [activeKey, setActiveKey] = react.useState();
+  const computedExpandedKeys = react.useMemo(() => {
+    if (controlledExpandedKeys !== void 0) {
+      return new Set(controlledExpandedKeys);
+    }
+    return internalExpandedKeys;
+  }, [controlledExpandedKeys, internalExpandedKeys]);
+  const visibleItems = react.useMemo(
+    () => tigercatCore.getVisibleTreeItems(treeData, computedExpandedKeys, filteredNodeKeys),
+    [treeData, computedExpandedKeys, filteredNodeKeys]
+  );
+  const focusableKeys = react.useMemo(
+    () => visibleItems.filter((i) => !i.node.disabled).map((i) => i.key),
+    [visibleItems]
+  );
+  const defaultActiveKey = focusableKeys[0];
+  react.useEffect(() => {
+    if (activeKey === void 0) return;
+    itemRefs.current.get(activeKey)?.focus();
+  }, [activeKey]);
+  const computedSelectedKeys = react.useMemo(() => {
+    if (controlledSelectedKeys !== void 0) {
+      return new Set(controlledSelectedKeys);
+    }
+    return internalSelectedKeys;
+  }, [controlledSelectedKeys, internalSelectedKeys]);
+  const computedCheckedState = react.useMemo(() => {
+    if (controlledCheckedKeys !== void 0) {
+      if (Array.isArray(controlledCheckedKeys)) {
+        return tigercatCore.calculateCheckedState(treeData, controlledCheckedKeys, checkStrictly);
+      }
+      return controlledCheckedKeys;
+    }
+    return internalCheckedState;
+  }, [controlledCheckedKeys, internalCheckedState, treeData, checkStrictly]);
+  react.useEffect(() => {
+    if (filterValue) {
+      const matched = tigercatCore.filterTreeNodes(treeData, filterValue, filterFn);
+      setFilteredNodeKeys(matched);
+      if (autoExpandParent) {
+        const autoExpand = tigercatCore.getAutoExpandKeys(treeData, matched);
+        if (controlledExpandedKeys === void 0) {
+          setInternalExpandedKeys((prev) => /* @__PURE__ */ new Set([...prev, ...autoExpand]));
+        }
+      }
+    } else {
+      setFilteredNodeKeys(/* @__PURE__ */ new Set());
+    }
+  }, [filterValue, treeData, filterFn, autoExpandParent, controlledExpandedKeys]);
+  const handleExpand = react.useCallback(
+    (nodeKey) => {
+      const node = tigercatCore.findNode(treeData, nodeKey);
+      if (!node) return;
+      const newExpandedKeys = new Set(computedExpandedKeys);
+      const isExpanded = newExpandedKeys.has(nodeKey);
+      if (isExpanded) {
+        newExpandedKeys.delete(nodeKey);
+        onNodeCollapse?.(node, nodeKey);
+      } else {
+        newExpandedKeys.add(nodeKey);
+        onNodeExpand?.(node, nodeKey);
+        if (loadData && !node.children && !node.isLeaf && !loadingNodes.has(nodeKey)) {
+          setLoadingNodes((prev) => /* @__PURE__ */ new Set([...prev, nodeKey]));
+          loadData(node).then((children) => {
+            node.children = children;
+            setLoadingNodes((prev) => {
+              const next = new Set(prev);
+              next.delete(nodeKey);
+              return next;
+            });
+          }).catch(() => {
+            setLoadingNodes((prev) => {
+              const next = new Set(prev);
+              next.delete(nodeKey);
+              return next;
+            });
+            newExpandedKeys.delete(nodeKey);
+          });
+        }
+      }
+      if (controlledExpandedKeys === void 0) {
+        setInternalExpandedKeys(newExpandedKeys);
+      }
+      onExpand?.(Array.from(newExpandedKeys), {
+        expanded: !isExpanded,
+        node
+      });
+    },
+    [
+      treeData,
+      computedExpandedKeys,
+      loadData,
+      loadingNodes,
+      controlledExpandedKeys,
+      onExpand,
+      onNodeExpand,
+      onNodeCollapse
+    ]
+  );
+  const handleSelect = react.useCallback(
+    (nodeKey, event) => {
+      const node = tigercatCore.findNode(treeData, nodeKey);
+      if (!node || node.disabled || !effectiveSelectable) return;
+      const newSelectedKeys = new Set(computedSelectedKeys);
+      if (effectiveMultiple) {
+        if (newSelectedKeys.has(nodeKey)) {
+          newSelectedKeys.delete(nodeKey);
+        } else {
+          newSelectedKeys.add(nodeKey);
+        }
+      } else {
+        newSelectedKeys.clear();
+        newSelectedKeys.add(nodeKey);
+      }
+      if (controlledSelectedKeys === void 0) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      const selectedKeysArray = Array.from(newSelectedKeys);
+      onSelect?.(selectedKeysArray, {
+        selected: newSelectedKeys.has(nodeKey),
+        selectedNodes: selectedKeysArray.map((k) => tigercatCore.findNode(treeData, k)).filter(Boolean),
+        node,
+        event
+      });
+    },
+    [
+      treeData,
+      computedSelectedKeys,
+      effectiveSelectable,
+      effectiveMultiple,
+      controlledSelectedKeys,
+      onSelect
+    ]
+  );
+  const handleCheck = react.useCallback(
+    (nodeKey, checked) => {
+      const node = tigercatCore.findNode(treeData, nodeKey);
+      if (!node || node.disabled) return;
+      const currentCheckedKeys = computedCheckedState.checked;
+      const newCheckedState = tigercatCore.handleNodeCheck(
+        treeData,
+        nodeKey,
+        checked,
+        currentCheckedKeys,
+        checkStrictly
+      );
+      if (controlledCheckedKeys === void 0) {
+        setInternalCheckedState(newCheckedState);
+      }
+      const returnKeys = tigercatCore.getCheckedKeysByStrategy(newCheckedState, treeData, checkStrategy);
+      onCheck?.(returnKeys, {
+        checked,
+        checkedNodes: newCheckedState.checked.map((k) => tigercatCore.findNode(treeData, k)).filter(Boolean),
+        node,
+        checkedNodesPositions: newCheckedState
+      });
+    },
+    [treeData, computedCheckedState, checkStrictly, checkStrategy, controlledCheckedKeys, onCheck]
+  );
+  const handleKeyDown = react.useCallback(
+    (e, node, isExpanded, isChecked) => {
+      if (node.disabled) return;
+      const currentKey = activeKey ?? defaultActiveKey ?? node.key;
+      const currentIndex = focusableKeys.findIndex((k) => k === currentKey);
+      const isExpandable = !!(node.children && node.children.length > 0) || !!(loadData && !node.isLeaf);
+      const parents = tigercatCore.getParentKeys(treeData, node.key);
+      const parentKey = parents[parents.length - 1];
+      const getFirstChildKey = () => {
+        const list = visibleItems;
+        const index = list.findIndex((i) => i.key === node.key);
+        if (index < 0) return void 0;
+        const base = list[index];
+        for (let i = index + 1; i < list.length; i++) {
+          const item = list[i];
+          if (item.level <= base.level) break;
+          if (item.parentKey === node.key && !item.node.disabled) return item.key;
+        }
+        return void 0;
+      };
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[currentIndex + 1] ?? currentKey);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[currentIndex - 1] ?? currentKey);
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[0] ?? currentKey);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        setActiveKey(focusableKeys[focusableKeys.length - 1] ?? currentKey);
+        return;
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (isExpandable && !isExpanded) {
+          handleExpand(node.key);
+          return;
+        }
+        if (isExpandable && isExpanded) {
+          setActiveKey(getFirstChildKey() ?? currentKey);
+        }
+        return;
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (isExpandable && isExpanded) {
+          handleExpand(node.key);
+          return;
+        }
+        if (parentKey !== void 0) {
+          setActiveKey(parentKey);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (isExpandable && isExpanded) {
+          handleExpand(node.key);
+          return;
+        }
+        if (parentKey !== void 0) {
+          if (computedExpandedKeys.has(parentKey)) {
+            handleExpand(parentKey);
+          }
+          setActiveKey(parentKey);
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (effectiveSelectable) {
+          handleSelect(node.key, e);
+          return;
+        }
+        if (isExpandable) {
+          handleExpand(node.key);
+        }
+        return;
+      }
+      if (e.key === " ") {
+        e.preventDefault();
+        if (checkable) {
+          handleCheck(node.key, !isChecked);
+          return;
+        }
+        if (isExpandable) {
+          handleExpand(node.key);
+        }
+      }
+    },
+    [
+      activeKey,
+      defaultActiveKey,
+      focusableKeys,
+      visibleItems,
+      treeData,
+      loadData,
+      checkable,
+      computedExpandedKeys,
+      effectiveSelectable,
+      handleExpand,
+      handleSelect,
+      handleCheck
+    ]
+  );
+  const handleNodeClickInternal = react.useCallback(
+    (node, event) => {
+      if (node.disabled) return;
+      onNodeClick?.(node, event);
+    },
+    [onNodeClick]
+  );
+  const renderTreeNode = react.useCallback(
+    (node, level, _parentKey) => {
+      const hasChildren = !!(node.children && node.children.length > 0);
+      const isExpanded = computedExpandedKeys.has(node.key);
+      const isSelected = computedSelectedKeys.has(node.key);
+      const isChecked = computedCheckedState.checked.includes(node.key);
+      const isHalfChecked = computedCheckedState.halfChecked.includes(node.key);
+      const isLoading = loadingNodes.has(node.key);
+      const isFiltered = filteredNodeKeys.size > 0;
+      const isMatched = filteredNodeKeys.has(node.key);
+      const isVisible = !isFiltered || isMatched;
+      const isExpandable = hasChildren || !!(loadData && !node.isLeaf);
+      const isFocusable = !node.disabled && node.key === (activeKey ?? defaultActiveKey);
+      if (!isVisible) {
+        return null;
+      }
+      const indent = [];
+      for (let i = 0; i < level; i++) {
+        indent.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIndentClasses }, i));
+      }
+      const nodeContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        indent,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: isExpandable ? "cursor-pointer" : "",
+            onClick: (e) => {
+              e.stopPropagation();
+              if (isExpandable) {
+                setActiveKey(node.key);
+                handleExpand(node.key);
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
+          }
+        ),
+        checkable && /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": `Select ${node.label}`,
+            className: tigercatCore.treeNodeCheckboxClasses,
+            checked: isChecked,
+            ref: (input) => {
+              if (input) {
+                input.indeterminate = isHalfChecked;
+              }
+            },
+            disabled: node.disabled,
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            onChange: (e) => {
+              handleCheck(node.key, e.target.checked);
+            }
+          }
+        ),
+        showIcon && node.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIconClasses, children: node.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: tigercatCore.classNames(
+              tigercatCore.treeNodeLabelClasses,
+              isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
+            ),
+            children: node.label
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {})
+      ] });
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.treeNodeWrapperClasses, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tigercatCore.getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
+            ref: (el) => {
+              itemRefs.current.set(node.key, el);
+            },
+            role: "treeitem",
+            "aria-level": level + 1,
+            "aria-disabled": node.disabled || void 0,
+            "aria-selected": effectiveSelectable ? isSelected : void 0,
+            "aria-expanded": isExpandable ? isExpanded : void 0,
+            "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
+            tabIndex: isFocusable ? 0 : -1,
+            onFocus: () => {
+              if (!node.disabled) setActiveKey(node.key);
+            },
+            onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
+            onClick: (e) => {
+              setActiveKey(node.key);
+              handleNodeClickInternal(node, e);
+              if (effectiveSelectable && !node.disabled) {
+                handleSelect(node.key, e);
+              }
+            },
+            children: nodeContent
+          }
+        ),
+        hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.treeNodeChildrenClasses, showLine && tigercatCore.treeLineClasses), children: node.children.map((child) => renderTreeNode(child, level + 1, node.key)) })
+      ] }, node.key);
+    },
+    [
+      computedExpandedKeys,
+      computedSelectedKeys,
+      computedCheckedState,
+      loadingNodes,
+      filteredNodeKeys,
+      activeKey,
+      defaultActiveKey,
+      loadData,
+      checkable,
+      blockNode,
+      effectiveSelectable,
+      showIcon,
+      showLine,
+      handleExpand,
+      handleCheck,
+      handleSelect,
+      handleNodeClickInternal,
+      handleKeyDown
+    ]
+  );
+  if (!treeData || treeData.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: tigercatCore.classNames(tigercatCore.treeBaseClasses, "p-4", className),
+        role: "tree",
+        "aria-label": ariaLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.treeEmptyStateClasses, children: emptyText })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tigercatCore.classNames(tigercatCore.treeBaseClasses, className),
+      role: "tree",
+      "aria-label": ariaLabel,
+      "aria-multiselectable": effectiveMultiple || void 0,
+      children: treeData.map((node) => renderTreeNode(node, 0))
+    }
+  );
+};
+var Tree_default = Tree;
+
+exports.Tree = Tree;
+exports.Tree_default = Tree_default;