@cgi-learning-hub/ui 1.4.0-dev.1741984172 → 1.4.0-dev.1742031230

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

@@ -1,46 +1,56 @@
-import { jsx as i, jsxs as r } from "react/jsx-runtime";
-import { c as y } from "../../createSvgIcon-K1Hd8ryN.js";
-import { useState as m, useCallback as I } from "react";
-import d from "../TreeView/TreeView.es.js";
-import { ICON_TYPE as e } from "../TreeView/types.es.js";
-import { B as a } from "../../Box-DgqaLb7j.js";
-import { T as p } from "../../Typography-SIQ6eleU.js";
-const f = y(/* @__PURE__ */ i("path", {
+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", {
   d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
-}), "Bookmark"), h = y(/* @__PURE__ */ i("path", {
+}), "Bookmark"), w = T(/* @__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"), D = {
+}), "Person"), $ = {
   title: "Components/TreeView",
-  component: d,
+  component: m,
   argTypes: {
     items: {
-      description: "Liste des éléments à afficher dans le TreeView.",
+      description: "**[Requis]** Liste des éléments à afficher dans le TreeView.",
       control: "object",
       table: {
+        required: !0,
         type: { summary: "CustomTreeViewItem[]" }
       }
     },
     selectedItemId: {
-      description: "Identifiant de l'élément sélectionné.",
+      description: "**[Requis]** Identifiant de l'élément sélectionné.",
       control: "text",
       table: {
+        required: !0,
         type: { summary: "string" }
       }
     },
     handleSelectedItemChange: {
-      description: "Fonction appelée lorsqu'un élément est sélectionné.",
+      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: "Couleur des icônes.",
+      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" }
       }
@@ -87,256 +97,406 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, b = ({ items: o }) => {
-  const [t, l] = m(""), n = I(
-    (c, s) => {
-      console.log(`Élément sélectionné: ${s}`), s && l(s);
-    },
-    []
-  );
-  return /* @__PURE__ */ r(a, { sx: { maxWidth: 300 }, children: [
-    /* @__PURE__ */ r(p, { variant: "subtitle1", gutterBottom: !0, children: [
-      "Sélection: ",
-      t || "Aucune"
-    ] }),
-    /* @__PURE__ */ i(
-      d,
+}, b = (n) => {
+  const o = [], i = (r) => {
+    o.push(r), r.children && r.children.forEach(
+      (s) => i(s)
+    );
+  };
+  return n.forEach((r) => i(r)), o;
+}, D = ({
+  items: n,
+  selectedItemId: o,
+  onItemSelect: i
+}) => {
+  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,
       {
-        items: o,
-        selectedItemId: t,
-        handleSelectedItemChange: n
+        selected: o === s.internalId,
+        onClick: () => i(s.internalId),
+        children: /* @__PURE__ */ e(E, { primary: s.label })
       }
-    )
+    ) }, s.internalId)) })
   ] });
