Extract from 8b9e57cfb25191d6c5413f9f086ed23058bda970

lib/components/Tree/Tree.js

@@ -1,33 +1,35 @@
-"use strict";var M=Object.defineProperty,V=Object.defineProperties;var W=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var w=(e,r,o)=>r in e?M(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,q=(e,r)=>{for(var o in r||(r={}))T.call(r,o)&&w(e,o,r[o]);if(h)for(var o of h(r))y.call(r,o)&&w(e,o,r[o]);return e},F=(e,r)=>V(e,W(r));var S=(e,r)=>{var o={};for(var t in e)T.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&h)for(var t of h(e))r.indexOf(t)<0&&y.call(e,t)&&(o[t]=e[t]);return o};var l=require("react/jsx-runtime"),_=require("react"),u=require("styled-components"),a=require("../../theme/theme.js"),G=require("../../theme/common.js"),H=require("../Checkbox/Checkbox.js"),K=require("../../icons/ArrowRightIcon.js"),Q=require("../../icons/FolderIcon.js"),U=require("../../icons/FolderPlainIcon.js"),X=require("../../icons/FoldersIcon.js"),Y=require("../../icons/FoldersPlainIcon.js"),Z=require("../../icons/LoaderIcon.js");function z(e){return e&&e.__esModule?e:{default:e}}var i=z(_),n=z(u);const f=u.css`
+"use strict";var M=Object.defineProperty,W=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var y=(e,r,o)=>r in e?M(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,F=(e,r)=>{for(var o in r||(r={}))T.call(r,o)&&y(e,o,r[o]);if(h)for(var o of h(r))q.call(r,o)&&y(e,o,r[o]);return e},S=(e,r)=>W(e,G(r));var _=(e,r)=>{var o={};for(var l in e)T.call(e,l)&&r.indexOf(l)<0&&(o[l]=e[l]);if(e!=null&&h)for(var l of h(e))r.indexOf(l)<0&&q.call(e,l)&&(o[l]=e[l]);return o};var t=require("react/jsx-runtime"),z=require("react"),u=require("styled-components"),i=require("../../theme/theme.js"),H=require("../../theme/common.js"),K=require("../Checkbox/Checkbox.js"),Q=require("../../icons/ArrowRightIcon.js"),U=require("../../icons/FolderIcon.js"),X=require("../../icons/FolderPlainIcon.js"),Y=require("../../icons/FoldersIcon.js"),Z=require("../../icons/FoldersPlainIcon.js"),ee=require("../../icons/LoaderIcon.js");function R(e){return e&&e.__esModule?e:{default:e}}var a=R(z),n=R(u);const f=u.css`
   vertical-align: middle;
   transition: color 0.2s ease;
   margin-right: 5px;
-`,ee=n.default.li`
+`,re=n.default.li`
   display: block;
-  color: ${a.getColor("grey140")};
-`,re=n.default.ul`
+  color: ${i.getColor("grey140")};
+`,oe=n.default.ul`
   margin: 0 0 0 20px;
   padding: 0;
-`,oe=n.default(K.ArrowRightIcon)`
+`,le=n.default(Q.ArrowRightIcon)`
   transform: rotate(${({$isFolderOpen:e})=>e?"90":"0"}deg);
   transition: transform 0.2s ease-out;
   vertical-align: middle;
-  color: ${a.getColor("grey100")};
+  color: ${i.getColor("grey100")};
   cursor: pointer;
-`,te=n.default(Q.FolderIcon)`
+`,te=n.default(U.FolderIcon)`
   ${f}
-`,le=n.default(Y.FoldersPlainIcon)`
+`,ne=n.default(Z.FoldersPlainIcon)`
   ${f}
-  color: ${a.getColor("blue100")};
-`,ne=n.default(U.FolderPlainIcon)`
+  color: ${i.getColor("blue100")};
+`,ie=n.default(X.FolderPlainIcon)`
   ${f}
-  color: ${a.getColor("blue100")};
-`,ie=n.default(X.FoldersIcon)`
+  color: ${i.getColor("blue100")};
+`,ae=n.default(Y.FoldersIcon)`
   ${f}
-`,ae=n.default(Z.LoaderIcon)`
+`,se=n.default(ee.LoaderIcon)`
   ${f}
-  color: ${a.getColor("grey100")};
-`,se=n.default.div`
+  color: ${i.getColor("grey100")};
+`,ce=n.default.span`
+  color: ${i.getColor("grey",100)};
+`,de=n.default.div`
   height: 40px;
   line-height: 40px;
   overflow: hidden;
@@ -36,13 +38,13 @@
   align-items: center;
   padding-right: 20px;
   ${({$selected:e})=>e&&u.css`
-      color: ${a.getColor("blue100")};
+      color: ${i.getColor("blue100")};
     `}
-`,ce=n.default(H.Checkbox)`
+`,ue=n.default(K.Checkbox)`
   display: inline-block;
   vertical-align: middle;
   margin-right: 8px;
