@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-4QJZT6QK.js

@@ -1,555 +0,0 @@
-'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 = "",
-  searchable = false,
-  filterFn,
-  autoExpandParent = true,
-  blockNode = false,
-  emptyText = "No data",
-  ariaLabel = "Tree",
-  onExpand,
-  onSelect,
-  onCheck,
-  onNodeClick,
-  onNodeExpand,
-  onNodeCollapse,
-  className,
-  draggable: isDraggable = false,
-  onDrop
-}) => {
-  const itemRefs = react.useRef(/* @__PURE__ */ new Map());
-  const dragNodeKeyRef = react.useRef(null);
-  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]);
-  const checkedSets = react.useMemo(
-    () => tigercatCore.checkedSetsFromState(computedCheckedState),
-    [computedCheckedState]
-  );
-  const [internalSearchValue, setInternalSearchValue] = react.useState("");
-  const effectiveFilterValue = searchable ? internalSearchValue : filterValue;
-  react.useEffect(() => {
-    if (effectiveFilterValue) {
-      const matched = tigercatCore.filterTreeNodes(treeData, effectiveFilterValue, 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());
-    }
-  }, [effectiveFilterValue, 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 getFirstChildKey = react.useCallback(
-    (nodeKey) => {
-      const index = visibleItems.findIndex((i) => i.key === nodeKey);
-      if (index < 0) return void 0;
-      const base = visibleItems[index];
-      for (let i = index + 1; i < visibleItems.length; i++) {
-        const item = visibleItems[i];
-        if (item.level <= base.level) break;
-        if (item.parentKey === nodeKey && !item.node.disabled) return item.key;
-      }
-      return void 0;
-    },
-    [visibleItems]
-  );
-  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];
-      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(node.key) ?? 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,
-      treeData,
-      loadData,
-      checkable,
-      computedExpandedKeys,
-      effectiveSelectable,
-      getFirstChildKey,
-      handleExpand,
-      handleSelect,
-      handleCheck
-    ]
-  );
-  const renderTreeNode = (node, level) => {
-    const hasChildren = !!(node.children && node.children.length > 0);
-    const isExpanded = computedExpandedKeys.has(node.key);
-    const isSelected = computedSelectedKeys.has(node.key);
-    const isChecked = checkedSets.checkedSet.has(node.key);
-    const isHalfChecked = checkedSets.halfCheckedSet.has(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,
-          draggable: isDraggable && !node.disabled ? true : void 0,
-          onDragStart: isDraggable && !node.disabled ? (e) => {
-            e.stopPropagation();
-            dragNodeKeyRef.current = node.key;
-          } : void 0,
-          onDragOver: isDraggable ? (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          } : void 0,
-          onDrop: isDraggable ? (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (dragNodeKeyRef.current !== null && dragNodeKeyRef.current !== node.key) {
-              onDrop?.({ dragKey: dragNodeKeyRef.current, dropKey: node.key });
-            }
-            dragNodeKeyRef.current = null;
-          } : void 0,
-          onDragEnd: isDraggable ? () => {
-            dragNodeKeyRef.current = null;
-          } : void 0,
-          onFocus: () => {
-            if (!node.disabled) setActiveKey(node.key);
-          },
-          onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
-          onClick: (e) => {
-            setActiveKey(node.key);
-            if (!node.disabled) onNodeClick?.(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);
-  };
-  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.jsxs(
-    "div",
-    {
-      className: tigercatCore.classNames(tigercatCore.treeBaseClasses, className),
-      role: "tree",
-      "aria-label": ariaLabel,
-      "aria-multiselectable": effectiveMultiple || void 0,
-      children: [
-        searchable && /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            className: "w-full mb-2 px-2 py-1 text-sm border border-[var(--tiger-border,#e5e7eb)] rounded bg-[var(--tiger-surface,#ffffff)] focus:outline-none focus:ring-1 focus:ring-[var(--tiger-primary,#2563eb)]",
-            placeholder: "Search...",
-            value: internalSearchValue,
-            onChange: (e) => setInternalSearchValue(e.target.value)
-          }
-        ),
-        treeData.map((node) => renderTreeNode(node, 0))
-      ]
-    }
-  );
-};
-var Tree_default = Tree;
-
-exports.Tree = Tree;
-exports.Tree_default = Tree_default;