@cgi-learning-hub/ui 1.4.0-dev.1742031677 → 1.4.0-dev.1742033609

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

@@ -1,23 +1,25 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { c as T } from "../../createSvgIcon-B62eln-G.js";
-import { useState as p, useCallback as y } from "react";
-import m from "../TreeView/TreeView.es.js";
-import { ICON_TYPE as t } from "../TreeView/types.es.js";
-import { B as c } from "../../Box-GMNejc_m.js";
-import { T as I } from "../../Typography-Ct2Sc9KM.js";
-import { G as f, L as x, a as E } from "../../ListItemText-B_hEVsaT.js";
-import { P as v } from "../../Paper-BrsaeLlu.js";
-import { B as R } from "../../Button-x5rtZxJN.js";
-import { D as C } from "../../Divider-CNGfzZqD.js";
-import { L } from "../../List-BTPrBGqY.js";
-import { L as O } from "../../ListItem-C9OfYRAP.js";
-const g = T(/* @__PURE__ */ e("path", {
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { c as x } from "../../createSvgIcon-B62eln-G.js";
+import { useState as p, useCallback as R } from "react";
+import I from "../TreeView/TreeView.es.js";
+import { ICON_TYPE as r } from "../TreeView/types.es.js";
+import { B as a } from "../../Box-GMNejc_m.js";
+import { T as c } from "../../Typography-Ct2Sc9KM.js";
+import { G as h, L as V, a as F } from "../../ListItemText-B_hEVsaT.js";
+import { P as T } from "../../Paper-BrsaeLlu.js";
+import { B as k } from "../../Button-x5rtZxJN.js";
+import { D as q } from "../../Divider-CNGfzZqD.js";
+import { L as H } from "../../List-BTPrBGqY.js";
+import { L as A } from "../../ListItem-C9OfYRAP.js";
+const O = x(/* @__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"), w = T(/* @__PURE__ */ e("path", {
+}), "Bookmark"), P = x(/* @__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", {
   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"), $ = {
+}), "Person"), re = {
   title: "Components/TreeView",
-  component: m,
+  component: I,
   argTypes: {
     items: {
       description: "**[Requis]** Liste des éléments à afficher dans le TreeView.",
@@ -79,6 +81,15 @@ 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é
 
+### 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 :
+- \`data-treeview-root="true"\` : Identifie la racine du TreeView
+- \`data-treeview-item="itemId"\` : Contient l'ID de l'élément 
+- \`data-treeview-item-label="label"\` : Contient le libellé de l'élément
+
+Pour gérer le drop, ajoutez des gestionnaires d'événements au niveau du conteneur parent et utilisez \`event.target.closest('[data-treeview-item]')\` pour identifier l'élément cible.
+
 ### Structure des données
 
 Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
@@ -97,159 +108,185 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, b = (n) => {
-  const o = [], i = (r) => {
-    o.push(r), r.children && r.children.forEach(
-      (s) => i(s)
+}, C = (n) => {
+  const i = [], l = (o) => {
+    i.push(o), o.children && o.children.forEach(
+      (t) => l(t)
     );
   };
-  return n.forEach((r) => i(r)), o;
-}, D = ({
+  return n.forEach((o) => l(o)), i;
+}, Y = ({
   items: n,
-  selectedItemId: o,
-  onItemSelect: i
+  selectedItemId: i,
+  onItemSelect: l
 }) => {
-  const r = b(n);
-  return /* @__PURE__ */ d(v, { sx: { width: "100%", maxHeight: 300, overflow: "auto" }, children: [
-    /* @__PURE__ */ e(I, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
-    /* @__PURE__ */ e(C, {}),
-    /* @__PURE__ */ e(L, { children: r.map((s) => /* @__PURE__ */ e(O, { disablePadding: !0, children: /* @__PURE__ */ e(
-      x,
+  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,
       {
-        selected: o === s.internalId,
-        onClick: () => i(s.internalId),
-        children: /* @__PURE__ */ e(E, { primary: s.label })
+        selected: i === t.internalId,
+        onClick: () => l(t.internalId),
+        children: /* @__PURE__ */ e(F, { primary: t.label })
       }
-    ) }, s.internalId)) })
+    ) }, t.internalId)) })
   ] });
