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

package/dist/components/TreeView/components/CustomTreeItem.cjs.js

@@ -1 +0,0 @@
-"use strict";require("react/jsx-runtime");const e=require("../../../CustomTreeItem-dmAy1wfu.cjs");require("../../../Box-DYA49L7w.cjs");require("react");require("../style.cjs.js");require("../utils.cjs.js");module.exports=e.CustomTreeItem;

package/dist/components/TreeView/components/CustomTreeItem.d.ts

@@ -1,3 +0,0 @@
-import { ExtendedTreeItem2Props } from '../types';
-declare const CustomTreeItem: import('react').ForwardRefExoticComponent<ExtendedTreeItem2Props & import('react').RefAttributes<HTMLLIElement>>;
-export default CustomTreeItem;

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

@@ -1,9 +0,0 @@
-import "react/jsx-runtime";
-import { C as e } from "../../../CustomTreeItem-kFMLEWpp.js";
-import "../../../Box-GMNejc_m.js";
-import "react";
-import "../style.es.js";
-import "../utils.es.js";
-export {
-  e as default
-};

package/dist/components/TreeView/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TreeView.cjs.js"),r=require("./types.cjs.js");exports.TreeView=e;exports.ICON_TYPE=r.ICON_TYPE;

package/dist/components/TreeView/index.d.ts

@@ -1,2 +0,0 @@
-export { default as TreeView } from './TreeView';
-export * from './types';

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

@@ -1,6 +0,0 @@
-import { default as o } from "./TreeView.es.js";
-import { ICON_TYPE as t } from "./types.es.js";
-export {
-  t as ICON_TYPE,
-  o as TreeView
-};

package/dist/components/TreeView/style.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="50px",t={minHeight:200,minWidth:200},n={display:"flex",alignItems:"center",width:"100%"},o={display:"flex",marginLeft:"auto"},r={borderLeft:"1px solid #bdbdbd",paddingLeft:"12px",marginLeft:"15px",marginTop:"4px",marginBottom:"4px"};exports.DEFAULT_CHILDREN_INDENT=e;exports.arrowContainerStyle=o;exports.expandedGroupStyle=r;exports.treeContainerStyle=t;exports.treeContentStyle=n;

package/dist/components/TreeView/style.d.ts

@@ -1,12 +0,0 @@
-import { CSSProperties } from 'react';
-export declare const DEFAULT_CHILDREN_INDENT = "50px";
-export declare const treeContainerStyle: {
-    minHeight: number;
-    minWidth: number;
-};
-export declare const treeContentStyle: CSSProperties;
-export declare const arrowContainerStyle: {
-    display: string;
-    marginLeft: string;
-};
-export declare const expandedGroupStyle: CSSProperties;

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

@@ -1,24 +0,0 @@
-const t = "50px", e = {
-  minHeight: 200,
-  minWidth: 200
-}, n = {
-  display: "flex",
-  alignItems: "center",
-  width: "100%"
-}, o = {
-  display: "flex",
-  marginLeft: "auto"
-}, i = {
-  borderLeft: "1px solid #bdbdbd",
-  paddingLeft: "12px",
-  marginLeft: "15px",
-  marginTop: "4px",
-  marginBottom: "4px"
-};
-export {
-  t as DEFAULT_CHILDREN_INDENT,
-  o as arrowContainerStyle,
-  i as expandedGroupStyle,
-  e as treeContainerStyle,
-  n as treeContentStyle
-};

package/dist/components/TreeView/types.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var S=(e=>(e.FOLDER="FOLDER",e.SHARE="SHARE",e.TRASH="TRASH",e.CUSTOM="CUSTOM",e))(S||{});exports.ICON_TYPE=S;

package/dist/components/TreeView/types.d.ts