-}, u = [
+}, V = ({
+  items: n,
+  onRandomSelect: o
+}) => {
+  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);
+  }, children: "Sélection aléatoire" }) });
+}, h = [
   {
     internalId: "documents",
     label: "Mes formulaires",
-    iconType: e.FOLDER,
+    iconType: t.FOLDER,
     children: [
       {
         internalId: "folder1",
         label: "Premier dossier",
-        iconType: e.FOLDER,
+        iconType: t.FOLDER,
         children: [
           {
             internalId: "subfolder1",
             label: "Sous-dossier 1",
-            iconType: e.FOLDER
+            iconType: t.FOLDER
           },
           {
             internalId: "subfolder2",
             label: "Sous-dossier 2",
-            iconType: e.FOLDER
+            iconType: t.FOLDER
           }
         ]
       },
       {
         internalId: "folder2",
         label: "Deuxième dossier",
-        iconType: e.FOLDER
+        iconType: t.FOLDER
       },
       {
         internalId: "folder3",
         label: "Troisième dossier",
-        iconType: e.FOLDER
+        iconType: t.FOLDER
       }
     ]
   },
   {
     internalId: "shared",
     label: "Formulaires partagés avec moi",
-    iconType: e.SHARE
+    iconType: t.SHARE
   },
   {
     internalId: "trash",
     label: "Corbeille",
-    iconType: e.TRASH
+    iconType: t.TRASH
   }
-], v = [
+], F = [
   {
     internalId: "bookmarks",
     label: "Favoris",
-    iconType: f,
+    iconType: g,
     children: [
       {
         internalId: "important",
         label: "Important",
-        iconType: e.CUSTOM,
-        customIcon: h
+        iconType: t.CUSTOM,
+        customIcon: w
       }
     ]
   },
-  ...u
-], L = {
-  render: () => /* @__PURE__ */ i(b, { items: u }),
+  ...h
+], u = [
+  {
+    internalId: "documents",
+    label: "Documents",
+    iconType: t.SHARE,
+    children: [
+      {
+        internalId: "reports",
+        label: "Rapports",
+        iconType: t.FOLDER,
+        children: [
+          {
+            internalId: "report1",
+            label: "Rapport Janvier",
+            iconType: t.FOLDER
+          },
+          {
+            internalId: "report2",
+            label: "Rapport Février",
+            iconType: t.FOLDER
+          },
+          {
+            internalId: "report3",
+            label: "Rapport Mars",
+            iconType: t.FOLDER
+          }
+        ]
+      },
+      { internalId: "invoices", label: "Factures", iconType: t.FOLDER }
+    ]
+  },
+  {
+    internalId: "media",
+    label: "Médias",
+    iconType: t.FOLDER,
+    children: [
+      { internalId: "images", label: "Images", iconType: t.FOLDER },
+      { internalId: "videos", label: "Vidéos", iconType: t.FOLDER }
+    ]
+  },
+  {
+    internalId: "downloads",
+    label: "Téléchargements",
+    iconType: t.FOLDER
+  }
+], z = {
+  render: () => {
+    const [n, o] = p(""), i = y(
+      (r, s) => {
+        console.log(`Élément sélectionné: ${s}`), s && o(s);
+      },
+      []
+    );
+    return /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      m,
+      {
+        items: h,
+        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."
       }
     }
   }
-}, V = {
-  render: () => /* @__PURE__ */ i(a, { sx: { maxWidth: 300 }, children: /* @__PURE__ */ i(
-    d,
-    {
-      items: u,
-      selectedItemId: "folder1",
-      handleSelectedItemChange: (o, t) => {
-        console.log(`Élément sélectionné: ${t}`);
-      }
-    }
-  ) }),
+}, G = {
+  args: {
+    items: h,
+    selectedItemId: "folder1",
+    handleSelectedItemChange: (n, o) => {
+      console.log(`Élément sélectionné: ${o}`);
+    },
+    iconColor: "success"
+  },
+  render: (n) => /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(m, { ...n }) }),
   parameters: {
     docs: {
       description: {
-        story: "Exemple avec sélection explicite d'un élément spécifique."
+        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."
       }
     }
   }
