@lv-x-software-house/x_view 1.2.5-dev.17 → 1.2.5-dev.18

package/dist/index.js

@@ -619,29 +619,26 @@ function XViewSidebar({
   const [isFilterMenuOpen, setIsFilterMenuOpen] = (0, import_react2.useState)(false);
   const [filterCategory, setFilterCategory] = (0, import_react2.useState)("Type");
   const [filterValue, setFilterValue] = (0, import_react2.useState)("");
+  const [isTypeDropdownOpen, setIsTypeDropdownOpen] = (0, import_react2.useState)(false);
+  const [highlightedTypeIndex, setHighlightedTypeIndex] = (0, import_react2.useState)(-1);
   const containerRef = (0, import_react2.useRef)(null);
   const inputRef = (0, import_react2.useRef)(null);
   const filterMenuRef = (0, import_react2.useRef)(null);
+  const typeDropdownRef = (0, import_react2.useRef)(null);
   const ability = (0, import_react2.useMemo)(() => {
     return defineAbilityFor(userRole);
   }, [userRole]);
   const contextLabel = (0, import_react2.useMemo)(() => {
     if (!viewType || !viewName) return null;
-    console.log("XViewSidebar: contextLabel viewType", viewType);
-    try {
-      const typeLower = viewType.toLowerCase();
-      if (typeLower === "database") {
-        return `Dataset: ${viewName}`;
-      } else if (typeLower === "view") {
-        return `View: ${viewName}`;
-      } else if (typeLower === "node") {
-        return `Node: ${viewName}`;
-      }
-      return `${viewType}: ${viewName}`;
-    } catch (err) {
-      console.error("XViewSidebar: Erro no contextLabel ao converter viewType:", viewType, err);
-      return `${viewType}: ${viewName}`;
-    }
+    const typeLower = String(viewType).toLowerCase();
+    if (typeLower === "database") {
+      return `Dataset: ${viewName}`;
+    } else if (typeLower === "view") {
+      return `View: ${viewName}`;
+    } else if (typeLower === "node") {
+      return `Node: ${viewName}`;
+    }
+    return `${viewType}: ${viewName}`;
   }, [viewType, viewName]);
   const normalize = (str = "") => {
     if (str === void 0 || str === null) {
@@ -654,7 +651,6 @@ function XViewSidebar({
     []
   );
   const availableTypes = (0, import_react2.useMemo)(() => {
-    console.log("XViewSidebar: recalculando availableTypes, dbNodes count:", dbNodes == null ? void 0 : dbNodes.length);
     const typesSet = /* @__PURE__ */ new Set();
     (dbNodes || []).forEach((node) => {
       if (Array.isArray(node.type)) {
@@ -665,10 +661,13 @@ function XViewSidebar({
         typesSet.add(node.type);
       }
     });
-    const result = Array.from(typesSet).sort();
-    console.log("XViewSidebar: availableTypes final:", result);
-    return result;
+    return Array.from(typesSet).sort();
   }, [dbNodes]);
+  const filteredTypes = (0, import_react2.useMemo)(() => {
+    if (!filterValue.trim()) return availableTypes;
+    const search = filterValue.toLowerCase().trim();
+    return availableTypes.filter((t) => t.toLowerCase().includes(search));
+  }, [availableTypes, filterValue]);
   const filteredAndSorted = (0, import_react2.useMemo)(() => {
     const base = Array.isArray(dbNodes) ? dbNodes : [];
     let pool = base;
@@ -681,22 +680,13 @@ function XViewSidebar({
       });
     }
     if (activeFilters.length > 0) {
-      console.log("XViewSidebar: aplicando activeFilters:", activeFilters);
       pool = pool.filter((node) => {
         return activeFilters.every((filter) => {
-          try {
-            if (filter.type === "Type") {
-              const nodeTypes = Array.isArray(node.type) ? node.type : [node.type];
-              return nodeTypes.some((t) => {
-                if (t === void 0) console.log("XViewSidebar: t \xE9 undefined no node:", node.id);
-                if (filter.value === void 0) console.log("XViewSidebar: filter.value \xE9 undefined");
-                return String(t).toLowerCase() === String(filter.value).toLowerCase();
-              });
-            } else if (filter.type === "Color") {
-              return String(node.color).toLowerCase() === String(filter.value).toLowerCase();
-            }
-          } catch (err) {
-            console.error("XViewSidebar: Erro ao filtrar node:", node, "com filtro:", filter, err);
+          if (filter.type === "Type") {
+            const nodeTypes = Array.isArray(node.type) ? node.type : [node.type];
+            return nodeTypes.some((t) => String(t).toLowerCase() === String(filter.value).toLowerCase());
+          } else if (filter.type === "Color") {
+            return String(node.color).toLowerCase() === String(filter.value).toLowerCase();
           }
           return true;
         });
@@ -718,12 +708,15 @@ function XViewSidebar({
       if (filterMenuRef.current && !filterMenuRef.current.contains(event.target)) {
         setIsFilterMenuOpen(false);
       }
+      if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
+        setIsTypeDropdownOpen(false);
+      }
     };
-    if (isFilterMenuOpen) {
+    if (isFilterMenuOpen || isTypeDropdownOpen) {
       document.addEventListener("mousedown", handleClickOutside);
     }
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isFilterMenuOpen]);
+  }, [isFilterMenuOpen, isTypeDropdownOpen]);
   (0, import_react2.useEffect)(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
@@ -777,6 +770,35 @@ function XViewSidebar({
   const handleRemoveFilter = (index) => {
     setActiveFilters((prev) => prev.filter((_, i) => i !== index));
   };
+  const handleTypeKeyDown = (e) => {
+    if (!isTypeDropdownOpen) {
+      setIsTypeDropdownOpen(true);
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedTypeIndex(
+        (prev) => prev < filteredTypes.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedTypeIndex((prev) => prev > 0 ? prev - 1 : 0);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (highlightedTypeIndex >= 0 && filteredTypes[highlightedTypeIndex]) {
+        setFilterValue(filteredTypes[highlightedTypeIndex]);
+        setIsTypeDropdownOpen(false);
+        setHighlightedTypeIndex(-1);
+      } else {
+        handleAddFilter();
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setIsTypeDropdownOpen(false);
+      setHighlightedTypeIndex(-1);
+    } else if (e.key === "Tab") {
+      setIsTypeDropdownOpen(false);
+    }
+  };
   const ToggleButton = /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
@@ -907,18 +929,36 @@ function XViewSidebar({
         className: `flex-1 text-xs py-1 rounded transition-colors ${filterCategory === opt ? "bg-indigo-600 text-white shadow-sm" : "text-slate-400 hover:text-slate-200"}`
       },
       opt
-    )))), /* @__PURE__ */ import_react2.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react2.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), filterCategory === "Type" ? /* @__PURE__ */ import_react2.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react2.default.createElement(
+    )))), /* @__PURE__ */ import_react2.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react2.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), filterCategory === "Type" ? /* @__PURE__ */ import_react2.default.createElement("div", { className: "relative", ref: typeDropdownRef }, /* @__PURE__ */ import_react2.default.createElement(
       "input",
       {
-        list: "typeOptions",
         type: "text",
         value: filterValue,
-        onChange: (e) => setFilterValue(e.target.value),
+        onChange: (e) => {
+          setFilterValue(e.target.value);
+          if (!isTypeDropdownOpen) setIsTypeDropdownOpen(true);
+          setHighlightedTypeIndex(-1);
+        },
+        onFocus: () => setIsTypeDropdownOpen(true),
+        onKeyDown: handleTypeKeyDown,
         placeholder: "Ex: Concept",
         className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white",
         autoFocus: true
       }
-    ), /* @__PURE__ */ import_react2.default.createElement("datalist", { id: "typeOptions" }, availableTypes.map((t) => /* @__PURE__ */ import_react2.default.createElement("option", { key: t, value: t })))) : /* @__PURE__ */ import_react2.default.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ import_react2.default.createElement(
+    ), isTypeDropdownOpen && filteredTypes.length > 0 && /* @__PURE__ */ import_react2.default.createElement("div", { className: "absolute z-[60] left-0 right-0 mt-1 max-h-48 overflow-y-auto bg-slate-900/95 backdrop-blur-xl border border-white/10 rounded-md shadow-2xl custom-scrollbar" }, filteredTypes.map((t, idx) => /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        key: t,
+        className: `px-3 py-2 text-xs cursor-pointer transition-colors ${idx === highlightedTypeIndex ? "bg-indigo-600 text-white" : "text-slate-300 hover:bg-white/10"}`,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          setFilterValue(t);
+          setIsTypeDropdownOpen(false);
+          setHighlightedTypeIndex(-1);
+        }
+      },
+      t
+    )))) : /* @__PURE__ */ import_react2.default.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ import_react2.default.createElement(
       "div",
       {
         className: "absolute left-2 w-3 h-3 rounded-full border border-white/20 shadow-sm",
@@ -7688,7 +7728,7 @@ function ColorPicker({ color, onChange, disabled }) {
       style: { backgroundColor: preset },
       title: preset
     },
-    color.toLowerCase() === preset.toLowerCase() && /* @__PURE__ */ import_react13.default.createElement(import_fi11.FiCheck, { className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`, size: 12 })
+    (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ import_react13.default.createElement(import_fi11.FiCheck, { className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`, size: 12 })
   )))), /* @__PURE__ */ import_react13.default.createElement("style", null, `
         .custom-react-colorful .react-colorful {
           width: 100%;

package/dist/index.mjs

@@ -580,29 +580,26 @@ function XViewSidebar({
   const [isFilterMenuOpen, setIsFilterMenuOpen] = useState2(false);
   const [filterCategory, setFilterCategory] = useState2("Type");
   const [filterValue, setFilterValue] = useState2("");
+  const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState2(false);
+  const [highlightedTypeIndex, setHighlightedTypeIndex] = useState2(-1);
   const containerRef = useRef2(null);
   const inputRef = useRef2(null);
   const filterMenuRef = useRef2(null);
+  const typeDropdownRef = useRef2(null);
   const ability = useMemo2(() => {
     return defineAbilityFor(userRole);
   }, [userRole]);
   const contextLabel = useMemo2(() => {
     if (!viewType || !viewName) return null;
-    console.log("XViewSidebar: contextLabel viewType", viewType);
-    try {
-      const typeLower = viewType.toLowerCase();
-      if (typeLower === "database") {
-        return `Dataset: ${viewName}`;
-      } else if (typeLower === "view") {
-        return `View: ${viewName}`;
-      } else if (typeLower === "node") {
-        return `Node: ${viewName}`;
-      }
-      return `${viewType}: ${viewName}`;
-    } catch (err) {
-      console.error("XViewSidebar: Erro no contextLabel ao converter viewType:", viewType, err);
-      return `${viewType}: ${viewName}`;
-    }
+    const typeLower = String(viewType).toLowerCase();
+    if (typeLower === "database") {
+      return `Dataset: ${viewName}`;
+    } else if (typeLower === "view") {
+      return `View: ${viewName}`;
+    } else if (typeLower === "node") {
+      return `Node: ${viewName}`;
+    }
+    return `${viewType}: ${viewName}`;
   }, [viewType, viewName]);
   const normalize = (str = "") => {
     if (str === void 0 || str === null) {
@@ -615,7 +612,6 @@ function XViewSidebar({
     []
   );
   const availableTypes = useMemo2(() => {
-    console.log("XViewSidebar: recalculando availableTypes, dbNodes count:", dbNodes == null ? void 0 : dbNodes.length);
     const typesSet = /* @__PURE__ */ new Set();
     (dbNodes || []).forEach((node) => {
       if (Array.isArray(node.type)) {
@@ -626,10 +622,13 @@ function XViewSidebar({
         typesSet.add(node.type);
       }
     });
-    const result = Array.from(typesSet).sort();
-    console.log("XViewSidebar: availableTypes final:", result);
-    return result;
+    return Array.from(typesSet).sort();
   }, [dbNodes]);
+  const filteredTypes = useMemo2(() => {
+    if (!filterValue.trim()) return availableTypes;
+    const search = filterValue.toLowerCase().trim();
+    return availableTypes.filter((t) => t.toLowerCase().includes(search));
+  }, [availableTypes, filterValue]);
   const filteredAndSorted = useMemo2(() => {
     const base = Array.isArray(dbNodes) ? dbNodes : [];
     let pool = base;
@@ -642,22 +641,13 @@ function XViewSidebar({
       });
     }
     if (activeFilters.length > 0) {
-      console.log("XViewSidebar: aplicando activeFilters:", activeFilters);
       pool = pool.filter((node) => {
         return activeFilters.every((filter) => {
-          try {
-            if (filter.type === "Type") {
-              const nodeTypes = Array.isArray(node.type) ? node.type : [node.type];
-              return nodeTypes.some((t) => {
-                if (t === void 0) console.log("XViewSidebar: t \xE9 undefined no node:", node.id);
-                if (filter.value === void 0) console.log("XViewSidebar: filter.value \xE9 undefined");
-                return String(t).toLowerCase() === String(filter.value).toLowerCase();
-              });
-            } else if (filter.type === "Color") {
-              return String(node.color).toLowerCase() === String(filter.value).toLowerCase();
-            }
-          } catch (err) {
-            console.error("XViewSidebar: Erro ao filtrar node:", node, "com filtro:", filter, err);
+          if (filter.type === "Type") {
+            const nodeTypes = Array.isArray(node.type) ? node.type : [node.type];
+            return nodeTypes.some((t) => String(t).toLowerCase() === String(filter.value).toLowerCase());
+          } else if (filter.type === "Color") {
+            return String(node.color).toLowerCase() === String(filter.value).toLowerCase();
           }
           return true;
         });
@@ -679,12 +669,15 @@ function XViewSidebar({
       if (filterMenuRef.current && !filterMenuRef.current.contains(event.target)) {
         setIsFilterMenuOpen(false);
       }
+      if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
+        setIsTypeDropdownOpen(false);
+      }
     };
-    if (isFilterMenuOpen) {
+    if (isFilterMenuOpen || isTypeDropdownOpen) {
       document.addEventListener("mousedown", handleClickOutside);
     }
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isFilterMenuOpen]);
+  }, [isFilterMenuOpen, isTypeDropdownOpen]);
   useEffect2(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
@@ -738,6 +731,35 @@ function XViewSidebar({
   const handleRemoveFilter = (index) => {
     setActiveFilters((prev) => prev.filter((_, i) => i !== index));
   };
+  const handleTypeKeyDown = (e) => {
+    if (!isTypeDropdownOpen) {
+      setIsTypeDropdownOpen(true);
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedTypeIndex(
+        (prev) => prev < filteredTypes.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedTypeIndex((prev) => prev > 0 ? prev - 1 : 0);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (highlightedTypeIndex >= 0 && filteredTypes[highlightedTypeIndex]) {
+        setFilterValue(filteredTypes[highlightedTypeIndex]);
+        setIsTypeDropdownOpen(false);
+        setHighlightedTypeIndex(-1);
+      } else {
+        handleAddFilter();
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setIsTypeDropdownOpen(false);
+      setHighlightedTypeIndex(-1);
+    } else if (e.key === "Tab") {
+      setIsTypeDropdownOpen(false);
+    }
+  };
   const ToggleButton = /* @__PURE__ */ React2.createElement(
     "button",
     {
@@ -868,18 +890,36 @@ function XViewSidebar({
         className: `flex-1 text-xs py-1 rounded transition-colors ${filterCategory === opt ? "bg-indigo-600 text-white shadow-sm" : "text-slate-400 hover:text-slate-200"}`
       },
       opt
-    )))), /* @__PURE__ */ React2.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), filterCategory === "Type" ? /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.createElement(
+    )))), /* @__PURE__ */ React2.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), filterCategory === "Type" ? /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: typeDropdownRef }, /* @__PURE__ */ React2.createElement(
       "input",
       {
-        list: "typeOptions",
         type: "text",
         value: filterValue,
-        onChange: (e) => setFilterValue(e.target.value),
+        onChange: (e) => {
+          setFilterValue(e.target.value);
+          if (!isTypeDropdownOpen) setIsTypeDropdownOpen(true);
+          setHighlightedTypeIndex(-1);
+        },
+        onFocus: () => setIsTypeDropdownOpen(true),
+        onKeyDown: handleTypeKeyDown,
         placeholder: "Ex: Concept",
         className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white",
         autoFocus: true
       }
-    ), /* @__PURE__ */ React2.createElement("datalist", { id: "typeOptions" }, availableTypes.map((t) => /* @__PURE__ */ React2.createElement("option", { key: t, value: t })))) : /* @__PURE__ */ React2.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React2.createElement(
+    ), isTypeDropdownOpen && filteredTypes.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "absolute z-[60] left-0 right-0 mt-1 max-h-48 overflow-y-auto bg-slate-900/95 backdrop-blur-xl border border-white/10 rounded-md shadow-2xl custom-scrollbar" }, filteredTypes.map((t, idx) => /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        key: t,
+        className: `px-3 py-2 text-xs cursor-pointer transition-colors ${idx === highlightedTypeIndex ? "bg-indigo-600 text-white" : "text-slate-300 hover:bg-white/10"}`,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          setFilterValue(t);
+          setIsTypeDropdownOpen(false);
+          setHighlightedTypeIndex(-1);
+        }
+      },
+      t
+    )))) : /* @__PURE__ */ React2.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React2.createElement(
       "div",
       {
         className: "absolute left-2 w-3 h-3 rounded-full border border-white/20 shadow-sm",
@@ -7680,7 +7720,7 @@ function ColorPicker({ color, onChange, disabled }) {
       style: { backgroundColor: preset },
       title: preset
     },
-    color.toLowerCase() === preset.toLowerCase() && /* @__PURE__ */ React12.createElement(FiCheck6, { className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`, size: 12 })
+    (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ React12.createElement(FiCheck6, { className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`, size: 12 })
   )))), /* @__PURE__ */ React12.createElement("style", null, `
         .custom-react-colorful .react-colorful {
           width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.2.5-dev.17",
+  "version": "1.2.5-dev.18",
   "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
   "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
   "license": "UNLICENSED",