@cgi-learning-hub/ui 1.5.0 → 1.5.1

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 { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { c as O } from "../../createSvgIcon-CsMK8tGM.js";
+import { I as k } from "../../IconButton-D1mhTuaI.js";
+import { T as B } from "../../Tooltip-D0bof-68.js";
+import { useState as b, useCallback as x } from "react";
+import p from "../TreeView/TreeView.es.js";
+import { ICON_TYPE as t } from "../TreeView/types.es.js";
+import { B as a } from "../../Box-D3Pi13ta.js";
+import { T as d } from "../../Typography-DBJqhIhB.js";
+import { G as h, L as A, a as M } from "../../ListItemText-afV0BrJL.js";
+import { P as f } from "../../Paper-CEDxpHWv.js";
+import { B as y } from "../../Button-D1aKdjIh.js";
+import { D as F } from "../../Divider-C2cBikSL.js";
+import { L as z } from "../../List-DJsqHOqv.js";
+import { L as $ } from "../../ListItem-BspNcHM_.js";
+const q = O(/* @__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"), L = O(/* @__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"), U = O(/* @__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"), P = O(/* @__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(
-      (t) => l(t)
+}, V = (l) => {
+  const r = [], o = (s) => {
+    r.push(s), s.children && s.children.forEach(
+      (n) => o(n)
     );
   };
-  return i.forEach((n) => l(n)), o;
-}, P = ({
-  items: i,
-  selectedItemId: o,
-  onItemSelect: l
+  return l.forEach((s) => o(s)), r;
+}, Y = ({
+  items: l,
+  selectedItemId: r,
+  onItemSelect: o
 }) => {
-  const n = V(i);
-  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,
+  const s = V(l);
+  return /* @__PURE__ */ i(f, { sx: { width: "100%", maxHeight: 300, overflow: "auto" }, children: [
+    /* @__PURE__ */ e(d, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
+    /* @__PURE__ */ e(F, {}),
+    /* @__PURE__ */ e(z, { children: s.map((n) => /* @__PURE__ */ e($, { disablePadding: !0, children: /* @__PURE__ */ e(
+      A,
       {
-        selected: o === t.internalId,
-        onClick: () => l(t.internalId),
-        children: /* @__PURE__ */ e(H, { primary: t.label })
+        selected: r === n.internalId,
+        onClick: () => o(n.internalId),
+        children: /* @__PURE__ */ e(M, { primary: n.label })
       }
-    ) }, t.internalId)) })
+    ) }, n.internalId)) })
   ] });