-`,de=n.default.button`
+`,fe=n.default.button`
   height: 30px;
   width: 30px;
   vertical-align: middle;
@@ -53,8 +55,8 @@
   &:not(:disabled) {
     cursor: pointer;
   }
-`,ue=n.default.button`
-  ${G.CommonStyle}
+`,ge=n.default.button`
+  ${H.CommonStyle}
   height: 30px;
   vertical-align: middle;
   background: none;
@@ -68,11 +70,11 @@
   text-align: left;
   white-space: nowrap;
   ${({$selected:e})=>e&&u.css`
-      color: ${a.getColor("blue100")};
+      color: ${i.getColor("blue100")};
     `}
   &:hover {
     ${({$selected:e})=>!e&&u.css`
-        color: ${a.getColor("grey140")};
+        color: ${i.getColor("grey140")};
       `}
   }
-`,fe=({isLoading:e,isLeaf:r,selected:o})=>e?l.jsx(ae,{size:24}):r?o?l.jsx(ne,{size:24}):l.jsx(te,{size:24}):o?l.jsx(le,{size:24}):l.jsx(ie,{size:24}),R=ge=>{var $=ge,{label:e,value:r,children:o,isLeaf:t=!1,selected:c=!1,isLoading:A=!1,selectable:N=!1,readOnly:E=!1,onChange:p,onOpen:x,onClose:m,onClick:b,defaultOpen:P=!1,_isRoot:O=!0}=$,B=S($,["label","value","children","isLeaf","selected","isLoading","selectable","readOnly","onChange","onOpen","onClose","onClick","defaultOpen","_isRoot"]);const g=[];i.default.Children.forEach(o,s=>{if(!_.isValidElement(s))throw new Error("Tree component only accepts Tree as children");g.push(s)});const[d,I]=i.default.useState(g.length>0),v=i.default.useCallback(()=>{I(!0),x&&x(r)},[x,r]),k=i.default.useCallback(()=>{I(!1),m&&m(r)},[m,r]),C=i.default.useCallback(()=>{t||(d?k():v())},[d,k,v,t]),L=i.default.useCallback(()=>{b?b(r):C()},[C,b,r]),D=i.default.useCallback((s,J)=>{p&&p(r,s,J)},[p,r]),j=l.jsxs(ee,F(q({role:"treeitem","aria-expanded":d},B),{children:[l.jsxs(se,{$selected:c,children:[l.jsx(de,{disabled:t,role:"button",onClick:C,children:!t&&l.jsx(oe,{$isFolderOpen:d,size:14})}),N&&l.jsx(ce,{checked:c,onChange:D,readOnly:E}),l.jsxs(ue,{onClick:L,$selected:c,title:e,"aria-selected":!!c,children:[l.jsx(fe,{isLoading:A,isLeaf:t,selected:c}),e]})]}),d&&!t&&g.length>0&&l.jsx(re,{role:"group",children:g.map(s=>i.default.cloneElement(s,{key:JSON.stringify(s.props.value),defaultOpen:P,_isRoot:!1}))})]}));return O?l.jsx("ul",{role:"tree",children:j}):j};R.displayName="Tree";exports.Tree=R;
+`,he=({isLoading:e,isLeaf:r,selected:o})=>e?t.jsx(se,{size:24}):r?o?t.jsx(ie,{size:24}):t.jsx(te,{size:24}):o?t.jsx(ne,{size:24}):t.jsx(ae,{size:24}),A=pe=>{var I=pe,{label:e,value:r,children:o,isLeaf:l=!1,selected:c=!1,isLoading:N=!1,selectable:E=!1,readOnly:P=!1,onChange:p,onOpen:x,onClose:m,onClick:b,defaultOpen:O=!1,_isRoot:B=!0,valueLabel:$}=I,L=_(I,["label","value","children","isLeaf","selected","isLoading","selectable","readOnly","onChange","onOpen","onClose","onClick","defaultOpen","_isRoot","valueLabel"]);const g=[];a.default.Children.forEach(o,s=>{if(!z.isValidElement(s))throw new Error("Tree component only accepts Tree as children");g.push(s)});const[d,v]=a.default.useState(g.length>0),j=a.default.useCallback(()=>{v(!0),x&&x(r)},[x,r]),k=a.default.useCallback(()=>{v(!1),m&&m(r)},[m,r]),C=a.default.useCallback(()=>{l||(d?k():j())},[d,k,j,l]),V=a.default.useCallback(()=>{b?b(r):C()},[C,b,r]),D=a.default.useCallback((s,J)=>{p&&p(r,s,J)},[p,r]),w=t.jsxs(re,S(F({role:"treeitem","aria-expanded":d},L),{children:[t.jsxs(de,{$selected:c,children:[t.jsx(fe,{disabled:l,role:"button",onClick:C,children:!l&&t.jsx(le,{$isFolderOpen:d,size:14})}),E&&t.jsx(ue,{checked:c,onChange:D,readOnly:P}),t.jsxs(ge,{onClick:V,$selected:c,title:e,"aria-selected":!!c,children:[t.jsx(he,{isLoading:N,isLeaf:l,selected:c}),e," ",$&&t.jsx(ce,{children:$})]})]}),d&&!l&&g.length>0&&t.jsx(oe,{role:"group",children:g.map(s=>a.default.cloneElement(s,{key:JSON.stringify(s.props.value),defaultOpen:O,_isRoot:!1}))})]}));return B?t.jsx("ul",{role:"tree",children:w}):w};A.displayName="Tree";exports.Tree=A;