-}, V = ({
+}, z = ({
   items: n,
-  onRandomSelect: o
+  onRandomSelect: i
 }) => {
-  const i = b(n);
-  return /* @__PURE__ */ e(c, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(R, { variant: "contained", color: "primary", onClick: () => {
-    const s = Math.floor(Math.random() * i.length);
-    o(i[s].internalId);
+  const l = C(n);
+  return /* @__PURE__ */ e(a, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(k, { variant: "contained", color: "primary", onClick: () => {
+    const t = Math.floor(Math.random() * l.length);
+    i(l[t].internalId);
   }, children: "Sélection aléatoire" }) });
-}, h = [
+}, M = ({ id: n, label: i }) => /* @__PURE__ */ e(
+  a,
+  {
+    draggable: !0,
+    onDragStart: (l) => {
+      l.dataTransfer.setData(
+        "application/json",
+        JSON.stringify({ id: n, label: i })
+      );
+    },
+    sx: {
+      padding: 1,
+      margin: 1,
+      backgroundColor: "grey.100",
+      borderRadius: 1,
+      display: "inline-block",
+      cursor: "grab",
+      "&:hover": {
+        backgroundColor: "grey.200"
+      }
+    },
+    children: /* @__PURE__ */ s(c, { variant: "body2", display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ e(P, { fontSize: "small", sx: { mr: 1 } }),
+      i
+    ] })
+  }
+), g = [
   {
     internalId: "documents",
     label: "Mes formulaires",
-    iconType: t.FOLDER,
+    iconType: r.FOLDER,
     children: [
       {
         internalId: "folder1",
         label: "Premier dossier",
-        iconType: t.FOLDER,
+        iconType: r.FOLDER,
         children: [
           {
             internalId: "subfolder1",
             label: "Sous-dossier 1",
-            iconType: t.FOLDER
+            iconType: r.FOLDER
           },
           {
             internalId: "subfolder2",
             label: "Sous-dossier 2",
-            iconType: t.FOLDER
+            iconType: r.FOLDER
           }
         ]
       },
       {
         internalId: "folder2",
         label: "Deuxième dossier",
-        iconType: t.FOLDER
+        iconType: r.FOLDER
       },
       {
         internalId: "folder3",
         label: "Troisième dossier",
-        iconType: t.FOLDER
+        iconType: r.FOLDER
       }
     ]
   },
   {
     internalId: "shared",
     label: "Formulaires partagés avec moi",
-    iconType: t.SHARE
+    iconType: r.SHARE
   },
   {
     internalId: "trash",
     label: "Corbeille",
-    iconType: t.TRASH
+    iconType: r.TRASH
   }
-], F = [
+], N = [
   {
     internalId: "bookmarks",
     label: "Favoris",
-    iconType: g,
+    iconType: O,
     children: [
       {
         internalId: "important",
         label: "Important",
-        iconType: t.CUSTOM,
-        customIcon: w
+        iconType: r.CUSTOM,
+        customIcon: B
       }
     ]
   },
-  ...h
-], u = [
+  ...g
+], y = [
   {
     internalId: "documents",
     label: "Documents",
-    iconType: t.SHARE,
+    iconType: r.SHARE,
     children: [
       {
         internalId: "reports",
         label: "Rapports",
-        iconType: t.FOLDER,
+        iconType: r.FOLDER,
         children: [
           {
             internalId: "report1",
             label: "Rapport Janvier",
-            iconType: t.FOLDER
+            iconType: r.FOLDER
           },
           {
             internalId: "report2",
             label: "Rapport Février",
-            iconType: t.FOLDER
+            iconType: r.FOLDER
           },
           {
             internalId: "report3",
             label: "Rapport Mars",
-            iconType: t.FOLDER
+            iconType: r.FOLDER
           }
         ]
       },
-      { internalId: "invoices", label: "Factures", iconType: t.FOLDER }
+      { internalId: "invoices", label: "Factures", iconType: r.FOLDER }
     ]
   },
   {
     internalId: "media",
     label: "Médias",
-    iconType: t.FOLDER,
+    iconType: r.FOLDER,
     children: [
-      { internalId: "images", label: "Images", iconType: t.FOLDER },
-      { internalId: "videos", label: "Vidéos", iconType: t.FOLDER }
+      { internalId: "images", label: "Images", iconType: r.FOLDER },
+      { internalId: "videos", label: "Vidéos", iconType: r.FOLDER }
     ]
   },
   {
     internalId: "downloads",
     label: "Téléchargements",
-    iconType: t.FOLDER
+    iconType: r.FOLDER
   }
-], z = {
+], ne = {
   render: () => {
-    const [n, o] = p(""), i = y(
-      (r, s) => {
-        console.log(`Élément sélectionné: ${s}`), s && o(s);
+    const [n, i] = p(""), l = R(
+      (o, t) => {
+        console.log(`Élément sélectionné: ${t}`), t && i(t);
       },
       []
     );
-    return /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      m,
+    return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      I,
       {
-        items: h,
+        items: g,
         selectedItemId: n,
-        handleSelectedItemChange: i
+        handleSelectedItemChange: l
       }
     ) });
   },
@@ -262,16 +299,16 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, G = {
+}, oe = {
   args: {
-    items: h,
+    items: g,
     selectedItemId: "folder1",
-    handleSelectedItemChange: (n, o) => {
-      console.log(`Élément sélectionné: ${o}`);
+    handleSelectedItemChange: (n, i) => {
+      console.log(`Élément sélectionné: ${i}`);
     },
     iconColor: "success"
   },
-  render: (n) => /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(m, { ...n }) }),
+  render: (n) => /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(I, { ...n }) }),
   parameters: {
     docs: {
       description: {
@@ -279,20 +316,20 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, J = {
+}, ie = {
   render: () => {
-    const [n, o] = p("bookmarks"), i = y(
-      (r, s) => {
-        console.log(`Élément sélectionné: ${s}`), s && o(s);
+    const [n, i] = p("bookmarks"), l = R(
+      (o, t) => {
+        console.log(`Élément sélectionné: ${t}`), t && i(t);
       },
       []
     );
-    return /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      m,
+    return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      I,
       {
-        items: F,
+        items: N,
         selectedItemId: n,
-        handleSelectedItemChange: i
+        handleSelectedItemChange: l
       }
     ) });
   },
@@ -305,63 +342,63 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, Z = {
+}, le = {
   render: () => {
     const n = [
       {
         internalId: "root",
         label: "Structure imbriquée complexe",
-        iconType: t.FOLDER,
+        iconType: r.FOLDER,
         children: [
           {
             internalId: "level1-1",
             label: "Niveau 1.1",
-            iconType: t.FOLDER,
+            iconType: r.FOLDER,
             children: [
               {
                 internalId: "level2-1",
                 label: "Niveau 2.1",
-                iconType: t.FOLDER,
+                iconType: r.FOLDER,
                 children: [
                   {
                     internalId: "level3-1V",
                     label: "VOUS M'AVEZ TROUVÉ HIHIHI",
-                    iconType: t.FOLDER
+                    iconType: r.FOLDER
                   },
                   {
                     internalId: "level3-2",
                     label: "Niveau 3.2",
-                    iconType: t.SHARE
+                    iconType: r.SHARE
                   }
                 ]
               },
               {
                 internalId: "level2-2",
                 label: "Niveau 2.2",
-                iconType: t.TRASH
+                iconType: r.TRASH
               }
             ]
           },
           {
             internalId: "level1-2",
             label: "Niveau 1.2",
-            iconType: t.CUSTOM,
-            customIcon: g
+            iconType: r.CUSTOM,
+            customIcon: O
           }
         ]
       }
-    ], [o, i] = p("level2-1"), r = y(
-      (s, l) => {
-        console.log(`Élément sélectionné: ${l}`), l && i(l);
+    ], [i, l] = p("level2-1"), o = R(
+      (t, d) => {
+        console.log(`Élément sélectionné: ${d}`), d && l(d);
       },
       []
     );
-    return /* @__PURE__ */ e(c, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
-      m,
+    return /* @__PURE__ */ e(a, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      I,
       {
         items: n,
-        selectedItemId: o,
-        handleSelectedItemChange: r
+        selectedItemId: i,
+        handleSelectedItemChange: o
       }
     ) });
   },
@@ -374,15 +411,15 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, K = {
+}, se = {
   render: () => {
-    const n = ["primary", "secondary", "info"], [o, i] = p({
+    const n = ["primary", "secondary", "info"], [i, l] = p({
       primary: "",
       secondary: "",
       info: ""
     });
     return /* @__PURE__ */ e(
-      c,
+      a,
       {
         sx: {
           display: "flex",
@@ -390,32 +427,32 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
           gap: 3,
           overflowY: "hidden"
         },
-        children: n.map((r) => /* @__PURE__ */ d(
-          c,
+        children: n.map((o) => /* @__PURE__ */ s(
+          a,
           {
             sx: {
               maxWidth: 250,
               overflowY: "hidden"
             },
             children: [
-              /* @__PURE__ */ d(I, { variant: "subtitle2", gutterBottom: !0, children: [
+              /* @__PURE__ */ s(c, { variant: "subtitle2", gutterBottom: !0, children: [
                 "Icônes ",
-                r
+                o
               ] }),
               /* @__PURE__ */ e(
-                m,
+                I,
                 {
-                  items: h,
-                  selectedItemId: o[r],
-                  handleSelectedItemChange: (s, l) => {
-                    l && i((a) => ({ ...a, [r]: l }));
+                  items: g,
+                  selectedItemId: i[o],
+                  handleSelectedItemChange: (t, d) => {
+                    d && l((m) => ({ ...m, [o]: d }));
                   },
-                  iconColor: r
+                  iconColor: o
                 }
               )
             ]
           },
-          r
+          o
         ))
       }
     );
@@ -429,21 +466,21 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, Q = {
+}, ae = {
   render: () => {
-    const [n, o] = p("reports"), i = (l, a) => {
-      console.log("TreeView sélection:", a), a && o(a);
-    }, r = (l) => {
-      console.log("Sélection externe:", l), o(l);
+    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);
     };
-    return /* @__PURE__ */ d(c, { sx: { width: "100%", overflowY: "hidden" }, children: [
-      /* @__PURE__ */ d(I, { variant: "subtitle1", gutterBottom: !0, children: [
+    return /* @__PURE__ */ s(a, { sx: { width: "100%", overflowY: "hidden" }, children: [
+      /* @__PURE__ */ s(c, { variant: "subtitle1", gutterBottom: !0, children: [
         "Élément sélectionné: ",
         /* @__PURE__ */ e("strong", { children: (() => {
-          const a = b(u).find(
-            (S) => S.internalId === n
+          const m = C(y).find(
+            (w) => w.internalId === n
           );
-          return a ? a.label : "Aucun élément sélectionné";
+          return m ? m.label : "Aucun élément sélectionné";
         })() }),
         " (ID:",
         " ",
@@ -451,30 +488,30 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
         ")"
       ] }),
       /* @__PURE__ */ e(
-        V,
+        z,
         {
-          items: u,
-          onRandomSelect: r
+          items: y,
+          onRandomSelect: o
         }
       ),
-      /* @__PURE__ */ d(f, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
-        /* @__PURE__ */ e(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ d(v, { sx: { p: 2, overflowY: "hidden" }, children: [
-          /* @__PURE__ */ e(I, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
+      /* @__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__ */ e(
-            m,
+            I,
             {
-              items: u,
+              items: y,
               selectedItemId: n,
-              handleSelectedItemChange: i
+              handleSelectedItemChange: l
             }
           )
         ] }) }),
-        /* @__PURE__ */ e(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
-          D,
+        /* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
+          Y,
           {
-            items: u,
+            items: y,
             selectedItemId: n,
-            onItemSelect: r
+            onItemSelect: o
           }
         ) })
       ] })
@@ -489,13 +526,138 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
+}, de = {
+  render: () => {
+    var E, L;
+    const [n, i] = p([
+      ...g
+    ]), [l, o] = p("folder1"), [t, d] = p(null), m = [
+      { 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");
+      try {
+        const v = JSON.parse(u.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);
+      }
+    };
+    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(
+          a,
+          {
+            sx: {
+              p: 2,
+              border: "1px dashed gray",
+              borderRadius: 1,
+              minHeight: 300,
+              overflowY: "hidden",
+              backgroundColor: "background.paper"
+            },
+            onDragOver: (u) => u.preventDefault(),
+            onDrop: w,
+            children: [
+              /* @__PURE__ */ e(c, { variant: "subtitle1", gutterBottom: !0, children: "Zone de drop" }),
+              /* @__PURE__ */ e(
+                I,
+                {
+                  items: n,
+                  selectedItemId: l,
+                  handleSelectedItemChange: (u, b) => {
+                    b && o(b);
+                  }
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__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" }),
+          t ? /* @__PURE__ */ s(a, { children: [
+            /* @__PURE__ */ s(c, { variant: "body2", children: [
+              /* @__PURE__ */ e("strong", { children: "Élément cible :" }),
+              " ",
+              t.itemLabel,
+              " ",
+              t.itemId && `(ID: ${t.itemId})`
+            ] }),
+            /* @__PURE__ */ s(c, { variant: "body2", children: [
+              /* @__PURE__ */ e("strong", { children: "Élément déposé :" }),
+              " ",
+              (E = t.droppedItem) == null ? void 0 : E.label,
+              " (ID:",
+              " ",
+              (L = t.droppedItem) == null ? void 0 : L.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(
+                "pre",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: "0.8rem",
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: `// Dans votre gestionnaire d'événements
+const handleDrop = (e) => {
+  e.preventDefault();
+  
+  // Identifier l'élément cible
+  const target = e.target;
+  const treeviewItem = target.closest('[data-treeview-item]');
+  
+  if (treeviewItem) {
+    const targetId = treeviewItem.getAttribute('data-treeview-item');
+    const targetLabel = treeviewItem.getAttribute('data-treeview-item-label');
+    
+    // Récupérer les données de l'élément déposé
+    const droppedData = JSON.parse(e.dataTransfer.getData('application/json'));
+    
+    console.log(\`Élément "\${droppedData.label}" déposé sur "\${targetLabel}"\`);
+    
+    // Votre logique pour traiter le drop...
+  }
+};`
+                }
+              ) })
+            ] })
+          ] }) : /* @__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." })
+        ] }) })
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Cette story démontre comment utiliser les attributs `data-` du TreeView pour implémenter une fonctionnalité de drag and drop. Glissez un document sur un élément du TreeView pour voir comment accéder aux informations de l'élément cible."
+      }
+    }
+  }
 };
 export {
-  J as AvecIconesPersonnalisees,
-  G as Controlable,
-  z as Default,
-  K as OptionsDeCouleurs,
-  Z as StructureImbriquee,
-  Q as Synchronicite,
-  $ as default
+  de as AvecDragAndDrop,
+  ie as AvecIconesPersonnalisees,
+  oe as Controlable,
+  ne as Default,
+  se as OptionsDeCouleurs,
+  le as StructureImbriquee,
+  ae as Synchronicite,
+  re as default
 };