pixel-react 1.10.10-4 → 1.10.12

package/lib/index.js

@@ -14587,7 +14587,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
   }), document.body);
 });
 
-var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n  /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n  background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n  height: 14px;\n  width: 14px;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 600px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n  transition: transform 0.3s ease;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
+var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n  /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n  background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n  height: 14px;\n  width: 14px;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-tree-row-action .ff-icon-container {\n  height: 14px !important;\n  width: 14px !important;\n  padding: 2px 4px;\n}\n.tree-table .ff-table-tree-row .table-tree-row-action .ff-add-button-container {\n  height: 20px;\n  width: 22px;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 600px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n  transition: transform 0.3s ease;\n  cursor: pointer;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
 styleInject(css_248z$R);
 
 const TableHead = /*#__PURE__*/React.memo(({
@@ -14696,7 +14696,7 @@ const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
   if (checkEmpty(parentSiblings)) {
     isLastNode = false;
     if (!isNaN(level)) {
-      siblingsArray = Array(level - 1).fill(true);
+      siblingsArray = Array(level).fill(true);
     }
   }
   return jsxRuntime.jsx("div", {
@@ -15032,15 +15032,15 @@ const TreeTable = ({
     if (expanding) return;
     setExpanding(node.key);
     onExpand?.(node, index);
-  }, [onExpand]);
+  }, [onExpand, expanding]);
   const handleCheckBoxChange = React.useCallback((e, node) => {
     if (expanding) return;
     onChange?.(e, node);
-  }, [onChange]);
+  }, [onChange, expanding]);
   const handleRowClick = React.useCallback((e, node) => {
     if (expanding) return;
     onClick?.(e, node);
-  }, [onClick]);
+  }, [onClick, expanding]);
   return jsxRuntime.jsx("div", {
     className: "tree-table-wrap",
     children: jsxRuntime.jsx("div", {