lib/index.d.ts

@@ -1688,7 +1688,7 @@ declare const TopLeftButtons: StyledComponent<"div", DefaultTheme, {}, never>;
 declare const TopRightButtons: StyledComponent<"div", DefaultTheme, {}, never>;
 
 export declare const Tree: {
-    <T>({ label, value, children, isLeaf, selected, isLoading, selectable, readOnly, onChange, onOpen, onClose, onClick, defaultOpen, _isRoot, ...rest }: default_2.PropsWithChildren<TreeProps<T>>): default_2.JSX.Element;
+    <T>({ label, value, children, isLeaf, selected, isLoading, selectable, readOnly, onChange, onOpen, onClose, onClick, defaultOpen, _isRoot, valueLabel, ...rest }: default_2.PropsWithChildren<TreeProps<T>>): default_2.JSX.Element;
     displayName: string;
 };
 
@@ -1707,6 +1707,7 @@ declare type TreeProps<T = string> = {
     defaultOpen?: boolean;
     _isRoot?: boolean;
     children?: ReactNode;
+    valueLabel?: string;
 };
 
 export declare const UnpublishIcon: ({ title, size, color, ...props }: IconProps) => default_2.JSX.Element;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Akeneo design system",
   "files": [
     "lib"

src/components/Tree/Tree.stories.mdx

@@ -26,26 +26,29 @@ import {Tree} from './Tree.tsx';
     readOnly: {
       description: 'Does not allow checking/unchecking the box (Can only be used with `selectable`)'
     },
-    onOpen:{
+    onOpen: {
       description: 'Triggered when the user opens a node'
     },
-    onClose:{
+    onClose: {
       description: 'Triggered when the user closes a node'
     },
-    onChange:{
+    onChange: {
       description: 'Triggered when the user selects or unselects a node'
     },
-    onClick:{
+    onClick: {
       description: 'Triggered when the user clicks on a node. If not specified, a click opens or closes the node.'
     },
-    defaultOpen:{
+    defaultOpen: {
       description: 'Allow to open automatically children when present.'
     },
-    _isRoot:{
-        table:{
-          disable: true
-        }
+    _isRoot: {
+      table: {
+        disable: true
+      }
     },
+    valueLabel: {
+      description: 'Label of the value'
+    }
   }}
   args={{}}
 />

src/components/Tree/Tree.tsx

@@ -57,6 +57,10 @@ const TreeLoaderIcon = styled(LoaderIcon)`
   color: ${getColor('grey100')};
 `;
 
+const ValueLabel = styled.span`
+  color: ${getColor('grey', 100)};
+`;
+
 const TreeLine = styled.div<{$selected?: CheckboxChecked} & AkeneoThemedProps>`
   height: 40px;
   line-height: 40px;
@@ -150,6 +154,7 @@ type TreeProps<T = string> = {
   defaultOpen?: boolean;
   _isRoot?: boolean;
   children?: ReactNode;
+  valueLabel?: string;
 };
 
 const Tree = <T,>({
@@ -167,6 +172,7 @@ const Tree = <T,>({
   onClick,
   defaultOpen = false,
   _isRoot = true,
+  valueLabel,
   ...rest
 }: PropsWithChildren<TreeProps<T>>) => {
   const subTrees: ReactElement<TreeProps<T>>[] = [];
@@ -230,7 +236,7 @@ const Tree = <T,>({
 
         <LabelWithFolder onClick={handleClick} $selected={selected} title={label} aria-selected={Boolean(selected)}>
           <TreeIcon isLoading={isLoading} isLeaf={isLeaf} selected={selected} />
-          {label}
+          {label} {valueLabel && <ValueLabel>{valueLabel}</ValueLabel>}
         </LabelWithFolder>
       </TreeLine>
       {isOpen && !isLeaf && subTrees.length > 0 && (

src/components/Tree/Tree.unit.tsx

@@ -125,3 +125,8 @@ test('It throws with an unknown status', () => {
 
   mockConsole.mockRestore();
 });
+
+test('it renders a tree with a value label', () => {
+  render(<Tree value={'master'} label={'Master'} valueLabel={'[master]'} />);
+  expect(screen.getByText('[master]')).toBeInTheDocument();
+});