@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-CVYA3MI2.mjs

@@ -1,653 +0,0 @@
-import {
-  VirtualList
-} from "./chunk-Y5X3G2LD.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/Tree.tsx
-import {
-  classNames as classNames3,
-  treeBaseClasses,
-  treeEmptyStateClasses,
-  resolveLocaleText as resolveLocaleText2
-} from "@expcat/tigercat-core";
-
-// src/components/Tree/state.ts
-import { useState, useMemo, useEffect, useCallback, useRef } from "react";
-import {
-  getVisibleTreeItems,
-  getFirstVisibleChildKey,
-  getTreeKeyboardAction,
-  getParentKeys,
-  getAllKeys,
-  findNode,
-  calculateCheckedState,
-  handleNodeCheck,
-  getCheckedKeysByStrategy,
-  filterTreeNodes,
-  getAutoExpandKeys,
-  checkedSetsFromState,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-function useTreeState(props) {
-  const {
-    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,
-    ariaLabel = "Tree",
-    onExpandedKeysChange,
-    onSelectedKeysChange,
-    onCheckedKeysChange,
-    onExpand,
-    onSelect,
-    onCheck,
-    onNodeClick,
-    onNodeExpand,
-    onNodeCollapse,
-    className,
-    draggable: isDraggable = false,
-    onDrop,
-    virtual = false,
-    height = 400,
-    itemHeight = 32,
-    locale
-  } = props;
-  const itemRefs = useRef(/* @__PURE__ */ new Map());
-  const dragNodeKeyRef = useRef(null);
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const effectiveSelectable = useMemo(() => {
-    if (selectionMode !== void 0) {
-      return selectionMode !== "none";
-    }
-    return selectable;
-  }, [selectionMode, selectable]);
-  const effectiveMultiple = useMemo(() => {
-    if (selectionMode !== void 0) {
-      return selectionMode === "multiple";
-    }
-    return multiple;
-  }, [selectionMode, multiple]);
-  const [internalExpandedKeys, setInternalExpandedKeys] = useState(() => {
-    if (controlledExpandedKeys !== void 0) {
-      return new Set(controlledExpandedKeys);
-    }
-    if (defaultExpandAll) {
-      return new Set(getAllKeys(treeData));
-    }
-    if (defaultExpandedKeys && defaultExpandedKeys.length > 0) {
-      return new Set(defaultExpandedKeys);
-    }
-    return /* @__PURE__ */ new Set();
-  });
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState(
-    () => new Set(controlledSelectedKeys !== void 0 ? controlledSelectedKeys : defaultSelectedKeys)
-  );
-  const [internalCheckedState, setInternalCheckedState] = useState(() => {
-    if (controlledCheckedKeys !== void 0) {
-      if (Array.isArray(controlledCheckedKeys)) {
-        return calculateCheckedState(treeData, controlledCheckedKeys, checkStrictly);
-      }
-      return controlledCheckedKeys;
-    }
-    return calculateCheckedState(treeData, defaultCheckedKeys, checkStrictly);
-  });
-  const [loadingNodes, setLoadingNodes] = useState(/* @__PURE__ */ new Set());
-  const [filteredNodeKeys, setFilteredNodeKeys] = useState(/* @__PURE__ */ new Set());
-  const [activeKey, setActiveKey] = useState();
-  const computedExpandedKeys = useMemo(() => {
-    if (controlledExpandedKeys !== void 0) {
-      return new Set(controlledExpandedKeys);
-    }
-    return internalExpandedKeys;
-  }, [controlledExpandedKeys, internalExpandedKeys]);
-  const visibleItems = useMemo(
-    () => getVisibleTreeItems(treeData, computedExpandedKeys, filteredNodeKeys),
-    [treeData, computedExpandedKeys, filteredNodeKeys]
-  );
-  const focusableKeys = useMemo(
-    () => visibleItems.filter((i) => !i.node.disabled).map((i) => i.key),
-    [visibleItems]
-  );
-  const defaultActiveKey = focusableKeys[0];
-  useEffect(() => {
-    if (activeKey === void 0) return;
-    itemRefs.current.get(activeKey)?.focus();
-  }, [activeKey]);
-  const computedSelectedKeys = useMemo(() => {
-    if (controlledSelectedKeys !== void 0) {
-      return new Set(controlledSelectedKeys);
-    }
-    return internalSelectedKeys;
-  }, [controlledSelectedKeys, internalSelectedKeys]);
-  const computedCheckedState = useMemo(() => {
-    if (controlledCheckedKeys !== void 0) {
-      if (Array.isArray(controlledCheckedKeys)) {
-        return calculateCheckedState(treeData, controlledCheckedKeys, checkStrictly);
-      }
-      return controlledCheckedKeys;
-    }
-    return internalCheckedState;
-  }, [controlledCheckedKeys, internalCheckedState, treeData, checkStrictly]);
-  const checkedSets = useMemo(
-    () => checkedSetsFromState(computedCheckedState),
-    [computedCheckedState]
-  );
-  const [internalSearchValue, setInternalSearchValue] = useState("");
-  const effectiveFilterValue = searchable ? internalSearchValue : filterValue;
-  useEffect(() => {
-    if (effectiveFilterValue) {
-      const matched = filterTreeNodes(treeData, effectiveFilterValue, filterFn);
-      setFilteredNodeKeys(matched);
-      if (autoExpandParent) {
-        const autoExpand = 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 = useCallback(
-    (nodeKey) => {
-      const node = 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;
-            });
-          });
-        }
-      }
-      if (controlledExpandedKeys === void 0) {
-        setInternalExpandedKeys(newExpandedKeys);
-      }
-      const expandedKeysArray = Array.from(newExpandedKeys);
-      onExpandedKeysChange?.(expandedKeysArray);
-      onExpand?.(expandedKeysArray, {
-        expanded: !isExpanded,
-        node
-      });
-    },
-    [
-      treeData,
-      computedExpandedKeys,
-      loadData,
-      loadingNodes,
-      controlledExpandedKeys,
-      onExpandedKeysChange,
-      onExpand,
-      onNodeExpand,
-      onNodeCollapse
-    ]
-  );
-  const handleSelect = useCallback(
-    (nodeKey, event) => {
-      const node = 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);
-      onSelectedKeysChange?.(selectedKeysArray);
-      onSelect?.(selectedKeysArray, {
-        selected: newSelectedKeys.has(nodeKey),
-        selectedNodes: selectedKeysArray.map((k) => findNode(treeData, k)).filter(Boolean),
-        node,
-        event
-      });
-    },
-    [
-      treeData,
-      computedSelectedKeys,
-      effectiveSelectable,
-      effectiveMultiple,
-      controlledSelectedKeys,
-      onSelectedKeysChange,
-      onSelect
-    ]
-  );
-  const handleCheck = useCallback(
-    (nodeKey, checked) => {
-      const node = findNode(treeData, nodeKey);
-      if (!node || node.disabled) return;
-      const currentCheckedKeys = computedCheckedState.checked;
-      const newCheckedState = handleNodeCheck(
-        treeData,
-        nodeKey,
-        checked,
-        currentCheckedKeys,
-        checkStrictly
-      );
-      if (controlledCheckedKeys === void 0) {
-        setInternalCheckedState(newCheckedState);
-      }
-      const returnKeys = getCheckedKeysByStrategy(newCheckedState, treeData, checkStrategy);
-      onCheckedKeysChange?.(returnKeys);
-      onCheck?.(returnKeys, {
-        checked,
-        checkedNodes: newCheckedState.checked.map((k) => findNode(treeData, k)).filter(Boolean),
-        node,
-        checkedNodesPositions: newCheckedState
-      });
-    },
-    [
-      treeData,
-      computedCheckedState,
-      checkStrictly,
-      checkStrategy,
-      controlledCheckedKeys,
-      onCheckedKeysChange,
-      onCheck
-    ]
-  );
-  const handleKeyDown = useCallback(
-    (e, node, isExpanded, isChecked) => {
-      if (node.disabled) return;
-      const currentKey = activeKey ?? defaultActiveKey ?? node.key;
-      const isExpandable = !!(node.children && node.children.length > 0) || !!(loadData && !node.isLeaf);
-      const parents = getParentKeys(treeData, node.key);
-      const parentKey = parents[parents.length - 1];
-      const action = getTreeKeyboardAction({
-        key: e.key,
-        nodeKey: node.key,
-        currentKey,
-        focusableKeys,
-        parentKey,
-        firstChildKey: getFirstVisibleChildKey(visibleItems, node.key),
-        isExpandable,
-        isExpanded,
-        isParentExpanded: parentKey !== void 0 && computedExpandedKeys.has(parentKey),
-        isChecked,
-        selectable: effectiveSelectable,
-        checkable
-      });
-      if (!action) return;
-      e.preventDefault();
-      switch (action.type) {
-        case "focus":
-          setActiveKey(action.key);
-          break;
-        case "toggleExpand":
-          handleExpand(action.key);
-          break;
-        case "select":
-          handleSelect(action.key, e);
-          break;
-        case "check":
-          handleCheck(action.key, action.checked);
-          break;
-        case "collapseAndFocus":
-          if (action.collapseKey !== void 0) handleExpand(action.collapseKey);
-          setActiveKey(action.focusKey);
-          break;
-      }
-    },
-    [
-      activeKey,
-      defaultActiveKey,
-      focusableKeys,
-      visibleItems,
-      treeData,
-      loadData,
-      checkable,
-      computedExpandedKeys,
-      effectiveSelectable,
-      handleExpand,
-      handleSelect,
-      handleCheck
-    ]
-  );
-  return {
-    treeData,
-    className,
-    ariaLabel,
-    emptyText,
-    mergedLocale,
-    showIcon,
-    showLine,
-    blockNode,
-    checkable,
-    effectiveSelectable,
-    effectiveMultiple,
-    isDraggable,
-    searchable,
-    virtual,
-    height,
-    itemHeight,
-    computedExpandedKeys,
-    computedSelectedKeys,
-    checkedSets,
-    loadingNodes,
-    filteredNodeKeys,
-    visibleItems,
-    activeKey,
-    defaultActiveKey,
-    internalSearchValue,
-    setInternalSearchValue,
-    itemRefs,
-    dragNodeKeyRef,
-    setActiveKey,
-    loadData,
-    onNodeClick,
-    onDrop,
-    handleExpand,
-    handleSelect,
-    handleCheck,
-    handleKeyDown
-  };
-}
-
-// src/components/Tree/render-node.tsx
-import {
-  classNames as classNames2,
-  treeNodeWrapperClasses,
-  treeNodeChildrenClasses,
-  treeLineClasses
-} from "@expcat/tigercat-core";
-
-// src/components/Tree/render-row.tsx
-import {
-  classNames,
-  getTreeNodeClasses,
-  treeNodeIndentClasses as treeNodeIndentClasses2,
-  treeNodeCheckboxClasses,
-  treeNodeIconClasses,
-  treeNodeLabelClasses,
-  resolveLocaleText
-} from "@expcat/tigercat-core";
-
-// src/components/Tree/icons.tsx
-import {
-  getTreeNodeExpandIconClasses,
-  treeNodeIndentClasses,
-  treeLoadingClasses,
-  getSpinnerSVG
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var spinnerSvg = getSpinnerSVG("spinner");
-var ExpandIcon = ({
-  expanded,
-  hasChildren
-}) => {
-  if (!hasChildren) {
-    return /* @__PURE__ */ jsx("span", { className: treeNodeIndentClasses });
-  }
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: getTreeNodeExpandIconClasses(expanded),
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "currentColor",
-      children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4V4z" })
-    }
-  );
-};
-var LoadingSpinner = () => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: 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__ */ jsx("circle", { ...el.attrs }, index);
-      if (el.type === "path") return /* @__PURE__ */ jsx("path", { ...el.attrs }, index);
-      return null;
-    })
-  }
-);
-
-// src/components/Tree/render-row.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function renderTreeRow(ctx, node, level) {
-  const hasChildren = !!(node.children && node.children.length > 0);
-  const isExpanded = ctx.computedExpandedKeys.has(node.key);
-  const isSelected = ctx.computedSelectedKeys.has(node.key);
-  const isChecked = ctx.checkedSets.checkedSet.has(node.key);
-  const isHalfChecked = ctx.checkedSets.halfCheckedSet.has(node.key);
-  const isLoading = ctx.loadingNodes.has(node.key);
-  const isFiltered = ctx.filteredNodeKeys.size > 0;
-  const isMatched = ctx.filteredNodeKeys.has(node.key);
-  const isVisible = !isFiltered || isMatched;
-  const isExpandable = hasChildren || !!(ctx.loadData && !node.isLeaf);
-  const isFocusable = !node.disabled && node.key === (ctx.activeKey ?? ctx.defaultActiveKey);
-  if (!isVisible) {
-    return null;
-  }
-  const indent = [];
-  for (let i = 0; i < level; i++) {
-    indent.push(/* @__PURE__ */ jsx2("span", { className: treeNodeIndentClasses2 }, i));
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: getTreeNodeClasses(isSelected, !!node.disabled, ctx.blockNode),
-      ref: (el) => {
-        ctx.itemRefs.current.set(node.key, el);
-      },
-      role: "treeitem",
-      "aria-level": level + 1,
-      "aria-disabled": node.disabled || void 0,
-      "aria-selected": ctx.effectiveSelectable ? isSelected : void 0,
-      "aria-expanded": isExpandable ? isExpanded : void 0,
-      "aria-checked": ctx.checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
-      tabIndex: isFocusable ? 0 : -1,
-      draggable: ctx.isDraggable && !node.disabled ? true : void 0,
-      onDragStart: ctx.isDraggable && !node.disabled ? (e) => {
-        e.stopPropagation();
-        ctx.dragNodeKeyRef.current = node.key;
-      } : void 0,
-      onDragOver: ctx.isDraggable ? (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      } : void 0,
-      onDrop: ctx.isDraggable ? (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (ctx.dragNodeKeyRef.current !== null && ctx.dragNodeKeyRef.current !== node.key) {
-          ctx.onDrop?.({ dragKey: ctx.dragNodeKeyRef.current, dropKey: node.key });
-        }
-        ctx.dragNodeKeyRef.current = null;
-      } : void 0,
-      onDragEnd: ctx.isDraggable ? () => {
-        ctx.dragNodeKeyRef.current = null;
-      } : void 0,
-      onFocus: () => {
-        if (!node.disabled) ctx.setActiveKey(node.key);
-      },
-      onKeyDown: (e) => ctx.handleKeyDown(e, node, isExpanded, isChecked),
-      onClick: (e) => {
-        ctx.setActiveKey(node.key);
-        if (!node.disabled) ctx.onNodeClick?.(node, e);
-        if (ctx.effectiveSelectable && !node.disabled) {
-          ctx.handleSelect(node.key, e);
-        }
-      },
-      children: [
-        indent,
-        /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: isExpandable ? "cursor-pointer" : "",
-            onClick: (e) => {
-              e.stopPropagation();
-              if (isExpandable) {
-                ctx.setActiveKey(node.key);
-                ctx.handleExpand(node.key);
-              }
-            },
-            children: /* @__PURE__ */ jsx2(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
-          }
-        ),
-        ctx.checkable && /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "checkbox",
-            "aria-label": resolveLocaleText(
-              `Select ${node.label}`,
-              ctx.mergedLocale?.locale?.toLowerCase().startsWith("zh") ? `\u9009\u62E9${node.label}` : void 0
-            ),
-            className: treeNodeCheckboxClasses,
-            checked: isChecked,
-            ref: (input) => {
-              if (input) {
-                input.indeterminate = isHalfChecked;
-              }
-            },
-            disabled: node.disabled,
-            onClick: (e) => {
-              e.stopPropagation();
-            },
-            onChange: (e) => {
-              ctx.handleCheck(node.key, e.target.checked);
-            }
-          }
-        ),
-        ctx.showIcon && node.icon ? /* @__PURE__ */ jsx2("span", { className: treeNodeIconClasses, children: node.icon }) : null,
-        /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: classNames(
-              treeNodeLabelClasses,
-              isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
-            ),
-            children: node.label
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsx2(LoadingSpinner, {})
-      ]
-    }
-  );
-}
-
-// src/components/Tree/render-node.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function renderTreeNode(ctx, node, level) {
-  const hasChildren = !!(node.children && node.children.length > 0);
-  const isExpanded = ctx.computedExpandedKeys.has(node.key);
-  const isFiltered = ctx.filteredNodeKeys.size > 0;
-  const isMatched = ctx.filteredNodeKeys.has(node.key);
-  const isVisible = !isFiltered || isMatched;
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs2("div", { className: treeNodeWrapperClasses, children: [
-    renderTreeRow(ctx, node, level),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx3("div", { className: classNames2(treeNodeChildrenClasses, ctx.showLine && treeLineClasses), children: (node.children ?? []).map((child) => renderTreeNode(ctx, child, level + 1)) })
-  ] }, node.key);
-}
-
-// src/components/Tree.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Tree = (props) => {
-  const ctx = useTreeState(props);
-  if (!ctx.treeData || ctx.treeData.length === 0) {
-    return /* @__PURE__ */ jsx4(
-      "div",
-      {
-        className: classNames3(treeBaseClasses, "p-4", ctx.className),
-        role: "tree",
-        "aria-label": ctx.ariaLabel,
-        children: /* @__PURE__ */ jsx4("div", { className: treeEmptyStateClasses, children: resolveLocaleText2("No data", ctx.emptyText, ctx.mergedLocale?.common?.emptyText) })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: classNames3(treeBaseClasses, ctx.className),
-      role: "tree",
-      "aria-label": ctx.ariaLabel,
-      "aria-multiselectable": ctx.effectiveMultiple || void 0,
-      children: [
-        ctx.searchable && /* @__PURE__ */ jsx4(
-          "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: resolveLocaleText2("Search...", ctx.mergedLocale?.common?.searchPlaceholder),
-            value: ctx.internalSearchValue,
-            onChange: (e) => ctx.setInternalSearchValue(e.target.value)
-          }
-        ),
-        ctx.virtual ? /* @__PURE__ */ jsx4(
-          VirtualList,
-          {
-            itemCount: ctx.visibleItems.length,
-            itemHeight: ctx.itemHeight,
-            height: ctx.height,
-            renderItem: ({ index }) => {
-              const item = ctx.visibleItems[index];
-              if (!item) return null;
-              return renderTreeRow(ctx, item.node, item.level - 1);
-            }
-          }
-        ) : ctx.treeData.map((node) => renderTreeNode(ctx, node, 0))
-      ]
-    }
-  );
-};
-var Tree_default = Tree;
-
-export {
-  Tree,
-  Tree_default
-};