-}, Y = ({
-  items: i,
-  onRandomSelect: o
+}, N = ({
+  items: l,
+  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 t = Math.floor(Math.random() * l.length);
-    o(l[t].internalId);
+  const o = V(l);
+  return /* @__PURE__ */ e(a, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(y, { variant: "contained", color: "primary", onClick: () => {
+    const n = Math.floor(Math.random() * o.length);
+    r(o[n].internalId);
   }, children: "Sélection aléatoire" }) });
-}, M = ({ id: i, label: o }) => /* @__PURE__ */ e(
+}, j = ({ id: l, label: r }) => /* @__PURE__ */ e(
   a,
   {
     draggable: !0,
-    onDragStart: (l) => {
-      l.dataTransfer.setData(
+    onDragStart: (o) => {
+      o.dataTransfer.setData(
         "application/json",
-        JSON.stringify({ id: i, label: o })
+        JSON.stringify({ id: l, label: r })
       );
     },
     sx: {
@@ -178,130 +182,130 @@ 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__ */ i(d, { variant: "body2", display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ e(L, { fontSize: "small", sx: { mr: 1 } }),
+      r
     ] })
   }
 ), w = [
   {
     internalId: "documents",
     label: "Mes formulaires",
-    iconType: r.FOLDER,
+    iconType: t.FOLDER,
     children: [
       {
         internalId: "folder1",
         label: "Premier dossier",
-        iconType: r.FOLDER,
+        iconType: t.FOLDER,
         children: [
           {
             internalId: "subfolder1",
             label: "Sous-dossier 1",
-            iconType: r.FOLDER
+            iconType: t.FOLDER
           },
           {
             internalId: "subfolder2",
             label: "Sous-dossier 2",
-            iconType: r.FOLDER
+            iconType: t.FOLDER
           }
         ]
       },
       {
         internalId: "folder2",
         label: "Deuxième dossier",
-        iconType: r.FOLDER
+        iconType: t.FOLDER
       },
       {
         internalId: "folder3",
         label: "Troisième dossier",
-        iconType: r.FOLDER
+        iconType: t.FOLDER
       }
     ]
   },
   {
     internalId: "shared",
     label: "Formulaires partagés avec moi",
-    iconType: r.SHARE
+    iconType: t.SHARE
   },
   {
     internalId: "trash",
     label: "Corbeille",
-    iconType: r.TRASH
+    iconType: t.TRASH
   }
-], z = [
+], H = [
   {
     internalId: "bookmarks",
     label: "Favoris",
-    iconType: O,
+    iconType: q,
     children: [
       {
         internalId: "important",
         label: "Important",
-        iconType: r.CUSTOM,
-        customIcon: A
+        iconType: t.CUSTOM,
+        customIcon: P
       }
     ]
   },
   ...w
-], S = [
+], R = [
   {
     internalId: "documents",
     label: "Documents",
-    iconType: r.SHARE,
+    iconType: t.SHARE,
     children: [
       {
         internalId: "reports",
         label: "Rapports",
-        iconType: r.FOLDER,
+        iconType: t.FOLDER,
         children: [
           {
             internalId: "report1",
             label: "Rapport Janvier",
-            iconType: r.FOLDER
+            iconType: t.FOLDER
           },
           {
             internalId: "report2",
             label: "Rapport Février",
-            iconType: r.FOLDER
+            iconType: t.FOLDER
           },
           {
             internalId: "report3",
             label: "Rapport Mars",
-            iconType: r.FOLDER
+            iconType: t.FOLDER
           }
         ]
       },
-      { internalId: "invoices", label: "Factures", iconType: r.FOLDER }
+      { internalId: "invoices", label: "Factures", iconType: t.FOLDER }
     ]
   },
   {
     internalId: "media",
     label: "Médias",
-    iconType: r.FOLDER,
+    iconType: t.FOLDER,
     children: [
-      { internalId: "images", label: "Images", iconType: r.FOLDER },
-      { internalId: "videos", label: "Vidéos", iconType: r.FOLDER }
+      { internalId: "images", label: "Images", iconType: t.FOLDER },
+      { internalId: "videos", label: "Vidéos", iconType: t.FOLDER }
     ]
   },
   {
     internalId: "downloads",
     label: "Téléchargements",
-    iconType: r.FOLDER
+    iconType: t.FOLDER
   }
-], ne = {
+], ae = {
   render: () => {
-    const [i, o] = I(""), l = C(
-      (n, t) => {
-        console.log(`Élément sélectionné: ${t}`), t && o(t);
+    const [l, r] = b(""), o = x(
+      (s, n) => {
+        console.log(`Élément sélectionné: ${n}`), n && r(n);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      h,
+      p,
       {
         items: w,
-        selectedItemId: i,
-        handleSelectedItemChange: l
+        selectedItemId: l,
+        handleSelectedItemChange: o
       }
     ) });
   },
@@ -314,16 +318,16 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, ie = {
+}, de = {
   args: {
     items: w,
     selectedItemId: "folder1",
-    handleSelectedItemChange: (i, o) => {
-      console.log(`Élément sélectionné: ${o}`);
+    handleSelectedItemChange: (l, 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: (l) => /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(p, { ...l }) }),
   parameters: {
     docs: {
       description: {
@@ -331,20 +335,20 @@ 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 [l, r] = b("bookmarks"), o = x(
+      (s, n) => {
+        console.log(`Élément sélectionné: ${n}`), n && r(n);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      h,
+      p,
       {
-        items: z,
-        selectedItemId: i,
-        handleSelectedItemChange: l
+        items: H,
+        selectedItemId: l,
+        handleSelectedItemChange: o
       }
     ) });
   },
@@ -357,63 +361,90 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, le = {
+}, me = {
   render: () => {
-    const i = [
+    const [l, r] = b("item1"), o = x(
+      (s, n) => {
+        console.log(`Élément sélectionné: ${n}`), n && r(n);
+      },
+      []
+    );
+    return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      p,
+      {
+        items: H,
+        selectedItemId: l,
+        handleSelectedItemChange: o,
+        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 l = [
       {
         internalId: "root",
         label: "Structure imbriquée complexe",
-        iconType: r.FOLDER,
+        iconType: t.FOLDER,
         children: [
           {
             internalId: "level1-1",
             label: "Niveau 1.1",
-            iconType: r.FOLDER,
+            iconType: t.FOLDER,
             children: [
               {
                 internalId: "level2-1",
                 label: "Niveau 2.1",
-                iconType: r.FOLDER,
+                iconType: t.FOLDER,
                 children: [
                   {
                     internalId: "level3-1V",
                     label: "VOUS M'AVEZ TROUVÉ HIHIHI",
-                    iconType: r.FOLDER
+                    iconType: t.FOLDER
                   },
                   {
                     internalId: "level3-2",
                     label: "Niveau 3.2",
-                    iconType: r.SHARE
+                    iconType: t.SHARE
                   }
                 ]
               },
               {
                 internalId: "level2-2",
                 label: "Niveau 2.2",
-                iconType: r.TRASH
+                iconType: t.TRASH
               }
             ]
           },
           {
             internalId: "level1-2",
             label: "Niveau 1.2",
-            iconType: r.CUSTOM,
-            customIcon: O
+            iconType: t.CUSTOM,
+            customIcon: q
           }
         ]
       }
-    ], [o, l] = I("level2-1"), n = C(
-      (t, d) => {
-        console.log(`Élément sélectionné: ${d}`), d && l(d);
+    ], [r, o] = b("level2-1"), s = x(
+      (n, c) => {
+        console.log(`Élément sélectionné: ${c}`), c && o(c);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      h,
+      p,
       {
-        items: i,
-        selectedItemId: o,
-        handleSelectedItemChange: n
+        items: l,
+        selectedItemId: r,
+        handleSelectedItemChange: s
       }
     ) });
   },
@@ -426,9 +457,9 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, se = {
+}, pe = {
   render: () => {
-    const i = ["primary", "secondary", "info"], [o, l] = I({
+    const l = ["primary", "secondary", "info"], [r, o] = b({
       primary: "",
       secondary: "",
       info: ""
@@ -442,7 +473,7 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
           gap: 3,
           overflowY: "hidden"
         },
-        children: i.map((n) => /* @__PURE__ */ s(
+        children: l.map((s) => /* @__PURE__ */ i(
           a,
           {
             sx: {
@@ -450,24 +481,24 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
               overflowY: "hidden"
             },
             children: [
-              /* @__PURE__ */ s(m, { variant: "subtitle2", gutterBottom: !0, children: [
+              /* @__PURE__ */ i(d, { variant: "subtitle2", gutterBottom: !0, children: [
                 "Icônes ",
-                n
+                s
               ] }),
               /* @__PURE__ */ e(
-                h,
+                p,
                 {
                   items: w,
-                  selectedItemId: o[n],
-                  handleSelectedItemChange: (t, d) => {
-                    d && l((u) => ({ ...u, [n]: d }));
+                  selectedItemId: r[s],
+                  handleSelectedItemChange: (n, c) => {
+                    c && o((u) => ({ ...u, [s]: c }));
                   },
-                  iconColor: n
+                  iconColor: s
                 }
               )
             ]
           },
-          n
+          s
         ))
       }
     );
@@ -481,101 +512,140 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, ae = {
+}, he = {
   render: () => {
-    const i = () => {
-      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 l = () => {
+      var u, T;
+      const c = [];
+      for (let I = 1; I <= 5; I++) {
+        const S = {
+          internalId: `main-folder-${I}`,
+          label: `Dossier principal ${I}`,
+          iconType: t.FOLDER,
           children: []
         };
-        for (let c = 1; c <= 10; c++) {
-          const f = {
-            internalId: `subfolder-${p}-${c}`,
-            label: `Sous-dossier ${p}.${c}`,
-            iconType: r.FOLDER,
+        for (let m = 1; m <= 10; m++) {
+          const g = {
+            internalId: `subfolder-${I}-${m}`,
+            label: `Sous-dossier ${I}.${m}`,
+            iconType: t.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
+          for (let v = 1; v <= 5; v++)
+            (u = g.children) == null || u.push({
+              internalId: `item-${I}-${m}-${v}`,
+              label: `Élément ${I}.${m}.${v}`,
+              iconType: t.CUSTOM,
+              customIcon: L
             });
-          (y = T.children) == null || y.push(f);
+          (T = S.children) == null || T.push(g);
         }
-        d.push(T);
+        c.push(S);
       }
-      return d;
-    }, [o, l] = I(""), n = i(), t = C(
-      (d, u) => {
-        u && l(u);
+      return c;
+    }, [r, o] = b(""), s = l(), n = x(
+      (c, u) => {
+        u && o(u);
       },
       []
     );
-    return /* @__PURE__ */ s(a, { children: [
-      /* @__PURE__ */ e(m, { 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
-            }
-          ) })
+    return /* @__PURE__ */ i(a, { children: [
+      /* @__PURE__ */ e(d, { variant: "h6", gutterBottom: !0, children: "TreeView avec hauteur limitée et défilement vertical" }),
+      /* @__PURE__ */ i(h, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ i(f, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(d, { variant: "subtitle2", gutterBottom: !0, children: "Hauteur maximale de 300px avec overflow" }),
+          /* @__PURE__ */ i(a, { sx: { border: "1px solid #e0e0e0", borderRadius: 1 }, children: [
+            /* @__PURE__ */ e(
+              p,
+              {
+                items: s,
+                selectedItemId: r,
+                handleSelectedItemChange: n,
+                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(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ i(f, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(d, { variant: "subtitle2", gutterBottom: !0, children: "Hauteur maximale de 500px avec overflow" }),
+          /* @__PURE__ */ i(a, { sx: { border: "1px solid #e0e0e0", borderRadius: 1 }, children: [
+            /* @__PURE__ */ e(
+              p,
+              {
+                items: s,
+                selectedItemId: r,
+                handleSelectedItemChange: n,
+                maxHeight: 500
+              }
+            ),
+            /* @__PURE__ */ i(
+              a,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  p: 1.5,
+                  bgcolor: "background.default",
+                  borderTop: "1px solid #e0e0e0"
+                },
+                children: [
+                  /* @__PURE__ */ e(y, { size: "small", variant: "outlined", children: "Annuler" }),
+                  /* @__PURE__ */ e(y, { 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__ */ s(a, { sx: { display: "flex", mb: 2 }, children: [
+      /* @__PURE__ */ e(a, { mt: 4, children: /* @__PURE__ */ i(f, { sx: { p: 2 }, children: [
+        /* @__PURE__ */ e(d, { variant: "subtitle2", gutterBottom: !0, children: "TreeView expansé manuellement" }),
+        /* @__PURE__ */ i(a, { sx: { display: "flex", mb: 2 }, children: [
           /* @__PURE__ */ e(
-            L,
+            y,
             {
               variant: "outlined",
-              onClick: () => l("subfolder-1-1"),
+              onClick: () => o("subfolder-1-1"),
               sx: { mr: 1 },
               children: "Sélectionner Sous-dossier 1.1"
             }
           ),
           /* @__PURE__ */ e(
-            L,
+            y,
             {
               variant: "outlined",
-              onClick: () => l("item-3-5-2"),
+              onClick: () => o("item-3-5-2"),
               children: "Sélectionner Élément 3.5.2"
             }
           )
         ] }),
-        /* @__PURE__ */ e(a, { sx: { borderRadius: 1 }, children: /* @__PURE__ */ e(
-          h,
-          {
-            items: n,
-            selectedItemId: o,
-            handleSelectedItemChange: t,
-            height: 400
-          }
-        ) })
+        /* @__PURE__ */ i(a, { sx: { borderRadius: 1, border: "1px solid #e0e0e0" }, children: [
+          /* @__PURE__ */ e(
+            p,
+            {
+              items: s,
+              selectedItemId: r,
+              handleSelectedItemChange: n,
+              maxHeight: 400
+            }
+          ),
+          /* @__PURE__ */ e(F, {}),
+          /* @__PURE__ */ i(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(U, { 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 [l, r] = b("reports"), o = (c, u) => {
+      console.log("TreeView sélection:", u), u && r(u);
+    }, s = (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: [
+    return /* @__PURE__ */ i(a, { sx: { width: "100%", overflowY: "hidden" }, children: [
+      /* @__PURE__ */ i(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 = V(R).find(
+            (T) => T.internalId === l
           );
           return u ? u.label : "Aucun élément sélectionné";
         })() }),
         " (ID:",
         " ",
-        i,
+        l,
         ")"
       ] }),
       /* @__PURE__ */ e(
-        Y,
+        N,
         {
-          items: S,
-          onRandomSelect: n
+          items: R,
+          onRandomSelect: s
         }
       ),
-      /* @__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__ */ i(h, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ i(f, { sx: { p: 2, overflowY: "hidden" }, children: [
+          /* @__PURE__ */ e(d, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
           /* @__PURE__ */ e(
-            h,
+            p,
             {
-              items: S,
-              selectedItemId: i,
-              handleSelectedItemChange: l
+              items: R,
+              selectedItemId: l,
+              handleSelectedItemChange: o
             }
           )
         ] }) }),
-        /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
-          P,
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
+          Y,
           {
-            items: S,
-            selectedItemId: i,
-            onItemSelect: n
+            items: R,
+            selectedItemId: l,
+            onItemSelect: s
           }
         ) })
       ] })
@@ -648,37 +718,37 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, ce = {
+}, be = {
   render: () => {
-    var p, T;
-    const [i, o] = I([
+    var I, S;
+    const [l, r] = b([
       ...w
-    ]), [l, n] = I("folder1"), [t, d] = I(null), u = [
+    ]), [o, s] = b("folder1"), [n, c] = b(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");
+    ], T = (m) => {
+      m.preventDefault();
+      const g = m.target, v = g.closest("[data-treeview-item]");
+      let D = null, E = null;
+      v ? (D = v.getAttribute("data-treeview-item"), E = v.getAttribute("data-treeview-item-label")) : g.closest("[data-treeview-root]") && (D = 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: D,
+          itemLabel: E,
+          droppedItem: C
+        }), D && s(D);
+      } 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__ */ s(b, { container: !0, spacing: 3, children: [
-        /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ i(a, { sx: { maxWidth: 700, overflowY: "hidden" }, children: [
+      /* @__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(j, { id: m.id, label: m.label }, m.id)) }),
+      /* @__PURE__ */ i(h, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ i(
           a,
           {
             sx: {
@@ -689,45 +759,45 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
               overflowY: "hidden",
               backgroundColor: "background.paper"
             },
-            onDragOver: (c) => c.preventDefault(),
-            onDrop: y,
+            onDragOver: (m) => m.preventDefault(),
+            onDrop: T,
             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,
-                  selectedItemId: l,
-                  handleSelectedItemChange: (c, f) => {
-                    f && n(f);
+                  items: l,
+                  selectedItemId: o,
+                  handleSelectedItemChange: (m, g) => {
+                    g && s(g);
                   }
                 }
               )
             ]
           }
         ) }),
-        /* @__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" }),
-          t ? /* @__PURE__ */ s(a, { children: [
-            /* @__PURE__ */ s(m, { variant: "body2", children: [
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ i(f, { sx: { p: 2, minHeight: 300 }, children: [
+          /* @__PURE__ */ e(d, { variant: "subtitle1", gutterBottom: !0, children: "Informations du dernier drop" }),
+          n ? /* @__PURE__ */ i(a, { children: [
+            /* @__PURE__ */ i(d, { variant: "body2", children: [
               /* @__PURE__ */ e("strong", { children: "Élément cible :" }),
               " ",
-              t.itemLabel,
+              n.itemLabel,
               " ",
-              t.itemId && `(ID: ${t.itemId})`
+              n.itemId && `(ID: ${n.itemId})`
             ] }),
-            /* @__PURE__ */ s(m, { variant: "body2", children: [
+            /* @__PURE__ */ i(d, { variant: "body2", children: [
               /* @__PURE__ */ e("strong", { children: "Élément déposé :" }),
               " ",
-              (p = t.droppedItem) == null ? void 0 : p.label,
+              (I = n.droppedItem) == null ? void 0 : I.label,
               " (ID:",
               " ",
-              (T = t.droppedItem) == null ? void 0 : T.id,
+              (S = n.droppedItem) == null ? void 0 : S.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(v, { sx: { p: 1, mt: 1, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
+            /* @__PURE__ */ i(a, { sx: { mt: 2 }, children: [
+              /* @__PURE__ */ e(d, { variant: "body2", children: /* @__PURE__ */ e("strong", { children: "Code pour gérer ce drop :" }) }),
+              /* @__PURE__ */ e(f, { sx: { p: 1, mt: 1, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
                 "pre",
                 {
                   style: {
@@ -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." })
         ] }) })
       ] })
     ] });
@@ -772,15 +842,194 @@ const handleDrop = (e) => {
       }
     }
   }
+}, fe = {
+  render: () => {
+    const l = [
+      {
+        internalId: "root-1",
+        label: "Dossier principal",
+        iconType: t.FOLDER,
+        children: [
+          {
+            internalId: "folder-1-1",
+            label: "Sous-dossier avec un nom très long pour tester",
+            iconType: t.FOLDER,
+            children: [
+              {
+                internalId: "file-1-1-1",
+                label: "Document A",
+                iconType: t.CUSTOM,
+                customIcon: L
+              },
+              {
+                internalId: "folder-1-1-2",
+                label: "Sous-sous-dossier",
+                iconType: t.FOLDER,
+                children: [
+                  {
+                    internalId: "file-1-1-2-1",
+                    label: "Image.jpg",
+                    iconType: t.CUSTOM
+                  },
+                  {
+                    internalId: "file-1-1-2-2",
+                    label: "Document.pdf",
+                    iconType: t.CUSTOM,
+                    children: [
+                      {
+                        internalId: "file-1-1-2-7",
+                        label: "Image.jpg",
+                        iconType: t.CUSTOM
+                      },
+                      {
+                        internalId: "file-1-1-2-18",
+                        label: "Document.pdf",
+                        iconType: t.CUSTOM
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            internalId: "folder-1-2",
+            label: "Court",
+            iconType: t.FOLDER,
+            children: [
+              {
+                internalId: "file-1-2-1",
+                label: "Fichier",
+                iconType: t.CUSTOM
+              }
+            ]
+          }
+        ]
+      },
+      {
+        internalId: "root-2",
+        label: "Second dossier principal",
+        iconType: t.FOLDER,
+        children: [
+          {
+            internalId: "folder-2-1",
+            label: "Sous-dossier A",
+            iconType: t.FOLDER
+          },
+          {
+            internalId: "folder-2-2",
+            label: "Sous-dossier B",
+            iconType: t.FOLDER,
+            children: []
+          }
+        ]
+      },
+      {
+        internalId: "root-3",
+        label: "Troisième dossier principal",
+        iconType: t.FOLDER,
+        children: [
+          {
+            internalId: "folder-3-1",
+            label: "Sous-dossier X",
+            iconType: t.FOLDER,
+            children: [
+              {
+                internalId: "file-3-1-1",
+                label: "Fichier X-1",
+                iconType: t.CUSTOM
+              },
+              {
+                internalId: "file-3-1-2",
+                label: "Fichier X-2",
+                iconType: t.CUSTOM
+              }
+            ]
+          }
+        ]
+      }
+    ], [r, o] = b(""), s = x(
+      (n, c) => {
+        c && o(c);
+      },
+      []
+    );
+    return /* @__PURE__ */ i(a, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(d, { variant: "h5", gutterBottom: !0, children: "Test d'alignement des lignes verticales" }),
+      /* @__PURE__ */ e(d, { variant: "body2", color: "text.secondary", paragraph: !0, children: "Cette story permet de vérifier si les lignes verticales s'arrêtent toutes au même niveau, indépendamment de la taille des éléments. Essayez d'expandre et de collapser les différents niveaux." }),
+      /* @__PURE__ */ i(h, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ i(f, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(d, { variant: "subtitle1", gutterBottom: !0, children: "TreeView avec plusieurs niveaux imbriqués" }),
+          /* @__PURE__ */ e(a, { sx: { border: "1px solid #e0e0e0", borderRadius: 1 }, children: /* @__PURE__ */ e(
+            p,
+            {
+              items: l,
+              selectedItemId: r,
+              handleSelectedItemChange: s,
+              maxHeight: 400
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ i(f, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(d, { variant: "subtitle1", gutterBottom: !0, children: "Détails de l'élément sélectionné" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              sx: {
+                p: 2,
+                backgroundColor: "#f5f5f5",
+                borderRadius: 1,
+                minHeight: 100
+              },
+              children: r ? /* @__PURE__ */ i(d, { children: [
+                "Élément sélectionné: ",
+                /* @__PURE__ */ e("strong", { children: r })
+              ] }) : /* @__PURE__ */ e(d, { color: "text.secondary", children: "Aucun élément sélectionné. Cliquez sur un élément dans l'arborescence." })
+            }
+          ),
+          /* @__PURE__ */ i(a, { sx: { mt: 2 }, children: [
+            /* @__PURE__ */ e(
+              y,
+              {
+                variant: "outlined",
+                onClick: () => o("file-1-1-2-1"),
+                sx: { mr: 1 },
+                children: 'Sélectionner "Image.jpg"'
+              }
+            ),
+            /* @__PURE__ */ e(
+              y,
+              {
+                variant: "outlined",
+                onClick: () => o("folder-3-1"),
+                children: 'Sélectionner "Sous-dossier X"'
+              }
+            )
+          ] })
+        ] }) })
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Cette story permet de tester si les lignes verticales du TreeView s'alignent correctement. Elle utilise une arborescence à plusieurs niveaux avec des éléments de différentes tailles et labels de différentes longueurs pour mettre en évidence le comportement des lignes. Vérifiez que toutes les lignes verticales s'arrêtent au même niveau, créant ainsi une structure d'arborescence propre et cohérente."
+      }
+    }
+  }
 };
 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,
+  fe as TestAlignementLignes,
+  se as default
 };