@cgi-learning-hub/ui 1.4.0-dev.1741982096 → 1.4.0-dev.1741985772

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

@@ -1,16 +1,23 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import { c as f } from "../../createSvgIcon-K1Hd8ryN.js";
-import { useState as m, useCallback as I } from "react";
-import d, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
-import { B as a } from "../../Box-DgqaLb7j.js";
-import { T as u } from "../../Typography-SIQ6eleU.js";
-const y = f(/* @__PURE__ */ o("path", {
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { c as v } from "../../createSvgIcon-B62eln-G.js";
+import { useState as u, useCallback as y } from "react";
+import p from "../TreeView/TreeView.es.js";
+import { ICON_TYPE as e } from "../TreeView/types.es.js";
+import { B as a } from "../../Box-GMNejc_m.js";
+import { T as m } from "../../Typography-Ct2Sc9KM.js";
+import { G as f, L as x, a as E } from "../../ListItemText-B_hEVsaT.js";
+import { P as b } from "../../Paper-BrsaeLlu.js";
+import { B as C } from "../../Button-x5rtZxJN.js";
+import { D as R } from "../../Divider-CNGfzZqD.js";
+import { L as w } from "../../List-BTPrBGqY.js";
+import { L } from "../../ListItem-C9OfYRAP.js";
+const g = v(/* @__PURE__ */ n("path", {
   d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
-}), "Bookmark"), b = f(/* @__PURE__ */ o("path", {
+}), "Bookmark"), D = v(/* @__PURE__ */ n("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 = {
+}), "Person"), j = {
   title: "Components/TreeView",
-  component: d,
+  component: p,
   argTypes: {
     items: {
       description: "Liste des éléments à afficher dans le TreeView.",
@@ -86,28 +93,41 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, v = ({ items: i }) => {
-  const [t, l] = m(""), n = I(
-    (c, s) => {
-      console.log(`Élément sélectionné: ${s}`), s && l(s);
-    },
-    []
-  );
-  return /* @__PURE__ */ r(a, { children: [
-    /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
-      "Sélection actuelle: ",
-      t || "Aucun élément sélectionné"
-    ] }),
-    /* @__PURE__ */ o(
-      d,
+}, T = (t) => {
+  const r = [], l = (o) => {
+    r.push(o), o.children && o.children.forEach(
+      (i) => l(i)
+    );
+  };
+  return t.forEach((o) => l(o)), r;
+}, O = ({
+  items: t,
+  selectedItemId: r,
+  onItemSelect: l
+}) => {
+  const o = T(t);
+  return /* @__PURE__ */ s(b, { sx: { width: "100%", maxHeight: 300, overflow: "auto" }, children: [
+    /* @__PURE__ */ n(m, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
+    /* @__PURE__ */ n(R, {}),
+    /* @__PURE__ */ n(w, { children: o.map((i) => /* @__PURE__ */ n(L, { disablePadding: !0, children: /* @__PURE__ */ n(
+      x,
       {
-        items: i,
-        selectedItemId: t,
-        handleSelectedItemChange: n
+        selected: r === i.internalId,
+        onClick: () => l(i.internalId),
+        children: /* @__PURE__ */ n(E, { primary: i.label })
       }
-    )
+    ) }, i.internalId)) })
   ] });
-}, p = [
+}, F = ({
+  items: t,
+  onRandomSelect: r
+}) => {
+  const l = T(t);
+  return /* @__PURE__ */ n(a, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ n(C, { variant: "contained", color: "primary", onClick: () => {
+    const i = Math.floor(Math.random() * l.length);
+    r(l[i].internalId);
+  }, children: "Sélection aléatoire" }) });
+}, I = [
   {
     internalId: "documents",
     label: "Mes formulaires",
@@ -152,23 +172,112 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
     label: "Corbeille",
     iconType: e.TRASH
   }
-], h = [
+], V = [
   {
     internalId: "bookmarks",
     label: "Favoris",
-    iconType: y,
+    iconType: g,
     children: [
       {
         internalId: "important",
         label: "Important",
         iconType: e.CUSTOM,
-        customIcon: b
+        customIcon: D
       }
     ]
   },
-  ...p
-], w = {
-  render: () => /* @__PURE__ */ o(v, { items: p }),
+  ...I
+], h = [
+  {
+    internalId: "documents",
+    label: "Documents",
+    iconType: e.SHARE,
+    children: [
+      {
+        internalId: "reports",
+        label: "Rapports",
+        iconType: e.FOLDER,
+        children: [
+          {
+            internalId: "report1",
+            label: "Rapport Janvier",
+            iconType: e.FOLDER
+          },
+          {
+            internalId: "report2",
+            label: "Rapport Février",
+            iconType: e.FOLDER
+          },
+          {
+            internalId: "report3",
+            label: "Rapport Mars",
+            iconType: e.FOLDER
+          }
+        ]
+      },
+      { internalId: "invoices", label: "Factures", iconType: e.FOLDER }
+    ]
+  },
+  {
+    internalId: "media",
+    label: "Médias",
+    iconType: e.FOLDER,
+    children: [
+      { internalId: "images", label: "Images", iconType: e.FOLDER },
+      { internalId: "videos", label: "Vidéos", iconType: e.FOLDER }
+    ]
+  },
+  {
+    internalId: "downloads",
+    label: "Téléchargements",
+    iconType: e.FOLDER
+  }
+], z = {
+  args: {
+    items: I,
+    selectedItemId: "folder1",
+    handleSelectedItemChange: (t, r) => {
+      console.log(`Élément sélectionné: ${r}`);
+    },
+    iconColor: "primary"
+  },
+  render: (t) => /* @__PURE__ */ s(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: [
+    /* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
+      "Sélection: ",
+      t.selectedItemId
+    ] }),
+    /* @__PURE__ */ n(p, { ...t })
+  ] }),
+  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."
+      }
+    }
+  }
+}, G = {
+  render: () => {
+    const [t, r] = u(""), l = y(
+      (o, i) => {
+        console.log(`Élément sélectionné: ${i}`), i && r(i);
+      },
+      []
+    );
+    return /* @__PURE__ */ s(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: [
+      /* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
+        "Sélection: ",
+        t || "Aucune"
+      ] }),
+      /* @__PURE__ */ n(
+        p,
+        {
+          items: I,
+          selectedItemId: t,
+          handleSelectedItemChange: l
+        }
+      )
+    ] });
+  },
   parameters: {
     docs: {
       description: {
@@ -176,14 +285,17 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, x = {
-  args: {
-    items: p,
-    selectedItemId: "folder1",
-    handleSelectedItemChange: (i, t) => {
-      console.log(`Élément sélectionné: ${t}`);
+}, J = {
+  render: () => /* @__PURE__ */ n(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ n(
+    p,
+    {
+      items: I,
+      selectedItemId: "folder1",
+      handleSelectedItemChange: (t, r) => {
+        console.log(`Élément sélectionné: ${r}`);
+      }
     }
-  },
+  ) }),
   parameters: {
     docs: {
       description: {
@@ -191,24 +303,24 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
       }
     }
   }
-}, D = {
+}, K = {
   render: () => {
-    const [i, t] = m("bookmarks"), l = I(
-      (n, c) => {
-        console.log(`Élément sélectionné: ${c}`), c && t(c);
+    const [t, r] = u("bookmarks"), l = y(
+      (o, i) => {
+        console.log(`Élément sélectionné: ${i}`), i && r(i);
       },
       []
     );
-    return /* @__PURE__ */ r(a, { children: [
-      /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
-        "Élément sélectionné: ",
-        i
+    return /* @__PURE__ */ s(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: [
+      /* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
+        "Sélection: ",
+        t
       ] }),
-      /* @__PURE__ */ o(
-        d,
+      /* @__PURE__ */ n(
+        p,
         {
-          items: h,
-          selectedItemId: i,
+          items: V,
+          selectedItemId: t,
           handleSelectedItemChange: l
         }
       )
@@ -217,13 +329,13 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
   parameters: {
     docs: {
       description: {
-        story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées avec gestion de la sélection."
+        story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."
       }
     }
   }
-}, L = {
+}, Q = {
   render: () => {
-    const i = [
+    const t = [
       {
         internalId: "root",
         label: "Structure imbriquée complexe",
@@ -262,27 +374,27 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
             internalId: "level1-2",
             label: "Niveau 1.2",
             iconType: e.CUSTOM,
-            customIcon: y
+            customIcon: g
           }
         ]
       }
-    ], [t, l] = m("level2-1"), n = I(
-      (c, s) => {
-        console.log(`Élément sélectionné: ${s}`), s && l(s);
+    ], [r, l] = u("level2-1"), o = y(
+      (i, c) => {
+        console.log(`Élément sélectionné: ${c}`), c && l(c);
       },
       []
     );
-    return /* @__PURE__ */ r(a, { children: [
-      /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
-        "Niveau sélectionné: ",
-        t
+    return /* @__PURE__ */ s(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: [
+      /* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
+        "Sélection: ",
+        r
       ] }),
-      /* @__PURE__ */ o(
-        d,
+      /* @__PURE__ */ n(
+        p,
         {
-          items: i,
-          selectedItemId: t,
-          handleSelectedItemChange: n,
+          items: t,
+          selectedItemId: r,
+          handleSelectedItemChange: o,
           iconColor: "info"
         }
       )
@@ -291,61 +403,130 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
   parameters: {
     docs: {
       description: {
-        story: "Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau et gestion de la sélection."
+        story: "Exemple d'une structure profondément imbriquée avec différents types d'icônes."
       }
     }
   }
-}, F = {
+}, X = {
   render: () => {
-    const i = [
-      "primary",
-      "secondary",
-      "success",
-      "error",
-      "info",
-      "warning"
-    ], [t, l] = m({
+    const t = ["primary", "secondary", "info"], [r, l] = u({
       primary: "",
       secondary: "",
-      success: "",
-      error: "",
-      info: "",
-      warning: ""
+      info: ""
     });
-    return /* @__PURE__ */ o(a, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: i.map((n) => /* @__PURE__ */ r(a, { children: [
-      /* @__PURE__ */ r(u, { variant: "subtitle1", gutterBottom: !0, children: [
-        "TreeView avec icônes ",
-        n,
-        " - Sélection:",
+    return /* @__PURE__ */ n(
+      a,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "row",
+          gap: 3,
+          overflowY: "hidden"
+        },
+        children: t.map((o) => /* @__PURE__ */ s(
+          a,
+          {
+            sx: {
+              maxWidth: 250,
+              overflowY: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ s(m, { variant: "subtitle2", gutterBottom: !0, children: [
+                "Icônes ",
+                o
+              ] }),
+              /* @__PURE__ */ n(
+                p,
+                {
+                  items: I,
+                  selectedItemId: r[o],
+                  handleSelectedItemChange: (i, c) => {
+                    c && l((d) => ({ ...d, [o]: c }));
+                  },
+                  iconColor: o
+                }
+              )
+            ]
+          },
+          o
+        ))
+      }
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Démonstration des principales options de couleurs disponibles pour les icônes."
+      }
+    }
+  }
+}, Z = {
+  render: () => {
+    const [t, r] = u("reports"), l = (c, d) => {
+      console.log("TreeView sélection:", d), d && r(d);
+    }, o = (c) => {
+      console.log("Sélection externe:", c), r(c);
+    };
+    return /* @__PURE__ */ s(a, { sx: { width: "100%", overflowY: "hidden" }, children: [
+      /* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
+        "Élément sélectionné: ",
+        /* @__PURE__ */ n("strong", { children: (() => {
+          const d = T(h).find(
+            (S) => S.internalId === t
+          );
+          return d ? d.label : "Aucun élément sélectionné";
+        })() }),
+        " (ID:",
         " ",
-        t[n] || "aucune"
+        t,
+        ")"
       ] }),
-      /* @__PURE__ */ o(
-        d,
+      /* @__PURE__ */ n(
+        F,
         {
-          items: p,
-          selectedItemId: t[n],
-          handleSelectedItemChange: (c, s) => {
-            s && l((T) => ({ ...T, [n]: s }));
-          },
-          iconColor: n
+          items: h,
+          onRandomSelect: o
         }
-      )
-    ] }, n)) });
+      ),
+      /* @__PURE__ */ s(f, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
+        /* @__PURE__ */ n(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(b, { sx: { p: 2, overflowY: "hidden" }, children: [
+          /* @__PURE__ */ n(m, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
+          /* @__PURE__ */ n(
+            p,
+            {
+              items: h,
+              selectedItemId: t,
+              handleSelectedItemChange: l,
+              iconColor: "secondary"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ n(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ n(
+          O,
+          {
+            items: h,
+            selectedItemId: t,
+            onItemSelect: o
+          }
+        ) })
+      ] })
+    ] });
   },
   parameters: {
     docs: {
       description: {
-        story: "Démonstration des différentes options de couleurs disponibles pour les icônes avec gestion indépendante des sélections."
+        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 {
-  D as AvecIconesPersonnalisees,
-  w as Default,
-  F as MultipleColors,
-  L as StructureImbriquee,
-  x as WithExplicitSelection,
-  V as default
+  K as AvecIconesPersonnalisees,
+  z as Controlable,
+  G as Default,
+  X as OptionsDeColors,
+  Q as StructureImbriquee,
+  Z as Synchronicite,
+  J as WithExplicitSelection,
+  j 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) {

package/dist/{index-DTTmpNYg.js → index-BZ7ldAwE.js}

@@ -1,10 +1,10 @@
 import "react";
 import { jsx as l } from "react/jsx-runtime";
-import { P as e, T as f } from "./generateUtilityClasses-DotvgSDH.js";
-import { d as i } from "./DefaultPropsProvider-Cqcb4sws.js";
-import { u as c } from "./useTheme-tdgDVH1p.js";
+import { P as e, T as f } from "./generateUtilityClasses-EXBFO7eY.js";
+import { d as i } from "./DefaultPropsProvider-CQixa6JQ.js";
+import { u as c } from "./useTheme-CUKf8NYA.js";
 import { Global as y } from "@emotion/react";
-import { e as m } from "./extendSxProp-dlShX1xL.js";
+import { e as m } from "./extendSxProp-CgS-3O19.js";
 function b(o) {
   return o == null || Object.keys(o).length === 0;
 }

package/dist/index-Cr54V0sz.cjs

@@ -0,0 +1 @@
+"use strict";const l=require("react"),n=require("./generateUtilityClasses-De8NU9_E.cjs"),i=require("react/jsx-runtime");function a(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const s=a(l),c=s.createContext();function u({value:e,...t}){return i.jsx(c.Provider,{value:e??!0,...t})}process.env.NODE_ENV!=="production"&&(u.propTypes={children:n.PropTypes.node,value:n.PropTypes.bool});const p=()=>s.useContext(c)??!1;exports.RtlProvider=u;exports.useRtl=p;

package/dist/index-D_xl88AE.js

@@ -0,0 +1,22 @@
+import * as t from "react";
+import { P as o } from "./generateUtilityClasses-EXBFO7eY.js";
+import { jsx as n } from "react/jsx-runtime";
+const r = /* @__PURE__ */ t.createContext();
+function u({
+  value: e,
+  ...s
+}) {
+  return /* @__PURE__ */ n(r.Provider, {
+    value: e ?? !0,
+    ...s
+  });
+}
+process.env.NODE_ENV !== "production" && (u.propTypes = {
+  children: o.node,
+  value: o.bool
+});
+const l = () => t.useContext(r) ?? !1;
+export {
+  u as R,
+  l as u
+};

package/dist/{index-B1u7G33_.js → index-DcwdJ8a_.js}

@@ -1,5 +1,5 @@
 import vi, { useMemo as S, useRef as J, useReducer as fi, useEffect as fa, useCallback as y, forwardRef as xi, useImperativeHandle as gi, Fragment as bi } from "react";
-import { _ as hi, P as s } from "./generateUtilityClasses-DotvgSDH.js";
+import { _ as hi, P as s } from "./generateUtilityClasses-EXBFO7eY.js";
 function A(a, i, t, n) {
   function p(o) {
     return o instanceof t ? o : new t(function(l) {