akeneo-design-system 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Tree/Tree.js +23 -25
- package/lib/index.d.ts +1 -2
- package/package.json +1 -1
|
@@ -1,35 +1,33 @@
|
|
|
1
|
-
"use strict";var M=Object.defineProperty,
|
|
1
|
+
"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`
|
|
2
2
|
vertical-align: middle;
|
|
3
3
|
transition: color 0.2s ease;
|
|
4
4
|
margin-right: 5px;
|
|
5
|
-
`,
|
|
5
|
+
`,ee=n.default.li`
|
|
6
6
|
display: block;
|
|
7
|
-
color: ${
|
|
8
|
-
`,
|
|
7
|
+
color: ${a.getColor("grey140")};
|
|
8
|
+
`,re=n.default.ul`
|
|
9
9
|
margin: 0 0 0 20px;
|
|
10
10
|
padding: 0;
|
|
11
|
-
`,
|
|
11
|
+
`,oe=n.default(K.ArrowRightIcon)`
|
|
12
12
|
transform: rotate(${({$isFolderOpen:e})=>e?"90":"0"}deg);
|
|
13
13
|
transition: transform 0.2s ease-out;
|
|
14
14
|
vertical-align: middle;
|
|
15
|
-
color: ${
|
|
15
|
+
color: ${a.getColor("grey100")};
|
|
16
16
|
cursor: pointer;
|
|
17
|
-
`,te=n.default(
|
|
17
|
+
`,te=n.default(Q.FolderIcon)`
|
|
18
18
|
${f}
|
|
19
|
-
`,
|
|
19
|
+
`,le=n.default(Y.FoldersPlainIcon)`
|
|
20
20
|
${f}
|
|
21
|
-
color: ${
|
|
22
|
-
`,
|
|
21
|
+
color: ${a.getColor("blue100")};
|
|
22
|
+
`,ne=n.default(U.FolderPlainIcon)`
|
|
23
23
|
${f}
|
|
24
|
-
color: ${
|
|
25
|
-
`,
|
|
24
|
+
color: ${a.getColor("blue100")};
|
|
25
|
+
`,ie=n.default(X.FoldersIcon)`
|
|
26
26
|
${f}
|
|
27
|
-
`,
|
|
27
|
+
`,ae=n.default(Z.LoaderIcon)`
|
|
28
28
|
${f}
|
|
29
|
-
color: ${
|
|
30
|
-
`,
|
|
31
|
-
color: ${i.getColor("grey",100)};
|
|
32
|
-
`,de=n.default.div`
|
|
29
|
+
color: ${a.getColor("grey100")};
|
|
30
|
+
`,se=n.default.div`
|
|
33
31
|
height: 40px;
|
|
34
32
|
line-height: 40px;
|
|
35
33
|
overflow: hidden;
|
|
@@ -38,13 +36,13 @@
|
|
|
38
36
|
align-items: center;
|
|
39
37
|
padding-right: 20px;
|
|
40
38
|
${({$selected:e})=>e&&u.css`
|
|
41
|
-
color: ${
|
|
39
|
+
color: ${a.getColor("blue100")};
|
|
42
40
|
`}
|
|
43
|
-
`,
|
|
41
|
+
`,ce=n.default(H.Checkbox)`
|
|
44
42
|
display: inline-block;
|
|
45
43
|
vertical-align: middle;
|
|
46
44
|
margin-right: 8px;
|
|
47
|
-
`,
|
|
45
|
+
`,de=n.default.button`
|
|
48
46
|
height: 30px;
|
|
49
47
|
width: 30px;
|
|
50
48
|
vertical-align: middle;
|
|
@@ -55,8 +53,8 @@
|
|
|
55
53
|
&:not(:disabled) {
|
|
56
54
|
cursor: pointer;
|
|
57
55
|
}
|
|
58
|
-
`,
|
|
59
|
-
${
|
|
56
|
+
`,ue=n.default.button`
|
|
57
|
+
${G.CommonStyle}
|
|
60
58
|
height: 30px;
|
|
61
59
|
vertical-align: middle;
|
|
62
60
|
background: none;
|
|
@@ -70,11 +68,11 @@
|
|
|
70
68
|
text-align: left;
|
|
71
69
|
white-space: nowrap;
|
|
72
70
|
${({$selected:e})=>e&&u.css`
|
|
73
|
-
color: ${
|
|
71
|
+
color: ${a.getColor("blue100")};
|
|
74
72
|
`}
|
|
75
73
|
&:hover {
|
|
76
74
|
${({$selected:e})=>!e&&u.css`
|
|
77
|
-
color: ${
|
|
75
|
+
color: ${a.getColor("grey140")};
|
|
78
76
|
`}
|
|
79
77
|
}
|
|
80
|
-
`,
|
|
78
|
+
`,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;
|
package/lib/index.d.ts
CHANGED
|
@@ -1688,7 +1688,7 @@ declare const TopLeftButtons: StyledComponent<"div", DefaultTheme, {}, never>;
|
|
|
1688
1688
|
declare const TopRightButtons: StyledComponent<"div", DefaultTheme, {}, never>;
|
|
1689
1689
|
|
|
1690
1690
|
export declare const Tree: {
|
|
1691
|
-
<T>({ label, value, children, isLeaf, selected, isLoading, selectable, readOnly, onChange, onOpen, onClose, onClick, defaultOpen, _isRoot,
|
|
1691
|
+
<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;
|
|
1692
1692
|
displayName: string;
|
|
1693
1693
|
};
|
|
1694
1694
|
|
|
@@ -1707,7 +1707,6 @@ declare type TreeProps<T = string> = {
|
|
|
1707
1707
|
defaultOpen?: boolean;
|
|
1708
1708
|
_isRoot?: boolean;
|
|
1709
1709
|
children?: ReactNode;
|
|
1710
|
-
valueLabel?: string;
|
|
1711
1710
|
};
|
|
1712
1711
|
|
|
1713
1712
|
export declare const UnpublishIcon: ({ title, size, color, ...props }: IconProps) => default_2.JSX.Element;
|