@cgi-learning-hub/ui 1.4.0-dev.1741974011 → 1.4.0-dev.1741982096

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.
Files changed (7) hide show
  1. package/dist/components/TreeView/TreeView.cjs.js +9 -9
  2. package/dist/components/TreeView/TreeView.d.ts +3 -3
  3. package/dist/components/TreeView/TreeView.es.js +822 -838
  4. package/dist/components/stories/TreeView.stories.cjs.js +8 -7
  5. package/dist/components/stories/TreeView.stories.d.ts +2 -1
  6. package/dist/components/stories/TreeView.stories.es.js +164 -85
  7. package/package.json +1 -1
package/dist/components/stories/TreeView.stories.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),c=require("../../createSvgIcon-DJMYlO0S.cjs"),r=require("react"),e=require("../TreeView/TreeView.cjs.js"),u=require("../../Box-DYA49L7w.cjs"),m=require("../../Typography-DPij13XT.cjs"),l=c.createSvgIcon(n.jsx("path",{d:"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"}),"Bookmark"),p=c.createSvgIcon(n.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"}),"Person"),I={title:"Components/TreeView",component:e.default,argTypes:{items:{description:"Liste des éléments à afficher dans le TreeView.",control:"object",table:{type:{summary:"CustomTreeViewItem[]"}}},onItemSelect:{description:"Fonction appelée lorsqu'un élément est sélectionné.",control:"none",table:{type:{summary:"(event: React.SyntheticEvent, itemId: string) => void"}}},expandedItemId:{description:"ID de l'élément à développer automatiquement.",control:"text",table:{type:{summary:"string"}}},iconColor:{description:"Couleur des icônes.",control:"select",options:["primary","secondary","success","error","info","warning"],defaultValue:"primary",table:{type:{summary:"string"},defaultValue:{summary:"primary"}}}},parameters:{docs:{description:{component:`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),m=require("../../createSvgIcon-DJMYlO0S.cjs"),l=require("react"),e=require("../TreeView/TreeView.cjs.js"),a=require("../../Box-DYA49L7w.cjs"),d=require("../../Typography-DPij13XT.cjs"),p=m.createSvgIcon(t.jsx("path",{d:"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"}),"Bookmark"),T=m.createSvgIcon(t.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"}),"Person"),y={title:"Components/TreeView",component:e.default,argTypes:{items:{description:"Liste des éléments à afficher dans le TreeView.",control:"object",table:{type:{summary:"CustomTreeViewItem[]"}}},selectedItemId:{description:"Identifiant de l'élément sélectionné.",control:"text",table:{type:{summary:"string"}}},handleSelectedItemChange:{description:"Fonction appelée lorsqu'un élément est sélectionné.",table:{type:{summary:"(event: React.SyntheticEvent, itemIds: string | null) => void"}}},iconColor:{description:"Couleur des icônes.",control:"select",options:["primary","secondary","success","error","info","warning"],defaultValue:"primary",table:{type:{summary:"string"},defaultValue:{summary:"primary"}}}},parameters:{docs:{description:{component:`
2
2
  ## TreeView
3
3
 
4
4
  Un composant pour afficher des données hiérarchiques sous forme d'arborescence.
@@ -15,20 +15,21 @@ Vous pouvez également passer directement un composant SvgIcon comme valeur de \
15
15
 
16
16
  ### Navigation et sélection
17
17
 
18
- - \`onItemSelect\`: Permet de réagir quand un utilisateur clique sur un élément
19
- - \`expandedItemId\`: Permet d'ouvrir automatiquement un dossier spécifique
18
+ - \`handleSelectedItemChange\`: Permet de réagir quand un utilisateur clique sur un élément
19
+ - \`selectedItemId\`: Permet de définir l'élément sélectionné
20
20
 
21
21
  ### Structure des données
22
22
 
23
23
  Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
24
24
 
25
25
  \`\`\`typescript
26
- interface CustomTreeViewItem extends TreeViewBaseItem {
27
- id: string; // Identifiant unique de l'élément (obligatoire)
26
+ interface CustomTreeViewItemProps {
27
+ internalId: string; // Identifiant unique de l'élément (obligatoire)
28
28
  label: string; // Libellé à afficher (obligatoire)
29
- children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
30
29
  iconType?: IconType; // Type d'icône (facultatif)
31
30
  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
32
31
  }
32
+
33
+ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
33
34
  \`\`\`
34
- `}}}},T=({items:o})=>{const[t,a]=r.useState(void 0),d=r.useCallback((O,s)=>{console.log(`Élément sélectionné: ${s}`),a(s)},[]);return n.jsxs(u.Box,{children:[n.jsxs(m.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Sélection actuelle: ",t||"Aucun élément sélectionné"]}),n.jsx(e.default,{items:o,onItemSelect:d,expandedItemId:t})]})},i=[{id:"documents",label:"Mes formulaires",iconType:e.ICON_TYPE.FOLDER,children:[{id:"folder1",label:"Premier dossier",iconType:e.ICON_TYPE.FOLDER,children:[{id:"subfolder1",label:"Sous-dossier 1",iconType:e.ICON_TYPE.FOLDER},{id:"subfolder2",label:"Sous-dossier 2",iconType:e.ICON_TYPE.FOLDER}]},{id:"folder2",label:"Deuxième dossier",iconType:e.ICON_TYPE.FOLDER},{id:"folder3",label:"Troisième dossier",iconType:e.ICON_TYPE.FOLDER}]},{id:"shared",label:"Formulaires partagés avec moi",iconType:e.ICON_TYPE.SHARE},{id:"trash",label:"Corbeille",iconType:e.ICON_TYPE.TRASH}],y=[{id:"bookmarks",label:"Favoris",iconType:l,children:[{id:"important",label:"Important",iconType:e.ICON_TYPE.CUSTOM,customIcon:p}]},...i],v={render:()=>n.jsx(T,{items:i}),parameters:{docs:{description:{story:"Exemple de base avec des icônes standard et démonstration de sélection."}}}},b={args:{items:i,expandedItemId:"subfolder1",onItemSelect:(o,t)=>{console.log(`Élément sélectionné: ${t}`)}},parameters:{docs:{description:{story:"Exemple avec développement automatique d'un dossier spécifique."}}}},E={args:{items:y,onItemSelect:(o,t)=>{console.log(`Élément sélectionné: ${t}`)}},parameters:{docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."}}}},f={args:{items:[{id:"root",label:"Structure imbriquée complexe",iconType:e.ICON_TYPE.FOLDER,children:[{id:"level1-1",label:"Niveau 1.1",iconType:e.ICON_TYPE.FOLDER,children:[{id:"level2-1",label:"Niveau 2.1",iconType:e.ICON_TYPE.FOLDER,children:[{id:"level3-1",label:"Niveau 3.1",iconType:e.ICON_TYPE.FOLDER},{id:"level3-2",label:"Niveau 3.2",iconType:e.ICON_TYPE.SHARE}]},{id:"level2-2",label:"Niveau 2.2",iconType:e.ICON_TYPE.TRASH}]},{id:"level1-2",label:"Niveau 1.2",iconType:e.ICON_TYPE.CUSTOM,customIcon:l}]}],onItemSelect:(o,t)=>{console.log(`Élément sélectionné: ${t}`)}},parameters:{docs:{description:{story:"Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau."}}}};exports.AvecIconesPersonnalisees=E;exports.Default=v;exports.StructureImbriquee=f;exports.WithExplicitExpand=b;exports.default=I;
35
+ `}}}},f=({items:i})=>{const[n,r]=l.useState(""),s=l.useCallback((c,o)=>{console.log(`Élément sélectionné: ${o}`),o&&r(o)},[]);return t.jsxs(a.Box,{children:[t.jsxs(d.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Sélection actuelle: ",n||"Aucun élément sélectionné"]}),t.jsx(e.default,{items:i,selectedItemId:n,handleSelectedItemChange:s})]})},u=[{internalId:"documents",label:"Mes formulaires",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"folder1",label:"Premier dossier",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"subfolder1",label:"Sous-dossier 1",iconType:e.ICON_TYPE.FOLDER},{internalId:"subfolder2",label:"Sous-dossier 2",iconType:e.ICON_TYPE.FOLDER}]},{internalId:"folder2",label:"Deuxième dossier",iconType:e.ICON_TYPE.FOLDER},{internalId:"folder3",label:"Troisième dossier",iconType:e.ICON_TYPE.FOLDER}]},{internalId:"shared",label:"Formulaires partagés avec moi",iconType:e.ICON_TYPE.SHARE},{internalId:"trash",label:"Corbeille",iconType:e.ICON_TYPE.TRASH}],b=[{internalId:"bookmarks",label:"Favoris",iconType:p,children:[{internalId:"important",label:"Important",iconType:e.ICON_TYPE.CUSTOM,customIcon:T}]},...u],v={render:()=>t.jsx(f,{items:u}),parameters:{docs:{description:{story:"Exemple de base avec des icônes standard et démonstration de sélection."}}}},g={args:{items:u,selectedItemId:"folder1",handleSelectedItemChange:(i,n)=>{console.log(`Élément sélectionné: ${n}`)}},parameters:{docs:{description:{story:"Exemple avec sélection explicite d'un élément spécifique."}}}},h={render:()=>{const[i,n]=l.useState("bookmarks"),r=l.useCallback((s,c)=>{console.log(`Élément sélectionné: ${c}`),c&&n(c)},[]);return t.jsxs(a.Box,{children:[t.jsxs(d.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Élément sélectionné: ",i]}),t.jsx(e.default,{items:b,selectedItemId:i,handleSelectedItemChange:r})]})},parameters:{docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées avec gestion de la sélection."}}}},C={render:()=>{const i=[{internalId:"root",label:"Structure imbriquée complexe",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"level1-1",label:"Niveau 1.1",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"level2-1",label:"Niveau 2.1",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"level3-1",label:"Niveau 3.1",iconType:e.ICON_TYPE.FOLDER},{internalId:"level3-2",label:"Niveau 3.2",iconType:e.ICON_TYPE.SHARE}]},{internalId:"level2-2",label:"Niveau 2.2",iconType:e.ICON_TYPE.TRASH}]},{internalId:"level1-2",label:"Niveau 1.2",iconType:e.ICON_TYPE.CUSTOM,customIcon:p}]}],[n,r]=l.useState("level2-1"),s=l.useCallback((c,o)=>{console.log(`Élément sélectionné: ${o}`),o&&r(o)},[]);return t.jsxs(a.Box,{children:[t.jsxs(d.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Niveau sélectionné: ",n]}),t.jsx(e.default,{items:i,selectedItemId:n,handleSelectedItemChange:s,iconColor:"info"})]})},parameters:{docs:{description:{story:"Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau et gestion de la sélection."}}}},S={render:()=>{const i=["primary","secondary","success","error","info","warning"],[n,r]=l.useState({primary:"",secondary:"",success:"",error:"",info:"",warning:""});return t.jsx(a.Box,{sx:{display:"flex",flexDirection:"column",gap:3},children:i.map(s=>t.jsxs(a.Box,{children:[t.jsxs(d.Typography,{variant:"subtitle1",gutterBottom:!0,children:["TreeView avec icônes ",s," - Sélection:"," ",n[s]||"aucune"]}),t.jsx(e.default,{items:u,selectedItemId:n[s],handleSelectedItemChange:(c,o)=>{o&&r(I=>({...I,[s]:o}))},iconColor:s})]},s))})},parameters:{docs:{description:{story:"Démonstration des différentes options de couleurs disponibles pour les icônes avec gestion indépendante des sélections."}}}};exports.AvecIconesPersonnalisees=h;exports.Default=v;exports.MultipleColors=S;exports.StructureImbriquee=C;exports.WithExplicitSelection=g;exports.default=y;
package/dist/components/stories/TreeView.stories.d.ts CHANGED
@@ -4,6 +4,7 @@ declare const meta: Meta<typeof TreeView>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof TreeView>;
6
6
  export declare const Default: Story;
7
- export declare const WithExplicitExpand: Story;
7
+ export declare const WithExplicitSelection: Story;
8
8
  export declare const AvecIconesPersonnalisees: Story;
9
9
  export declare const StructureImbriquee: Story;
10
+ export declare const MultipleColors: Story;
package/dist/components/stories/TreeView.stories.es.js CHANGED
@@ -1,16 +1,16 @@
1
- import { jsx as n, jsxs as r } from "react/jsx-runtime";
2
- import { c as l } from "../../createSvgIcon-K1Hd8ryN.js";
3
- import { useState as p, useCallback as u } from "react";
4
- import c, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
5
- import { B as I } from "../../Box-DgqaLb7j.js";
6
- import { T } from "../../Typography-SIQ6eleU.js";
7
- const a = l(/* @__PURE__ */ n("path", {
1
+ import { jsx as o, jsxs as r } from "react/jsx-runtime";
2
+ import { c as f } from "../../createSvgIcon-K1Hd8ryN.js";
3
+ import { useState as m, useCallback as I } from "react";
4
+ import d, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
5
+ import { B as a } from "../../Box-DgqaLb7j.js";
6
+ import { T as u } from "../../Typography-SIQ6eleU.js";
7
+ const y = f(/* @__PURE__ */ o("path", {
8
8
  d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
9
- }), "Bookmark"), y = l(/* @__PURE__ */ n("path", {
9
+ }), "Bookmark"), b = f(/* @__PURE__ */ o("path", {
10
10
  d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
11
- }), "Person"), x = {
11
+ }), "Person"), V = {
12
12
  title: "Components/TreeView",
13
- component: c,
13
+ component: d,
14
14
  argTypes: {
15
15
  items: {
16
16
  description: "Liste des éléments à afficher dans le TreeView.",
@@ -19,20 +19,19 @@ const a = l(/* @__PURE__ */ n("path", {
19
19
  type: { summary: "CustomTreeViewItem[]" }
20
20
  }
21
21
  },
22
- onItemSelect: {
23
- description: "Fonction appelée lorsqu'un élément est sélectionné.",
24
- control: "none",
22
+ selectedItemId: {
23
+ description: "Identifiant de l'élément sélectionné.",
24
+ control: "text",
25
25
  table: {
26
- type: {
27
- summary: "(event: React.SyntheticEvent, itemId: string) => void"
28
- }
26
+ type: { summary: "string" }
29
27
  }
30
28
  },
31
- expandedItemId: {
32
- description: "ID de l'élément à développer automatiquement.",
33
- control: "text",
29
+ handleSelectedItemChange: {
30
+ description: "Fonction appelée lorsqu'un élément est sélectionné.",
34
31
  table: {
35
- type: { summary: "string" }
32
+ type: {
33
+ summary: "(event: React.SyntheticEvent, itemIds: string | null) => void"
34
+ }
36
35
  }
37
36
  },
38
37
  iconColor: {
@@ -66,109 +65,110 @@ Vous pouvez également passer directement un composant SvgIcon comme valeur de \
66
65
 
67
66
  ### Navigation et sélection
68
67
 
69
- - \`onItemSelect\`: Permet de réagir quand un utilisateur clique sur un élément
70
- - \`expandedItemId\`: Permet d'ouvrir automatiquement un dossier spécifique
68
+ - \`handleSelectedItemChange\`: Permet de réagir quand un utilisateur clique sur un élément
69
+ - \`selectedItemId\`: Permet de définir l'élément sélectionné
71
70
 
72
71
  ### Structure des données
73
72
 
74
73
  Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
75
74
 
76
75
  \`\`\`typescript
77
- interface CustomTreeViewItem extends TreeViewBaseItem {
78
- id: string; // Identifiant unique de l'élément (obligatoire)
76
+ interface CustomTreeViewItemProps {
77
+ internalId: string; // Identifiant unique de l'élément (obligatoire)
79
78
  label: string; // Libellé à afficher (obligatoire)
80
- children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
81
79
  iconType?: IconType; // Type d'icône (facultatif)
82
80
  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
83
81
  }
82
+
83
+ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
84
84
  \`\`\`
85
85
  `
86
86
  }
87
87
  }
88
88
  }
89
- }, f = ({ items: o }) => {
90
- const [t, d] = p(void 0), m = u(
91
- (v, s) => {
92
- console.log(`Élément sélectionné: ${s}`), d(s);
89
+ }, v = ({ items: i }) => {
90
+ const [t, l] = m(""), n = I(
91
+ (c, s) => {
92
+ console.log(`Élément sélectionné: ${s}`), s && l(s);
93
93
  },
94
94
  []
95
95
  );
96
- return /* @__PURE__ */ r(I, { children: [
97
- /* @__PURE__ */ r(T, { variant: "subtitle1", gutterBottom: !0, children: [
96
+ return /* @__PURE__ */ r(a, { children: [
97
+ /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
98
98
  "Sélection actuelle: ",
99
99
  t || "Aucun élément sélectionné"
100
100
  ] }),
101
- /* @__PURE__ */ n(
102
- c,
101
+ /* @__PURE__ */ o(
102
+ d,
103
103
  {
104
- items: o,
105
- onItemSelect: m,
106
- expandedItemId: t
104
+ items: i,
105
+ selectedItemId: t,
106
+ handleSelectedItemChange: n
107
107
  }
108
108
  )
109
109
  ] });
110
- }, i = [
110
+ }, p = [
111
111
  {
112
- id: "documents",
112
+ internalId: "documents",
113
113
  label: "Mes formulaires",
114
114
  iconType: e.FOLDER,
115
115
  children: [
116
116
  {
117
- id: "folder1",
117
+ internalId: "folder1",
118
118
  label: "Premier dossier",
119
119
  iconType: e.FOLDER,
120
120
  children: [
121
121
  {
122
- id: "subfolder1",
122
+ internalId: "subfolder1",
123
123
  label: "Sous-dossier 1",
124
124
  iconType: e.FOLDER
125
125
  },
126
126
  {
127
- id: "subfolder2",
127
+ internalId: "subfolder2",
128
128
  label: "Sous-dossier 2",
129
129
  iconType: e.FOLDER
130
130
  }
131
131
  ]
132
132
  },
133
133
  {
134
- id: "folder2",
134
+ internalId: "folder2",
135
135
  label: "Deuxième dossier",
136
136
  iconType: e.FOLDER
137
137
  },
138
138
  {
139
- id: "folder3",
139
+ internalId: "folder3",
140
140
  label: "Troisième dossier",
141
141
  iconType: e.FOLDER
142
142
  }
143
143
  ]
144
144
  },
145
145
  {
146
- id: "shared",
146
+ internalId: "shared",
147
147
  label: "Formulaires partagés avec moi",
148
148
  iconType: e.SHARE
149
149
  },
150
150
  {
151
- id: "trash",
151
+ internalId: "trash",
152
152
  label: "Corbeille",
153
153
  iconType: e.TRASH
154
154
  }
155
- ], b = [
155
+ ], h = [
156
156
  {
157
- id: "bookmarks",
157
+ internalId: "bookmarks",
158
158
  label: "Favoris",
159
- iconType: a,
159
+ iconType: y,
160
160
  children: [
161
161
  {
162
- id: "important",
162
+ internalId: "important",
163
163
  label: "Important",
164
164
  iconType: e.CUSTOM,
165
- customIcon: y
165
+ customIcon: b
166
166
  }
167
167
  ]
168
168
  },
169
- ...i
170
- ], R = {
171
- render: () => /* @__PURE__ */ n(f, { items: i }),
169
+ ...p
170
+ ], w = {
171
+ render: () => /* @__PURE__ */ o(v, { items: p }),
172
172
  parameters: {
173
173
  docs: {
174
174
  description: {
@@ -176,97 +176,176 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
176
176
  }
177
177
  }
178
178
  }
179
- }, L = {
179
+ }, x = {
180
180
  args: {
181
- items: i,
182
- expandedItemId: "subfolder1",
183
- onItemSelect: (o, t) => {
181
+ items: p,
182
+ selectedItemId: "folder1",
183
+ handleSelectedItemChange: (i, t) => {
184
184
  console.log(`Élément sélectionné: ${t}`);
185
185
  }
186
186
  },
187
187
  parameters: {
188
188
  docs: {
189
189
  description: {
190
- story: "Exemple avec développement automatique d'un dossier spécifique."
190
+ story: "Exemple avec sélection explicite d'un élément spécifique."
191
191
  }
192
192
  }
193
193
  }
194
- }, q = {
195
- args: {
196
- items: b,
197
- onItemSelect: (o, t) => {
198
- console.log(`Élément sélectionné: ${t}`);
199
- }
194
+ }, D = {
195
+ render: () => {
196
+ const [i, t] = m("bookmarks"), l = I(
197
+ (n, c) => {
198
+ console.log(`Élément sélectionné: ${c}`), c && t(c);
199
+ },
200
+ []
201
+ );
202
+ return /* @__PURE__ */ r(a, { children: [
203
+ /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
204
+ "Élément sélectionné: ",
205
+ i
206
+ ] }),
207
+ /* @__PURE__ */ o(
208
+ d,
209
+ {
210
+ items: h,
211
+ selectedItemId: i,
212
+ handleSelectedItemChange: l
213
+ }
214
+ )
215
+ ] });
200
216
  },
201
217
  parameters: {
202
218
  docs: {
203
219
  description: {
204
- story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."
220
+ story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées avec gestion de la sélection."
205
221
  }
206
222
  }
207
223
  }
208
- }, D = {
209
- args: {
210
- items: [
224
+ }, L = {
225
+ render: () => {
226
+ const i = [
211
227
  {
212
- id: "root",
228
+ internalId: "root",
213
229
  label: "Structure imbriquée complexe",
214
230
  iconType: e.FOLDER,
215
231
  children: [
216
232
  {
217
- id: "level1-1",
233
+ internalId: "level1-1",
218
234
  label: "Niveau 1.1",
219
235
  iconType: e.FOLDER,
220
236
  children: [
221
237
  {
222
- id: "level2-1",
238
+ internalId: "level2-1",
223
239
  label: "Niveau 2.1",
224
240
  iconType: e.FOLDER,
225
241
  children: [
226
242
  {
227
- id: "level3-1",
243
+ internalId: "level3-1",
228
244
  label: "Niveau 3.1",
229
245
  iconType: e.FOLDER
230
246
  },
231
247
  {
232
- id: "level3-2",
248
+ internalId: "level3-2",
233
249
  label: "Niveau 3.2",
234
250
  iconType: e.SHARE
235
251
  }
236
252
  ]
237
253
  },
238
254
  {
239
- id: "level2-2",
255
+ internalId: "level2-2",
240
256
  label: "Niveau 2.2",
241
257
  iconType: e.TRASH
242
258
  }
243
259
  ]
244
260
  },
245
261
  {
246
- id: "level1-2",
262
+ internalId: "level1-2",
247
263
  label: "Niveau 1.2",
248
264
  iconType: e.CUSTOM,
249
- customIcon: a
265
+ customIcon: y
250
266
  }
251
267
  ]
252
268
  }
253
- ],
254
- onItemSelect: (o, t) => {
255
- console.log(`Élément sélectionné: ${t}`);
269
+ ], [t, l] = m("level2-1"), n = I(
270
+ (c, s) => {
271
+ console.log(`Élément sélectionné: ${s}`), s && l(s);
272
+ },
273
+ []
274
+ );
275
+ return /* @__PURE__ */ r(a, { children: [
276
+ /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
277
+ "Niveau sélectionné: ",
278
+ t
279
+ ] }),
280
+ /* @__PURE__ */ o(
281
+ d,
282
+ {
283
+ items: i,
284
+ selectedItemId: t,
285
+ handleSelectedItemChange: n,
286
+ iconColor: "info"
287
+ }
288
+ )
289
+ ] });
290
+ },
291
+ parameters: {
292
+ docs: {
293
+ description: {
294
+ story: "Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau et gestion de la sélection."
295
+ }
256
296
  }
297
+ }
298
+ }, F = {
299
+ render: () => {
300
+ const i = [
301
+ "primary",
302
+ "secondary",
303
+ "success",
304
+ "error",
305
+ "info",
306
+ "warning"
307
+ ], [t, l] = m({
308
+ primary: "",
309
+ secondary: "",
310
+ success: "",
311
+ error: "",
312
+ info: "",
313
+ warning: ""
314
+ });
315
+ return /* @__PURE__ */ o(a, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: i.map((n) => /* @__PURE__ */ r(a, { children: [
316
+ /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
317
+ "TreeView avec icônes ",
318
+ n,
319
+ " - Sélection:",
320
+ " ",
321
+ t[n] || "aucune"
322
+ ] }),
323
+ /* @__PURE__ */ o(
324
+ d,
325
+ {
326
+ items: p,
327
+ selectedItemId: t[n],
328
+ handleSelectedItemChange: (c, s) => {
329
+ s && l((T) => ({ ...T, [n]: s }));
330
+ },
331
+ iconColor: n
332
+ }
333
+ )
334
+ ] }, n)) });
257
335
  },
258
336
  parameters: {
259
337
  docs: {
260
338
  description: {
261
- story: "Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau."
339
+ story: "Démonstration des différentes options de couleurs disponibles pour les icônes avec gestion indépendante des sélections."
262
340
  }
263
341
  }
264
342
  }
265
343
  };
266
344
  export {
267
- q as AvecIconesPersonnalisees,
268
- R as Default,
269
- D as StructureImbriquee,
270
- L as WithExplicitExpand,
271
- x as default
345
+ D as AvecIconesPersonnalisees,
346
+ w as Default,
347
+ F as MultipleColors,
348
+ L as StructureImbriquee,
349
+ x as WithExplicitSelection,
350
+ V as default
272
351
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cgi-learning-hub/ui",
3
- "version": "1.4.0-dev.1741974011",
3
+ "version": "1.4.0-dev.1741982096",
4
4
  "private": false,
5
5
  "author": "CGI Learning-hub Team",
6
6
  "description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",