-}, w = {
+}, J = {
   render: () => {
-    const [o, t] = m("bookmarks"), l = I(
-      (n, c) => {
-        console.log(`Élément sélectionné: ${c}`), c && t(c);
+    const [n, o] = p("bookmarks"), i = y(
+      (r, s) => {
+        console.log(`Élément sélectionné: ${s}`), s && o(s);
       },
       []
     );
-    return /* @__PURE__ */ r(a, { sx: { maxWidth: 300 }, children: [
-      /* @__PURE__ */ r(p, { variant: "subtitle1", gutterBottom: !0, children: [
-        "Sélection: ",
-        o
-      ] }),
-      /* @__PURE__ */ i(
-        d,
-        {
-          items: v,
-          selectedItemId: o,
-          handleSelectedItemChange: l
-        }
-      )
-    ] });
+    return /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      m,
+      {
+        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."
       }
     }
   }
-}, F = {
+}, Z = {
   render: () => {
-    const o = [
+    const n = [
       {
         internalId: "root",
         label: "Structure imbriquée complexe",
-        iconType: e.FOLDER,
+        iconType: t.FOLDER,
         children: [
           {
             internalId: "level1-1",
             label: "Niveau 1.1",
-            iconType: e.FOLDER,
+            iconType: t.FOLDER,
             children: [
               {
                 internalId: "level2-1",
                 label: "Niveau 2.1",
-                iconType: e.FOLDER,
+                iconType: t.FOLDER,
                 children: [
                   {
-                    internalId: "level3-1",
-                    label: "Niveau 3.1",
-                    iconType: e.FOLDER
+                    internalId: "level3-1V",
+                    label: "VOUS M'AVEZ TROUVÉ HIHIHI",
+                    iconType: t.FOLDER
                   },
                   {
                     internalId: "level3-2",
                     label: "Niveau 3.2",
-                    iconType: e.SHARE
+                    iconType: t.SHARE
                   }
                 ]
               },
               {
                 internalId: "level2-2",
                 label: "Niveau 2.2",
-                iconType: e.TRASH
+                iconType: t.TRASH
               }
             ]
           },
           {
             internalId: "level1-2",
             label: "Niveau 1.2",
-            iconType: e.CUSTOM,
-            customIcon: f
+            iconType: t.CUSTOM,
+            customIcon: g
           }
         ]
       }
-    ], [t, l] = m("level2-1"), n = I(
-      (c, s) => {
-        console.log(`Élément sélectionné: ${s}`), s && l(s);
+    ], [o, i] = p("level2-1"), r = y(
+      (s, l) => {
+        console.log(`Élément sélectionné: ${l}`), l && i(l);
       },
       []
     );
-    return /* @__PURE__ */ r(a, { sx: { maxWidth: 300 }, children: [
-      /* @__PURE__ */ r(p, { variant: "subtitle1", gutterBottom: !0, children: [
-        "Sélection: ",
-        t
-      ] }),
-      /* @__PURE__ */ i(
-        d,
-        {
-          items: o,
-          selectedItemId: t,
-          handleSelectedItemChange: n,
-          iconColor: "info"
-        }
-      )
-    ] });
+    return /* @__PURE__ */ e(c, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
+      m,
+      {
+        items: n,
+        selectedItemId: o,
+        handleSelectedItemChange: r,
+        iconColor: "info"
+      }
+    ) });
   },
   parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
     docs: {
       description: {
-        story: "Exemple d'une structure profondément imbriquée avec différents types d'icônes."
+        story: "Exemple d'une structure profondément imbriquée."
       }
     }
   }
-}, P = {
+}, K = {
   render: () => {
-    const o = ["primary", "secondary", "info"], [t, l] = m({
+    const n = ["primary", "secondary", "info"], [o, i] = p({
       primary: "",
       secondary: "",
       info: ""
     });
-    return /* @__PURE__ */ i(a, { sx: { display: "flex", flexDirection: "row", gap: 3 }, children: o.map((n) => /* @__PURE__ */ r(a, { sx: { maxWidth: 250 }, children: [
-      /* @__PURE__ */ r(p, { variant: "subtitle2", gutterBottom: !0, children: [
-        "Icônes ",
-        n
+    return /* @__PURE__ */ e(
+      c,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "row",
+          gap: 3,
+          overflowY: "hidden"
+        },
+        children: n.map((r) => /* @__PURE__ */ d(
+          c,
+          {
+            sx: {
+              maxWidth: 250,
+              overflowY: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ d(I, { variant: "subtitle2", gutterBottom: !0, children: [
+                "Icônes ",
+                r
+              ] }),
+              /* @__PURE__ */ e(
+                m,
+                {
+                  items: h,
+                  selectedItemId: o[r],
+                  handleSelectedItemChange: (s, l) => {
+                    l && i((a) => ({ ...a, [r]: l }));
+                  },
+                  iconColor: r
+                }
+              )
+            ]
+          },
+          r
+        ))
+      }
+    );
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Démonstration des principales options de couleurs disponibles pour les icônes."
+      }
+    }
+  }
+}, Q = {
+  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);
+    };
+    return /* @__PURE__ */ d(c, { sx: { width: "100%", overflowY: "hidden" }, children: [
+      /* @__PURE__ */ d(I, { variant: "subtitle1", gutterBottom: !0, children: [
+        "Élément sélectionné: ",
+        /* @__PURE__ */ e("strong", { children: (() => {
+          const a = b(u).find(
+            (S) => S.internalId === n
+          );
+          return a ? a.label : "Aucun élément sélectionné";
+        })() }),
+        " (ID:",
+        " ",
+        n,
+        ")"
       ] }),
-      /* @__PURE__ */ i(
-        d,
+      /* @__PURE__ */ e(
+        V,
         {
           items: u,
-          selectedItemId: t[n],
-          handleSelectedItemChange: (c, s) => {
-            s && l((T) => ({ ...T, [n]: s }));
-          },
-          iconColor: n
+          onRandomSelect: r
         }
-      )
-    ] }, n)) });
+      ),
+      /* @__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__ */ e(
+            m,
+            {
+              items: u,
+              selectedItemId: n,
+              handleSelectedItemChange: i
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
+          D,
+          {
+            items: u,
+            selectedItemId: n,
+            onItemSelect: r
+          }
+        ) })
+      ] })
+    ] });
   },
   parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
     docs: {
       description: {
-        story: "Démonstration des principales options de couleurs disponibles pour les icônes."
+        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."
       }
     }
   }
 };
 export {
-  w as AvecIconesPersonnalisees,
-  L as Default,
-  P as OptionsDeColors,
-  F as StructureImbriquee,
-  V as WithExplicitSelection,
-  D as default
+  J as AvecIconesPersonnalisees,
+  G as Controlable,
+  z as Default,
+  K as OptionsDeCouleurs,
+  Z as StructureImbriquee,
+  Q as Synchronicite,
+  $ as default
 };

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

