@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/chunk-RRJTIKU6.mjs

@@ -0,0 +1,238 @@
+import { useId, useState, useRef, useMemo, useEffect } from 'react';
+import { getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, getTreeSelectTriggerClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, treeSelectDropdownClasses, treeSelectSearchClasses, getTreeSelectNodeClasses, chevronRightSolidIcon20PathD, treeSelectEmptyClasses, treeSelectBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/TreeSelect.tsx
+var TREESELECT_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "treeData",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "multiple",
+  "showSearch",
+  "notFoundText",
+  "defaultExpandAll",
+  "onChange"
+]);
+var TreeSelect = (props) => {
+  const {
+    value,
+    treeData = [],
+    placeholder = "Please select",
+    size = "md",
+    disabled = false,
+    clearable = false,
+    multiple = false,
+    showSearch = false,
+    notFoundText = "No data",
+    defaultExpandAll = false,
+    className,
+    onChange,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!TREESELECT_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const instanceId = useId();
+  const listboxId = `tiger-treeselect-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedKeys, setExpandedKeys] = useState(
+    () => defaultExpandAll ? new Set(getAllTreeSelectKeys(treeData)) : /* @__PURE__ */ new Set()
+  );
+  const containerRef = useRef(null);
+  const displayLabel = useMemo(() => getTreeSelectDisplayLabel(treeData, value), [treeData, value]);
+  const showClearButton = clearable && !disabled && value !== void 0 && (Array.isArray(value) ? value.length > 0 : value !== "");
+  const matchedKeys = useMemo(() => {
+    if (!searchQuery) return null;
+    return filterTreeSelectNodes(treeData, searchQuery);
+  }, [treeData, searchQuery]);
+  const effectiveExpandedKeys = matchedKeys ?? expandedKeys;
+  const flatNodes = useMemo(
+    () => flattenTreeSelectNodes(treeData, effectiveExpandedKeys),
+    [treeData, effectiveExpandedKeys]
+  );
+  const visibleNodes = useMemo(() => {
+    if (!matchedKeys) return flatNodes;
+    return flatNodes.filter((f) => matchedKeys.has(f.node.key));
+  }, [flatNodes, matchedKeys]);
+  function openDropdown() {
+    if (disabled) return;
+    setIsOpen(true);
+  }
+  function closeDropdown() {
+    setIsOpen(false);
+    setSearchQuery("");
+  }
+  function toggleDropdown() {
+    if (isOpen) closeDropdown();
+    else openDropdown();
+  }
+  function toggleExpand(key, e) {
+    e.stopPropagation();
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  function isSelected(key) {
+    if (multiple && Array.isArray(value)) {
+      return value.includes(key);
+    }
+    return value === key;
+  }
+  function handleNodeSelect(node) {
+    if (node.disabled) return;
+    if (multiple) {
+      const current = Array.isArray(value) ? [...value] : [];
+      const idx = current.indexOf(node.key);
+      if (idx >= 0) current.splice(idx, 1);
+      else current.push(node.key);
+      onChange?.(current);
+    } else {
+      onChange?.(node.key);
+      closeDropdown();
+    }
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    onChange?.(multiple ? [] : void 0);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeDropdown();
+    } else if ((e.key === "Enter" || e.key === " ") && !isOpen) {
+      e.preventDefault();
+      openDropdown();
+    }
+  }
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(treeSelectBaseClasses, className), ...divProps, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: getTreeSelectTriggerClasses(size, disabled, isOpen),
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        disabled,
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                "flex-1 truncate",
+                !displayLabel ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+              ),
+              children: displayLabel || placeholder
+            }
+          ),
+          showClearButton ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+              "aria-label": "Clear selection",
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  viewBox: icon20ViewBox,
+                  fill: "currentColor",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsx("path", { d: closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4 transition-transform",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx("path", { d: chevronDownSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+            }
+          ) })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { id: listboxId, role: "listbox", className: treeSelectDropdownClasses, children: [
+      showSearch && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: treeSelectSearchClasses,
+          placeholder: "Search...",
+          value: searchQuery,
+          "aria-label": "Search tree",
+          onChange: (e) => setSearchQuery(e.target.value)
+        }
+      ),
+      visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
+        const { node, level, hasChildren, isExpanded } = flatNode;
+        const selected = isSelected(node.key);
+        const indent = level * 20;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": node.disabled,
+            className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
+            style: { paddingLeft: `${indent + 8}px` },
+            onClick: (e) => {
+              e.stopPropagation();
+              handleNodeSelect(node);
+            },
+            children: [
+              hasChildren ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classNames(
+                    "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                    isExpanded ? "rotate-90" : ""
+                  ),
+                  onClick: (e) => toggleExpand(node.key, e),
+                  children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: chevronRightSolidIcon20PathD,
+                      fillRule: "evenodd",
+                      clipRule: "evenodd"
+                    }
+                  ) })
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
+            ]
+          },
+          String(node.key)
+        );
+      }) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: notFoundText })
+    ] })
+  ] });
+};
+
+export { TreeSelect };