@cgi-learning-hub/ui 1.4.0-dev.1742394029 → 1.4.0-dev.1742469130

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

@@ -1,25 +1,25 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { c as x } from "../../createSvgIcon-BFqOnlgU.js";
-import { useState as p, useCallback as R } from "react";
-import I from "../TreeView/TreeView.es.js";
+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 c } from "../../Typography-DZ11k9cZ.js";
-import { G as h, L as V, a as F } from "../../ListItemText-CADHegDF.js";
-import { P as T } from "../../Paper-DeL_n4k9.js";
-import { B as k } from "../../Button-CQQdMCSm.js";
-import { D as q } from "../../Divider-CT4XaEn6.js";
-import { L as H } from "../../List-CFInjv2S.js";
-import { L as A } from "../../ListItem-BAAZxsu5.js";
-const O = x(/* @__PURE__ */ e("path", {
+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", {
   d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
-}), "Bookmark"), P = x(/* @__PURE__ */ e("path", {
+}), "Bookmark"), F = E(/* @__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"), B = x(/* @__PURE__ */ e("path", {
+}), "Description"), A = E(/* @__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 = {
   title: "Components/TreeView",
-  component: I,
+  component: h,
   argTypes: {
     items: {
       description: "**[Requis]** Liste des éléments à afficher dans le TreeView.",
@@ -56,6 +56,15 @@ const O = x(/* @__PURE__ */ e("path", {
         type: { summary: "string" },
         defaultValue: { summary: "primary" }
       }
+    },
+    height: {
+      description: "**[Optionnel]** Hauteur du TreeView avec gestion automatique du défilement.",
+      control: "number",
+      table: {
+        required: !1,
+        type: { summary: "number | string" },
+        defaultValue: { summary: "auto" }
+      }
     }
   },
   parameters: {
@@ -81,6 +90,12 @@ Vous pouvez également passer directement un composant SvgIcon comme valeur de \
 - \`handleSelectedItemChange\`: Permet de réagir quand un utilisateur clique sur un élément
 - \`selectedItemId\`: Permet de définir l'élément sélectionné
 
+### Contrôle de la hauteur et du défilement
+
+- \`height\`: Définit une hauteur fixe pour le TreeView et active le défilement vertical automatique
+  - Accepte une valeur numérique (en pixels) ou une chaîne (par exemple "400px", "100%")
+  - Quand spécifié, le TreeView sera limité à cette hauteur et affichera une barre de défilement si nécessaire
+
 ### Gestion du Drag and Drop
 
 Le TreeView inclut des attributs \`data-\` qui vous permettent d'identifier facilement les éléments lors d'opérations de glisser-déposer :
@@ -108,48 +123,48 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, C = (n) => {
-  const i = [], l = (o) => {
-    i.push(o), o.children && o.children.forEach(
+}, V = (i) => {
+  const o = [], l = (n) => {
+    o.push(n), n.children && n.children.forEach(
       (t) => l(t)
     );
   };
-  return n.forEach((o) => l(o)), i;
-}, Y = ({
-  items: n,
-  selectedItemId: i,
+  return i.forEach((n) => l(n)), o;
+}, P = ({
+  items: i,
+  selectedItemId: o,
   onItemSelect: l
 }) => {
-  const o = C(n);
-  return /* @__PURE__ */ s(T, { sx: { width: "100%", maxHeight: 300, overflow: "auto" }, children: [
-    /* @__PURE__ */ e(c, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
-    /* @__PURE__ */ e(q, {}),
-    /* @__PURE__ */ e(H, { children: o.map((t) => /* @__PURE__ */ e(A, { disablePadding: !0, children: /* @__PURE__ */ e(
-      V,
+  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,
       {
-        selected: i === t.internalId,
+        selected: o === t.internalId,
         onClick: () => l(t.internalId),
-        children: /* @__PURE__ */ e(F, { primary: t.label })
+        children: /* @__PURE__ */ e(H, { primary: t.label })
       }
     ) }, t.internalId)) })
   ] });
-}, z = ({
-  items: n,
-  onRandomSelect: i
+}, Y = ({
+  items: i,
+  onRandomSelect: o
 }) => {
-  const l = C(n);
-  return /* @__PURE__ */ e(a, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(k, { variant: "contained", color: "primary", onClick: () => {
+  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);
-    i(l[t].internalId);
+    o(l[t].internalId);
   }, children: "Sélection aléatoire" }) });
-}, M = ({ id: n, label: i }) => /* @__PURE__ */ e(
+}, M = ({ id: i, label: o }) => /* @__PURE__ */ e(
   a,
   {
     draggable: !0,
     onDragStart: (l) => {
       l.dataTransfer.setData(
         "application/json",
-        JSON.stringify({ id: n, label: i })
+        JSON.stringify({ id: i, label: o })
       );
     },
     sx: {
@@ -163,12 +178,12 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
         backgroundColor: "grey.200"
       }
     },
-    children: /* @__PURE__ */ s(c, { variant: "body2", display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ e(P, { fontSize: "small", sx: { mr: 1 } }),
-      i
+    children: /* @__PURE__ */ s(m, { variant: "body2", display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ e(F, { fontSize: "small", sx: { mr: 1 } }),
+      o
     ] })
   }
-), g = [
+), w = [
   {
     internalId: "documents",
     label: "Mes formulaires",
@@ -213,7 +228,7 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
     label: "Corbeille",
     iconType: r.TRASH
   }
-], N = [
+], z = [
   {
     internalId: "bookmarks",
     label: "Favoris",
@@ -223,12 +238,12 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
         internalId: "important",
         label: "Important",
         iconType: r.CUSTOM,
-        customIcon: B
+        customIcon: A
       }
     ]
   },
-  ...g
-], y = [
+  ...w
+], S = [
   {
     internalId: "documents",
     label: "Documents",
@@ -275,17 +290,17 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
   }
 ], ne = {
   render: () => {
-    const [n, i] = p(""), l = R(
-      (o, t) => {
-        console.log(`Élément sélectionné: ${t}`), t && i(t);
+    const [i, o] = I(""), l = C(
+      (n, t) => {
+        console.log(`Élément sélectionné: ${t}`), t && o(t);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      I,
+      h,
       {
-        items: g,
-        selectedItemId: n,
+        items: w,
+        selectedItemId: i,
         handleSelectedItemChange: l
       }
     ) });
@@ -299,16 +314,16 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, oe = {
+}, ie = {
   args: {
-    items: g,
+    items: w,
     selectedItemId: "folder1",
-    handleSelectedItemChange: (n, i) => {
-      console.log(`Élément sélectionné: ${i}`);
+    handleSelectedItemChange: (i, o) => {
+      console.log(`Élément sélectionné: ${o}`);
     },
     iconColor: "success"
   },
-  render: (n) => /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(I, { ...n }) }),
+  render: (i) => /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(h, { ...i }) }),
   parameters: {
     docs: {
       description: {
@@ -316,19 +331,19 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, ie = {
+}, oe = {
   render: () => {
-    const [n, i] = p("bookmarks"), l = R(
-      (o, t) => {
-        console.log(`Élément sélectionné: ${t}`), t && i(t);
+    const [i, o] = I("bookmarks"), l = C(
+      (n, t) => {
+        console.log(`Élément sélectionné: ${t}`), t && o(t);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      I,
+      h,
       {
-        items: N,
-        selectedItemId: n,
+        items: z,
+        selectedItemId: i,
         handleSelectedItemChange: l
       }
     ) });
@@ -344,7 +359,7 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
   }
 }, le = {
   render: () => {
-    const n = [
+    const i = [
       {
         internalId: "root",
         label: "Structure imbriquée complexe",
@@ -387,18 +402,18 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
           }
         ]
       }
-    ], [i, l] = p("level2-1"), o = R(
+    ], [o, l] = I("level2-1"), n = C(
       (t, d) => {
         console.log(`Élément sélectionné: ${d}`), d && l(d);
       },
       []
     );
     return /* @__PURE__ */ e(a, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      I,
+      h,
       {
-        items: n,
-        selectedItemId: i,
-        handleSelectedItemChange: o
+        items: i,
+        selectedItemId: o,
+        handleSelectedItemChange: n
       }
     ) });
   },
@@ -413,7 +428,7 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
   }
 }, se = {
   render: () => {
-    const n = ["primary", "secondary", "info"], [i, l] = p({
+    const i = ["primary", "secondary", "info"], [o, l] = I({
       primary: "",
       secondary: "",
       info: ""
@@ -427,7 +442,7 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
           gap: 3,
           overflowY: "hidden"
         },
-        children: n.map((o) => /* @__PURE__ */ s(
+        children: i.map((n) => /* @__PURE__ */ s(
           a,
           {
             sx: {
@@ -435,24 +450,24 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
               overflowY: "hidden"
             },
             children: [
-              /* @__PURE__ */ s(c, { variant: "subtitle2", gutterBottom: !0, children: [
+              /* @__PURE__ */ s(m, { variant: "subtitle2", gutterBottom: !0, children: [
                 "Icônes ",
-                o
+                n
               ] }),
               /* @__PURE__ */ e(
-                I,
+                h,
                 {
-                  items: g,
-                  selectedItemId: i[o],
+                  items: w,
+                  selectedItemId: o[n],
                   handleSelectedItemChange: (t, d) => {
-                    d && l((m) => ({ ...m, [o]: d }));
+                    d && l((u) => ({ ...u, [n]: d }));
                   },
-                  iconColor: o
+                  iconColor: n
                 }
               )
             ]
           },
-          o
+          n
         ))
       }
     );
@@ -468,50 +483,157 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
   }
 }, ae = {
   render: () => {
-    const [n, i] = p("reports"), l = (d, m) => {
-      console.log("TreeView sélection:", m), m && i(m);
-    }, o = (d) => {
-      console.log("Sélection externe:", d), i(d);
+    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,
+          children: []
+        };
+        for (let c = 1; c <= 10; c++) {
+          const f = {
+            internalId: `subfolder-${p}-${c}`,
+            label: `Sous-dossier ${p}.${c}`,
+            iconType: r.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
+            });
+          (y = T.children) == null || y.push(f);
+        }
+        d.push(T);
+      }
+      return d;
+    }, [o, l] = I(""), n = i(), t = C(
+      (d, 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__ */ 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(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(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(
+            L,
+            {
+              variant: "outlined",
+              onClick: () => l("subfolder-1-1"),
+              sx: { mr: 1 },
+              children: "Sélectionner Sous-dossier 1.1"
+            }
+          ),
+          /* @__PURE__ */ e(
+            L,
+            {
+              variant: "outlined",
+              onClick: () => l("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
+          }
+        ) })
+      ] }) })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    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."
+      }
+    }
+  }
+}, de = {
+  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);
     };
     return /* @__PURE__ */ s(a, { sx: { width: "100%", overflowY: "hidden" }, children: [
-      /* @__PURE__ */ s(c, { variant: "subtitle1", gutterBottom: !0, children: [
+      /* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
         "Élément sélectionné: ",
         /* @__PURE__ */ e("strong", { children: (() => {
-          const m = C(y).find(
-            (w) => w.internalId === n
+          const u = V(S).find(
+            (y) => y.internalId === i
           );
-          return m ? m.label : "Aucun élément sélectionné";
+          return u ? u.label : "Aucun élément sélectionné";
         })() }),
         " (ID:",
         " ",
-        n,
+        i,
         ")"
       ] }),
       /* @__PURE__ */ e(
-        z,
+        Y,
         {
-          items: y,
-          onRandomSelect: o
+          items: S,
+          onRandomSelect: n
         }
       ),
-      /* @__PURE__ */ s(h, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
-        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(T, { sx: { p: 2, overflowY: "hidden" }, children: [
-          /* @__PURE__ */ e(c, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
+      /* @__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(
-            I,
+            h,
             {
-              items: y,
-              selectedItemId: n,
+              items: S,
+              selectedItemId: i,
               handleSelectedItemChange: l
             }
           )
         ] }) }),
-        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
-          Y,
+        /* @__PURE__ */ e(b, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
+          P,
           {
-            items: y,
-            selectedItemId: n,
-            onItemSelect: o
+            items: S,
+            selectedItemId: i,
+            onItemSelect: n
           }
         ) })
       ] })
@@ -526,37 +648,37 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, de = {
+}, ce = {
   render: () => {
-    var E, L;
-    const [n, i] = p([
-      ...g
-    ]), [l, o] = p("folder1"), [t, d] = p(null), m = [
+    var p, T;
+    const [i, o] = I([
+      ...w
+    ]), [l, n] = I("folder1"), [t, d] = I(null), u = [
       { id: "doc1", label: "Document 1" },
       { id: "doc2", label: "Document 2" },
       { id: "doc3", label: "Document 3" }
-    ], w = (u) => {
-      u.preventDefault();
-      const b = u.target, D = b.closest("[data-treeview-item]");
-      let f = null, S = null;
-      D ? (f = D.getAttribute("data-treeview-item"), S = D.getAttribute("data-treeview-item-label")) : b.closest("[data-treeview-root]") && (f = null, S = "Racine du TreeView");
+    ], 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");
       try {
-        const v = JSON.parse(u.dataTransfer.getData("application/json"));
+        const D = JSON.parse(c.dataTransfer.getData("application/json"));
         d({
-          itemId: f,
-          itemLabel: S,
-          droppedItem: v
-        }), f && o(f);
-      } catch (v) {
-        console.error("Erreur lors de la récupération des données", v);
+          itemId: x,
+          itemLabel: R,
+          droppedItem: D
+        }), x && n(x);
+      } catch (D) {
+        console.error("Erreur lors de la récupération des données", D);
       }
     };
     return /* @__PURE__ */ s(a, { sx: { maxWidth: 700, overflowY: "hidden" }, children: [
-      /* @__PURE__ */ e(c, { variant: "h6", gutterBottom: !0, children: "Exemple de Drag & Drop avec le TreeView" }),
-      /* @__PURE__ */ e(c, { 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: m.map((u) => /* @__PURE__ */ e(M, { id: u.id, label: u.label }, u.id)) }),
-      /* @__PURE__ */ s(h, { container: !0, spacing: 3, children: [
-        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(
+      /* @__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(
           a,
           {
             sx: {
@@ -567,45 +689,45 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
               overflowY: "hidden",
               backgroundColor: "background.paper"
             },
-            onDragOver: (u) => u.preventDefault(),
-            onDrop: w,
+            onDragOver: (c) => c.preventDefault(),
+            onDrop: y,
             children: [
-              /* @__PURE__ */ e(c, { variant: "subtitle1", gutterBottom: !0, children: "Zone de drop" }),
+              /* @__PURE__ */ e(m, { variant: "subtitle1", gutterBottom: !0, children: "Zone de drop" }),
               /* @__PURE__ */ e(
-                I,
+                h,
                 {
-                  items: n,
+                  items: i,
                   selectedItemId: l,
-                  handleSelectedItemChange: (u, b) => {
-                    b && o(b);
+                  handleSelectedItemChange: (c, f) => {
+                    f && n(f);
                   }
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(T, { sx: { p: 2, minHeight: 300 }, children: [
-          /* @__PURE__ */ e(c, { variant: "subtitle1", gutterBottom: !0, children: "Informations du dernier drop" }),
+        /* @__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(c, { variant: "body2", children: [
+            /* @__PURE__ */ s(m, { variant: "body2", children: [
               /* @__PURE__ */ e("strong", { children: "Élément cible :" }),
               " ",
               t.itemLabel,
               " ",
               t.itemId && `(ID: ${t.itemId})`
             ] }),
-            /* @__PURE__ */ s(c, { variant: "body2", children: [
+            /* @__PURE__ */ s(m, { variant: "body2", children: [
               /* @__PURE__ */ e("strong", { children: "Élément déposé :" }),
               " ",
-              (E = t.droppedItem) == null ? void 0 : E.label,
+              (p = t.droppedItem) == null ? void 0 : p.label,
               " (ID:",
               " ",
-              (L = t.droppedItem) == null ? void 0 : L.id,
+              (T = t.droppedItem) == null ? void 0 : T.id,
               ")"
             ] }),
             /* @__PURE__ */ s(a, { sx: { mt: 2 }, children: [
-              /* @__PURE__ */ e(c, { variant: "body2", children: /* @__PURE__ */ e("strong", { children: "Code pour gérer ce drop :" }) }),
-              /* @__PURE__ */ e(T, { sx: { p: 1, mt: 1, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
+              /* @__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(
                 "pre",
                 {
                   style: {
@@ -636,7 +758,7 @@ const handleDrop = (e) => {
                 }
               ) })
             ] })
-          ] }) : /* @__PURE__ */ e(c, { variant: "body2", children: "Aucun élément déposé pour le moment. Glissez un document sur le TreeView pour voir les informations ici." })
+          ] }) : /* @__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." })
         ] }) })
       ] })
     ] });
@@ -652,12 +774,13 @@ const handleDrop = (e) => {
   }
 };
 export {
-  de as AvecDragAndDrop,
-  ie as AvecIconesPersonnalisees,
-  oe as Controlable,
+  ce as AvecDragAndDrop,
+  oe as AvecIconesPersonnalisees,
+  ie as Controlable,
   ne as Default,
+  ae as GrandeHauteurLimitee,
   se as OptionsDeCouleurs,
   le as StructureImbriquee,
-  ae as Synchronicite,
+  de as Synchronicite,
   re as default
 };