@@ -1,4 +1,4 @@
-import { T as t } from "../../Typography-SIQ6eleU.js";
+import { T as t } from "../../Typography-Ct2Sc9KM.js";
 const e = {
   title: "Components/Typography",
   component: t,

package/dist/{createSvgIcon-K1Hd8ryN.js → createSvgIcon-B62eln-G.js}

@@ -1,9 +1,9 @@
 import * as h from "react";
 import { jsxs as b, jsx as x } from "react/jsx-runtime";
-import { I as w, H as C, G as T, P as e } from "./generateUtilityClasses-DotvgSDH.js";
-import { m as N } from "./memoTheme-CqmIydD-.js";
-import { u as O, s as R, c as j } from "./DefaultPropsProvider-Cqcb4sws.js";
-import { c as z } from "./capitalize-3KLkrEtk.js";
+import { H as w, G as C, I as T, P as e } from "./generateUtilityClasses-EXBFO7eY.js";
+import { m as N } from "./memoTheme-DJWQ754x.js";
+import { u as O, s as R, c as j } from "./DefaultPropsProvider-CQixa6JQ.js";
+import { c as z } from "./capitalize-BJ0FEsU7.js";
 function E(o) {
   return w("MuiSvgIcon", o);
 }

package/dist/{dividerClasses-afsB3Yy1.js → dividerClasses-DjJZQ2Lt.js}

@@ -1,4 +1,4 @@
-import { H as t, I as e } from "./generateUtilityClasses-DotvgSDH.js";
+import { G as t, H as e } from "./generateUtilityClasses-EXBFO7eY.js";
 function l(i) {
   return e("MuiDivider", i);
 }

package/dist/{elementTypeAcceptingRef-5ESWTE79.js → elementTypeAcceptingRef-B04tk6ag.js}

@@ -1,4 +1,4 @@
-import { P as c } from "./generateUtilityClasses-DotvgSDH.js";
+import { P as c } from "./generateUtilityClasses-EXBFO7eY.js";
 import { c as l } from "./chainPropTypes-D9lkm76m.js";
 function f(n) {
   const {

package/dist/{extendSxProp-dlShX1xL.js → extendSxProp-CgS-3O19.js}

@@ -1,4 +1,4 @@
-import { K as c, L as l } from "./generateUtilityClasses-DotvgSDH.js";
+import { K as c, L as l } from "./generateUtilityClasses-EXBFO7eY.js";
 const a = (t) => {
   var s;
   const e = {

package/dist/{generateUtilityClasses-DotvgSDH.js → generateUtilityClasses-EXBFO7eY.js}

@@ -3243,9 +3243,9 @@ export {
   io as D,
   no as E,
   Eo as F,
-  _o as G,
-  Fo as H,
-  dt as I,
+  Fo as G,
+  dt as H,
+  _o as I,
   Ue as J,
   Ce as K,
   rr as L,
@@ -3255,14 +3255,14 @@ export {
   $e as P,
   tr as Q,
   ro as R,
-  ce as S,
+  ze as S,
   jo as T,
   Po as U,
-  hr as V,
-  pe as W,
-  Ro as X,
-  Pe as Y,
-  ze as Z,
+  ce as V,
+  hr as W,
+  pe as X,
+  Ro as Y,
+  Pe as Z,
   yt as _,
   zn as a,
   ko as a0,

package/dist/{getReactElementRef-CQNNHBNW.js → getReactElementRef-DjLvttrJ.js}

@@ -1,4 +1,4 @@
-import { P as i } from "./generateUtilityClasses-DotvgSDH.js";
+import { P as i } from "./generateUtilityClasses-EXBFO7eY.js";
 import { c as a } from "./chainPropTypes-D9lkm76m.js";
 import * as l from "react";
 function d(n) {