@cgi-learning-hub/ui 1.5.0-dev.1742922431 → 1.5.0-dev.1743516190

package/dist/components/stories/TreeView.stories.es.js

@@ -1,25 +1,29 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { c as E } from "../../createSvgIcon-BFqOnlgU.js";
-import { useState as I, useCallback as C } from "react";
-import h from "../TreeView/TreeView.es.js";
-import { ICON_TYPE as r } from "../TreeView/types.es.js";
-import { B as a } from "../../Box-C-j-U8SH.js";
-import { T as m } from "../../Typography-DZ11k9cZ.js";
-import { G as b, L as q, a as H } from "../../ListItemText-CADHegDF.js";
-import { P as v } from "../../Paper-DeL_n4k9.js";
-import { B as L } from "../../Button-CQQdMCSm.js";
-import { D as k } from "../../Divider-CT4XaEn6.js";
-import { L as B } from "../../List-CFInjv2S.js";
-import { L as $ } from "../../ListItem-BAAZxsu5.js";
-const O = E(/* @__PURE__ */ e("path", {
+import { c as V } from "../../createSvgIcon-Dk3n_NBz.js";
+import { I as k } from "../../IconButton-BfOmPY_b.js";
+import { T as B } from "../../Tooltip-UBiscQPm.js";
+import { useState as I, useCallback as S } from "react";
+import p from "../TreeView/TreeView.es.js";
+import { ICON_TYPE as o } from "../TreeView/types.es.js";
+import { B as a } from "../../Box--MaxIKbn.js";
+import { T as d } from "../../Typography-BJPk_mTw.js";
+import { G as b, L as $, a as z } from "../../ListItemText-BeWOS4WA.js";
+import { P as v } from "../../Paper-D9hEGUDL.js";
+import { B as w } from "../../Button-kOBqHwsO.js";
+import { D as O } from "../../Divider-Bw612Jal.js";
+import { L as A } from "../../List-CV_4VCwT.js";
+import { L as P } from "../../ListItem--Hj6zz4n.js";
+const F = V(/* @__PURE__ */ e("path", {
   d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
-}), "Bookmark"), F = E(/* @__PURE__ */ e("path", {
+}), "Bookmark"), H = V(/* @__PURE__ */ e("path", {
   d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm2 16H8v-2h8zm0-4H8v-2h8zm-3-5V3.5L18.5 9z"
-}), "Description"), A = E(/* @__PURE__ */ e("path", {
+}), "Description"), Y = V(/* @__PURE__ */ e("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
+}), "Info"), M = V(/* @__PURE__ */ e("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"), re = {
+}), "Person"), se = {
   title: "Components/TreeView",
-  component: h,
+  component: p,
   argTypes: {
     items: {
       description: "**[Requis]** Liste des éléments à afficher dans le TreeView.",
@@ -57,7 +61,7 @@ const O = E(/* @__PURE__ */ e("path", {
         defaultValue: { summary: "primary" }
       }
     },
-    height: {
+    maxHeight: {
       description: "**[Optionnel]** Hauteur du TreeView avec gestion automatique du défilement.",
       control: "number",
       table: {
@@ -123,48 +127,48 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, V = (i) => {
-  const o = [], l = (n) => {
-    o.push(n), n.children && n.children.forEach(
+}, L = (n) => {
+  const r = [], l = (i) => {
+    r.push(i), i.children && i.children.forEach(
       (t) => l(t)
     );
   };
-  return i.forEach((n) => l(n)), o;
-}, P = ({
-  items: i,
-  selectedItemId: o,
+  return n.forEach((i) => l(i)), r;
+}, N = ({
+  items: n,
+  selectedItemId: r,
   onItemSelect: l
 }) => {
-  const n = V(i);
+  const i = L(n);
   return /* @__PURE__ */ s(v, { sx: { width: "100%", maxHeight: 300, overflow: "auto" }, children: [
-    /* @__PURE__ */ e(m, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
-    /* @__PURE__ */ e(k, {}),
-    /* @__PURE__ */ e(B, { children: n.map((t) => /* @__PURE__ */ e($, { disablePadding: !0, children: /* @__PURE__ */ e(
-      q,
+    /* @__PURE__ */ e(d, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
+    /* @__PURE__ */ e(O, {}),
+    /* @__PURE__ */ e(A, { children: i.map((t) => /* @__PURE__ */ e(P, { disablePadding: !0, children: /* @__PURE__ */ e(
+      $,
       {
-        selected: o === t.internalId,
+        selected: r === t.internalId,
         onClick: () => l(t.internalId),
-        children: /* @__PURE__ */ e(H, { primary: t.label })
+        children: /* @__PURE__ */ e(z, { primary: t.label })
       }
     ) }, t.internalId)) })
   ] });
-}, Y = ({
-  items: i,
-  onRandomSelect: o
+}, j = ({
+  items: n,
+  onRandomSelect: r
 }) => {
-  const l = V(i);
-  return /* @__PURE__ */ e(a, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(L, { variant: "contained", color: "primary", onClick: () => {
+  const l = L(n);
+  return /* @__PURE__ */ e(a, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(w, { variant: "contained", color: "primary", onClick: () => {
     const t = Math.floor(Math.random() * l.length);
-    o(l[t].internalId);
+    r(l[t].internalId);
   }, children: "Sélection aléatoire" }) });
-}, M = ({ id: i, label: o }) => /* @__PURE__ */ e(
+}, U = ({ id: n, label: r }) => /* @__PURE__ */ e(
   a,
   {
     draggable: !0,
     onDragStart: (l) => {
       l.dataTransfer.setData(
         "application/json",
-        JSON.stringify({ id: i, label: o })
+        JSON.stringify({ id: n, label: r })
       );
     },
     sx: {
@@ -178,129 +182,129 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
         backgroundColor: "grey.200"
       }
     },
-    children: /* @__PURE__ */ s(m, { variant: "body2", display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ e(F, { fontSize: "small", sx: { mr: 1 } }),
-      o
+    children: /* @__PURE__ */ s(d, { variant: "body2", display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ e(H, { fontSize: "small", sx: { mr: 1 } }),
+      r
     ] })
   }
-), w = [
+), D = [
   {
     internalId: "documents",
     label: "Mes formulaires",
-    iconType: r.FOLDER,
+    iconType: o.FOLDER,
     children: [
       {
         internalId: "folder1",
         label: "Premier dossier",
-        iconType: r.FOLDER,
+        iconType: o.FOLDER,
         children: [
           {
             internalId: "subfolder1",
             label: "Sous-dossier 1",
-            iconType: r.FOLDER
+            iconType: o.FOLDER
           },
           {
             internalId: "subfolder2",
             label: "Sous-dossier 2",
-            iconType: r.FOLDER
+            iconType: o.FOLDER
           }
         ]
       },
       {
         internalId: "folder2",
         label: "Deuxième dossier",
-        iconType: r.FOLDER
+        iconType: o.FOLDER
       },
       {
         internalId: "folder3",
         label: "Troisième dossier",
-        iconType: r.FOLDER
+        iconType: o.FOLDER
       }
     ]
   },
   {
     internalId: "shared",
     label: "Formulaires partagés avec moi",
-    iconType: r.SHARE
+    iconType: o.SHARE
   },
   {
     internalId: "trash",
     label: "Corbeille",
-    iconType: r.TRASH
+    iconType: o.TRASH
   }
-], z = [
+], q = [
   {
     internalId: "bookmarks",
     label: "Favoris",
-    iconType: O,
+    iconType: F,
     children: [
       {
         internalId: "important",
         label: "Important",
-        iconType: r.CUSTOM,
-        customIcon: A
+        iconType: o.CUSTOM,
+        customIcon: M
       }
     ]
   },
-  ...w
-], S = [
+  ...D
+], R = [
   {
     internalId: "documents",
     label: "Documents",
-    iconType: r.SHARE,
+    iconType: o.SHARE,
     children: [
       {
         internalId: "reports",
         label: "Rapports",
-        iconType: r.FOLDER,
+        iconType: o.FOLDER,
         children: [
           {
             internalId: "report1",
             label: "Rapport Janvier",
-            iconType: r.FOLDER
+            iconType: o.FOLDER
           },
           {
             internalId: "report2",
             label: "Rapport Février",
-            iconType: r.FOLDER
+            iconType: o.FOLDER
           },
           {
             internalId: "report3",
             label: "Rapport Mars",
-            iconType: r.FOLDER
+            iconType: o.FOLDER
           }
         ]
       },
-      { internalId: "invoices", label: "Factures", iconType: r.FOLDER }
+      { internalId: "invoices", label: "Factures", iconType: o.FOLDER }
     ]
   },
   {
     internalId: "media",
     label: "Médias",
-    iconType: r.FOLDER,
+    iconType: o.FOLDER,
     children: [
-      { internalId: "images", label: "Images", iconType: r.FOLDER },
-      { internalId: "videos", label: "Vidéos", iconType: r.FOLDER }
+      { internalId: "images", label: "Images", iconType: o.FOLDER },
+      { internalId: "videos", label: "Vidéos", iconType: o.FOLDER }
     ]
   },
   {
     internalId: "downloads",
     label: "Téléchargements",
-    iconType: r.FOLDER
+    iconType: o.FOLDER
   }
-], ne = {
+], ae = {
   render: () => {
-    const [i, o] = I(""), l = C(
-      (n, t) => {
-        console.log(`Élément sélectionné: ${t}`), t && o(t);
+    const [n, r] = I(""), l = S(
+      (i, t) => {
+        console.log(`Élément sélectionné: ${t}`), t && r(t);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      h,
+      p,
       {
-        items: w,
-        selectedItemId: i,
+        items: D,
+        selectedItemId: n,
         handleSelectedItemChange: l
       }
     ) });
@@ -314,16 +318,16 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, ie = {
+}, de = {
   args: {
-    items: w,
+    items: D,
     selectedItemId: "folder1",
-    handleSelectedItemChange: (i, o) => {
-      console.log(`Élément sélectionné: ${o}`);
+    handleSelectedItemChange: (n, r) => {
+      console.log(`Élément sélectionné: ${r}`);
     },
     iconColor: "success"
   },
-  render: (i) => /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(h, { ...i }) }),
+  render: (n) => /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(p, { ...n }) }),
   parameters: {
     docs: {
       description: {
@@ -331,19 +335,19 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, oe = {
+}, ce = {
   render: () => {
-    const [i, o] = I("bookmarks"), l = C(
-      (n, t) => {
-        console.log(`Élément sélectionné: ${t}`), t && o(t);
+    const [n, r] = I("bookmarks"), l = S(
+      (i, t) => {
+        console.log(`Élément sélectionné: ${t}`), t && r(t);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      h,
+      p,
       {
-        items: z,
-        selectedItemId: i,
+        items: q,
+        selectedItemId: n,
         handleSelectedItemChange: l
       }
     ) });
@@ -357,63 +361,90 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, le = {
+}, me = {
   render: () => {
-    const i = [
+    const [n, r] = I("item1"), l = S(
+      (i, t) => {
+        console.log(`Élément sélectionné: ${t}`), t && r(t);
+      },
+      []
+    );
+    return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      p,
+      {
+        items: q,
+        selectedItemId: n,
+        handleSelectedItemChange: l,
+        hasNoIcons: !0
+      }
+    ) });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Exemple d'arborescence sans icônes, utilisant la prop hasNoIcons."
+      }
+    }
+  }
+}, ue = {
+  render: () => {
+    const n = [
       {
         internalId: "root",
         label: "Structure imbriquée complexe",
-        iconType: r.FOLDER,
+        iconType: o.FOLDER,
         children: [
           {
             internalId: "level1-1",
             label: "Niveau 1.1",
-            iconType: r.FOLDER,
+            iconType: o.FOLDER,
             children: [
               {
                 internalId: "level2-1",
                 label: "Niveau 2.1",
-                iconType: r.FOLDER,
+                iconType: o.FOLDER,
                 children: [
                   {
                     internalId: "level3-1V",
                     label: "VOUS M'AVEZ TROUVÉ HIHIHI",
-                    iconType: r.FOLDER
+                    iconType: o.FOLDER
                   },
                   {
                     internalId: "level3-2",
                     label: "Niveau 3.2",
-                    iconType: r.SHARE
+                    iconType: o.SHARE
                   }
                 ]
               },
               {
                 internalId: "level2-2",
                 label: "Niveau 2.2",
-                iconType: r.TRASH
+                iconType: o.TRASH
               }
             ]
           },
           {
             internalId: "level1-2",
             label: "Niveau 1.2",
-            iconType: r.CUSTOM,
-            customIcon: O
+            iconType: o.CUSTOM,
+            customIcon: F
           }
         ]
       }
-    ], [o, l] = I("level2-1"), n = C(
-      (t, d) => {
-        console.log(`Élément sélectionné: ${d}`), d && l(d);
+    ], [r, l] = I("level2-1"), i = S(
+      (t, c) => {
+        console.log(`Élément sélectionné: ${c}`), c && l(c);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      h,
+      p,
       {
-        items: i,
-        selectedItemId: o,
-        handleSelectedItemChange: n
+        items: n,
+        selectedItemId: r,
+        handleSelectedItemChange: i
       }
     ) });
   },
@@ -426,9 +457,9 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, se = {
+}, pe = {
   render: () => {
-    const i = ["primary", "secondary", "info"], [o, l] = I({
+    const n = ["primary", "secondary", "info"], [r, l] = I({
       primary: "",
       secondary: "",
       info: ""
@@ -442,7 +473,7 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
           gap: 3,
           overflowY: "hidden"
         },
-        children: i.map((n) => /* @__PURE__ */ s(
+        children: n.map((i) => /* @__PURE__ */ s(
           a,
           {
             sx: {
@@ -450,24 +481,24 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
               overflowY: "hidden"
             },
             children: [
-              /* @__PURE__ */ s(m, { variant: "subtitle2", gutterBottom: !0, children: [
+              /* @__PURE__ */ s(d, { variant: "subtitle2", gutterBottom: !0, children: [
                 "Icônes ",
-                n
+                i
               ] }),
               /* @__PURE__ */ e(
-                h,
+                p,
                 {
-                  items: w,
-                  selectedItemId: o[n],
-                  handleSelectedItemChange: (t, d) => {
-                    d && l((u) => ({ ...u, [n]: d }));
+                  items: D,
+                  selectedItemId: r[i],
+                  handleSelectedItemChange: (t, c) => {
+                    c && l((u) => ({ ...u, [i]: c }));
                   },
-                  iconColor: n
+                  iconColor: i
                 }
               )
             ]
           },
-          n
+          i
         ))
       }
     );
@@ -481,76 +512,108 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, ae = {
+}, he = {
   render: () => {
-    const i = () => {
+    const n = () => {
       var u, y;
-      const d = [];
-      for (let p = 1; p <= 5; p++) {
-        const T = {
-          internalId: `main-folder-${p}`,
-          label: `Dossier principal ${p}`,
-          iconType: r.FOLDER,
+      const c = [];
+      for (let h = 1; h <= 5; h++) {
+        const x = {
+          internalId: `main-folder-${h}`,
+          label: `Dossier principal ${h}`,
+          iconType: o.FOLDER,
           children: []
         };
-        for (let c = 1; c <= 10; c++) {
+        for (let m = 1; m <= 10; m++) {
           const f = {
-            internalId: `subfolder-${p}-${c}`,
-            label: `Sous-dossier ${p}.${c}`,
-            iconType: r.FOLDER,
+            internalId: `subfolder-${h}-${m}`,
+            label: `Sous-dossier ${h}.${m}`,
+            iconType: o.FOLDER,
             children: []
           };
           for (let g = 1; g <= 5; g++)
             (u = f.children) == null || u.push({
-              internalId: `item-${p}-${c}-${g}`,
-              label: `Élément ${p}.${c}.${g}`,
-              iconType: r.CUSTOM,
-              customIcon: F
+              internalId: `item-${h}-${m}-${g}`,
+              label: `Élément ${h}.${m}.${g}`,
+              iconType: o.CUSTOM,
+              customIcon: H
             });
-          (y = T.children) == null || y.push(f);
+          (y = x.children) == null || y.push(f);
         }
-        d.push(T);
+        c.push(x);
       }
-      return d;
-    }, [o, l] = I(""), n = i(), t = C(
-      (d, u) => {
+      return c;
+    }, [r, l] = I(""), i = n(), t = S(
+      (c, u) => {
         u && l(u);
       },
       []
     );
     return /* @__PURE__ */ s(a, { children: [
-      /* @__PURE__ */ e(m, { variant: "h6", gutterBottom: !0, children: "TreeView avec hauteur limitée et défilement vertical" }),
+      /* @__PURE__ */ e(d, { variant: "h6", gutterBottom: !0, children: "TreeView avec hauteur limitée et défilement vertical" }),
       /* @__PURE__ */ s(b, { container: !0, spacing: 3, children: [
         /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(v, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(m, { variant: "subtitle2", gutterBottom: !0, children: "Hauteur de 300px avec overflow" }),
-          /* @__PURE__ */ e(a, { sx: { border: "1px solid #e0e0e0", borderRadius: 1 }, children: /* @__PURE__ */ e(
-            h,
-            {
-              items: n,
-              selectedItemId: o,
-              handleSelectedItemChange: t,
-              height: 300
-            }
-          ) })
+          /* @__PURE__ */ e(d, { variant: "subtitle2", gutterBottom: !0, children: "Hauteur maximale de 300px avec overflow" }),
+          /* @__PURE__ */ s(a, { sx: { border: "1px solid #e0e0e0", borderRadius: 1 }, children: [
+            /* @__PURE__ */ e(
+              p,
+              {
+                items: i,
+                selectedItemId: r,
+                handleSelectedItemChange: t,
+                maxHeight: 300
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                sx: {
+                  p: 2,
+                  bgcolor: "primary.light",
+                  color: "primary.contrastText",
+                  borderTop: "1px solid #e0e0e0"
+                },
+                children: /* @__PURE__ */ e(d, { variant: "body2", children: "Cet élément reste collé sous le TreeView, même avec défilement" })
+              }
+            )
+          ] })
         ] }) }),
         /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(v, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(m, { variant: "subtitle2", gutterBottom: !0, children: "Hauteur de 500px avec overflow" }),
-          /* @__PURE__ */ e(a, { sx: { border: "1px solid #e0e0e0", borderRadius: 1 }, children: /* @__PURE__ */ e(
-            h,
-            {
-              items: n,
-              selectedItemId: o,
-              handleSelectedItemChange: t,
-              height: 500
-            }
-          ) })
+          /* @__PURE__ */ e(d, { variant: "subtitle2", gutterBottom: !0, children: "Hauteur maximale de 500px avec overflow" }),
+          /* @__PURE__ */ s(a, { sx: { border: "1px solid #e0e0e0", borderRadius: 1 }, children: [
+            /* @__PURE__ */ e(
+              p,
+              {
+                items: i,
+                selectedItemId: r,
+                handleSelectedItemChange: t,
+                maxHeight: 500
+              }
+            ),
+            /* @__PURE__ */ s(
+              a,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  p: 1.5,
+                  bgcolor: "background.default",
+                  borderTop: "1px solid #e0e0e0"
+                },
+                children: [
+                  /* @__PURE__ */ e(w, { size: "small", variant: "outlined", children: "Annuler" }),
+                  /* @__PURE__ */ e(w, { size: "small", variant: "contained", children: "Confirmer" })
+                ]
+              }
+            )
+          ] })
         ] }) })
       ] }),
       /* @__PURE__ */ e(a, { mt: 4, children: /* @__PURE__ */ s(v, { sx: { p: 2 }, children: [
-        /* @__PURE__ */ e(m, { variant: "subtitle2", gutterBottom: !0, children: "TreeView expansé manuellement" }),
+        /* @__PURE__ */ e(d, { variant: "subtitle2", gutterBottom: !0, children: "TreeView expansé manuellement" }),
         /* @__PURE__ */ s(a, { sx: { display: "flex", mb: 2 }, children: [
           /* @__PURE__ */ e(
-            L,
+            w,
             {
               variant: "outlined",
               onClick: () => l("subfolder-1-1"),
@@ -559,7 +622,7 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
             }
           ),
           /* @__PURE__ */ e(
-            L,
+            w,
             {
               variant: "outlined",
               onClick: () => l("item-3-5-2"),
@@ -567,15 +630,22 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
             }
           )
         ] }),
-        /* @__PURE__ */ e(a, { sx: { borderRadius: 1 }, children: /* @__PURE__ */ e(
-          h,
-          {
-            items: n,
-            selectedItemId: o,
-            handleSelectedItemChange: t,
-            height: 400
-          }
-        ) })
+        /* @__PURE__ */ s(a, { sx: { borderRadius: 1, border: "1px solid #e0e0e0" }, children: [
+          /* @__PURE__ */ e(
+            p,
+            {
+              items: i,
+              selectedItemId: r,
+              handleSelectedItemChange: t,
+              maxHeight: 400
+            }
+          ),
+          /* @__PURE__ */ e(O, {}),
+          /* @__PURE__ */ s(a, { sx: { p: 2, display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ e(d, { variant: "body2", sx: { flexGrow: 1 }, children: r ? `Élément sélectionné: ${r}` : "Aucun élément sélectionné" }),
+            /* @__PURE__ */ e(B, { title: "Ce bandeau reste fixé sous l'arborescence", children: /* @__PURE__ */ e(k, { size: "small", color: "info", children: /* @__PURE__ */ e(Y, { fontSize: "small" }) }) })
+          ] })
+        ] })
       ] }) })
     ] });
   },
@@ -584,56 +654,56 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
     actions: { disable: !0 },
     docs: {
       description: {
-        story: "Cette story démontre l'utilisation de la prop `height` pour contrôler la hauteur du TreeView. Elle permet de vérifier le comportement du défilement (overflow) lorsque le contenu dépasse la hauteur définie. Différentes hauteurs sont utilisées pour voir l'impact sur l'expérience utilisateur."
+        story: "Cette story démontre l'utilisation de la prop `maxHeight` pour contrôler la hauteur maximale du TreeView. Elle permet de vérifier le comportement du défilement (overflow) lorsque le contenu dépasse la hauteur définie. Des éléments sont placés en dessous de chaque TreeView pour montrer que ceux-ci restent bien collés, tandis que seul le contenu de l'arborescence défile."
       }
     }
   }
-}, de = {
+}, Ie = {
   render: () => {
-    const [i, o] = I("reports"), l = (d, u) => {
-      console.log("TreeView sélection:", u), u && o(u);
-    }, n = (d) => {
-      console.log("Sélection externe:", d), o(d);
+    const [n, r] = I("reports"), l = (c, u) => {
+      console.log("TreeView sélection:", u), u && r(u);
+    }, i = (c) => {
+      console.log("Sélection externe:", c), r(c);
     };
     return /* @__PURE__ */ s(a, { sx: { width: "100%", overflowY: "hidden" }, children: [
-      /* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
+      /* @__PURE__ */ s(d, { variant: "subtitle1", gutterBottom: !0, children: [
         "Élément sélectionné: ",
         /* @__PURE__ */ e("strong", { children: (() => {
-          const u = V(S).find(
-            (y) => y.internalId === i
+          const u = L(R).find(
+            (y) => y.internalId === n
           );
           return u ? u.label : "Aucun élément sélectionné";
         })() }),
         " (ID:",
         " ",
-        i,
+        n,
         ")"
       ] }),
       /* @__PURE__ */ e(
-        Y,
+        j,
         {
-          items: S,
-          onRandomSelect: n
+          items: R,
+          onRandomSelect: i
         }
       ),
       /* @__PURE__ */ s(b, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
         /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(v, { sx: { p: 2, overflowY: "hidden" }, children: [
-          /* @__PURE__ */ e(m, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
+          /* @__PURE__ */ e(d, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
           /* @__PURE__ */ e(
-            h,
+            p,
             {
-              items: S,
-              selectedItemId: i,
+              items: R,
+              selectedItemId: n,
               handleSelectedItemChange: l
             }
           )
         ] }) }),
         /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
-          P,
+          N,
           {
-            items: S,
-            selectedItemId: i,
-            onItemSelect: n
+            items: R,
+            selectedItemId: n,
+            onItemSelect: i
           }
         ) })
       ] })
@@ -648,35 +718,35 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, ce = {
+}, be = {
   render: () => {
-    var p, T;
-    const [i, o] = I([
-      ...w
-    ]), [l, n] = I("folder1"), [t, d] = I(null), u = [
+    var h, x;
+    const [n, r] = I([
+      ...D
+    ]), [l, i] = I("folder1"), [t, c] = I(null), u = [
       { id: "doc1", label: "Document 1" },
       { id: "doc2", label: "Document 2" },
       { id: "doc3", label: "Document 3" }
-    ], y = (c) => {
-      c.preventDefault();
-      const f = c.target, g = f.closest("[data-treeview-item]");
-      let x = null, R = null;
-      g ? (x = g.getAttribute("data-treeview-item"), R = g.getAttribute("data-treeview-item-label")) : f.closest("[data-treeview-root]") && (x = null, R = "Racine du TreeView");
+    ], y = (m) => {
+      m.preventDefault();
+      const f = m.target, g = f.closest("[data-treeview-item]");
+      let T = null, E = null;
+      g ? (T = g.getAttribute("data-treeview-item"), E = g.getAttribute("data-treeview-item-label")) : f.closest("[data-treeview-root]") && (T = null, E = "Racine du TreeView");
       try {
-        const D = JSON.parse(c.dataTransfer.getData("application/json"));
-        d({
-          itemId: x,
-          itemLabel: R,
-          droppedItem: D
-        }), x && n(x);
-      } catch (D) {
-        console.error("Erreur lors de la récupération des données", D);
+        const C = JSON.parse(m.dataTransfer.getData("application/json"));
+        c({
+          itemId: T,
+          itemLabel: E,
+          droppedItem: C
+        }), T && i(T);
+      } catch (C) {
+        console.error("Erreur lors de la récupération des données", C);
       }
     };
     return /* @__PURE__ */ s(a, { sx: { maxWidth: 700, overflowY: "hidden" }, children: [
-      /* @__PURE__ */ e(m, { variant: "h6", gutterBottom: !0, children: "Exemple de Drag & Drop avec le TreeView" }),
-      /* @__PURE__ */ e(m, { variant: "body2", gutterBottom: !0, children: "Glissez-déposez un des documents ci-dessous sur un élément du TreeView." }),
-      /* @__PURE__ */ e(a, { sx: { display: "flex", mb: 2 }, children: u.map((c) => /* @__PURE__ */ e(M, { id: c.id, label: c.label }, c.id)) }),
+      /* @__PURE__ */ e(d, { variant: "h6", gutterBottom: !0, children: "Exemple de Drag & Drop avec le TreeView" }),
+      /* @__PURE__ */ e(d, { variant: "body2", gutterBottom: !0, children: "Glissez-déposez un des documents ci-dessous sur un élément du TreeView." }),
+      /* @__PURE__ */ e(a, { sx: { display: "flex", mb: 2 }, children: u.map((m) => /* @__PURE__ */ e(U, { id: m.id, label: m.label }, m.id)) }),
       /* @__PURE__ */ s(b, { container: !0, spacing: 3, children: [
         /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(
           a,
@@ -689,17 +759,17 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
               overflowY: "hidden",
               backgroundColor: "background.paper"
             },
-            onDragOver: (c) => c.preventDefault(),
+            onDragOver: (m) => m.preventDefault(),
             onDrop: y,
             children: [
-              /* @__PURE__ */ e(m, { variant: "subtitle1", gutterBottom: !0, children: "Zone de drop" }),
+              /* @__PURE__ */ e(d, { variant: "subtitle1", gutterBottom: !0, children: "Zone de drop" }),
               /* @__PURE__ */ e(
-                h,
+                p,
                 {
-                  items: i,
+                  items: n,
                   selectedItemId: l,
-                  handleSelectedItemChange: (c, f) => {
-                    f && n(f);
+                  handleSelectedItemChange: (m, f) => {
+                    f && i(f);
                   }
                 }
               )
@@ -707,26 +777,26 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
           }
         ) }),
         /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(v, { sx: { p: 2, minHeight: 300 }, children: [
-          /* @__PURE__ */ e(m, { variant: "subtitle1", gutterBottom: !0, children: "Informations du dernier drop" }),
+          /* @__PURE__ */ e(d, { variant: "subtitle1", gutterBottom: !0, children: "Informations du dernier drop" }),
           t ? /* @__PURE__ */ s(a, { children: [
-            /* @__PURE__ */ s(m, { variant: "body2", children: [
+            /* @__PURE__ */ s(d, { variant: "body2", children: [
               /* @__PURE__ */ e("strong", { children: "Élément cible :" }),
               " ",
               t.itemLabel,
               " ",
               t.itemId && `(ID: ${t.itemId})`
             ] }),
-            /* @__PURE__ */ s(m, { variant: "body2", children: [
+            /* @__PURE__ */ s(d, { variant: "body2", children: [
               /* @__PURE__ */ e("strong", { children: "Élément déposé :" }),
               " ",
-              (p = t.droppedItem) == null ? void 0 : p.label,
+              (h = t.droppedItem) == null ? void 0 : h.label,
               " (ID:",
               " ",
-              (T = t.droppedItem) == null ? void 0 : T.id,
+              (x = t.droppedItem) == null ? void 0 : x.id,
               ")"
             ] }),
             /* @__PURE__ */ s(a, { sx: { mt: 2 }, children: [
-              /* @__PURE__ */ e(m, { variant: "body2", children: /* @__PURE__ */ e("strong", { children: "Code pour gérer ce drop :" }) }),
+              /* @__PURE__ */ e(d, { variant: "body2", children: /* @__PURE__ */ e("strong", { children: "Code pour gérer ce drop :" }) }),
               /* @__PURE__ */ e(v, { sx: { p: 1, mt: 1, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
                 "pre",
                 {
@@ -758,7 +828,7 @@ const handleDrop = (e) => {
                 }
               ) })
             ] })
-          ] }) : /* @__PURE__ */ e(m, { variant: "body2", children: "Aucun élément déposé pour le moment. Glissez un document sur le TreeView pour voir les informations ici." })
+          ] }) : /* @__PURE__ */ e(d, { variant: "body2", children: "Aucun élément déposé pour le moment. Glissez un document sur le TreeView pour voir les informations ici." })
         ] }) })
       ] })
     ] });
@@ -774,13 +844,14 @@ const handleDrop = (e) => {
   }
 };
 export {
-  ce as AvecDragAndDrop,
-  oe as AvecIconesPersonnalisees,
-  ie as Controlable,
-  ne as Default,
-  ae as GrandeHauteurLimitee,
-  se as OptionsDeCouleurs,
-  le as StructureImbriquee,
-  de as Synchronicite,
-  re as default
+  be as AvecDragAndDrop,
+  ce as AvecIconesPersonnalisees,
+  de as Controlable,
+  ae as Default,
+  he as GrandeHauteurLimitee,
+  pe as OptionsDeCouleurs,
+  me as SansIcones,
+  ue as StructureImbriquee,
+  Ie as Synchronicite,
+  se as default
 };