sbwb-ds 1.0.63 → 1.0.65

package/dist/sbwb-ds.js

@@ -52231,70 +52231,55 @@ F.p`
   color: ${({ disabled: e }) => e ? "#A6B0C4" : "#4E5666"};
   cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
 `;
-const khe = (e) => new CustomEvent("treeSelectionChanged", { detail: { selectedTitle: e } }), Wk = ({
-  node: e,
-  onClickNode: r,
-  onClickLeaf: t,
-  isOpenByDefault: n = !1
-}) => {
-  const { title: a, childrens: i, disabled: o, isLeaf: s } = e, [l, c] = Ne(n), [u, h] = Ne(!1);
+const khe = (e) => new CustomEvent("treeSelectionChanged", { detail: { selectedTitle: e } }), Wk = ({ node: e }) => {
+  const {
+    title: r,
+    childrens: t,
+    disabled: n,
+    isLeaf: a,
+    onClickNode: i,
+    onClickLeaf: o,
+    isOpenByDefault: s,
+    isSelectedByDefault: l
+  } = e, c = (C) => {
+    var y;
+    return C.isSelectedByDefault ? !0 : ((y = C.childrens) == null ? void 0 : y.some(c)) ?? !1;
+  }, u = s || c(e), [h, f] = Ne(u), [d, v] = Ne(l || !1);
   return It(() => {
-    const v = (p) => {
-      a !== p.detail.selectedTitle && h(!1);
+    const C = (y) => {
+      a && r !== y.detail.selectedTitle && v(!1);
     };
-    return window.addEventListener("treeSelectionChanged", v), () => {
-      window.removeEventListener("treeSelectionChanged", v);
+    return window.addEventListener("treeSelectionChanged", C), () => {
+      window.removeEventListener("treeSelectionChanged", C);
     };
-  }, [a]), /* @__PURE__ */ fe(Mhe, { children: [
+  }, [r, a]), /* @__PURE__ */ fe(Mhe, { children: [
     /* @__PURE__ */ fe(Lhe, { onClick: () => {
-      o || (h(!0), window.dispatchEvent(khe(a)), s ? t && t(e) : (r && r(e), c(!l)));
+      n || (a ? (v(!0), window.dispatchEvent(khe(r)), o && o(e)) : (i && i(e), f(!h)));
     }, children: [
-      (() => s ? /* @__PURE__ */ R(
+      (() => a ? /* @__PURE__ */ R(
         Qa,
         {
-          iconName: u ? "FiberManualRecordFill1Sm" : "FiberManualRecordFILL0Sm",
-          color: o ? "#A6B0C4" : "#4E5666",
-          customStyles: o ? { cursor: "not-allowed" } : {},
+          iconName: d ? "FiberManualRecordFill1Sm" : "FiberManualRecordFILL0Sm",
+          color: n ? "#A6B0C4" : "#4E5666",
+          customStyles: n ? { cursor: "not-allowed" } : {},
           width: "16px",
           height: "16px"
         }
       ) : /* @__PURE__ */ R(
         Qa,
         {
-          iconName: l ? "DoNotDisturbOnFill0Sm" : "AddCircleSm",
-          color: o ? "#A6B0C4" : "#4E5666",
-          customStyles: o ? { cursor: "not-allowed" } : {},
+          iconName: h ? "DoNotDisturbOnFill0Sm" : "AddCircleSm",
+          color: n ? "#A6B0C4" : "#4E5666",
+          customStyles: n ? { cursor: "not-allowed" } : {},
           width: "16px",
           height: "16px"
         }
       ))(),
-      /* @__PURE__ */ R(Vhe, { disabled: o, children: a })
+      /* @__PURE__ */ R(Vhe, { disabled: n, children: r })
     ] }),
-    l && i && /* @__PURE__ */ R(Ehe, { children: i.map((v, p) => /* @__PURE__ */ R(
-      Wk,
-      {
-        node: v,
-        onClickNode: r,
-        onClickLeaf: t
-      },
-      v.title + p
-    )) })
+    h && t && /* @__PURE__ */ R(Ehe, { children: t.map((C, y) => /* @__PURE__ */ R(Wk, { node: C }, C.title + y)) })
   ] });
-}, zme = ({
-  nodes: e,
-  onClickNode: r,
-  onClickLeaf: t,
-  isOpenByDefault: n = !1
-}) => /* @__PURE__ */ R("div", { children: e.map((a, i) => /* @__PURE__ */ R(
-  Wk,
-  {
-    node: a,
-    onClickNode: r,
-    onClickLeaf: t,
-    isOpenByDefault: n
-  },
-  a.title + i
-)) }), Dhe = (e, r, t) => (It(() => {
+}, zme = ({ nodes: e }) => /* @__PURE__ */ R("div", { children: e.map((r, t) => /* @__PURE__ */ R(Wk, { node: r }, r.title + t)) }), Dhe = (e, r, t) => (It(() => {
   let n;
   return r && e && (n = setTimeout(() => {
     t && t();

package/dist/sbwb-ds.umd.cjs

@@ -2290,7 +2290,7 @@ echarts.use([`+T+"]);":"Unknown series "+k))}return}if(h==="tooltip"){if(w){proc
   margin-left: 8px;
   color: ${({disabled:e})=>e?"#A6B0C4":"#4E5666"};
   cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
-`;const p2e=e=>new CustomEvent("treeSelectionChanged",{detail:{selectedTitle:e}}),ZV=({node:e,onClickNode:r,onClickLeaf:t,isOpenByDefault:n=!1})=>{const{title:a,childrens:i,disabled:o,isLeaf:s}=e,[l,c]=$.useState(n),[u,h]=$.useState(!1);return $.useEffect(()=>{const v=p=>{a!==p.detail.selectedTitle&&h(!1)};return window.addEventListener("treeSelectionChanged",v),()=>{window.removeEventListener("treeSelectionChanged",v)}},[a]),he(h2e,{children:[he(f2e,{onClick:()=>{o||(h(!0),window.dispatchEvent(p2e(a)),s?t&&t(e):(r&&r(e),c(!l)))},children:[(()=>s?N(ra,{iconName:u?"FiberManualRecordFill1Sm":"FiberManualRecordFILL0Sm",color:o?"#A6B0C4":"#4E5666",customStyles:o?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}):N(ra,{iconName:l?"DoNotDisturbOnFill0Sm":"AddCircleSm",color:o?"#A6B0C4":"#4E5666",customStyles:o?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}))(),N(v2e,{disabled:o,children:a})]}),l&&i&&N(d2e,{children:i.map((v,p)=>N(ZV,{node:v,onClickNode:r,onClickLeaf:t},v.title+p))})]})},g2e=({nodes:e,onClickNode:r,onClickLeaf:t,isOpenByDefault:n=!1})=>N("div",{children:e.map((a,i)=>N(ZV,{node:a,onClickNode:r,onClickLeaf:t,isOpenByDefault:n},a.title+i))}),C2e=(e,r,t)=>($.useEffect(()=>{let n;return r&&e&&(n=setTimeout(()=>{t&&t()},r)),()=>{n&&clearTimeout(n)}},[e,r,t]),{}),m2e=z.div`
+`;const p2e=e=>new CustomEvent("treeSelectionChanged",{detail:{selectedTitle:e}}),ZV=({node:e})=>{const{title:r,childrens:t,disabled:n,isLeaf:a,onClickNode:i,onClickLeaf:o,isOpenByDefault:s,isSelectedByDefault:l}=e,c=C=>{var y;return C.isSelectedByDefault?!0:((y=C.childrens)==null?void 0:y.some(c))??!1},u=s||c(e),[h,f]=$.useState(u),[d,v]=$.useState(l||!1);return $.useEffect(()=>{const C=y=>{a&&r!==y.detail.selectedTitle&&v(!1)};return window.addEventListener("treeSelectionChanged",C),()=>{window.removeEventListener("treeSelectionChanged",C)}},[r,a]),he(h2e,{children:[he(f2e,{onClick:()=>{n||(a?(v(!0),window.dispatchEvent(p2e(r)),o&&o(e)):(i&&i(e),f(!h)))},children:[(()=>a?N(ra,{iconName:d?"FiberManualRecordFill1Sm":"FiberManualRecordFILL0Sm",color:n?"#A6B0C4":"#4E5666",customStyles:n?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}):N(ra,{iconName:h?"DoNotDisturbOnFill0Sm":"AddCircleSm",color:n?"#A6B0C4":"#4E5666",customStyles:n?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}))(),N(v2e,{disabled:n,children:r})]}),h&&t&&N(d2e,{children:t.map((C,y)=>N(ZV,{node:C},C.title+y))})]})},g2e=({nodes:e})=>N("div",{children:e.map((r,t)=>N(ZV,{node:r},r.title+t))}),C2e=(e,r,t)=>($.useEffect(()=>{let n;return r&&e&&(n=setTimeout(()=>{t&&t()},r)),()=>{n&&clearTimeout(n)}},[e,r,t]),{}),m2e=z.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;

package/dist/src/presentation/components/atoms/Tree/index.d.ts

@@ -4,18 +4,16 @@ export interface TreeItem {
     childrens?: TreeItem[];
     disabled?: boolean;
     isLeaf?: boolean;
-}
-export interface TreeProps {
-    node: TreeItem;
     onClickNode?: (node: TreeItem) => void;
     onClickLeaf?: (node: TreeItem) => void;
     isOpenByDefault?: boolean;
+    isSelectedByDefault?: boolean;
+}
+export interface TreeProps {
+    node: TreeItem;
 }
 export interface TreeListProps {
     nodes: TreeItem[];
-    onClickNode?: (node: TreeItem) => void;
-    onClickLeaf?: (node: TreeItem) => void;
-    isOpenByDefault?: boolean;
 }
 declare const TreeList: React.FC<TreeListProps>;
 export default TreeList;

package/dist/src/presentation/components/atoms/Tree/index.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/presentation/components/atoms/Tree/Tree.stories.tsx

@@ -22,9 +22,14 @@ export default {
 const treeDataArray = [
   {
     title: 'Root Node 1',
+    isOpenByDefault: true,
+    onClickNode: (node) => console.log('Clicked Node:', node.title),
+    onClickLeaf: (node) => console.log('Clicked Leaf:', node.title),
     childrens: [
       {
-        title: 'Node 1 - Depth 1',
+        title: 'Node 1 - Depth 11',
+        onClickNode: (node) => console.log('Clicked Node:', node.title),
+
         childrens: [
           {
             title: 'Node 1 - Depth 2',
@@ -36,6 +41,7 @@ const treeDataArray = [
               {
                 title: 'Node 2 - Depth 3',
                 disabled: true,
+                isLeaf: true,
               },
             ],
           },
@@ -45,10 +51,20 @@ const treeDataArray = [
   },
   {
     title: 'Root Node 2',
+    isOpenByDefault: false,
+    onClickNode: (node) => console.log('Clicked Node:', node.title),
+    onClickLeaf: (node) => console.log('Clicked Leaf:', node.title),
     childrens: [
       {
         title: 'Node 1 - Depth 1 (Root 2)',
         isLeaf: true,
+        onClickLeaf: (node) => console.log('Clicked Leaf:', node.title),
+        isSelectedByDefault: true,
+      },
+      {
+        title: 'Node 2 - Depth 1 (Root 2)',
+        isLeaf: true,
+        onClickLeaf: (node) => console.log('Clicked Leaf:', node.title),
       },
     ],
   },
@@ -56,17 +72,7 @@ const treeDataArray = [
 
 const Tree = (args) => (
   <div>
-    <TreeList
-      {...args}
-      nodes={treeDataArray}
-      isOpenByDefault={true}
-      onClickNode={(value) => {
-        console.log('onClickNode', value);
-      }}
-      onClickLeaf={(value) => {
-        console.log('onClickLeaf', value);
-      }}
-    />
+    <TreeList {...args} nodes={treeDataArray} />
   </div>
 );
 

package/src/presentation/components/atoms/Tree/index.spec.tsx

@@ -1,30 +1,65 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import TreeList from './';
+import TreeList, { TreeItem } from './';
+import '@testing-library/jest-dom';
 
-test('Deve renderizar o componente TreeList', () => {
-  const nodes = [
+test('Should render multiple nodes in TreeList', () => {
+  const nodes: TreeItem[] = [{ title: 'Node 1' }, { title: 'Node 2' }];
+  const { getByText } = render(<TreeList nodes={nodes} />);
+
+  expect(getByText('Node 1')).toBeInTheDocument();
+  expect(getByText('Node 2')).toBeInTheDocument();
+});
+
+test('Should call onClickLeaf when a leaf node is clicked', () => {
+  const onClickLeaf = jest.fn();
+  const nodes: TreeItem[] = [{ title: 'Leaf Node', isLeaf: true, onClickLeaf }];
+  const { getByText } = render(<TreeList nodes={nodes} />);
+
+  fireEvent.click(getByText('Leaf Node'));
+
+  expect(onClickLeaf).toHaveBeenCalledWith(nodes[0]);
+});
+
+test('Should not call onClickNode or onClickLeaf when a disabled node is clicked', () => {
+  const onClickNode = jest.fn();
+  const onClickLeaf = jest.fn();
+  const nodes: TreeItem[] = [
+    { title: 'Disabled Node', disabled: true, onClickNode, onClickLeaf },
+  ];
+  const { getByText } = render(<TreeList nodes={nodes} />);
+
+  fireEvent.click(getByText('Disabled Node'));
+
+  expect(onClickNode).not.toHaveBeenCalled();
+  expect(onClickLeaf).not.toHaveBeenCalled();
+});
+
+test('Should render child nodes when a parent node is clicked', () => {
+  const nodes: TreeItem[] = [
     {
-      title: 'Nó de teste',
+      title: 'Parent Node',
+      childrens: [{ title: 'Child Node' }],
     },
   ];
-  render(<TreeList nodes={nodes} />);
+  const { getByText } = render(<TreeList nodes={nodes} />);
+
+  fireEvent.click(getByText('Parent Node'));
+
+  expect(getByText('Child Node')).toBeInTheDocument();
 });
 
-test('Deve chamar a função onClickNode quando o nó for clicado', () => {
-  const nodes = [
+test('Should not render child nodes when a parent node is clicked if it is disabled', () => {
+  const nodes: TreeItem[] = [
     {
-      title: 'Nó de teste',
+      title: 'Parent Node',
+      disabled: true,
+      childrens: [{ title: 'Child Node' }],
     },
   ];
-  const onClickNode = jest.fn();
-  const { getByText } = render(
-    <TreeList nodes={nodes} onClickNode={onClickNode} />
-  );
-
-  const titleElement = getByText('Nó de teste');
+  const { queryByText, getByText } = render(<TreeList nodes={nodes} />);
 
-  fireEvent.click(titleElement);
+  fireEvent.click(getByText('Parent Node'));
 
-  expect(onClickNode).toHaveBeenCalledWith(nodes[0]);
+  expect(queryByText('Child Node')).toBeNull();
 });

package/src/presentation/components/atoms/Tree/index.tsx

@@ -7,31 +7,46 @@ export interface TreeItem {
   childrens?: TreeItem[];
   disabled?: boolean;
   isLeaf?: boolean;
+  onClickNode?: (node: TreeItem) => void;
+  onClickLeaf?: (node: TreeItem) => void;
+  isOpenByDefault?: boolean;
+  isSelectedByDefault?: boolean;
 }
 
 export interface TreeProps {
   node: TreeItem;
-  onClickNode?: (node: TreeItem) => void;
-  onClickLeaf?: (node: TreeItem) => void;
-  isOpenByDefault?: boolean;
 }
 
 const treeSelectionEvent = (selectedTitle) =>
   new CustomEvent('treeSelectionChanged', { detail: { selectedTitle } });
 
-const Tree: React.FC<TreeProps> = ({
-  node,
-  onClickNode,
-  onClickLeaf,
-  isOpenByDefault = false,
-}) => {
-  const { title, childrens, disabled, isLeaf } = node;
-  const [isOpen, setIsOpen] = useState(isOpenByDefault);
-  const [isSelected, setIsSelected] = useState(false);
+const Tree: React.FC<TreeProps> = ({ node }) => {
+  const {
+    title,
+    childrens,
+    disabled,
+    isLeaf,
+    onClickNode,
+    onClickLeaf,
+    isOpenByDefault,
+    isSelectedByDefault,
+  } = node;
+
+  const isAnyDescendantSelectedByDefault = (node) => {
+    if (node.isSelectedByDefault) {
+      return true;
+    }
+    return node.childrens?.some(isAnyDescendantSelectedByDefault) ?? false;
+  };
+
+  const initialIsOpen =
+    isOpenByDefault || isAnyDescendantSelectedByDefault(node);
+  const [isOpen, setIsOpen] = useState(initialIsOpen);
+  const [isSelected, setIsSelected] = useState(isSelectedByDefault || false);
 
   useEffect(() => {
     const handleSelectionChange = (event) => {
-      if (title !== event.detail.selectedTitle) {
+      if (isLeaf && title !== event.detail.selectedTitle) {
         setIsSelected(false);
       }
     };
@@ -41,14 +56,13 @@ const Tree: React.FC<TreeProps> = ({
     return () => {
       window.removeEventListener('treeSelectionChanged', handleSelectionChange);
     };
-  }, [title]);
+  }, [title, isLeaf]);
 
   const handleClick = () => {
     if (!disabled) {
-      setIsSelected(true);
-      window.dispatchEvent(treeSelectionEvent(title));
-
       if (isLeaf) {
+        setIsSelected(true);
+        window.dispatchEvent(treeSelectionEvent(title));
         if (onClickLeaf) onClickLeaf(node);
       } else {
         if (onClickNode) onClickNode(node);
@@ -92,12 +106,7 @@ const Tree: React.FC<TreeProps> = ({
       {isOpen && childrens && (
         <C.Content>
           {childrens.map((child, index) => (
-            <Tree
-              key={child.title + index}
-              node={child}
-              onClickNode={onClickNode}
-              onClickLeaf={onClickLeaf}
-            />
+            <Tree key={child.title + index} node={child} />
           ))}
         </C.Content>
       )}
@@ -107,27 +116,13 @@ const Tree: React.FC<TreeProps> = ({
 
 export interface TreeListProps {
   nodes: TreeItem[];
-  onClickNode?: (node: TreeItem) => void;
-  onClickLeaf?: (node: TreeItem) => void;
-  isOpenByDefault?: boolean;
 }
 
-const TreeList: React.FC<TreeListProps> = ({
-  nodes,
-  onClickNode,
-  onClickLeaf,
-  isOpenByDefault = false,
-}) => {
+const TreeList: React.FC<TreeListProps> = ({ nodes }) => {
   return (
     <div>
       {nodes.map((node, index) => (
-        <Tree
-          key={node.title + index}
-          node={node}
-          onClickNode={onClickNode}
-          onClickLeaf={onClickLeaf}
-          isOpenByDefault={isOpenByDefault}
-        />
+        <Tree key={node.title + index} node={node} />
       ))}
     </div>
   );