@@ -1,37 +0,0 @@
-import { SvgIconComponent } from '@mui/icons-material';
-import { TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
-import { TreeViewBaseItem } from '@mui/x-tree-view/models/items';
-export type TreeViewItemId = string;
-export type TreeViewItemsReorderingAction = "reorder-above" | "reorder-below" | "make-child" | "move-to-parent";
-declare module "@mui/x-tree-view/TreeItem2" {
-    interface TreeItem2Props {
-        itemData?: CustomTreeViewItem;
-    }
-}
-export declare enum ICON_TYPE {
-    FOLDER = "FOLDER",
-    SHARE = "SHARE",
-    TRASH = "TRASH",
-    CUSTOM = "CUSTOM"
-}
-export type IconType = ICON_TYPE | SvgIconComponent;
-export interface CustomTreeViewItemProps {
-    internalId: string;
-    label: string;
-    iconType?: IconType;
-    customIcon?: SvgIconComponent;
-}
-export type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
-export interface TreeViewProps {
-    items: CustomTreeViewItem[];
-    selectedItemId: string;
-    handleSelectedItemChange: (event: React.SyntheticEvent, itemIds: string | null) => void;
-    iconColor?: string;
-}
-export interface ExtendedTreeItem2Props extends TreeItem2Props {
-    itemData?: CustomTreeViewItem;
-    iconColor?: "disabled" | "primary" | "inherit" | "action" | "secondary" | "error" | "info" | "success" | "warning";
-}
-export interface ItemDataMap {
-    [key: string]: CustomTreeViewItem;
-}

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

@@ -1,4 +0,0 @@
-var S = /* @__PURE__ */ ((R) => (R.FOLDER = "FOLDER", R.SHARE = "SHARE", R.TRASH = "TRASH", R.CUSTOM = "CUSTOM", R))(S || {});
-export {
-  S as ICON_TYPE
-};

package/dist/components/TreeView/utils.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("../../Delete-DmeDAs0n.cjs"),i=require("react/jsx-runtime"),l=require("../../createSvgIcon-DJMYlO0S.cjs"),o=require("./types.cjs.js"),a=l.createSvgIcon(i.jsx("path",{d:"M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"}),"Folder"),u=l.createSvgIcon(i.jsx("path",{d:"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"}),"Share"),h=(e,n)=>{if(!e)return a;if(typeof e!="string")return e;switch(e){case o.ICON_TYPE.SHARE:return u;case o.ICON_TYPE.TRASH:return I.DeleteIcon;case o.ICON_TYPE.CUSTOM:return n||a;case o.ICON_TYPE.FOLDER:default:return a}},f=e=>e.internalId,d=(e,n,c=[])=>{for(const t of e){const r=[...c,t.internalId];if(t.internalId===n)return r;if(t.children&&t.children.length>0){const s=d(t.children,n,r);if(s)return s}}return null},g=e=>{const n={},c=t=>{var r;n[t.internalId]=t,(r=t.children)!=null&&r.length&&t.children.forEach(c)};return e.forEach(c),n};exports.buildItemDataMap=g;exports.findItemPath=d;exports.getIconComponent=h;exports.getItemId=f;

package/dist/components/TreeView/utils.d.ts

@@ -1,6 +0,0 @@
-import { SvgIconComponent } from '@mui/icons-material';
-import { CustomTreeViewItem, IconType, ItemDataMap } from './types';
-export declare const getIconComponent: (iconType: IconType | undefined, customIcon: SvgIconComponent | undefined) => SvgIconComponent;
-export declare const getItemId: (item: CustomTreeViewItem) => string;
-export declare const findItemPath: (items: CustomTreeViewItem[], targetId: string, currentPath?: string[]) => string[] | null;
-export declare const buildItemDataMap: (items: CustomTreeViewItem[]) => ItemDataMap;

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

@@ -1,51 +0,0 @@
-import { D as h } from "../../Delete-BQA9--_t.js";
-import { jsx as l } from "react/jsx-runtime";
-import { c as d } from "../../createSvgIcon-B62eln-G.js";
-import { ICON_TYPE as o } from "./types.es.js";
-const a = d(/* @__PURE__ */ l("path", {
-  d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"
-}), "Folder"), f = d(/* @__PURE__ */ l("path", {
-  d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"
-}), "Share"), S = (t, n) => {
-  if (!t) return a;
-  if (typeof t != "string") return t;
-  switch (t) {
-    case o.SHARE:
-      return f;
-    case o.TRASH:
-      return h;
-    case o.CUSTOM:
-      return n || a;
-    case o.FOLDER:
-    default:
-      return a;
-  }
-}, g = (t) => t.internalId, i = (t, n, c = []) => {
-  for (const r of t) {
-    const e = [...c, r.internalId];
-    if (r.internalId === n)
-      return e;
-    if (r.children && r.children.length > 0) {
-      const s = i(
-        r.children,
-        n,
-        e
-      );
-      if (s)
-        return s;
-    }
-  }
-  return null;
-}, E = (t) => {
-  const n = {}, c = (r) => {
-    var e;
-    n[r.internalId] = r, (e = r.children) != null && e.length && r.children.forEach(c);
-  };
-  return t.forEach(c), n;
-};
-export {
-  E as buildItemDataMap,
-  i as findItemPath,
-  S as getIconComponent,
-  g as getItemId
-};

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

@@ -1,63 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),j=require("../../createSvgIcon-DJMYlO0S.cjs"),c=require("react"),I=require("../TreeView/TreeView.cjs.js"),r=require("../TreeView/types.cjs.js"),l=require("../../Box-DYA49L7w.cjs"),d=require("../../Typography-DPij13XT.cjs"),p=require("../../ListItemText-Bjd08uk4.cjs"),y=require("../../Paper-EvOTlB_Q.cjs"),O=require("../../Button-UmeKHfcL.cjs"),P=require("../../Divider-D3hPb7s4.cjs"),R=require("../../List-Bo4pzQqG.cjs"),L=require("../../ListItem-CB4JyjSb.cjs"),w=j.createSvgIcon(e.jsx("path",{d:"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"}),"Bookmark"),Y=j.createSvgIcon(e.jsx("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"),N=j.createSvgIcon(e.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"}),"Person"),V={title:"Components/TreeView",component:I,argTypes:{items:{description:"**[Requis]** Liste des éléments à afficher dans le TreeView.",control:"object",table:{required:!0,type:{summary:"CustomTreeViewItem[]"}}},selectedItemId:{description:"**[Requis]** Identifiant de l'élément sélectionné.",control:"text",table:{required:!0,type:{summary:"string"}}},handleSelectedItemChange:{description:"**[Requis]** Fonction appelée lorsqu'un élément est sélectionné.",table:{required:!0,type:{summary:"(event: React.SyntheticEvent, itemIds: string | null) => void"}}},iconColor:{description:"**[Optionnel]** Couleur des icônes.",control:"select",options:["primary","secondary","success","error","info","warning"],defaultValue:"primary",table:{required:!1,type:{summary:"string"},defaultValue:{summary:"primary"}}}},parameters:{docs:{description:{component:`
-## TreeView
-
-Un composant pour afficher des données hiérarchiques sous forme d'arborescence.
-
-### Utilisation des icônes
-
-Le TreeView permet de personnaliser les icônes selon les types suivants:
-- \`ICON_TYPE.FOLDER\`: Icône de dossier (défaut)
-- \`ICON_TYPE.SHARE\`: Icône de partage
-- \`ICON_TYPE.TRASH\`: Icône de corbeille
-- \`ICON_TYPE.CUSTOM\`: Icône personnalisée (nécessite de définir \`customIcon\`)
-
-Vous pouvez également passer directement un composant SvgIcon comme valeur de \`iconType\`.
-
-### Navigation et sélection
-
-- \`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:
-
-\`\`\`typescript
-interface CustomTreeViewItemProps {
-  internalId: string;      // Identifiant unique de l'élément (obligatoire)
-  label: string;           // Libellé à afficher (obligatoire)
-  iconType?: IconType;     // Type d'icône (facultatif)
-  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
-}
-
-type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
-\`\`\`
-        `}}}},S=n=>{const o=[],i=s=>{o.push(s),s.children&&s.children.forEach(t=>i(t))};return n.forEach(s=>i(s)),o},_=({items:n,selectedItemId:o,onItemSelect:i})=>{const s=S(n);return e.jsxs(y.Paper,{sx:{width:"100%",maxHeight:300,overflow:"auto"},children:[e.jsx(d.Typography,{variant:"h6",sx:{p:2},children:"Sélection externe"}),e.jsx(P.Divider,{}),e.jsx(R.List,{children:s.map(t=>e.jsx(L.ListItem,{disablePadding:!0,children:e.jsx(p.ListItemButton,{selected:o===t.internalId,onClick:()=>i(t.internalId),children:e.jsx(p.ListItemText,{primary:t.label})})},t.internalId))})]})},q=({items:n,onRandomSelect:o})=>{const i=S(n),s=()=>{const t=Math.floor(Math.random()*i.length);o(i[t].internalId)};return e.jsx(l.Box,{sx:{mt:2,mb:2},children:e.jsx(O.Button,{variant:"contained",color:"primary",onClick:s,children:"Sélection aléatoire"})})},B=({id:n,label:o})=>e.jsx(l.Box,{draggable:!0,onDragStart:i=>{i.dataTransfer.setData("application/json",JSON.stringify({id:n,label:o}))},sx:{padding:1,margin:1,backgroundColor:"grey.100",borderRadius:1,display:"inline-block",cursor:"grab","&:hover":{backgroundColor:"grey.200"}},children:e.jsxs(d.Typography,{variant:"body2",display:"flex",alignItems:"center",children:[e.jsx(Y,{fontSize:"small",sx:{mr:1}}),o]})}),g=[{internalId:"documents",label:"Mes formulaires",iconType:r.ICON_TYPE.FOLDER,children:[{internalId:"folder1",label:"Premier dossier",iconType:r.ICON_TYPE.FOLDER,children:[{internalId:"subfolder1",label:"Sous-dossier 1",iconType:r.ICON_TYPE.FOLDER},{internalId:"subfolder2",label:"Sous-dossier 2",iconType:r.ICON_TYPE.FOLDER}]},{internalId:"folder2",label:"Deuxième dossier",iconType:r.ICON_TYPE.FOLDER},{internalId:"folder3",label:"Troisième dossier",iconType:r.ICON_TYPE.FOLDER}]},{internalId:"shared",label:"Formulaires partagés avec moi",iconType:r.ICON_TYPE.SHARE},{internalId:"trash",label:"Corbeille",iconType:r.ICON_TYPE.TRASH}],F=[{internalId:"bookmarks",label:"Favoris",iconType:w,children:[{internalId:"important",label:"Important",iconType:r.ICON_TYPE.CUSTOM,customIcon:N}]},...g],T=[{internalId:"documents",label:"Documents",iconType:r.ICON_TYPE.SHARE,children:[{internalId:"reports",label:"Rapports",iconType:r.ICON_TYPE.FOLDER,children:[{internalId:"report1",label:"Rapport Janvier",iconType:r.ICON_TYPE.FOLDER},{internalId:"report2",label:"Rapport Février",iconType:r.ICON_TYPE.FOLDER},{internalId:"report3",label:"Rapport Mars",iconType:r.ICON_TYPE.FOLDER}]},{internalId:"invoices",label:"Factures",iconType:r.ICON_TYPE.FOLDER}]},{internalId:"media",label:"Médias",iconType:r.ICON_TYPE.FOLDER,children:[{internalId:"images",label:"Images",iconType:r.ICON_TYPE.FOLDER},{internalId:"videos",label:"Vidéos",iconType:r.ICON_TYPE.FOLDER}]},{internalId:"downloads",label:"Téléchargements",iconType:r.ICON_TYPE.FOLDER}],k={render:()=>{const[n,o]=c.useState(""),i=c.useCallback((s,t)=>{console.log(`Élément sélectionné: ${t}`),t&&o(t)},[]);return e.jsx(l.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(I,{items:g,selectedItemId:n,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple de base avec des icônes standard et démonstration de sélection."}}}},A={args:{items:g,selectedItemId:"folder1",handleSelectedItemChange:(n,o)=>{console.log(`Élément sélectionné: ${o}`)},iconColor:"success"},render:n=>e.jsx(l.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(I,{...n})}),parameters:{docs:{description:{story:"Cette story permet de contrôler les propriétés du TreeView directement via le panneau de contrôle de Storybook. Essayez de changer la couleur des icônes pour voir l'effet en temps réel."}}}},H={render:()=>{const[n,o]=c.useState("bookmarks"),i=c.useCallback((s,t)=>{console.log(`Élément sélectionné: ${t}`),t&&o(t)},[]);return e.jsx(l.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(I,{items:F,selectedItemId:n,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."}}}},M={render:()=>{const n=[{internalId:"root",label:"Structure imbriquée complexe",iconType:r.ICON_TYPE.FOLDER,children:[{internalId:"level1-1",label:"Niveau 1.1",iconType:r.ICON_TYPE.FOLDER,children:[{internalId:"level2-1",label:"Niveau 2.1",iconType:r.ICON_TYPE.FOLDER,children:[{internalId:"level3-1V",label:"VOUS M'AVEZ TROUVÉ HIHIHI",iconType:r.ICON_TYPE.FOLDER},{internalId:"level3-2",label:"Niveau 3.2",iconType:r.ICON_TYPE.SHARE}]},{internalId:"level2-2",label:"Niveau 2.2",iconType:r.ICON_TYPE.TRASH}]},{internalId:"level1-2",label:"Niveau 1.2",iconType:r.ICON_TYPE.CUSTOM,customIcon:w}]}],[o,i]=c.useState("level2-1"),s=c.useCallback((t,a)=>{console.log(`Élément sélectionné: ${a}`),a&&i(a)},[]);return e.jsx(l.Box,{sx:{maxWidth:400,overflowY:"hidden"},children:e.jsx(I,{items:n,selectedItemId:o,handleSelectedItemChange:s})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple d'une structure profondément imbriquée."}}}},z={render:()=>{const n=["primary","secondary","info"],[o,i]=c.useState({primary:"",secondary:"",info:""});return e.jsx(l.Box,{sx:{display:"flex",flexDirection:"row",gap:3,overflowY:"hidden"},children:n.map(s=>e.jsxs(l.Box,{sx:{maxWidth:250,overflowY:"hidden"},children:[e.jsxs(d.Typography,{variant:"subtitle2",gutterBottom:!0,children:["Icônes ",s]}),e.jsx(I,{items:g,selectedItemId:o[s],handleSelectedItemChange:(t,a)=>{a&&i(u=>({...u,[s]:a}))},iconColor:s})]},s))})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration des principales options de couleurs disponibles pour les icônes."}}}},G={render:()=>{const[n,o]=c.useState("reports"),i=(a,u)=>{console.log("TreeView sélection:",u),u&&o(u)},s=a=>{console.log("Sélection externe:",a),o(a)},t=()=>{const u=S(T).find(v=>v.internalId===n);return u?u.label:"Aucun élément sélectionné"};return e.jsxs(l.Box,{sx:{width:"100%",overflowY:"hidden"},children:[e.jsxs(d.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Élément sélectionné: ",e.jsx("strong",{children:t()})," (ID:"," ",n,")"]}),e.jsx(q,{items:T,onRandomSelect:s}),e.jsxs(p.Grid,{container:!0,spacing:3,sx:{overflowY:"hidden"},children:[e.jsx(p.Grid,{item:!0,xs:12,md:6,children:e.jsxs(y.Paper,{sx:{p:2,overflowY:"hidden"},children:[e.jsx(d.Typography,{variant:"h6",gutterBottom:!0,children:"TreeView"}),e.jsx(I,{items:T,selectedItemId:n,handleSelectedItemChange:i})]})}),e.jsx(p.Grid,{item:!0,xs:12,md:6,children:e.jsx(_,{items:T,selectedItemId:n,onItemSelect:s})})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de la synchronisation entre le TreeView et d'autres composants. Cette story montre comment le TreeView peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."}}}},U={render:()=>{var E,D;const[n,o]=c.useState([...g]),[i,s]=c.useState("folder1"),[t,a]=c.useState(null),u=[{id:"doc1",label:"Document 1"},{id:"doc2",label:"Document 2"},{id:"doc3",label:"Document 3"}],v=m=>{m.preventDefault();const h=m.target,f=h.closest("[data-treeview-item]");let x=null,C=null;f?(x=f.getAttribute("data-treeview-item"),C=f.getAttribute("data-treeview-item-label")):h.closest("[data-treeview-root]")&&(x=null,C="Racine du TreeView");try{const b=JSON.parse(m.dataTransfer.getData("application/json"));a({itemId:x,itemLabel:C,droppedItem:b}),x&&s(x)}catch(b){console.error("Erreur lors de la récupération des données",b)}};return e.jsxs(l.Box,{sx:{maxWidth:700,overflowY:"hidden"},children:[e.jsx(d.Typography,{variant:"h6",gutterBottom:!0,children:"Exemple de Drag & Drop avec le TreeView"}),e.jsx(d.Typography,{variant:"body2",gutterBottom:!0,children:"Glissez-déposez un des documents ci-dessous sur un élément du TreeView."}),e.jsx(l.Box,{sx:{display:"flex",mb:2},children:u.map(m=>e.jsx(B,{id:m.id,label:m.label},m.id))}),e.jsxs(p.Grid,{container:!0,spacing:3,children:[e.jsx(p.Grid,{item:!0,xs:12,md:6,children:e.jsxs(l.Box,{sx:{p:2,border:"1px dashed gray",borderRadius:1,minHeight:300,overflowY:"hidden",backgroundColor:"background.paper"},onDragOver:m=>m.preventDefault(),onDrop:v,children:[e.jsx(d.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Zone de drop"}),e.jsx(I,{items:n,selectedItemId:i,handleSelectedItemChange:(m,h)=>{h&&s(h)}})]})}),e.jsx(p.Grid,{item:!0,xs:12,md:6,children:e.jsxs(y.Paper,{sx:{p:2,minHeight:300},children:[e.jsx(d.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Informations du dernier drop"}),t?e.jsxs(l.Box,{children:[e.jsxs(d.Typography,{variant:"body2",children:[e.jsx("strong",{children:"Élément cible :"})," ",t.itemLabel," ",t.itemId&&`(ID: ${t.itemId})`]}),e.jsxs(d.Typography,{variant:"body2",children:[e.jsx("strong",{children:"Élément déposé :"})," ",(E=t.droppedItem)==null?void 0:E.label," (ID:"," ",(D=t.droppedItem)==null?void 0:D.id,")"]}),e.jsxs(l.Box,{sx:{mt:2},children:[e.jsx(d.Typography,{variant:"body2",children:e.jsx("strong",{children:"Code pour gérer ce drop :"})}),e.jsx(y.Paper,{sx:{p:1,mt:1,backgroundColor:"grey.100"},children:e.jsx("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...
-  }
-};`})})]})]}):e.jsx(d.Typography,{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."}}}};exports.AvecDragAndDrop=U;exports.AvecIconesPersonnalisees=H;exports.Controlable=A;exports.Default=k;exports.OptionsDeCouleurs=z;exports.StructureImbriquee=M;exports.Synchronicite=G;exports.default=V;

package/dist/components/stories/TreeView.stories.d.ts

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { TreeView } from '../TreeView';
-declare const meta: Meta<typeof TreeView>;
-export default meta;
-type Story = StoryObj<typeof TreeView>;
-export declare const Default: Story;
-export declare const Controlable: Story;
-export declare const AvecIconesPersonnalisees: Story;
-export declare const StructureImbriquee: Story;
-export declare const OptionsDeCouleurs: Story;
-export declare const Synchronicite: Story;
-export declare const AvecDragAndDrop: Story;