@seij/common-ui 0.1.6 → 0.1.7

package/README.md

@@ -16,4 +16,3 @@ for our other applications..
 ## Notes
 
 - This package exposes UI primitives rather than a full design system.
-

package/dist/init/SeijUIProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeijUIProvider.d.ts","sourceRoot":"","sources":["../../src/init/SeijUIProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAc1C,UAAU,mBAAoB,SAAQ,iBAAiB;CAEtD;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAS/D"}
+{"version":3,"file":"SeijUIProvider.d.ts","sourceRoot":"","sources":["../../src/init/SeijUIProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAc1C,UAAU,mBAAoB,SAAQ,iBAAiB;CAAG;AAE1D,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAS/D"}

package/dist/init/SeijUIProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeijUIProvider.js","sources":["../../src/init/SeijUIProvider.tsx"],"sourcesContent":["import { FluentProvider, Theme, webLightTheme } from \"@fluentui/react-components\";\n\nimport { PropsWithChildren } from \"react\";\nimport { ErrorManager } from \"../lib/error_notifier/ErrorNotifier\";\nimport { I18nProvider } from \"../lib/i18n/i18n.react\";\n\n// noinspection SpellCheckingInspection\nconst theme: Theme = {\n  ...webLightTheme,\n  fontFamilyBase:\n    \"'Noto Sans', 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif\",\n  fontFamilyMonospace: \"Fira Mono, Consolas, 'Courier New', Courier, monospace\",\n  fontFamilyNumeric:\n    \"Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif\",\n};\n\ninterface SeijUIProviderProps extends PropsWithChildren {\n\n}\n\nexport function SeijUIProvider({ children }: SeijUIProviderProps) {\n  return (\n    <I18nProvider>\n      <FluentProvider theme={theme}>\n        {children}\n        <ErrorManager />\n      </FluentProvider>\n    </I18nProvider>\n  );\n}\n"],"names":["theme","webLightTheme","SeijUIProvider","children","jsx","I18nProvider","jsxs","FluentProvider","ErrorManager"],"mappings":";;;;AAOA,MAAMA,IAAe;AAAA,EACnB,GAAGC;AAAA,EACH,gBACE;AAAA,EACF,qBAAqB;AAAA,EACrB,mBACE;AACJ;AAMO,SAASC,EAAe,EAAE,UAAAC,KAAiC;AAChE,SACE,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAe,OAAAP,GACb,UAAA;AAAA,IAAAG;AAAA,sBACAK,GAAA,CAAA,CAAa;AAAA,EAAA,EAAA,CAChB,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"SeijUIProvider.js","sources":["../../src/init/SeijUIProvider.tsx"],"sourcesContent":["import { FluentProvider, Theme, webLightTheme } from \"@fluentui/react-components\";\n\nimport { PropsWithChildren } from \"react\";\nimport { ErrorManager } from \"../lib/error_notifier/ErrorNotifier\";\nimport { I18nProvider } from \"../lib/i18n/i18n.react\";\n\n// noinspection SpellCheckingInspection\nconst theme: Theme = {\n  ...webLightTheme,\n  fontFamilyBase:\n    \"'Noto Sans', 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif\",\n  fontFamilyMonospace: \"Fira Mono, Consolas, 'Courier New', Courier, monospace\",\n  fontFamilyNumeric:\n    \"Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif\",\n};\n\ninterface SeijUIProviderProps extends PropsWithChildren {}\n\nexport function SeijUIProvider({ children }: SeijUIProviderProps) {\n  return (\n    <I18nProvider>\n      <FluentProvider theme={theme}>\n        {children}\n        <ErrorManager />\n      </FluentProvider>\n    </I18nProvider>\n  );\n}\n"],"names":["theme","webLightTheme","SeijUIProvider","children","jsx","I18nProvider","jsxs","FluentProvider","ErrorManager"],"mappings":";;;;AAOA,MAAMA,IAAe;AAAA,EACnB,GAAGC;AAAA,EACH,gBACE;AAAA,EACF,qBAAqB;AAAA,EACrB,mBACE;AACJ;AAIO,SAASC,EAAe,EAAE,UAAAC,KAAiC;AAChE,SACE,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAe,OAAAP,GACb,UAAA;AAAA,IAAAG;AAAA,sBACAK,GAAA,CAAA,CAAa;AAAA,EAAA,EAAA,CAChB,EAAA,CACF;AAEJ;"}

package/dist/lib/applicationshell/ApplicationShell.d.ts

@@ -1,13 +1,80 @@
 import { ReactNode } from 'react';
 import { NavigationTreeItem } from '../navigation/Navigation.types';
 import { UserStatus } from './ApplicationShell.types';
-export declare function ApplicationShell({ applicationName, main, navigationItems, userStatus, onClickHome, navigate, matchPath, }: {
+/**
+ * Props for the `ApplicationShell` layout component.
+ *
+ * The shell renders a persistent left navigation (Fluent UI `NavDrawer`), a top `TitleBar`,
+ * and your main application content. It also wires navigation events so the currently
+ * selected item reflects the browser URL and clicking items triggers navigation.
+ */
+export interface ApplicationShellProps {
+    /**
+     * Human‑readable name of the application displayed in the `TitleBar`.
+     * Example: "Orders Console".
+     */
     applicationName: string;
+    /**
+     * Main content of the page. This is rendered in the scrollable content area on the right
+     * of the navigation drawer. Typically the routed page/component for the current URL.
+     */
     main: ReactNode;
+    /**
+     * Tree of navigation items used to render the side navigation and compute selection.
+     * Items may be categories or leaf entries with a `path`. When a leaf item is selected
+     * and has a `path`, `navigate(path)` is invoked.
+     */
     navigationItems: NavigationTreeItem[];
+    /**
+     * Current user status information shown in the `TitleBar` (e.g., username, avatar, roles).
+     */
     userStatus: UserStatus;
+    /**
+     * Called when the home button in the `TitleBar` is clicked.
+     * Use this to navigate to your application home route or perform any related action.
+     */
     onClickHome: () => void;
+    /**
+     * Imperative navigation function called when a navigation leaf item with a `path`
+     * is selected. Provide the function from your router (e.g., react-router navigate).
+     */
     navigate: (path: string) => void;
+    /**
+     * Function used to check whether the current browser location matches a given item `path`.
+     * It is used at render time to preselect the item that corresponds to the current URL.
+     * Return `true` if the provided `path` matches the active route.
+     */
     matchPath: (path: string | undefined) => boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}
+/**
+ * ApplicationShell
+ *
+ * High‑level layout component that composes the application chrome:
+ * - Top `TitleBar` showing the application name and user status
+ * - Left `NavDrawer` for hierarchical navigation
+ * - Main scrollable content area where your routed page is rendered
+ *
+ * Behavior
+ * - Preselects the navigation item that matches the current URL via `matchPath`
+ * - When a leaf item with a `path` is clicked, calls `navigate(path)`
+ * - Keeps track of opened navigation categories and the selected item
+ * - Displays a hamburger in the TitleBar to toggle the navigation drawer
+ *
+ * Usage (example)
+ *
+ * ```tsx
+ * <ApplicationShell
+ *   applicationName="Orders Console"
+ *   navigationItems={items}
+ *   userStatus={{ displayName: "Jane Doe" }}
+ *   onClickHome={() => navigate("/")}
+ *   navigate={(path) => navigate(path)}
+ *   matchPath={(path) => !!path && !!match(path)}
+ *   main={<Outlet />}
+ * />
+ * ```
+ * Where `navigate`/`match` typically come from your router (e.g., react‑router v6's
+ * `useNavigate`/`useMatch`). See `ApplicationShellProps` for details on each prop.
+ */
+export declare function ApplicationShell({ applicationName, main, navigationItems, userStatus, onClickHome, navigate, matchPath, }: ApplicationShellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ApplicationShell.d.ts.map

package/dist/lib/applicationshell/ApplicationShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationShell.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAqCtD,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,IAAI,EACJ,eAAe,EACf,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC;CAClD,2CA2FA"}
+{"version":3,"file":"ApplicationShell.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAqCtD;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;;;OAIG;IACH,eAAe,EAAE,kBAAkB,EAAE,CAAC;IAEtC;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IAEvB;;;OAGG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;;OAIG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC;CAClD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,IAAI,EACJ,eAAe,EACf,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,2CA2FvB"}

package/dist/lib/applicationshell/ApplicationShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationShell.js","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"sourcesContent":["import {\n  Hamburger,\n  makeStyles,\n  NavDrawer,\n  NavDrawerBody,\n  NavDrawerHeader,\n  tokens,\n  Tooltip,\n} from \"@fluentui/react-components\";\nimport { ReactNode, useMemo, useState } from \"react\";\nimport { Navigation } from \"../navigation/Navigation\";\nimport { NavigationTreeItem } from \"../navigation/Navigation.types\";\nimport { createNavigationTreeItemServiceImpl } from \"../navigation/NavigationService\";\nimport { UserStatus } from \"./ApplicationShell.types\";\nimport { TitleBar } from \"./TitleBar\";\n\nconst useApplicationShellStyles = makeStyles({\n  shell: {\n    width: \"100vw\",\n    height: \"100vh\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflow: \"hidden\",\n  },\n  titleBar: {\n    width: \"100%\",\n    height: \"48px\",\n    flex: 0,\n  },\n  main: {\n    overflow: \"hidden\",\n    display: \"flex\",\n    height: \"100%\",\n  },\n  content: {\n    flex: \"1\",\n    display: \"bloc\",\n    justifyContent: \"flex-start\",\n    alignItems: \"flex-start\",\n    overflow: \"auto\",\n    backgroundColor: tokens.colorNeutralBackground2,\n  },\n  bugerIcon: {\n    color: tokens.colorNeutralForegroundOnBrand,\n    \":hover\": {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n});\n\nexport function ApplicationShell({\n  applicationName,\n  main,\n  navigationItems,\n  userStatus,\n  onClickHome,\n  navigate,\n  matchPath,\n}: {\n  applicationName: string;\n  main: ReactNode;\n  navigationItems: NavigationTreeItem[];\n  userStatus: UserStatus;\n  onClickHome: () => void;\n  navigate: (path: string) => void;\n  matchPath: (path: string | undefined) => boolean;\n}) {\n  // test si le chemin courant du navigateur correspond à cet item\n  // attention, on est obligés de tester tous les items, qu'ils aient\n  // un lien ou pas, d'où le url-inconnue pour ceux qui n'ont pas de lien.\n  // On est obligés car useMatch est un hook que l'on ne peut pas lancer\n  // de manière conditionnelle\n  const navigationItemFound = navigationItems.find((it) => \"path\" in it && it.path !== null && matchPath(it.path));\n  const navigationItemSelectedFromUrl = navigationItemFound?.id;\n  const defaultOpenCategory =\n    navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null\n      ? [navigationItemFound.parentId]\n      : [];\n\n  const styles = useApplicationShellStyles();\n  const [navDrawerOpened, setNavDrawerOpened] = useState<boolean>(true);\n  const [selectedItem, setSelectedItem] = useState<string>(navigationItemSelectedFromUrl ?? \"\");\n  const [openedCategories, setOpenCategories] = useState<string[]>(defaultOpenCategory);\n\n  const navigationService = useMemo(() => createNavigationTreeItemServiceImpl(navigationItems), [navigationItems]);\n  const handleClickHamburger = () => {\n    setNavDrawerOpened(!navDrawerOpened);\n  };\n\n  const handleClickMenuItem = (itemId: string) => {\n    const item = navigationService.findById(itemId);\n    setSelectedItem(item.id);\n    const parentId = \"parentId\" in item ? item.parentId : null;\n    if (parentId) {\n      if (!openedCategories.find((cat) => cat === parentId)) {\n        setOpenCategories([...openedCategories, parentId]);\n      }\n    }\n    if (\"path\" in item && item.path) navigate(item.path);\n  };\n\n  const handleClickCategory = (categoryId: string) => {\n    if (!openedCategories.find((cat) => cat === categoryId)) {\n      setOpenCategories([...openedCategories, categoryId]);\n    } else {\n      setOpenCategories(openedCategories.filter((it) => it !== categoryId));\n    }\n  };\n\n  const openCategories: string[] = [];\n  if (navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null) {\n    openCategories.push(navigationItemFound.parentId);\n  }\n\n  return (\n    <div data-e2e-id=\"shell\" className={styles.shell}>\n      <div data-e2e-id=\"shell__menu_top\" className={styles.titleBar}>\n        {!navDrawerOpened ? (\n          <TitleBar\n            applicationName={applicationName}\n            userStatus={userStatus}\n            onClickHome={onClickHome}\n            hamburger={<MenuBurger onClick={handleClickHamburger} />}\n          />\n        ) : null}\n      </div>\n      <div data-e2e-id=\"shell__main\" className={styles.main}>\n        <NavDrawer\n          selectedValue={selectedItem}\n          open={navDrawerOpened}\n          density={\"small\"}\n          type={\"inline\"}\n          openCategories={openedCategories}\n          onNavItemSelect={(e, data) => {\n            handleClickMenuItem(data.value);\n          }}\n          onNavCategoryItemToggle={(e, data) => {\n            handleClickCategory(data.categoryValue ?? \"\");\n          }}\n        >\n          <TitleBar\n            applicationName={applicationName}\n            userStatus={userStatus}\n            onClickHome={onClickHome}\n            hamburger={<MenuBurger onClick={handleClickHamburger} />}\n          />\n          <NavDrawerHeader></NavDrawerHeader>\n          <NavDrawerBody>\n            <Navigation items={navigationItems} />\n          </NavDrawerBody>\n        </NavDrawer>\n        <div data-e2e-id=\"shell__content\" className={styles.content}>\n          {main}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst MenuBurger = ({ onClick }: { onClick: () => void }) => {\n  const styles = useApplicationShellStyles();\n  return (\n    <Tooltip content=\"Navigation\" relationship=\"label\">\n      <Hamburger className={styles.bugerIcon} onClick={onClick} />\n    </Tooltip>\n  );\n};\n"],"names":["useApplicationShellStyles","makeStyles","tokens","ApplicationShell","applicationName","main","navigationItems","userStatus","onClickHome","navigate","matchPath","navigationItemFound","it","navigationItemSelectedFromUrl","defaultOpenCategory","styles","navDrawerOpened","setNavDrawerOpened","useState","selectedItem","setSelectedItem","openedCategories","setOpenCategories","navigationService","useMemo","createNavigationTreeItemServiceImpl","handleClickHamburger","handleClickMenuItem","itemId","item","parentId","cat","handleClickCategory","categoryId","openCategories","jsx","TitleBar","MenuBurger","jsxs","NavDrawer","e","data","NavDrawerHeader","NavDrawerBody","Navigation","onClick","Tooltip","Hamburger"],"mappings":"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"}
+{"version":3,"file":"ApplicationShell.js","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"sourcesContent":["import {\n  Hamburger,\n  makeStyles,\n  NavDrawer,\n  NavDrawerBody,\n  NavDrawerHeader,\n  tokens,\n  Tooltip,\n} from \"@fluentui/react-components\";\nimport { ReactNode, useMemo, useState } from \"react\";\nimport { Navigation } from \"../navigation/Navigation\";\nimport { NavigationTreeItem } from \"../navigation/Navigation.types\";\nimport { createNavigationTreeItemServiceImpl } from \"../navigation/NavigationService\";\nimport { UserStatus } from \"./ApplicationShell.types\";\nimport { TitleBar } from \"./TitleBar\";\n\nconst useApplicationShellStyles = makeStyles({\n  shell: {\n    width: \"100vw\",\n    height: \"100vh\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflow: \"hidden\",\n  },\n  titleBar: {\n    width: \"100%\",\n    height: \"48px\",\n    flex: 0,\n  },\n  main: {\n    overflow: \"hidden\",\n    display: \"flex\",\n    height: \"100%\",\n  },\n  content: {\n    flex: \"1\",\n    display: \"bloc\",\n    justifyContent: \"flex-start\",\n    alignItems: \"flex-start\",\n    overflow: \"auto\",\n    backgroundColor: tokens.colorNeutralBackground2,\n  },\n  bugerIcon: {\n    color: tokens.colorNeutralForegroundOnBrand,\n    \":hover\": {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n});\n\n/**\n * Props for the `ApplicationShell` layout component.\n *\n * The shell renders a persistent left navigation (Fluent UI `NavDrawer`), a top `TitleBar`,\n * and your main application content. It also wires navigation events so the currently\n * selected item reflects the browser URL and clicking items triggers navigation.\n */\nexport interface ApplicationShellProps {\n  /**\n   * Human‑readable name of the application displayed in the `TitleBar`.\n   * Example: \"Orders Console\".\n   */\n  applicationName: string;\n\n  /**\n   * Main content of the page. This is rendered in the scrollable content area on the right\n   * of the navigation drawer. Typically the routed page/component for the current URL.\n   */\n  main: ReactNode;\n\n  /**\n   * Tree of navigation items used to render the side navigation and compute selection.\n   * Items may be categories or leaf entries with a `path`. When a leaf item is selected\n   * and has a `path`, `navigate(path)` is invoked.\n   */\n  navigationItems: NavigationTreeItem[];\n\n  /**\n   * Current user status information shown in the `TitleBar` (e.g., username, avatar, roles).\n   */\n  userStatus: UserStatus;\n\n  /**\n   * Called when the home button in the `TitleBar` is clicked.\n   * Use this to navigate to your application home route or perform any related action.\n   */\n  onClickHome: () => void;\n\n  /**\n   * Imperative navigation function called when a navigation leaf item with a `path`\n   * is selected. Provide the function from your router (e.g., react-router navigate).\n   */\n  navigate: (path: string) => void;\n\n  /**\n   * Function used to check whether the current browser location matches a given item `path`.\n   * It is used at render time to preselect the item that corresponds to the current URL.\n   * Return `true` if the provided `path` matches the active route.\n   */\n  matchPath: (path: string | undefined) => boolean;\n}\n\n/**\n * ApplicationShell\n *\n * High‑level layout component that composes the application chrome:\n * - Top `TitleBar` showing the application name and user status\n * - Left `NavDrawer` for hierarchical navigation\n * - Main scrollable content area where your routed page is rendered\n *\n * Behavior\n * - Preselects the navigation item that matches the current URL via `matchPath`\n * - When a leaf item with a `path` is clicked, calls `navigate(path)`\n * - Keeps track of opened navigation categories and the selected item\n * - Displays a hamburger in the TitleBar to toggle the navigation drawer\n *\n * Usage (example)\n *\n * ```tsx\n * <ApplicationShell\n *   applicationName=\"Orders Console\"\n *   navigationItems={items}\n *   userStatus={{ displayName: \"Jane Doe\" }}\n *   onClickHome={() => navigate(\"/\")}\n *   navigate={(path) => navigate(path)}\n *   matchPath={(path) => !!path && !!match(path)}\n *   main={<Outlet />}\n * />\n * ```\n * Where `navigate`/`match` typically come from your router (e.g., react‑router v6's\n * `useNavigate`/`useMatch`). See `ApplicationShellProps` for details on each prop.\n */\nexport function ApplicationShell({\n  applicationName,\n  main,\n  navigationItems,\n  userStatus,\n  onClickHome,\n  navigate,\n  matchPath,\n}: ApplicationShellProps) {\n  // test si le chemin courant du navigateur correspond à cet item\n  // attention, on est obligés de tester tous les items, qu'ils aient\n  // un lien ou pas, d'où le url-inconnue pour ceux qui n'ont pas de lien.\n  // On est obligés car useMatch est un hook que l'on ne peut pas lancer\n  // de manière conditionnelle\n  const navigationItemFound = navigationItems.find((it) => \"path\" in it && it.path !== null && matchPath(it.path));\n  const navigationItemSelectedFromUrl = navigationItemFound?.id;\n  const defaultOpenCategory =\n    navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null\n      ? [navigationItemFound.parentId]\n      : [];\n\n  const styles = useApplicationShellStyles();\n  const [navDrawerOpened, setNavDrawerOpened] = useState<boolean>(true);\n  const [selectedItem, setSelectedItem] = useState<string>(navigationItemSelectedFromUrl ?? \"\");\n  const [openedCategories, setOpenCategories] = useState<string[]>(defaultOpenCategory);\n\n  const navigationService = useMemo(() => createNavigationTreeItemServiceImpl(navigationItems), [navigationItems]);\n  const handleClickHamburger = () => {\n    setNavDrawerOpened(!navDrawerOpened);\n  };\n\n  const handleClickMenuItem = (itemId: string) => {\n    const item = navigationService.findById(itemId);\n    setSelectedItem(item.id);\n    const parentId = \"parentId\" in item ? item.parentId : null;\n    if (parentId) {\n      if (!openedCategories.find((cat) => cat === parentId)) {\n        setOpenCategories([...openedCategories, parentId]);\n      }\n    }\n    if (\"path\" in item && item.path) navigate(item.path);\n  };\n\n  const handleClickCategory = (categoryId: string) => {\n    if (!openedCategories.find((cat) => cat === categoryId)) {\n      setOpenCategories([...openedCategories, categoryId]);\n    } else {\n      setOpenCategories(openedCategories.filter((it) => it !== categoryId));\n    }\n  };\n\n  const openCategories: string[] = [];\n  if (navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null) {\n    openCategories.push(navigationItemFound.parentId);\n  }\n\n  return (\n    <div data-e2e-id=\"shell\" className={styles.shell}>\n      <div data-e2e-id=\"shell__menu_top\" className={styles.titleBar}>\n        {!navDrawerOpened ? (\n          <TitleBar\n            applicationName={applicationName}\n            userStatus={userStatus}\n            onClickHome={onClickHome}\n            hamburger={<MenuBurger onClick={handleClickHamburger} />}\n          />\n        ) : null}\n      </div>\n      <div data-e2e-id=\"shell__main\" className={styles.main}>\n        <NavDrawer\n          selectedValue={selectedItem}\n          open={navDrawerOpened}\n          density={\"small\"}\n          type={\"inline\"}\n          openCategories={openedCategories}\n          onNavItemSelect={(e, data) => {\n            handleClickMenuItem(data.value);\n          }}\n          onNavCategoryItemToggle={(e, data) => {\n            handleClickCategory(data.categoryValue ?? \"\");\n          }}\n        >\n          <TitleBar\n            applicationName={applicationName}\n            userStatus={userStatus}\n            onClickHome={onClickHome}\n            hamburger={<MenuBurger onClick={handleClickHamburger} />}\n          />\n          <NavDrawerHeader></NavDrawerHeader>\n          <NavDrawerBody>\n            <Navigation items={navigationItems} />\n          </NavDrawerBody>\n        </NavDrawer>\n        <div data-e2e-id=\"shell__content\" className={styles.content}>\n          {main}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst MenuBurger = ({ onClick }: { onClick: () => void }) => {\n  const styles = useApplicationShellStyles();\n  return (\n    <Tooltip content=\"Navigation\" relationship=\"label\">\n      <Hamburger className={styles.bugerIcon} onClick={onClick} />\n    </Tooltip>\n  );\n};\n"],"names":["useApplicationShellStyles","makeStyles","tokens","ApplicationShell","applicationName","main","navigationItems","userStatus","onClickHome","navigate","matchPath","navigationItemFound","it","navigationItemSelectedFromUrl","defaultOpenCategory","styles","navDrawerOpened","setNavDrawerOpened","useState","selectedItem","setSelectedItem","openedCategories","setOpenCategories","navigationService","useMemo","createNavigationTreeItemServiceImpl","handleClickHamburger","handleClickMenuItem","itemId","item","parentId","cat","handleClickCategory","categoryId","openCategories","jsx","TitleBar","MenuBurger","jsxs","NavDrawer","e","data","NavDrawerHeader","NavDrawerBody","Navigation","onClick","Tooltip","Hamburger"],"mappings":"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"}

package/dist/lib/applicationshell/TitleBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAwDtD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,WAAW,EACX,UAAU,EACV,eAAe,EAAE,eAAe,GACjC,EAAE;IACD,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,2CAkBA"}
+{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAyDtD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,WAAW,EACX,UAAU,EACV,eAAe,EAAE,eAAe,GACjC,EAAE;IACD,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,2CAkBA"}

package/dist/lib/applicationshell/TitleBar.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { makeStyles as h, tokens as o, Text as u, useKeyboardNavAttribute as p, Spinner as m, Avatar as s } from "@fluentui/react-components";
-import { ChessRegular as x } from "@fluentui/react-icons";
-const c = h({
+import { makeStyles as h, tokens as o, Text as p, useKeyboardNavAttribute as u, Spinner as m, Avatar as s } from "@fluentui/react-components";
+import { Icon as x } from "@seij/common-ui-icons";
+const a = h({
   root: {
     height: "48px",
     lineHeight: "48px",
@@ -56,24 +56,24 @@ const c = h({
 });
 function v({
   hamburger: e,
-  onClickHome: i,
-  userStatus: r,
+  onClickHome: r,
+  userStatus: i,
   applicationName: l
 }) {
-  const t = c();
+  const t = a();
   return /* @__PURE__ */ n("div", { className: t.root, children: /* @__PURE__ */ d("div", { className: t.appBar, children: [
     e ? /* @__PURE__ */ n("div", { className: t.launcher, children: e }) : null,
-    /* @__PURE__ */ n("div", { className: t.launcher, children: /* @__PURE__ */ n(g, { onClick: i }) }),
-    /* @__PURE__ */ n("div", { className: t.title, children: /* @__PURE__ */ n(u, { weight: "semibold", children: l }) }),
-    /* @__PURE__ */ n("div", { className: t.actions, children: /* @__PURE__ */ n(f, { status: r }) })
+    /* @__PURE__ */ n("div", { className: t.launcher, children: /* @__PURE__ */ n(g, { onClick: r }) }),
+    /* @__PURE__ */ n("div", { className: t.title, children: /* @__PURE__ */ n(p, { weight: "semibold", children: l }) }),
+    /* @__PURE__ */ n("div", { className: t.actions, children: /* @__PURE__ */ n(f, { status: i }) })
   ] }) });
 }
 function g({ onClick: e }) {
-  const i = c(), r = p(), l = a(e);
-  return /* @__PURE__ */ n("a", { tabIndex: 0, ...l, className: i.home, "aria-label": "Accueil", ref: r, children: /* @__PURE__ */ n(x, { className: i.launcher_icon }) });
+  const r = a(), i = u(), l = c(e);
+  return /* @__PURE__ */ n("a", { tabIndex: 0, ...l, className: r.home, "aria-label": "Accueil", ref: i, children: /* @__PURE__ */ n(x, { name: "genericapp", className: r.launcher_icon }) });
 }
 function f({ status: e }) {
-  const i = c();
+  const r = a();
   if (e.isLoading)
     return /* @__PURE__ */ n(m, {});
   if (e.errorMessage)
@@ -82,16 +82,16 @@ function f({ status: e }) {
       e.errorMessage
     ] });
   if (e.isAuthenticated) {
-    const l = e.userName ?? "", t = a(e.onClickSignIn);
-    return /* @__PURE__ */ n("a", { tabIndex: 0, className: i.userActionButton, ...t, children: /* @__PURE__ */ n(s, { "aria-label": l, name: l }) });
+    const l = e.userName ?? "", t = c(e.onClickSignIn);
+    return /* @__PURE__ */ n("a", { tabIndex: 0, className: r.userActionButton, ...t, children: /* @__PURE__ */ n(s, { "aria-label": l, name: l }) });
   }
-  const r = a(e.onClickSignOut);
-  return /* @__PURE__ */ n("a", { tabIndex: 0, className: i.userActionButton, ...r, children: /* @__PURE__ */ n(s, { "aria-label": "Non connecté" }) });
+  const i = c(e.onClickSignOut);
+  return /* @__PURE__ */ n("a", { tabIndex: 0, className: r.userActionButton, ...i, children: /* @__PURE__ */ n(s, { "aria-label": "Non connecté" }) });
 }
-const a = (e) => ({
+const c = (e) => ({
   onClick: e,
-  onKeyUp: (r) => {
-    (r.key === "Enter" || r.key === " ") && (e(), r.preventDefault());
+  onKeyUp: (i) => {
+    (i.key === "Enter" || i.key === " ") && (e(), i.preventDefault());
   }
 });
 export {

package/dist/lib/applicationshell/TitleBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TitleBar.js","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"sourcesContent":["import { Avatar, makeStyles, Spinner, Text, tokens, useKeyboardNavAttribute } from \"@fluentui/react-components\";\nimport { ChessRegular } from \"@fluentui/react-icons\";\nimport { KeyboardEventHandler, ReactNode } from \"react\";\nimport { UserStatus } from \"./ApplicationShell.types\";\n\nconst useTitleBarStyles = makeStyles({\n  root: {\n    height: \"48px\",\n    lineHeight: \"48px\",\n    width: \"100%\",\n  },\n  appBar: {\n    display: \"flex\",\n    color: tokens.colorNeutralForegroundOnBrand,\n    backgroundColor: tokens.colorBrandBackground,\n    width: \"100%\",\n    maxWidth: \"100%\",\n  },\n  launcher: {\n    width: \"48px\",\n    minWidth: \"48px\",\n    height: \"48px\",\n    lineHeight: \"48px\",\n    flex: 0,\n    textAlign: \"center\",\n    \":hover\": {\n      background: tokens.colorBrandBackgroundHover,\n      cursor: \"pointer\",\n    },\n  },\n  launcher_icon: {\n    fontSize: \"24px\",\n    verticalAlign: \"middle\",\n  },\n  title: {\n    height: \"48px\",\n    flex: 1,\n    whiteSpace: \"nowrap\",\n  },\n  actions: {\n    height: \"48px\",\n    minWidth: \"48px\",\n    flex: 0,\n    display: \"flex\",\n    justifyContent: \"space-around\",\n  },\n  home: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"inline-block\",\n  },\n  userActionButton: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"inline-block\",\n    textAlign: \"center\",\n  },\n});\n\nexport function TitleBar({\n  hamburger,\n  onClickHome,\n  userStatus,\n  applicationName: applicationName,\n}: {\n  userStatus: UserStatus;\n  applicationName: string;\n  hamburger: ReactNode | null;\n  onClickHome: () => void;\n}) {\n  const styles = useTitleBarStyles();\n  return (\n    <div className={styles.root}>\n      <div className={styles.appBar}>\n        {hamburger ? <div className={styles.launcher}>{hamburger}</div> : null}\n        <div className={styles.launcher}>\n          <Home onClick={onClickHome} />\n        </div>\n        <div className={styles.title}>\n          <Text weight=\"semibold\">{applicationName}</Text>\n        </div>\n        <div className={styles.actions}>\n          <User status={userStatus} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Home({ onClick }: { onClick: () => void }) {\n  const styles = useTitleBarStyles();\n  const ref = useKeyboardNavAttribute<HTMLAnchorElement>();\n  const onClickHandlers = createClickHandlers(onClick);\n  return (\n    <a tabIndex={0} {...onClickHandlers} className={styles.home} aria-label=\"Accueil\" ref={ref}>\n      <ChessRegular className={styles.launcher_icon} />\n    </a>\n  );\n}\n\nfunction User({ status }: { status: UserStatus }) {\n  const styles = useTitleBarStyles();\n\n  if (status.isLoading) {\n    return <Spinner />;\n  }\n\n  if (status.errorMessage) {\n    return <div>Oops... {status.errorMessage}</div>;\n  }\n\n  if (status.isAuthenticated) {\n    const name = status.userName ?? \"\";\n    const onClickHandlers = createClickHandlers(status.onClickSignIn);\n    return (\n      <a tabIndex={0} className={styles.userActionButton} {...onClickHandlers}>\n        <Avatar aria-label={name} name={name} />\n      </a>\n    );\n  }\n\n  const onClickHandlers = createClickHandlers(status.onClickSignOut);\n\n  return (\n    <a tabIndex={0} className={styles.userActionButton} {...onClickHandlers}>\n      <Avatar aria-label=\"Non connecté\" />\n    </a>\n  );\n}\n\nconst createClickHandlers = (onClick: () => void) => {\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (e) => {\n    const correct = e.key === \"Enter\" || e.key === \" \";\n    if (correct) {\n      onClick();\n      e.preventDefault();\n    }\n  };\n  return {\n    onClick: onClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":["useTitleBarStyles","makeStyles","tokens","TitleBar","hamburger","onClickHome","userStatus","applicationName","styles","jsx","jsxs","Home","Text","User","onClick","ref","useKeyboardNavAttribute","onClickHandlers","createClickHandlers","ChessRegular","status","Spinner","name","Avatar","e"],"mappings":";;;AAKA,MAAMA,IAAoBC,EAAW;AAAA,EACnC,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,OAAOC,EAAO;AAAA,IACd,iBAAiBA,EAAO;AAAA,IACxB,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,MACR,YAAYA,EAAO;AAAA,MACnB,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,eAAe;AAAA,IACb,UAAU;AAAA,IACV,eAAe;AAAA,EAAA;AAAA,EAEjB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,EAAA;AAAA,EAEd,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,EAAA;AAAA,EAElB,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAAA,EAEX,kBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAEf,CAAC;AAEM,SAASC,EAAS;AAAA,EACvB,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AACF,GAKG;AACD,QAAMC,IAASR,EAAA;AACf,SACE,gBAAAS,EAAC,SAAI,WAAWD,EAAO,MACrB,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,QACpB,UAAA;AAAA,IAAAJ,sBAAa,OAAA,EAAI,WAAWI,EAAO,UAAW,aAAU,IAAS;AAAA,IAClE,gBAAAC,EAAC,SAAI,WAAWD,EAAO,UACrB,UAAA,gBAAAC,EAACE,GAAA,EAAK,SAASN,EAAA,CAAa,EAAA,CAC9B;AAAA,IACA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,OACrB,4BAACI,GAAA,EAAK,QAAO,YAAY,UAAAL,EAAA,CAAgB,EAAA,CAC3C;AAAA,IACA,gBAAAE,EAAC,SAAI,WAAWD,EAAO,SACrB,UAAA,gBAAAC,EAACI,GAAA,EAAK,QAAQP,EAAA,CAAY,EAAA,CAC5B;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,SAASK,EAAK,EAAE,SAAAG,KAAoC;AAClD,QAAMN,IAASR,EAAA,GACTe,IAAMC,EAAA,GACNC,IAAkBC,EAAoBJ,CAAO;AACnD,2BACG,KAAA,EAAE,UAAU,GAAI,GAAGG,GAAiB,WAAWT,EAAO,MAAM,cAAW,WAAU,KAAAO,GAChF,UAAA,gBAAAN,EAACU,KAAa,WAAWX,EAAO,eAAe,GACjD;AAEJ;AAEA,SAASK,EAAK,EAAE,QAAAO,KAAkC;AAChD,QAAMZ,IAASR,EAAA;AAEf,MAAIoB,EAAO;AACT,6BAAQC,GAAA,EAAQ;AAGlB,MAAID,EAAO;AACT,6BAAQ,OAAA,EAAI,UAAA;AAAA,MAAA;AAAA,MAASA,EAAO;AAAA,IAAA,GAAa;AAG3C,MAAIA,EAAO,iBAAiB;AAC1B,UAAME,IAAOF,EAAO,YAAY,IAC1BH,IAAkBC,EAAoBE,EAAO,aAAa;AAChE,WACE,gBAAAX,EAAC,KAAA,EAAE,UAAU,GAAG,WAAWD,EAAO,kBAAmB,GAAGS,GACtD,UAAA,gBAAAR,EAACc,GAAA,EAAO,cAAYD,GAAM,MAAAA,GAAY,GACxC;AAAA,EAEJ;AAEA,QAAML,IAAkBC,EAAoBE,EAAO,cAAc;AAEjE,SACE,gBAAAX,EAAC,KAAA,EAAE,UAAU,GAAG,WAAWD,EAAO,kBAAmB,GAAGS,GACtD,UAAA,gBAAAR,EAACc,GAAA,EAAO,cAAW,gBAAe,GACpC;AAEJ;AAEA,MAAML,IAAsB,CAACJ,OAQpB;AAAA,EACL,SAAAA;AAAA,EACA,SAT2D,CAACU,MAAM;AAElE,KADgBA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAE7CV,EAAA,GACAU,EAAE,eAAA;AAAA,EAEN;AAGW;"}
+{"version":3,"file":"TitleBar.js","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"sourcesContent":["import { Avatar, makeStyles, Spinner, Text, tokens, useKeyboardNavAttribute } from \"@fluentui/react-components\";\nimport { KeyboardEventHandler, ReactNode } from \"react\";\nimport { UserStatus } from \"./ApplicationShell.types\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nconst useTitleBarStyles = makeStyles({\n  root: {\n    height: \"48px\",\n    lineHeight: \"48px\",\n    width: \"100%\",\n  },\n  appBar: {\n    display: \"flex\",\n    color: tokens.colorNeutralForegroundOnBrand,\n    backgroundColor: tokens.colorBrandBackground,\n    width: \"100%\",\n    maxWidth: \"100%\",\n  },\n  launcher: {\n    width: \"48px\",\n    minWidth: \"48px\",\n    height: \"48px\",\n    lineHeight: \"48px\",\n    flex: 0,\n    textAlign: \"center\",\n    \":hover\": {\n      background: tokens.colorBrandBackgroundHover,\n      cursor: \"pointer\",\n    },\n  },\n  launcher_icon: {\n    fontSize: \"24px\",\n    verticalAlign: \"middle\",\n  },\n  title: {\n    height: \"48px\",\n    flex: 1,\n    whiteSpace: \"nowrap\",\n  },\n  actions: {\n    height: \"48px\",\n    minWidth: \"48px\",\n    flex: 0,\n    display: \"flex\",\n    justifyContent: \"space-around\",\n  },\n  home: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"inline-block\",\n  },\n  userActionButton: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"inline-block\",\n    textAlign: \"center\",\n  },\n});\n\nexport function TitleBar({\n  hamburger,\n  onClickHome,\n  userStatus,\n  applicationName: applicationName,\n}: {\n  userStatus: UserStatus;\n  applicationName: string;\n  hamburger: ReactNode | null;\n  onClickHome: () => void;\n}) {\n  const styles = useTitleBarStyles();\n  return (\n    <div className={styles.root}>\n      <div className={styles.appBar}>\n        {hamburger ? <div className={styles.launcher}>{hamburger}</div> : null}\n        <div className={styles.launcher}>\n          <Home onClick={onClickHome} />\n        </div>\n        <div className={styles.title}>\n          <Text weight=\"semibold\">{applicationName}</Text>\n        </div>\n        <div className={styles.actions}>\n          <User status={userStatus} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Home({ onClick }: { onClick: () => void }) {\n  const styles = useTitleBarStyles();\n  const ref = useKeyboardNavAttribute<HTMLAnchorElement>();\n  const onClickHandlers = createClickHandlers(onClick);\n  return (\n    <a tabIndex={0} {...onClickHandlers} className={styles.home} aria-label=\"Accueil\" ref={ref}>\n      <Icon name=\"genericapp\" className={styles.launcher_icon} />\n    </a>\n  );\n}\n\nfunction User({ status }: { status: UserStatus }) {\n  const styles = useTitleBarStyles();\n\n  if (status.isLoading) {\n    return <Spinner />;\n  }\n\n  if (status.errorMessage) {\n    return <div>Oops... {status.errorMessage}</div>;\n  }\n\n  if (status.isAuthenticated) {\n    const name = status.userName ?? \"\";\n    const onClickHandlers = createClickHandlers(status.onClickSignIn);\n    return (\n      <a tabIndex={0} className={styles.userActionButton} {...onClickHandlers}>\n        <Avatar aria-label={name} name={name} />\n      </a>\n    );\n  }\n\n  const onClickHandlers = createClickHandlers(status.onClickSignOut);\n\n  return (\n    <a tabIndex={0} className={styles.userActionButton} {...onClickHandlers}>\n      <Avatar aria-label=\"Non connecté\" />\n    </a>\n  );\n}\n\nconst createClickHandlers = (onClick: () => void) => {\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (e) => {\n    const correct = e.key === \"Enter\" || e.key === \" \";\n    if (correct) {\n      onClick();\n      e.preventDefault();\n    }\n  };\n  return {\n    onClick: onClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":["useTitleBarStyles","makeStyles","tokens","TitleBar","hamburger","onClickHome","userStatus","applicationName","styles","jsx","jsxs","Home","Text","User","onClick","ref","useKeyboardNavAttribute","onClickHandlers","createClickHandlers","Icon","status","Spinner","name","Avatar","e"],"mappings":"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"}

package/dist/lib/errorbox/ErrorBox.js

@@ -1,10 +1,10 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { MessageBar as s, MessageBarBody as a, MessageBarActions as l, Button as u } from "@fluentui/react-components";
-import { DismissRegular as c } from "@fluentui/react-icons";
+import { MessageBar as s, MessageBarBody as a, MessageBarActions as c, Button as l } from "@fluentui/react-components";
 import { isNil as m } from "lodash-es";
-import { useI18n as p } from "../i18n/i18n.react.js";
+import { useI18n as u } from "../i18n/i18n.react.js";
+import { Icon as d } from "@seij/common-ui-icons";
 const _ = ({ error: r, onClose: n }) => {
-  const { t: o } = p();
+  const { t: o } = u();
   if (!r) return null;
   const i = r.title ?? o("errorbox_unknown_error", { error: r.status ? "" + r.status : o("errorbox_unknown_error_status") });
   return /* @__PURE__ */ e(s, { intent: "error", layout: "multiline", children: [
@@ -13,9 +13,9 @@ const _ = ({ error: r, onClose: n }) => {
       /* @__PURE__ */ t("div", { children: r.detail })
     ] }),
     !m(n) && /* @__PURE__ */ t(
-      l,
+      c,
       {
-        containerAction: /* @__PURE__ */ t(u, { appearance: "transparent", icon: /* @__PURE__ */ t(c, {}), onClick: n })
+        containerAction: /* @__PURE__ */ t(l, { appearance: "transparent", icon: /* @__PURE__ */ t(d, { name: "dismiss" }), onClick: n })
       }
     )
   ] });

package/dist/lib/errorbox/ErrorBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBox.js","sources":["../../../src/lib/errorbox/ErrorBox.tsx"],"sourcesContent":["import { Problem } from \"@seij/common-types\";\nimport { Button, MessageBar, MessageBarActions, MessageBarBody } from \"@fluentui/react-components\";\nimport { DismissRegular } from \"@fluentui/react-icons\";\nimport { isNil } from \"lodash-es\";\nimport { useI18n } from \"../i18n/i18n.react\";\n\nexport const ErrorBox = ({ error, onClose }: { error: Problem | null | undefined; onClose?: () => void }) => {\n  const { t } = useI18n();\n\n  if (!error) return null;\n  const regularMessage =\n    error.title ??\n    t(\"errorbox_unknown_error\", { error: error.status ? \"\" + error.status : t(\"errorbox_unknown_error_status\") });\n\n  return (\n    <MessageBar intent=\"error\" layout=\"multiline\">\n      <MessageBarBody>\n        <div>{regularMessage}</div>\n        <div>{error.detail}</div>\n      </MessageBarBody>\n      {!isNil(onClose) && (\n        <MessageBarActions\n          containerAction={<Button appearance=\"transparent\" icon={<DismissRegular />} onClick={onClose} />}\n        ></MessageBarActions>\n      )}\n    </MessageBar>\n  );\n};\n"],"names":["ErrorBox","error","onClose","t","useI18n","regularMessage","jsxs","MessageBar","MessageBarBody","jsx","isNil","MessageBarActions","Button","DismissRegular"],"mappings":";;;;;AAMO,MAAMA,IAAW,CAAC,EAAE,OAAAC,GAAO,SAAAC,QAA2E;AAC3G,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,MAAI,CAACH,EAAO,QAAO;AACnB,QAAMI,IACJJ,EAAM,SACNE,EAAE,0BAA0B,EAAE,OAAOF,EAAM,SAAS,KAAKA,EAAM,SAASE,EAAE,+BAA+B,GAAG;AAE9G,SACE,gBAAAG,EAACC,GAAA,EAAW,QAAO,SAAQ,QAAO,aAChC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAK,UAAAJ,EAAA,CAAe;AAAA,MACrB,gBAAAI,EAAC,OAAA,EAAK,UAAAR,EAAM,OAAA,CAAO;AAAA,IAAA,GACrB;AAAA,IACC,CAACS,EAAMR,CAAO,KACb,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,iBAAiB,gBAAAF,EAACG,GAAA,EAAO,YAAW,eAAc,MAAM,gBAAAH,EAACI,GAAA,CAAA,CAAe,GAAI,SAASX,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/F,GAEL;AAEJ;"}
+{"version":3,"file":"ErrorBox.js","sources":["../../../src/lib/errorbox/ErrorBox.tsx"],"sourcesContent":["import { Problem } from \"@seij/common-types\";\nimport { Button, MessageBar, MessageBarActions, MessageBarBody } from \"@fluentui/react-components\";\nimport { isNil } from \"lodash-es\";\nimport { useI18n } from \"../i18n/i18n.react\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nexport const ErrorBox = ({ error, onClose }: { error: Problem | null | undefined; onClose?: () => void }) => {\n  const { t } = useI18n();\n\n  if (!error) return null;\n  const regularMessage =\n    error.title ??\n    t(\"errorbox_unknown_error\", { error: error.status ? \"\" + error.status : t(\"errorbox_unknown_error_status\") });\n\n  return (\n    <MessageBar intent=\"error\" layout=\"multiline\">\n      <MessageBarBody>\n        <div>{regularMessage}</div>\n        <div>{error.detail}</div>\n      </MessageBarBody>\n      {!isNil(onClose) && (\n        <MessageBarActions\n          containerAction={<Button appearance=\"transparent\" icon={<Icon name=\"dismiss\" />} onClick={onClose} />}\n        ></MessageBarActions>\n      )}\n    </MessageBar>\n  );\n};\n"],"names":["ErrorBox","error","onClose","t","useI18n","regularMessage","jsxs","MessageBar","MessageBarBody","jsx","isNil","MessageBarActions","Button","Icon"],"mappings":";;;;;AAMO,MAAMA,IAAW,CAAC,EAAE,OAAAC,GAAO,SAAAC,QAA2E;AAC3G,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,MAAI,CAACH,EAAO,QAAO;AACnB,QAAMI,IACJJ,EAAM,SACNE,EAAE,0BAA0B,EAAE,OAAOF,EAAM,SAAS,KAAKA,EAAM,SAASE,EAAE,+BAA+B,GAAG;AAE9G,SACE,gBAAAG,EAACC,GAAA,EAAW,QAAO,SAAQ,QAAO,aAChC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAK,UAAAJ,EAAA,CAAe;AAAA,MACrB,gBAAAI,EAAC,OAAA,EAAK,UAAAR,EAAM,OAAA,CAAO;AAAA,IAAA,GACrB;AAAA,IACC,CAACS,EAAMR,CAAO,KACb,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,iBAAiB,gBAAAF,EAACG,GAAA,EAAO,YAAW,eAAc,MAAM,gBAAAH,EAACI,GAAA,EAAK,MAAK,UAAA,CAAU,GAAI,SAASX,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACpG,GAEL;AAEJ;"}

package/dist/lib/i18n/i18n.react.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.react.js","sources":["../../../src/lib/i18n/i18n.react.tsx"],"sourcesContent":["// i18n/I18nProvider.tsx\nimport React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { i18NextInstance, I18nService, I18nServiceInstance } from \"./i18n.service\";\nimport { I18n } from \"./i18n.types\";\n\ntype I18nCtxType = {\n  i18nService: I18nService;\n  lastChange: number;\n};\nconst I18nCtx = createContext<I18nCtxType>({ i18nService: I18nServiceInstance, lastChange: 0 });\n\nexport interface I18nProviderProps {\n  children: React.ReactNode;\n}\n\nexport function I18nProvider({ children }: I18nProviderProps) {\n  // Detects the locale: first used the forced one, then initial, then use autodetection\n\n  const [instanceTs, setInstanceTs] = useState(0);\n  const [ready, setReady] = useState<boolean>(false)\n  const value: I18nCtxType = useMemo(\n    () => ({\n      i18nService: I18nServiceInstance,\n      lastChange: instanceTs,\n    }),\n    [instanceTs],\n  );\n\n  useEffect(() => {\n    I18nServiceInstance.readyPromise.then(()=>{\n      setReady(true)\n    })\n  }, [])\n\n  if (!ready) return null\n\n  return <I18nCtx.Provider value={value}>{children}</I18nCtx.Provider>;\n}\n\nexport function useI18n(): I18n {\n  const v = useContext(I18nCtx);\n  if (!v) throw new Error(\"useI18n must be used within I18nProvider\");\n  return v.i18nService;\n}\n"],"names":["I18nCtx","createContext","I18nServiceInstance","I18nProvider","children","instanceTs","setInstanceTs","useState","ready","setReady","value","useMemo","useEffect","jsx","useI18n","v","useContext"],"mappings":";;;AASA,MAAMA,IAAUC,EAA2B,EAAE,aAAaC,GAAqB,YAAY,GAAG;AAMvF,SAASC,EAAa,EAAE,UAAAC,KAA+B;AAG5D,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,CAAC,GACxC,CAACC,GAAOC,CAAQ,IAAIF,EAAkB,EAAK,GAC3CG,IAAqBC;AAAA,IACzB,OAAO;AAAA,MACL,aAAaT;AAAA,MACb,YAAYG;AAAA,IAAA;AAAA,IAEd,CAACA,CAAU;AAAA,EAAA;AASb,SANAO,EAAU,MAAM;AACd,IAAAV,EAAoB,aAAa,KAAK,MAAI;AACxC,MAAAO,EAAS,EAAI;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAA,CAAE,GAEAD,IAEE,gBAAAK,EAACb,EAAQ,UAAR,EAAiB,OAAAU,GAAe,UAAAN,EAAA,CAAS,IAF9B;AAGrB;AAEO,SAASU,IAAgB;AAC9B,QAAMC,IAAIC,EAAWhB,CAAO;AAC5B,MAAI,CAACe,EAAG,OAAM,IAAI,MAAM,0CAA0C;AAClE,SAAOA,EAAE;AACX;"}
+{"version":3,"file":"i18n.react.js","sources":["../../../src/lib/i18n/i18n.react.tsx"],"sourcesContent":["// i18n/I18nProvider.tsx\nimport React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { i18NextInstance, I18nService, I18nServiceInstance } from \"./i18n.service\";\nimport { I18n } from \"./i18n.types\";\n\ntype I18nCtxType = {\n  i18nService: I18nService;\n  lastChange: number;\n};\nconst I18nCtx = createContext<I18nCtxType>({ i18nService: I18nServiceInstance, lastChange: 0 });\n\nexport interface I18nProviderProps {\n  children: React.ReactNode;\n}\n\nexport function I18nProvider({ children }: I18nProviderProps) {\n  // Detects the locale: first used the forced one, then initial, then use autodetection\n\n  const [instanceTs, setInstanceTs] = useState(0);\n  const [ready, setReady] = useState<boolean>(false);\n  const value: I18nCtxType = useMemo(\n    () => ({\n      i18nService: I18nServiceInstance,\n      lastChange: instanceTs,\n    }),\n    [instanceTs],\n  );\n\n  useEffect(() => {\n    I18nServiceInstance.readyPromise.then(() => {\n      setReady(true);\n    });\n  }, []);\n\n  if (!ready) return null;\n\n  return <I18nCtx.Provider value={value}>{children}</I18nCtx.Provider>;\n}\n\nexport function useI18n(): I18n {\n  const v = useContext(I18nCtx);\n  if (!v) throw new Error(\"useI18n must be used within I18nProvider\");\n  return v.i18nService;\n}\n"],"names":["I18nCtx","createContext","I18nServiceInstance","I18nProvider","children","instanceTs","setInstanceTs","useState","ready","setReady","value","useMemo","useEffect","jsx","useI18n","v","useContext"],"mappings":";;;AASA,MAAMA,IAAUC,EAA2B,EAAE,aAAaC,GAAqB,YAAY,GAAG;AAMvF,SAASC,EAAa,EAAE,UAAAC,KAA+B;AAG5D,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,CAAC,GACxC,CAACC,GAAOC,CAAQ,IAAIF,EAAkB,EAAK,GAC3CG,IAAqBC;AAAA,IACzB,OAAO;AAAA,MACL,aAAaT;AAAA,MACb,YAAYG;AAAA,IAAA;AAAA,IAEd,CAACA,CAAU;AAAA,EAAA;AASb,SANAO,EAAU,MAAM;AACd,IAAAV,EAAoB,aAAa,KAAK,MAAM;AAC1C,MAAAO,EAAS,EAAI;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAA,CAAE,GAEAD,IAEE,gBAAAK,EAACb,EAAQ,UAAR,EAAiB,OAAAU,GAAe,UAAAN,EAAA,CAAS,IAF9B;AAGrB;AAEO,SAASU,IAAgB;AAC9B,QAAMC,IAAIC,EAAWhB,CAAO;AAC5B,MAAI,CAACe,EAAG,OAAM,IAAI,MAAM,0CAA0C;AAClE,SAAOA,EAAE;AACX;"}

package/dist/lib/i18n/i18n.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.types.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/i18n.types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC9C,MAAM,MAAM,OAAO,GAAG;IACpB,SAAS,EAAE;QACT,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACjD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,WAAW,IAAI;IACnB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC5G,UAAU,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrD,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChD,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpD,cAAc,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,oBAAoB,IAAI,MAAM,CAAC;IAC/B,kBAAkB,IAAI,MAAM,CAAC;IAC7B,uBAAuB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,4BAA4B,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACtD,SAAS,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,SAAS,IAAI,MAAM,CAAC;IACpB,iBAAiB,CAAC,GAAG,EAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;CACpE"}
+{"version":3,"file":"i18n.types.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/i18n.types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC9C,MAAM,MAAM,OAAO,GAAG;IACpB,SAAS,EAAE;QACT,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACjD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,WAAW,IAAI;IACnB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC5G,UAAU,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrD,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChD,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpD,cAAc,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,oBAAoB,IAAI,MAAM,CAAC;IAC/B,kBAAkB,IAAI,MAAM,CAAC;IAC7B,uBAAuB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,4BAA4B,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACtD,SAAS,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,SAAS,IAAI,MAAM,CAAC;IACpB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;CACtE"}

package/dist/lib/i18n/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAClF,OAAO,EAAC,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAC,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/lib/inlineedit/InlineEdit.js

@@ -1,47 +1,47 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { useState as d } from "react";
 import { Tooltip as E, Button as a } from "@fluentui/react-components";
-import { toProblem as s } from "@seij/common-types";
-import { EditRegular as g } from "@fluentui/react-icons";
-function O({
+import { toProblem as c } from "@seij/common-types";
+import { Icon as g } from "@seij/common-ui-icons";
+function K({
   children: f,
   editor: h,
   onEditStart: u,
   onEditOK: y,
   onEditCancel: m
 }) {
-  const [p, n] = d(!1), [c, t] = d(null), [o, i] = d(!1), v = async () => {
+  const [p, n] = d(!1), [o, t] = d(null), [s, i] = d(!1), v = async () => {
     try {
       t(null), await u(), n(!0);
     } catch (l) {
-      t(s(l));
+      t(c(l));
     }
   }, x = async () => {
     try {
       t(null), i(!0), await y(), n(!1), i(!1);
     } catch (l) {
-      t(s(l)), i(!1);
+      t(c(l)), i(!1);
     }
   }, C = async () => {
     try {
       t(null), i(!0), await m(), n(!1), i(!1);
     } catch (l) {
-      t(s(l)), i(!1);
+      t(c(l)), i(!1);
     }
   };
   return p ? /* @__PURE__ */ r("div", { children: [
     /* @__PURE__ */ r("div", { style: { display: "flex", justifyContent: "flex-start" }, children: [
       /* @__PURE__ */ e("div", { children: h }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(a, { disabled: o, onClick: x, children: "OK" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(a, { disabled: o, onClick: C, children: "Cancel" }) })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(a, { disabled: s, onClick: x, children: "OK" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(a, { disabled: s, onClick: C, children: "Cancel" }) })
     ] }),
-    c && /* @__PURE__ */ e("div", { style: { color: "red" }, children: c.title })
+    o && /* @__PURE__ */ e("div", { style: { color: "red" }, children: o.title })
   ] }) : /* @__PURE__ */ r("div", { style: { display: "flex", justifyContent: "flex-start" }, children: [
     /* @__PURE__ */ e("div", { children: f }),
-    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(E, { content: "Large with calendar icon only", relationship: "label", children: /* @__PURE__ */ e(a, { size: "small", icon: /* @__PURE__ */ e(g, {}), onClick: v }) }) })
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(E, { content: "Large with calendar icon only", relationship: "label", children: /* @__PURE__ */ e(a, { size: "small", icon: /* @__PURE__ */ e(g, { name: "edit" }), onClick: v }) }) })
   ] });
 }
 export {
-  O as InlineEdit
+  K as InlineEdit
 };
 //# sourceMappingURL=InlineEdit.js.map

package/dist/lib/inlineedit/InlineEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.js","sources":["../../../src/lib/inlineedit/InlineEdit.tsx"],"sourcesContent":["import { ReactNode, useState } from \"react\";\nimport { Button, Tooltip } from \"@fluentui/react-components\";\nimport { Problem, toProblem } from \"@seij/common-types\";\nimport { EditRegular } from \"@fluentui/react-icons\";\n\nexport function InlineEdit({\n  children,\n  editor,\n  onEditStart,\n  onEditOK,\n  onEditCancel,\n}: {\n  children?: ReactNode | ReactNode[] | null;\n  editor: ReactNode;\n  onEditStart: () => Promise<any>;\n  onEditOK: () => Promise<any>;\n  onEditCancel: () => Promise<any>;\n}) {\n  const [editing, setEditing] = useState<boolean>(false);\n  const [error, setError] = useState<Problem | null>(null);\n  const [pending, setPending] = useState<boolean>(false);\n\n  const handleEdit = async () => {\n    try {\n      setError(null);\n      await onEditStart();\n      setEditing(true);\n    } catch (err) {\n      setError(toProblem(err));\n    }\n  };\n\n  const handleEditOK = async () => {\n    try {\n      setError(null);\n      setPending(true);\n      await onEditOK();\n      setEditing(false);\n      setPending(false);\n    } catch (err) {\n      setError(toProblem(err));\n      setPending(false);\n    }\n  };\n  const handleEditCancel = async () => {\n    try {\n      setError(null);\n      setPending(true);\n      await onEditCancel();\n      setEditing(false);\n      setPending(false);\n    } catch (err: any) {\n      setError(toProblem(err));\n      setPending(false);\n    }\n  };\n\n  if (!editing)\n    return (\n      <div style={{ display: \"flex\", justifyContent: \"flex-start\" }}>\n        <div>{children}</div>\n        <div>\n          <Tooltip content=\"Large with calendar icon only\" relationship=\"label\">\n            <Button size=\"small\" icon={<EditRegular />} onClick={handleEdit} />\n          </Tooltip>\n        </div>\n      </div>\n    );\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"flex-start\" }}>\n        <div>{editor}</div>\n        <div>\n          <Button disabled={pending} onClick={handleEditOK}>\n            OK\n          </Button>\n        </div>\n        <div>\n          <Button disabled={pending} onClick={handleEditCancel}>\n            Cancel\n          </Button>\n        </div>\n      </div>\n      {error && <div style={{ color: \"red\" }}>{error.title}</div>}\n    </div>\n  );\n}\n"],"names":["InlineEdit","children","editor","onEditStart","onEditOK","onEditCancel","editing","setEditing","useState","error","setError","pending","setPending","handleEdit","err","toProblem","handleEditOK","handleEditCancel","jsxs","jsx","Button","Tooltip","EditRegular"],"mappings":";;;;;AAKO,SAASA,EAAW;AAAA,EACzB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,GAMG;AACD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAkB,EAAK,GAC/C,CAACC,GAAOC,CAAQ,IAAIF,EAAyB,IAAI,GACjD,CAACG,GAASC,CAAU,IAAIJ,EAAkB,EAAK,GAE/CK,IAAa,YAAY;AAC7B,QAAI;AACF,MAAAH,EAAS,IAAI,GACb,MAAMP,EAAA,GACNI,EAAW,EAAI;AAAA,IACjB,SAASO,GAAK;AACZ,MAAAJ,EAASK,EAAUD,CAAG,CAAC;AAAA,IACzB;AAAA,EACF,GAEME,IAAe,YAAY;AAC/B,QAAI;AACF,MAAAN,EAAS,IAAI,GACbE,EAAW,EAAI,GACf,MAAMR,EAAA,GACNG,EAAW,EAAK,GAChBK,EAAW,EAAK;AAAA,IAClB,SAASE,GAAK;AACZ,MAAAJ,EAASK,EAAUD,CAAG,CAAC,GACvBF,EAAW,EAAK;AAAA,IAClB;AAAA,EACF,GACMK,IAAmB,YAAY;AACnC,QAAI;AACF,MAAAP,EAAS,IAAI,GACbE,EAAW,EAAI,GACf,MAAMP,EAAA,GACNE,EAAW,EAAK,GAChBK,EAAW,EAAK;AAAA,IAClB,SAASE,GAAU;AACjB,MAAAJ,EAASK,EAAUD,CAAG,CAAC,GACvBF,EAAW,EAAK;AAAA,IAClB;AAAA,EACF;AAEA,SAAKN,sBAaF,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAY,EAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,gBAAgB,gBAC7C,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAK,UAAAjB,EAAA,CAAO;AAAA,MACb,gBAAAiB,EAAC,SACC,UAAA,gBAAAA,EAACC,GAAA,EAAO,UAAUT,GAAS,SAASK,GAAc,UAAA,KAAA,CAElD,EAAA,CACF;AAAA,MACA,gBAAAG,EAAC,SACC,UAAA,gBAAAA,EAACC,GAAA,EAAO,UAAUT,GAAS,SAASM,GAAkB,UAAA,SAAA,CAEtD,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IACCR,uBAAU,OAAA,EAAI,OAAO,EAAE,OAAO,SAAU,UAAAA,EAAM,MAAA,CAAM;AAAA,EAAA,GACvD,IA1BE,gBAAAS,EAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,gBAAgB,gBAC7C,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAK,UAAAlB,GAAS;AAAA,sBACd,OAAA,EACC,UAAA,gBAAAkB,EAACE,KAAQ,SAAQ,iCAAgC,cAAa,SAC5D,UAAA,gBAAAF,EAACC,KAAO,MAAK,SAAQ,MAAM,gBAAAD,EAACG,GAAA,CAAA,CAAY,GAAI,SAAST,EAAA,CAAY,GACnE,EAAA,CACF;AAAA,EAAA,GACF;AAqBN;"}
+{"version":3,"file":"InlineEdit.js","sources":["../../../src/lib/inlineedit/InlineEdit.tsx"],"sourcesContent":["import { ReactNode, useState } from \"react\";\nimport { Button, Tooltip } from \"@fluentui/react-components\";\nimport { Problem, toProblem } from \"@seij/common-types\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nexport function InlineEdit({\n  children,\n  editor,\n  onEditStart,\n  onEditOK,\n  onEditCancel,\n}: {\n  children?: ReactNode | ReactNode[] | null;\n  editor: ReactNode;\n  onEditStart: () => Promise<any>;\n  onEditOK: () => Promise<any>;\n  onEditCancel: () => Promise<any>;\n}) {\n  const [editing, setEditing] = useState<boolean>(false);\n  const [error, setError] = useState<Problem | null>(null);\n  const [pending, setPending] = useState<boolean>(false);\n\n  const handleEdit = async () => {\n    try {\n      setError(null);\n      await onEditStart();\n      setEditing(true);\n    } catch (err) {\n      setError(toProblem(err));\n    }\n  };\n\n  const handleEditOK = async () => {\n    try {\n      setError(null);\n      setPending(true);\n      await onEditOK();\n      setEditing(false);\n      setPending(false);\n    } catch (err) {\n      setError(toProblem(err));\n      setPending(false);\n    }\n  };\n  const handleEditCancel = async () => {\n    try {\n      setError(null);\n      setPending(true);\n      await onEditCancel();\n      setEditing(false);\n      setPending(false);\n    } catch (err: any) {\n      setError(toProblem(err));\n      setPending(false);\n    }\n  };\n\n  if (!editing)\n    return (\n      <div style={{ display: \"flex\", justifyContent: \"flex-start\" }}>\n        <div>{children}</div>\n        <div>\n          <Tooltip content=\"Large with calendar icon only\" relationship=\"label\">\n            <Button size=\"small\" icon={<Icon name=\"edit\" />} onClick={handleEdit} />\n          </Tooltip>\n        </div>\n      </div>\n    );\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"flex-start\" }}>\n        <div>{editor}</div>\n        <div>\n          <Button disabled={pending} onClick={handleEditOK}>\n            OK\n          </Button>\n        </div>\n        <div>\n          <Button disabled={pending} onClick={handleEditCancel}>\n            Cancel\n          </Button>\n        </div>\n      </div>\n      {error && <div style={{ color: \"red\" }}>{error.title}</div>}\n    </div>\n  );\n}\n"],"names":["InlineEdit","children","editor","onEditStart","onEditOK","onEditCancel","editing","setEditing","useState","error","setError","pending","setPending","handleEdit","err","toProblem","handleEditOK","handleEditCancel","jsxs","jsx","Button","Tooltip","Icon"],"mappings":";;;;;AAKO,SAASA,EAAW;AAAA,EACzB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,GAMG;AACD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAkB,EAAK,GAC/C,CAACC,GAAOC,CAAQ,IAAIF,EAAyB,IAAI,GACjD,CAACG,GAASC,CAAU,IAAIJ,EAAkB,EAAK,GAE/CK,IAAa,YAAY;AAC7B,QAAI;AACF,MAAAH,EAAS,IAAI,GACb,MAAMP,EAAA,GACNI,EAAW,EAAI;AAAA,IACjB,SAASO,GAAK;AACZ,MAAAJ,EAASK,EAAUD,CAAG,CAAC;AAAA,IACzB;AAAA,EACF,GAEME,IAAe,YAAY;AAC/B,QAAI;AACF,MAAAN,EAAS,IAAI,GACbE,EAAW,EAAI,GACf,MAAMR,EAAA,GACNG,EAAW,EAAK,GAChBK,EAAW,EAAK;AAAA,IAClB,SAASE,GAAK;AACZ,MAAAJ,EAASK,EAAUD,CAAG,CAAC,GACvBF,EAAW,EAAK;AAAA,IAClB;AAAA,EACF,GACMK,IAAmB,YAAY;AACnC,QAAI;AACF,MAAAP,EAAS,IAAI,GACbE,EAAW,EAAI,GACf,MAAMP,EAAA,GACNE,EAAW,EAAK,GAChBK,EAAW,EAAK;AAAA,IAClB,SAASE,GAAU;AACjB,MAAAJ,EAASK,EAAUD,CAAG,CAAC,GACvBF,EAAW,EAAK;AAAA,IAClB;AAAA,EACF;AAEA,SAAKN,sBAaF,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAY,EAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,gBAAgB,gBAC7C,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAK,UAAAjB,EAAA,CAAO;AAAA,MACb,gBAAAiB,EAAC,SACC,UAAA,gBAAAA,EAACC,GAAA,EAAO,UAAUT,GAAS,SAASK,GAAc,UAAA,KAAA,CAElD,EAAA,CACF;AAAA,MACA,gBAAAG,EAAC,SACC,UAAA,gBAAAA,EAACC,GAAA,EAAO,UAAUT,GAAS,SAASM,GAAkB,UAAA,SAAA,CAEtD,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IACCR,uBAAU,OAAA,EAAI,OAAO,EAAE,OAAO,SAAU,UAAAA,EAAM,MAAA,CAAM;AAAA,EAAA,GACvD,IA1BE,gBAAAS,EAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,gBAAgB,gBAC7C,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAK,UAAAlB,GAAS;AAAA,IACf,gBAAAkB,EAAC,SACC,UAAA,gBAAAA,EAACE,GAAA,EAAQ,SAAQ,iCAAgC,cAAa,SAC5D,UAAA,gBAAAF,EAACC,GAAA,EAAO,MAAK,SAAQ,wBAAOE,GAAA,EAAK,MAAK,QAAO,GAAI,SAAST,EAAA,CAAY,EAAA,CACxE,EAAA,CACF;AAAA,EAAA,GACF;AAqBN;"}

package/dist/lib/listview/ListView.js

@@ -1,41 +1,41 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { makeStyles as h, tokens as d, Input as b, Caption1 as u, List as v, ListItem as C, Card as L, CardHeader as w, Text as y } from "@fluentui/react-components";
-import { SearchRegular as I, ChevronRightFilled as S } from "@fluentui/react-icons";
-import { isFunction as R } from "lodash-es";
-import { useI18n as N } from "../i18n/i18n.react.js";
-const k = h({
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { makeStyles as h, tokens as d, Input as v, Caption1 as m, List as I, ListItem as L, Card as w, CardHeader as y, Text as C } from "@fluentui/react-components";
+import { isFunction as S } from "lodash-es";
+import { useI18n as _ } from "../i18n/i18n.react.js";
+import { Icon as u } from "@seij/common-ui-icons";
+const N = h({
   noresult: {
     textAlign: "center",
     padding: "1em"
   }
 });
-function z({
+function W({
   data: i,
   activeId: s,
   searchText: o = "",
-  search: n,
+  search: t,
   pathFactory: r,
-  navigate: t
+  navigate: n
 }) {
-  const m = k(), { t: c } = N(), p = (l) => {
-    n && n(l);
-  }, g = R(n), a = c("ListView_search"), f = c("ListView_no_result");
-  return /* @__PURE__ */ x("div", { children: [
+  const p = N(), { t: c } = _(), f = (l) => {
+    t && t(l);
+  }, g = S(t), a = c("ListView_search"), x = c("ListView_no_result");
+  return /* @__PURE__ */ b("div", { children: [
     g && /* @__PURE__ */ e(
-      b,
+      v,
       {
         style: { width: "100%" },
-        contentBefore: /* @__PURE__ */ e(I, { "aria-label": a }),
+        contentBefore: /* @__PURE__ */ e(u, { name: "search", "aria-label": a }),
         value: o,
         placeholder: a,
-        onChange: (l) => p(l.target.value)
+        onChange: (l) => f(l.target.value)
       }
     ),
-    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(V, { activeId: s, items: i, pathFactory: r, navigate: t }) }),
-    i.length === 0 ? /* @__PURE__ */ e("div", { className: m.noresult, children: /* @__PURE__ */ e(u, { children: f }) }) : null
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(M, { activeId: s, items: i, pathFactory: r, navigate: n }) }),
+    i.length === 0 ? /* @__PURE__ */ e("div", { className: p.noresult, children: /* @__PURE__ */ e(m, { children: x }) }) : null
   ] });
 }
-const M = h({
+const k = h({
   root: {
     display: "flex"
   },
@@ -57,44 +57,44 @@ const M = h({
     borderRadius: d.borderRadiusNone
   }
 });
-function V({
+function M({
   items: i,
   activeId: s,
   pathFactory: o,
-  navigate: n
+  navigate: t
 }) {
-  const r = M();
-  return i.length === 0 ? null : /* @__PURE__ */ e(v, { navigationMode: "composite", children: i.map((t) => /* @__PURE__ */ e(
-    C,
+  const r = k();
+  return i.length === 0 ? null : /* @__PURE__ */ e(I, { navigationMode: "composite", children: i.map((n) => /* @__PURE__ */ e(
+    L,
     {
       onAction: () => {
-        n(o(t));
+        t(o(n));
       },
       children: /* @__PURE__ */ e(
-        L,
+        w,
         {
           role: "gridcell",
           orientation: "horizontal",
           appearance: "subtle",
           className: r.card,
           onClick: () => {
-            n(o(t));
+            t(o(n));
           },
           children: /* @__PURE__ */ e(
-            w,
+            y,
             {
-              header: /* @__PURE__ */ e(y, { weight: "regular", children: t.label ?? /* @__PURE__ */ e("span", { children: " " }) }),
-              description: /* @__PURE__ */ e(u, { children: t.description ?? /* @__PURE__ */ e("span", { children: " " }) }),
-              action: /* @__PURE__ */ e(S, {})
+              header: /* @__PURE__ */ e(C, { weight: "regular", children: n.label ?? /* @__PURE__ */ e("span", { children: " " }) }),
+              description: /* @__PURE__ */ e(m, { children: n.description ?? /* @__PURE__ */ e("span", { children: " " }) }),
+              action: /* @__PURE__ */ e(u, { name: "chevron_right_filled" })
             }
           )
         }
       )
     },
-    t.id
+    n.id
   )) });
 }
 export {
-  z as ListView
+  W as ListView
 };
 //# sourceMappingURL=ListView.js.map

package/dist/lib/listview/ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sources":["../../../src/lib/listview/ListView.tsx"],"sourcesContent":["import {\n  Caption1,\n  Card,\n  CardHeader,\n  Input,\n  List,\n  ListItem,\n  makeStyles,\n  Text,\n  tokens,\n} from \"@fluentui/react-components\";\nimport { ChevronRightFilled, SearchRegular } from \"@fluentui/react-icons\";\nimport { isFunction } from \"lodash-es\";\nimport { ReactNode } from \"react\";\nimport { useI18n } from \"../i18n/i18n.react\";\n\nexport interface ListItemData {\n  id: string;\n  label: ReactNode;\n  description: ReactNode | null;\n}\n\nconst useStyles = makeStyles({\n  noresult: {\n    textAlign: \"center\",\n    padding: \"1em\",\n  },\n});\nexport interface ListViewProps<T extends ListItemData = ListItemData> {\n  data: T[];\n  activeId: string;\n  searchText?: string;\n  search?: (input: string) => void;\n  pathFactory: (item: T) => string;\n  navigate: (url: string) => void;\n}\nexport function ListView<T extends ListItemData>({\n  data,\n  activeId,\n  searchText = \"\",\n  search,\n  pathFactory,\n  navigate,\n}: ListViewProps<T>) {\n  const styles = useStyles();\n  const { t } = useI18n();\n  const handleChange = (value: string) => {\n    if (search) search(value);\n  };\n  const isSearchEnabled = isFunction(search);\n  const searchMessage = t(\"ListView_search\");\n  const noResultMessage = t(\"ListView_no_result\");\n  return (\n    <div>\n      {isSearchEnabled && (\n        <Input\n          style={{ width: \"100%\" }}\n          contentBefore={<SearchRegular aria-label={searchMessage} />}\n          value={searchText}\n          placeholder={searchMessage}\n          onChange={(e) => handleChange(e.target.value)}\n        />\n      )}\n      <div>\n        <ItemList activeId={activeId} items={data} pathFactory={pathFactory} navigate={navigate} />\n      </div>\n      {data.length === 0 ? (\n        <div className={styles.noresult}>\n          <Caption1>{noResultMessage}</Caption1>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nconst useItemListStyles = makeStyles({\n  root: {\n    display: \"flex\",\n  },\n  content: {\n    flex: 1,\n  },\n  title: {\n    fontWeight: \"bold\",\n  },\n  description: {\n    fontWeight: \"normal\",\n  },\n  action: {\n    flex: 0,\n  },\n\n  card: {\n    width: \"100%\",\n    borderBottom: \"1px solid \" + tokens.colorNeutralStencil1,\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\nfunction ItemList<T extends ListItemData>({\n  items,\n  activeId,\n  pathFactory,\n  navigate,\n}: {\n  items: T[];\n  activeId: string;\n  pathFactory: (item: T) => string;\n  navigate: (url: string) => void;\n}) {\n  const style = useItemListStyles();\n  if (items.length === 0) return null;\n  return (\n    <List navigationMode=\"composite\">\n      {items.map((it) => (\n        <ListItem\n          key={it.id}\n          onAction={() => {\n            navigate(pathFactory(it));\n          }}\n        >\n          <Card\n            role=\"gridcell\"\n            orientation=\"horizontal\"\n            appearance=\"subtle\"\n            className={style.card}\n            onClick={() => {\n              navigate(pathFactory(it));\n            }}\n          >\n            <CardHeader\n              header={<Text weight=\"regular\">{it.label ?? <span>&nbsp;</span>}</Text>}\n              description={<Caption1>{it.description ?? <span>&nbsp;</span>}</Caption1>}\n              action={<ChevronRightFilled />}\n            />\n          </Card>\n        </ListItem>\n      ))}\n    </List>\n  );\n}\n"],"names":["useStyles","makeStyles","ListView","data","activeId","searchText","search","pathFactory","navigate","styles","t","useI18n","handleChange","value","isSearchEnabled","isFunction","searchMessage","noResultMessage","jsx","Input","SearchRegular","e","ItemList","Caption1","useItemListStyles","tokens","items","style","List","it","ListItem","Card","CardHeader","Text","ChevronRightFilled"],"mappings":"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"}
+{"version":3,"file":"ListView.js","sources":["../../../src/lib/listview/ListView.tsx"],"sourcesContent":["import {\n  Caption1,\n  Card,\n  CardHeader,\n  Input,\n  List,\n  ListItem,\n  makeStyles,\n  Text,\n  tokens,\n} from \"@fluentui/react-components\";\n\nimport { isFunction } from \"lodash-es\";\nimport { ReactNode } from \"react\";\nimport { useI18n } from \"../i18n/i18n.react\";\nimport { Icon } from \"@seij/common-ui-icons\";\nexport interface ListItemData {\n  id: string;\n  label: ReactNode;\n  description: ReactNode | null;\n}\n\nconst useStyles = makeStyles({\n  noresult: {\n    textAlign: \"center\",\n    padding: \"1em\",\n  },\n});\nexport interface ListViewProps<T extends ListItemData = ListItemData> {\n  data: T[];\n  activeId: string;\n  searchText?: string;\n  search?: (input: string) => void;\n  pathFactory: (item: T) => string;\n  navigate: (url: string) => void;\n}\nexport function ListView<T extends ListItemData>({\n  data,\n  activeId,\n  searchText = \"\",\n  search,\n  pathFactory,\n  navigate,\n}: ListViewProps<T>) {\n  const styles = useStyles();\n  const { t } = useI18n();\n  const handleChange = (value: string) => {\n    if (search) search(value);\n  };\n  const isSearchEnabled = isFunction(search);\n  const searchMessage = t(\"ListView_search\");\n  const noResultMessage = t(\"ListView_no_result\");\n  return (\n    <div>\n      {isSearchEnabled && (\n        <Input\n          style={{ width: \"100%\" }}\n          contentBefore={<Icon name=\"search\" aria-label={searchMessage} />}\n          value={searchText}\n          placeholder={searchMessage}\n          onChange={(e) => handleChange(e.target.value)}\n        />\n      )}\n      <div>\n        <ItemList activeId={activeId} items={data} pathFactory={pathFactory} navigate={navigate} />\n      </div>\n      {data.length === 0 ? (\n        <div className={styles.noresult}>\n          <Caption1>{noResultMessage}</Caption1>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nconst useItemListStyles = makeStyles({\n  root: {\n    display: \"flex\",\n  },\n  content: {\n    flex: 1,\n  },\n  title: {\n    fontWeight: \"bold\",\n  },\n  description: {\n    fontWeight: \"normal\",\n  },\n  action: {\n    flex: 0,\n  },\n\n  card: {\n    width: \"100%\",\n    borderBottom: \"1px solid \" + tokens.colorNeutralStencil1,\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\nfunction ItemList<T extends ListItemData>({\n  items,\n  activeId,\n  pathFactory,\n  navigate,\n}: {\n  items: T[];\n  activeId: string;\n  pathFactory: (item: T) => string;\n  navigate: (url: string) => void;\n}) {\n  const style = useItemListStyles();\n  if (items.length === 0) return null;\n  return (\n    <List navigationMode=\"composite\">\n      {items.map((it) => (\n        <ListItem\n          key={it.id}\n          onAction={() => {\n            navigate(pathFactory(it));\n          }}\n        >\n          <Card\n            role=\"gridcell\"\n            orientation=\"horizontal\"\n            appearance=\"subtle\"\n            className={style.card}\n            onClick={() => {\n              navigate(pathFactory(it));\n            }}\n          >\n            <CardHeader\n              header={<Text weight=\"regular\">{it.label ?? <span>&nbsp;</span>}</Text>}\n              description={<Caption1>{it.description ?? <span>&nbsp;</span>}</Caption1>}\n              action={<Icon name=\"chevron_right_filled\" />}\n            />\n          </Card>\n        </ListItem>\n      ))}\n    </List>\n  );\n}\n"],"names":["useStyles","makeStyles","ListView","data","activeId","searchText","search","pathFactory","navigate","styles","t","useI18n","handleChange","value","isSearchEnabled","isFunction","searchMessage","noResultMessage","jsx","Input","Icon","e","ItemList","Caption1","useItemListStyles","tokens","items","style","List","it","ListItem","Card","CardHeader","Text"],"mappings":"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"}

package/dist/lib/navigation/Navigation.d.ts

@@ -1,6 +1,10 @@
 import { NavigationTreeItem } from './Navigation.types';
 /**
- * Affiche un menu de navigation
+ * Displays a navigation menu.
+ *
+ * Current implementation is limited to 2 hierarchical levels (direct items or group/items).
+ *
+ * This will be improved later.
  */
 export declare function Navigation({ items, }: {
     /** Liste des items du menu */

package/dist/lib/navigation/Navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/lib/navigation/Navigation.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAEL,kBAAkB,EAInB,MAAM,oBAAoB,CAAC;AAI5B;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,GACN,EAAE;IACD,8BAA8B;IAC9B,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B,2CAYA"}
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/lib/navigation/Navigation.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,kBAAkB,EAInB,MAAM,oBAAoB,CAAC;AAK5B;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,GACN,EAAE;IACD,8BAA8B;IAC9B,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B,2CAYA"}

package/dist/lib/navigation/Navigation.js

@@ -1,38 +1,36 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
-import { NavDivider as p, NavItem as v, Text as I, NavCategory as f, NavCategoryItem as C, NavSubItemGroup as B, NavSubItem as b } from "@fluentui/react-components";
-import { bundleIcon as o, Board20Filled as S, Board20Regular as h, People20Filled as x, People20Regular as y, BookContactsFilled as N, BookContactsRegular as F, CalendarEmptyFilled as R, CalendarEmptyRegular as T, SignOutFilled as k, SignOutRegular as P, PersonStarburstFilled as D, PersonStarburstRegular as E, BuildingBankFilled as O, BuildingBankRegular as j } from "@fluentui/react-icons";
-import { createContext as G, useMemo as L, useContext as c } from "react";
-import { createNavigationTreeItemServiceImpl as s } from "./NavigationService.js";
-const u = G(s([]));
-function _({
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { NavDivider as v, NavItem as d, NavCategory as l, NavCategoryItem as s, NavSubItemGroup as f, NavSubItem as I } from "@fluentui/react-components";
+import { createContext as g, useMemo as N, useContext as a } from "react";
+import { createNavigationTreeItemServiceImpl as c } from "./NavigationService.js";
+import { Icon as m } from "@seij/common-ui-icons";
+const o = g(c([]));
+function D({
   items: e
 }) {
-  const r = L(() => s(e), [e]), t = r.findTopLevelItems();
-  return /* @__PURE__ */ n(u.Provider, { value: r, children: t.map((i) => /* @__PURE__ */ n(M, { id: i.id }, i.id)) });
+  const i = N(() => c(e), [e]), n = i.findTopLevelItems();
+  return /* @__PURE__ */ t(o.Provider, { value: i, children: n.map((r) => /* @__PURE__ */ t(C, { id: r.id }, r.id)) });
 }
-function M({ id: e }) {
-  const t = c(u).findById(e);
-  return t.type === "divider" ? /* @__PURE__ */ n(U, { item: t }) : t.type === "page" ? /* @__PURE__ */ n(w, { item: t }) : t.type === "group" ? /* @__PURE__ */ n(q, { item: t }) : null;
+function C({ id: e }) {
+  const n = a(o).findById(e);
+  return n.type === "divider" ? /* @__PURE__ */ t(x, { item: n }) : n.type === "page" ? /* @__PURE__ */ t(h, { item: n }) : n.type === "group" ? /* @__PURE__ */ t(y, { item: n }) : null;
 }
-function U({ item: e }) {
-  return /* @__PURE__ */ n(p, {});
+function x({ item: e }) {
+  return /* @__PURE__ */ t(v, {});
 }
-function q({ item: e }) {
-  const r = c(u), t = d({ iconName: e.icon }), i = r.findChildren(e.id);
-  return /* @__PURE__ */ m(f, { value: e.id, children: [
-    /* @__PURE__ */ n(C, { icon: /* @__PURE__ */ n(t, {}), children: e.label }),
-    /* @__PURE__ */ n(B, { children: i.map((a) => {
-      const g = a;
-      return /* @__PURE__ */ n(b, { value: a.id, children: g.label }, a.id);
+function y({ item: e }) {
+  const n = a(o).findChildren(e.id);
+  return /* @__PURE__ */ p(l, { value: e.id, children: [
+    /* @__PURE__ */ t(s, { icon: /* @__PURE__ */ t(m, { name: e.icon ?? "empty", size: 20 }), children: e.label }),
+    /* @__PURE__ */ t(f, { children: n.map((r) => {
+      const u = r;
+      return /* @__PURE__ */ t(I, { value: r.id, children: u.label }, r.id);
     }) })
   ] });
 }
-function w({ item: e }) {
-  const r = d({ iconName: e.icon });
-  return /* @__PURE__ */ n(v, { value: e.id, icon: /* @__PURE__ */ n(r, {}), children: /* @__PURE__ */ n(I, { children: e.label }) });
+function h({ item: e }) {
+  return /* @__PURE__ */ t(d, { value: e.id, icon: /* @__PURE__ */ t(m, { name: e.icon ?? "empty", size: 20 }), children: e.label });
 }
-const z = o(S, h), A = o(x, y), H = o(N, F), l = o(R, T), J = o(k, P), K = o(D, E), Q = o(O, j), d = ({ iconName: e }) => e ? e === "dashboard" ? z : e === "users" ? A : e === "customers" ? H : e === "signout" ? J : e === "signin" ? K : e === "buildingBank" ? Q : l : l;
 export {
-  _ as Navigation
+  D as Navigation
 };
 //# sourceMappingURL=Navigation.js.map

package/dist/lib/navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../src/lib/navigation/Navigation.tsx"],"sourcesContent":["import {\n  NavCategory,\n  NavCategoryItem,\n  NavDivider,\n  NavItem,\n  NavSubItem,\n  NavSubItemGroup,\n  Text,\n} from \"@fluentui/react-components\";\nimport {\n  Board20Filled,\n  Board20Regular,\n  BookContactsFilled,\n  BookContactsRegular,\n  BuildingBankFilled,\n  BuildingBankRegular,\n  bundleIcon,\n  CalendarEmptyFilled,\n  CalendarEmptyRegular,\n  FluentIcon,\n  People20Filled,\n  People20Regular,\n  PersonStarburstFilled,\n  PersonStarburstRegular,\n  SignOutFilled,\n  SignOutRegular,\n} from \"@fluentui/react-icons\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport {\n  NavigationTreeIconName,\n  NavigationTreeItem,\n  NavigationTreeItemDivider,\n  NavigationTreeItemGroup,\n  NavigationTreeItemPage,\n} from \"./Navigation.types\";\nimport { createNavigationTreeItemServiceImpl, NavigationTreeItemService } from \"./NavigationService\";\n\nconst itemsService = createContext<NavigationTreeItemService>(createNavigationTreeItemServiceImpl([]));\n/**\n * Affiche un menu de navigation\n */\nexport function Navigation({\n  items,\n}: {\n  /** Liste des items du menu */\n  items: NavigationTreeItem[];\n}) {\n  const service = useMemo(() => createNavigationTreeItemServiceImpl(items), [items]);\n\n  const topLevelItems = service.findTopLevelItems();\n\n  return (\n    <itemsService.Provider value={service}>\n      {topLevelItems.map((it) => (\n        <NavigationTreeItemComponent key={it.id} id={it.id} />\n      ))}\n    </itemsService.Provider>\n  );\n}\n\nfunction NavigationTreeItemComponent({ id }: { id: string }) {\n  const ctx = useContext(itemsService);\n  const item = ctx.findById(id);\n\n  if (item.type === \"divider\") return <NavigationTreeItemDividerComponent item={item as NavigationTreeItemDivider} />;\n  if (item.type === \"page\") return <NavigationTreeItemPageComponent item={item as NavigationTreeItemPage} />;\n  if (item.type === \"group\") return <NavigationTreeItemGroupComponent item={item as NavigationTreeItemGroup} />;\n  return null;\n}\n\nfunction NavigationTreeItemDividerComponent({ item }: { item: NavigationTreeItemDivider }) {\n  return <NavDivider />;\n}\nfunction NavigationTreeItemGroupComponent({ item }: { item: NavigationTreeItemGroup }) {\n  const ctx = useContext(itemsService);\n  const Icon = NavigationIcon({ iconName: item.icon });\n  const itemChildren = ctx.findChildren(item.id);\n  return (\n    <NavCategory value={item.id}>\n      <NavCategoryItem icon={<Icon />}>{item.label}</NavCategoryItem>\n      <NavSubItemGroup>\n        {itemChildren.map((child) => {\n          const page = child as NavigationTreeItemPage;\n          return (\n            <NavSubItem key={child.id} value={child.id}>\n              {page.label}\n            </NavSubItem>\n          );\n        })}\n      </NavSubItemGroup>\n    </NavCategory>\n  );\n}\nfunction NavigationTreeItemPageComponent({ item }: { item: NavigationTreeItemPage }) {\n  const Icon = NavigationIcon({ iconName: item.icon });\n  return (\n    <NavItem value={item.id} icon={<Icon />}>\n      <Text>{item.label}</Text>\n    </NavItem>\n  );\n}\n\n// -----------------------------------------------------------------------------\n// Gestion des icones\n// -----------------------------------------------------------------------------\n\nconst DashboardIcon = bundleIcon(Board20Filled, Board20Regular);\nconst UsersIcon = bundleIcon(People20Filled, People20Regular);\nconst CustomersIcon = bundleIcon(BookContactsFilled, BookContactsRegular);\nconst EmptyIcon = bundleIcon(CalendarEmptyFilled, CalendarEmptyRegular);\nconst SignOutIcon = bundleIcon(SignOutFilled, SignOutRegular);\nconst SignInIcon = bundleIcon(PersonStarburstFilled, PersonStarburstRegular);\nconst BuildingBankIcon = bundleIcon(BuildingBankFilled, BuildingBankRegular);\nconst NavigationIcon = ({ iconName }: { iconName?: NavigationTreeIconName | null | undefined }): FluentIcon => {\n  if (!iconName) return EmptyIcon;\n  if (iconName === \"dashboard\") return DashboardIcon;\n  if (iconName === \"users\") return UsersIcon;\n  if (iconName === \"customers\") return CustomersIcon;\n  if (iconName === \"signout\") return SignOutIcon;\n  if (iconName === \"signin\") return SignInIcon;\n  if (iconName === \"buildingBank\") return BuildingBankIcon;\n  return EmptyIcon;\n};\n"],"names":["itemsService","createContext","createNavigationTreeItemServiceImpl","Navigation","items","service","useMemo","topLevelItems","it","jsx","NavigationTreeItemComponent","id","item","useContext","NavigationTreeItemDividerComponent","NavigationTreeItemPageComponent","NavigationTreeItemGroupComponent","NavDivider","ctx","Icon","NavigationIcon","itemChildren","jsxs","NavCategory","NavCategoryItem","NavSubItemGroup","child","page","NavSubItem","NavItem","Text","DashboardIcon","bundleIcon","Board20Filled","Board20Regular","UsersIcon","People20Filled","People20Regular","CustomersIcon","BookContactsFilled","BookContactsRegular","EmptyIcon","CalendarEmptyFilled","CalendarEmptyRegular","SignOutIcon","SignOutFilled","SignOutRegular","SignInIcon","PersonStarburstFilled","PersonStarburstRegular","BuildingBankIcon","BuildingBankFilled","BuildingBankRegular","iconName"],"mappings":";;;;;AAqCA,MAAMA,IAAeC,EAAyCC,EAAoC,CAAA,CAAE,CAAC;AAI9F,SAASC,EAAW;AAAA,EACzB,OAAAC;AACF,GAGG;AACD,QAAMC,IAAUC,EAAQ,MAAMJ,EAAoCE,CAAK,GAAG,CAACA,CAAK,CAAC,GAE3EG,IAAgBF,EAAQ,kBAAA;AAE9B,2BACGL,EAAa,UAAb,EAAsB,OAAOK,GAC3B,YAAc,IAAI,CAACG,MAClB,gBAAAC,EAACC,KAAwC,IAAIF,EAAG,MAAdA,EAAG,EAAe,CACrD,GACH;AAEJ;AAEA,SAASE,EAA4B,EAAE,IAAAC,KAAsB;AAE3D,QAAMC,IADMC,EAAWb,CAAY,EAClB,SAASW,CAAE;AAE5B,SAAIC,EAAK,SAAS,YAAkB,gBAAAH,EAACK,KAAmC,MAAAF,GAAyC,IAC7GA,EAAK,SAAS,SAAe,gBAAAH,EAACM,KAAgC,MAAAH,GAAsC,IACpGA,EAAK,SAAS,UAAgB,gBAAAH,EAACO,KAAiC,MAAAJ,GAAuC,IACpG;AACT;AAEA,SAASE,EAAmC,EAAE,MAAAF,KAA6C;AACzF,2BAAQK,GAAA,EAAW;AACrB;AACA,SAASD,EAAiC,EAAE,MAAAJ,KAA2C;AACrF,QAAMM,IAAML,EAAWb,CAAY,GAC7BmB,IAAOC,EAAe,EAAE,UAAUR,EAAK,MAAM,GAC7CS,IAAeH,EAAI,aAAaN,EAAK,EAAE;AAC7C,SACE,gBAAAU,EAACC,GAAA,EAAY,OAAOX,EAAK,IACvB,UAAA;AAAA,IAAA,gBAAAH,EAACe,KAAgB,MAAM,gBAAAf,EAACU,GAAA,CAAA,CAAK,GAAK,YAAK,OAAM;AAAA,IAC7C,gBAAAV,EAACgB,GAAA,EACE,UAAAJ,EAAa,IAAI,CAACK,MAAU;AAC3B,YAAMC,IAAOD;AACb,aACE,gBAAAjB,EAACmB,KAA0B,OAAOF,EAAM,IACrC,UAAAC,EAAK,SADSD,EAAM,EAEvB;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AACA,SAASX,EAAgC,EAAE,MAAAH,KAA0C;AACnF,QAAMO,IAAOC,EAAe,EAAE,UAAUR,EAAK,MAAM;AACnD,SACE,gBAAAH,EAACoB,GAAA,EAAQ,OAAOjB,EAAK,IAAI,MAAM,gBAAAH,EAACU,GAAA,CAAA,CAAK,GACnC,UAAA,gBAAAV,EAACqB,GAAA,EAAM,UAAAlB,EAAK,OAAM,GACpB;AAEJ;AAMA,MAAMmB,IAAgBC,EAAWC,GAAeC,CAAc,GACxDC,IAAYH,EAAWI,GAAgBC,CAAe,GACtDC,IAAgBN,EAAWO,GAAoBC,CAAmB,GAClEC,IAAYT,EAAWU,GAAqBC,CAAoB,GAChEC,IAAcZ,EAAWa,GAAeC,CAAc,GACtDC,IAAaf,EAAWgB,GAAuBC,CAAsB,GACrEC,IAAmBlB,EAAWmB,GAAoBC,CAAmB,GACrEhC,IAAiB,CAAC,EAAE,UAAAiC,QACnBA,IACDA,MAAa,cAAoBtB,IACjCsB,MAAa,UAAgBlB,IAC7BkB,MAAa,cAAoBf,IACjCe,MAAa,YAAkBT,IAC/BS,MAAa,WAAiBN,IAC9BM,MAAa,iBAAuBH,IACjCT,IAPeA;"}
+{"version":3,"file":"Navigation.js","sources":["../../../src/lib/navigation/Navigation.tsx"],"sourcesContent":["import {\n  NavCategory,\n  NavCategoryItem,\n  NavDivider,\n  NavItem,\n  NavSubItem,\n  NavSubItemGroup,\n} from \"@fluentui/react-components\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport {\n  NavigationTreeItem,\n  NavigationTreeItemDivider,\n  NavigationTreeItemGroup,\n  NavigationTreeItemPage,\n} from \"./Navigation.types\";\nimport { createNavigationTreeItemServiceImpl, NavigationTreeItemService } from \"./NavigationService\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nconst itemsService = createContext<NavigationTreeItemService>(createNavigationTreeItemServiceImpl([]));\n/**\n * Displays a navigation menu.\n *\n * Current implementation is limited to 2 hierarchical levels (direct items or group/items).\n *\n * This will be improved later.\n */\nexport function Navigation({\n  items,\n}: {\n  /** Liste des items du menu */\n  items: NavigationTreeItem[];\n}) {\n  const service = useMemo(() => createNavigationTreeItemServiceImpl(items), [items]);\n\n  const topLevelItems = service.findTopLevelItems();\n\n  return (\n    <itemsService.Provider value={service}>\n      {topLevelItems.map((it) => (\n        <NavigationTreeItemComponent key={it.id} id={it.id} />\n      ))}\n    </itemsService.Provider>\n  );\n}\n\nfunction NavigationTreeItemComponent({ id }: { id: string }) {\n  const ctx = useContext(itemsService);\n  const item = ctx.findById(id);\n\n  if (item.type === \"divider\") return <NavigationTreeItemDividerComponent item={item as NavigationTreeItemDivider} />;\n  if (item.type === \"page\") return <NavigationTreeItemPageComponent item={item as NavigationTreeItemPage} />;\n  if (item.type === \"group\") return <NavigationTreeItemGroupComponent item={item as NavigationTreeItemGroup} />;\n  return null;\n}\n\nfunction NavigationTreeItemDividerComponent({ item }: { item: NavigationTreeItemDivider }) {\n  return <NavDivider />;\n}\nfunction NavigationTreeItemGroupComponent({ item }: { item: NavigationTreeItemGroup }) {\n  const ctx = useContext(itemsService);\n  const itemChildren = ctx.findChildren(item.id);\n  return (\n    <NavCategory value={item.id}>\n      <NavCategoryItem icon={<Icon name={item.icon ?? \"empty\"} size={20} />}>{item.label}</NavCategoryItem>\n      <NavSubItemGroup>\n        {itemChildren.map((child) => {\n          const page = child as NavigationTreeItemPage;\n          return (\n            <NavSubItem key={child.id} value={child.id}>\n              {page.label}\n            </NavSubItem>\n          );\n        })}\n      </NavSubItemGroup>\n    </NavCategory>\n  );\n}\nfunction NavigationTreeItemPageComponent({ item }: { item: NavigationTreeItemPage }) {\n  return (\n    <NavItem value={item.id} icon={<Icon name={item.icon ?? \"empty\"} size={20} />}>\n      {item.label}\n    </NavItem>\n  );\n}\n"],"names":["itemsService","createContext","createNavigationTreeItemServiceImpl","Navigation","items","service","useMemo","topLevelItems","it","jsx","NavigationTreeItemComponent","id","item","useContext","NavigationTreeItemDividerComponent","NavigationTreeItemPageComponent","NavigationTreeItemGroupComponent","NavDivider","itemChildren","jsxs","NavCategory","NavCategoryItem","Icon","NavSubItemGroup","child","page","NavSubItem","NavItem"],"mappings":";;;;;AAmBA,MAAMA,IAAeC,EAAyCC,EAAoC,CAAA,CAAE,CAAC;AAQ9F,SAASC,EAAW;AAAA,EACzB,OAAAC;AACF,GAGG;AACD,QAAMC,IAAUC,EAAQ,MAAMJ,EAAoCE,CAAK,GAAG,CAACA,CAAK,CAAC,GAE3EG,IAAgBF,EAAQ,kBAAA;AAE9B,2BACGL,EAAa,UAAb,EAAsB,OAAOK,GAC3B,YAAc,IAAI,CAACG,MAClB,gBAAAC,EAACC,KAAwC,IAAIF,EAAG,MAAdA,EAAG,EAAe,CACrD,GACH;AAEJ;AAEA,SAASE,EAA4B,EAAE,IAAAC,KAAsB;AAE3D,QAAMC,IADMC,EAAWb,CAAY,EAClB,SAASW,CAAE;AAE5B,SAAIC,EAAK,SAAS,YAAkB,gBAAAH,EAACK,KAAmC,MAAAF,GAAyC,IAC7GA,EAAK,SAAS,SAAe,gBAAAH,EAACM,KAAgC,MAAAH,GAAsC,IACpGA,EAAK,SAAS,UAAgB,gBAAAH,EAACO,KAAiC,MAAAJ,GAAuC,IACpG;AACT;AAEA,SAASE,EAAmC,EAAE,MAAAF,KAA6C;AACzF,2BAAQK,GAAA,EAAW;AACrB;AACA,SAASD,EAAiC,EAAE,MAAAJ,KAA2C;AAErF,QAAMM,IADML,EAAWb,CAAY,EACV,aAAaY,EAAK,EAAE;AAC7C,SACE,gBAAAO,EAACC,GAAA,EAAY,OAAOR,EAAK,IACvB,UAAA;AAAA,IAAA,gBAAAH,EAACY,GAAA,EAAgB,MAAM,gBAAAZ,EAACa,GAAA,EAAK,MAAMV,EAAK,QAAQ,SAAS,MAAM,GAAA,CAAI,GAAK,UAAAA,EAAK,OAAM;AAAA,IACnF,gBAAAH,EAACc,GAAA,EACE,UAAAL,EAAa,IAAI,CAACM,MAAU;AAC3B,YAAMC,IAAOD;AACb,aACE,gBAAAf,EAACiB,KAA0B,OAAOF,EAAM,IACrC,UAAAC,EAAK,SADSD,EAAM,EAEvB;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AACA,SAAST,EAAgC,EAAE,MAAAH,KAA0C;AACnF,2BACGe,GAAA,EAAQ,OAAOf,EAAK,IAAI,MAAM,gBAAAH,EAACa,GAAA,EAAK,MAAMV,EAAK,QAAQ,SAAS,MAAM,GAAA,CAAI,GACxE,YAAK,OACR;AAEJ;"}

package/dist/lib/navigation/Navigation.types.d.ts

@@ -1,48 +1,90 @@
+import { IconName } from '@seij/common-ui-icons';
 /**
- * Liste des toutes les icones supportées par le menu de navigation
+ * All icon names supported by the Navigation menu.
+ *
+ * These are semantic identifiers consumed by the UI layer to render a visual
+ * icon next to a navigation entry. Keep this list in sync with the icon set
+ * actually available in the navigation component.
  */
-export type NavigationTreeIconName = "buildingBank" | "dashboard" | "customers" | "users" | "features" | "permissions" | "signin" | "signout";
+export type NavigationTreeIconName = IconName;
 /**
- * Type d'élément de navigation
+ * Kind of a navigation item.
+ *
+ * - "group": non-clickable category that can contain items
+ * - "page": clickable leaf that may navigate to `path`
+ * - "divider": visual separator between items in the same level
  */
 export type NavigationTreeItemType = "group" | "page" | "divider";
 /**
- * Règles d'affichage
+ * Visibility rule for an item depending on authentication status.
+ *
+ * - "loggedout": show only when the user is NOT authenticated
+ * - "loggedin": show only when the user IS authenticated
  */
 export type NavigationTreeItemRule = "loggedout" | "loggedin";
 /**
- * Element de menu, c'est ce que l'on doit renseigner pour
- * afficher un menu. Il faut les fournir dans une liste.
+ * A navigation tree item definition. Provide a flat list of items — the
+ * component will use `parentId` (for pages) to reconstruct the hierarchy.
+ *
+ * The goal is to be able to get navigation items as serializable DTO from backends and plugins.
+ *
+ * Notes
+ * - Use `NavigationTreeItemGroup` to create non-clickable categories.
+ * - Use `NavigationTreeItemPage` for actual leaf entries that may have a `path`.
+ * - Use `NavigationTreeItemDivider` to insert visual separators within a group.
  */
 export type NavigationTreeItem = NavigationTreeItemPage | NavigationTreeItemGroup | NavigationTreeItemDivider;
 export interface NavigationTreeItemBase {
-    /** Identifiant unique de l'entrée de menu */
+    /** Unique identifier of the navigation entry. Stable across renders. */
     id: string;
-    /** Type */
+    /** Item kind: group, page, or divider. */
     type: NavigationTreeItemType;
-    /** Règles d'affichage */
+    /**
+     * Optional visibility rule based on authentication status.
+     *
+     * The rule is used by security layers when they are availble, it means that, using just "common-ui"
+     * it doesn't do anything, but "@seij/common-auth" uses it to filter out items.
+     *
+     * Participates in the goal of having navigation items coming from a backend or plugins in serializable formats.
+     **/
     rule?: NavigationTreeItemRule;
 }
 export interface NavigationTreeItemPage extends NavigationTreeItemBase {
-    /** Libellé de l'entrée de menu */
+    /** Display label shown in the navigation. */
     label: string;
-    /** Description qui va juste en dessous, n'est pas obligatoire, n'est pas affiché à l'écran */
+    /**
+     * Optional description placed just under the label (not rendered in the UI by default).
+     * Can be used for help text or tooltips depending on the consumer.
+     */
     description?: string;
-    /** Item dans lequel le ranger ou null si c'est à la racine */
+    /**
+     * Parent group id, or null if the page is at the root level.
+     *
+     * Example: parentId = "admin" to place the page under the "Admin" group.
+     */
     parentId: string | null;
-    /** Item path for navigation. If provided, router will be called for this path */
+    /**
+     * Route path to navigate to when the item is selected. If omitted, the item is still
+     * selectable but no automatic navigation will occur; you may handle it manually.
+     */
     path?: string;
-    /** Si on veut mettre une icône */
+    /** Optional icon to render next to the label. */
     icon?: NavigationTreeIconName;
 }
 export interface NavigationTreeItemGroup extends NavigationTreeItemBase {
-    /** Libellé de l'entrée de menu */
+    /** Display label for the group header. */
     label: string;
-    /** Description qui va juste en dessous, n'est pas obligatoire, n'est pas affiché à l'écran */
+    /** Optional description (not rendered in the UI by default). */
     description?: string;
-    /** Si on veut mettre une icône */
+    /** Optional icon to render next to the group label. */
     icon?: NavigationTreeIconName;
 }
+/**
+ * Visual separator between items.
+ *
+ * Only the base fields are used: set `type: "divider"` and a unique `id`.
+ * Other base fields like `rule` may still control visibility.
+ */
 export interface NavigationTreeItemDivider extends NavigationTreeItemBase {
 }
 //# sourceMappingURL=Navigation.types.d.ts.map

package/dist/lib/navigation/Navigation.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.types.d.ts","sourceRoot":"","sources":["../../../src/lib/navigation/Navigation.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC9B,cAAc,GACd,WAAW,GACX,WAAW,GACX,OAAO,GACP,UAAU,GACV,aAAa,GACb,QAAQ,GACR,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAClE;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,UAAU,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,yBAAyB,CAAC;AAE9G,MAAM,WAAW,sBAAsB;IACrC,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,WAAW;IACX,IAAI,EAAE,sBAAsB,CAAC;IAC7B,yBAAyB;IACzB,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B;AACD,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B;AACD,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB;CAAG"}
+{"version":3,"file":"Navigation.types.d.ts","sourceRoot":"","sources":["../../../src/lib/navigation/Navigation.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAElE;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,UAAU,CAAC;AAE9D;;;;;;;;;;GAUG;AACH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,yBAAyB,CAAC;AAE9G,MAAM,WAAW,sBAAsB;IACrC,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,0CAA0C;IAC1C,IAAI,EAAE,sBAAsB,CAAC;IAC7B;;;;;;;QAOI;IACJ,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B;AACD,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B;AACD;;;;;GAKG;AACH,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB;CAAG"}

package/dist/lib/view_layout/ViewTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTitle.d.ts","sourceRoot":"","sources":["../../../src/lib/view_layout/ViewTitle.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC;CAC9C;AAmCD;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE;IACD,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,2CAuDA"}
+{"version":3,"file":"ViewTitle.d.ts","sourceRoot":"","sources":["../../../src/lib/view_layout/ViewTitle.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC;CAC9C;AAmCD;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE;IACD,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,2CAuDA"}

package/dist/lib/view_layout/ViewTitle.js

@@ -1,8 +1,8 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { makeStyles as h, Button as r, Title3 as y, Menu as x, MenuTrigger as b, MenuPopover as g, MenuList as C, MenuItem as I } from "@fluentui/react-components";
-import { ArrowLeftFilled as k, MoreVerticalFilled as A, AddSquareRegular as M, DeleteRegular as N } from "@fluentui/react-icons";
-import { isFunction as j } from "lodash-es";
-const v = h({
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { makeStyles as y, Button as c, Title3 as x, Menu as b, MenuTrigger as g, MenuPopover as k, MenuList as C, MenuItem as I } from "@fluentui/react-components";
+import { isFunction as A } from "lodash-es";
+import { Icon as s } from "@seij/common-ui-icons";
+const v = y({
   root: {
     display: "flex",
     align: "center",
@@ -34,37 +34,34 @@ const v = h({
     justifyContent: "flex-end"
   }
 });
-function w({
+function S({
   children: l,
   onBack: t,
   actions: i
 }) {
-  const s = v(), d = j(t), o = (i ?? []).filter((e) => e.type === "ADDITIONAL"), p = (i ?? []).filter((e) => e.type === "SECONDARY"), u = (i ?? []).filter((e) => e.type === "PRIMARY"), f = () => {
-    d && t && t();
-  }, a = async (e) => {
-    (i ?? []).find((m) => m.id === e)?.onClick();
+  const a = v(), o = A(t), m = (i ?? []).filter((e) => e.type === "ADDITIONAL"), p = (i ?? []).filter((e) => e.type === "SECONDARY"), f = (i ?? []).filter((e) => e.type === "PRIMARY"), u = () => {
+    o && t && t();
+  }, d = async (e) => {
+    (i ?? []).find((h) => h.id === e)?.onClick();
   };
-  return /* @__PURE__ */ c("div", { className: s.root, children: [
-    d && /* @__PURE__ */ n("div", { className: s.backButton, children: /* @__PURE__ */ n(r, { icon: /* @__PURE__ */ n(k, {}), appearance: "subtle", onClick: f }) }),
-    /* @__PURE__ */ n("div", { className: s.title, children: /* @__PURE__ */ n(y, { children: l }) }),
-    /* @__PURE__ */ c("div", { className: s.actions, children: [
-      p.length > 0 && p.map((e) => /* @__PURE__ */ n(r, { disabled: e.disabled, appearance: "secondary", onClick: () => a(e.id), children: e.label }, e.id)),
-      u.length > 0 && u.map((e) => /* @__PURE__ */ n(r, { disabled: e.disabled, appearance: "primary", onClick: () => a(e.id), children: e.label }, e.id))
+  return /* @__PURE__ */ r("div", { className: a.root, children: [
+    o && /* @__PURE__ */ n("div", { className: a.backButton, children: /* @__PURE__ */ n(c, { icon: /* @__PURE__ */ n(s, { name: "back" }), appearance: "subtle", onClick: u }) }),
+    /* @__PURE__ */ n("div", { className: a.title, children: /* @__PURE__ */ n(x, { children: l }) }),
+    /* @__PURE__ */ r("div", { className: a.actions, children: [
+      p.length > 0 && p.map((e) => /* @__PURE__ */ n(c, { disabled: e.disabled, appearance: "secondary", onClick: () => d(e.id), children: e.label }, e.id)),
+      f.length > 0 && f.map((e) => /* @__PURE__ */ n(c, { disabled: e.disabled, appearance: "primary", onClick: () => d(e.id), children: e.label }, e.id))
     ] }),
-    /* @__PURE__ */ n("div", { className: s.moreActions, children: o.length > 0 && /* @__PURE__ */ c(x, { positioning: { autoSize: !0 }, children: [
-      /* @__PURE__ */ n(b, { disableButtonEnhancement: !0, children: /* @__PURE__ */ n(r, { icon: /* @__PURE__ */ n(A, {}) }) }),
-      /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(C, { children: o.map((e) => /* @__PURE__ */ n(L, { action: e, onClick: a }, e.id)) }) })
+    /* @__PURE__ */ n("div", { className: a.moreActions, children: m.length > 0 && /* @__PURE__ */ r(b, { positioning: { autoSize: !0 }, children: [
+      /* @__PURE__ */ n(g, { disableButtonEnhancement: !0, children: /* @__PURE__ */ n(c, { icon: /* @__PURE__ */ n(s, { name: "more_menu_vertical" }) }) }),
+      /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(C, { children: m.map((e) => /* @__PURE__ */ n(M, { action: e, onClick: d }, e.id)) }) })
     ] }) })
   ] });
 }
-function B() {
-  return /* @__PURE__ */ n("span", {});
-}
-function L({ action: l, onClick: t }) {
+function M({ action: l, onClick: t }) {
   let i;
-  return l.icon === "plus" ? i = M : l.icon === "trash" ? i = N : i = B, /* @__PURE__ */ n(I, { disabled: l.disabled, onClick: () => t(l.id), icon: /* @__PURE__ */ n(i, {}), children: l.label });
+  return l.icon === "plus" ? i = /* @__PURE__ */ n(s, { name: "add" }) : l.icon === "trash" ? i = /* @__PURE__ */ n(s, { name: "delete" }) : i = /* @__PURE__ */ n(s, { name: "empty" }), /* @__PURE__ */ n(I, { disabled: l.disabled, onClick: () => t(l.id), icon: i, children: l.label });
 }
 export {
-  w as ViewTitle
+  S as ViewTitle
 };
 //# sourceMappingURL=ViewTitle.js.map

package/dist/lib/view_layout/ViewTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTitle.js","sources":["../../../src/lib/view_layout/ViewTitle.tsx"],"sourcesContent":["import {\n  Button,\n  makeStyles,\n  Menu,\n  MenuItem,\n  MenuList,\n  MenuPopover,\n  MenuTrigger,\n  Title3,\n} from \"@fluentui/react-components\";\nimport { AddSquareRegular, ArrowLeftFilled, DeleteRegular, MoreVerticalFilled } from \"@fluentui/react-icons\";\nimport { isFunction } from \"lodash-es\";\nimport { ReactNode } from \"react\";\n\nexport interface Action {\n  id: string;\n  label: string;\n  icon?: \"plus\" | \"trash\";\n  onClick: () => any;\n  disabled?: boolean;\n  type: \"PRIMARY\" | \"SECONDARY\" | \"ADDITIONAL\";\n}\n\nconst useStyles = makeStyles({\n  root: {\n    display: \"flex\",\n    align: \"center\",\n    justify: \"space-between\",\n    justifyContent: \"center\",\n    height: \"48px\",\n  },\n  title: {\n    flex: 1,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  backButton: {\n    flex: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-start\",\n  },\n  actions: {\n    flex: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  moreActions: {\n    flex: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n    minWidth: \"48px\",\n    justifyContent: \"flex-end\",\n  },\n});\n\n/**\n * Zone de titre d'une vue\n */\nexport function ViewTitle({\n  children,\n  onBack,\n  actions,\n}: {\n  /** Titre de la vue (en tout cas ce que l'on met dans la zone de titre) */\n  children: ReactNode;\n  /** Si spécifié, on ajoute une fleche \"back\" pour revenir en arrière */\n  onBack?: () => void;\n  /** Liste d'actions a ajouter à droite dans la zone d'actions */\n  actions?: Action[];\n}) {\n  const styles = useStyles();\n\n  const displayBackButton = isFunction(onBack);\n  const additionalList = (actions ?? []).filter((it) => it.type === \"ADDITIONAL\");\n  const secondaryList = (actions ?? []).filter((it) => it.type === \"SECONDARY\");\n  const primary = (actions ?? []).filter((it) => it.type === \"PRIMARY\");\n  const handleBack = () => {\n    if (displayBackButton && onBack) onBack();\n  };\n  const handleClick = async (id: string) => {\n    (actions ?? []).find((it) => it.id === id)?.onClick();\n  };\n  return (\n    <div className={styles.root}>\n      {displayBackButton && (\n        <div className={styles.backButton}>\n          <Button icon={<ArrowLeftFilled />} appearance=\"subtle\" onClick={handleBack} />\n        </div>\n      )}\n      <div className={styles.title}>\n        <Title3>{children}</Title3>\n      </div>\n      <div className={styles.actions}>\n        {secondaryList.length > 0 &&\n          secondaryList.map((it) => (\n            <Button key={it.id} disabled={it.disabled} appearance=\"secondary\" onClick={() => handleClick(it.id)}>\n              {it.label}\n            </Button>\n          ))}\n        {primary.length > 0 &&\n          primary.map((it) => (\n            <Button key={it.id} disabled={it.disabled} appearance=\"primary\" onClick={() => handleClick(it.id)}>\n              {it.label}\n            </Button>\n          ))}\n      </div>\n      <div className={styles.moreActions}>\n        {additionalList.length > 0 && (\n          <Menu positioning={{ autoSize: true }}>\n            <MenuTrigger disableButtonEnhancement>\n              <Button icon={<MoreVerticalFilled />} />\n            </MenuTrigger>\n            <MenuPopover>\n              <MenuList>\n                {additionalList.map((it) => (\n                  <AdditionalActionMenuItem key={it.id} action={it} onClick={handleClick} />\n                ))}\n              </MenuList>\n            </MenuPopover>\n          </Menu>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction EmptyIcon() {\n  return <span />;\n}\n\nfunction AdditionalActionMenuItem({ action, onClick }: { action: Action; onClick: (id: string) => void }) {\n  let Icon: any;\n  if (action.icon === \"plus\") {\n    Icon = AddSquareRegular;\n  } else if (action.icon === \"trash\") {\n    Icon = DeleteRegular;\n  } else {\n    Icon = EmptyIcon;\n  }\n  return (\n    <MenuItem disabled={action.disabled} onClick={() => onClick(action.id)} icon={<Icon />}>\n      {action.label}\n    </MenuItem>\n  );\n}\n"],"names":["useStyles","makeStyles","ViewTitle","children","onBack","actions","styles","displayBackButton","isFunction","additionalList","it","secondaryList","primary","handleBack","handleClick","id","jsxs","jsx","Button","ArrowLeftFilled","Title3","Menu","MenuTrigger","MoreVerticalFilled","MenuPopover","MenuList","AdditionalActionMenuItem","EmptyIcon","action","onClick","Icon","AddSquareRegular","DeleteRegular","MenuItem"],"mappings":"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"}
+{"version":3,"file":"ViewTitle.js","sources":["../../../src/lib/view_layout/ViewTitle.tsx"],"sourcesContent":["import {\n  Button,\n  makeStyles,\n  Menu,\n  MenuItem,\n  MenuList,\n  MenuPopover,\n  MenuTrigger,\n  Title3,\n} from \"@fluentui/react-components\";\n\nimport { isFunction } from \"lodash-es\";\nimport { ReactNode } from \"react\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nexport interface Action {\n  id: string;\n  label: string;\n  icon?: \"plus\" | \"trash\";\n  onClick: () => any;\n  disabled?: boolean;\n  type: \"PRIMARY\" | \"SECONDARY\" | \"ADDITIONAL\";\n}\n\nconst useStyles = makeStyles({\n  root: {\n    display: \"flex\",\n    align: \"center\",\n    justify: \"space-between\",\n    justifyContent: \"center\",\n    height: \"48px\",\n  },\n  title: {\n    flex: 1,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  backButton: {\n    flex: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-start\",\n  },\n  actions: {\n    flex: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  moreActions: {\n    flex: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n    minWidth: \"48px\",\n    justifyContent: \"flex-end\",\n  },\n});\n\n/**\n * Zone de titre d'une vue\n */\nexport function ViewTitle({\n  children,\n  onBack,\n  actions,\n}: {\n  /** Titre de la vue (en tout cas ce que l'on met dans la zone de titre) */\n  children: ReactNode;\n  /** Si spécifié, on ajoute une fleche \"back\" pour revenir en arrière */\n  onBack?: () => void;\n  /** Liste d'actions a ajouter à droite dans la zone d'actions */\n  actions?: Action[];\n}) {\n  const styles = useStyles();\n\n  const displayBackButton = isFunction(onBack);\n  const additionalList = (actions ?? []).filter((it) => it.type === \"ADDITIONAL\");\n  const secondaryList = (actions ?? []).filter((it) => it.type === \"SECONDARY\");\n  const primary = (actions ?? []).filter((it) => it.type === \"PRIMARY\");\n  const handleBack = () => {\n    if (displayBackButton && onBack) onBack();\n  };\n  const handleClick = async (id: string) => {\n    (actions ?? []).find((it) => it.id === id)?.onClick();\n  };\n  return (\n    <div className={styles.root}>\n      {displayBackButton && (\n        <div className={styles.backButton}>\n          <Button icon={<Icon name={\"back\"} />} appearance=\"subtle\" onClick={handleBack} />\n        </div>\n      )}\n      <div className={styles.title}>\n        <Title3>{children}</Title3>\n      </div>\n      <div className={styles.actions}>\n        {secondaryList.length > 0 &&\n          secondaryList.map((it) => (\n            <Button key={it.id} disabled={it.disabled} appearance=\"secondary\" onClick={() => handleClick(it.id)}>\n              {it.label}\n            </Button>\n          ))}\n        {primary.length > 0 &&\n          primary.map((it) => (\n            <Button key={it.id} disabled={it.disabled} appearance=\"primary\" onClick={() => handleClick(it.id)}>\n              {it.label}\n            </Button>\n          ))}\n      </div>\n      <div className={styles.moreActions}>\n        {additionalList.length > 0 && (\n          <Menu positioning={{ autoSize: true }}>\n            <MenuTrigger disableButtonEnhancement>\n              <Button icon={<Icon name=\"more_menu_vertical\" />} />\n            </MenuTrigger>\n            <MenuPopover>\n              <MenuList>\n                {additionalList.map((it) => (\n                  <AdditionalActionMenuItem key={it.id} action={it} onClick={handleClick} />\n                ))}\n              </MenuList>\n            </MenuPopover>\n          </Menu>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction AdditionalActionMenuItem({ action, onClick }: { action: Action; onClick: (id: string) => void }) {\n  let icon: any;\n  if (action.icon === \"plus\") {\n    icon = <Icon name=\"add\" />;\n  } else if (action.icon === \"trash\") {\n    icon = <Icon name=\"delete\" />;\n  } else {\n    icon = <Icon name=\"empty\" />;\n  }\n  return (\n    <MenuItem disabled={action.disabled} onClick={() => onClick(action.id)} icon={icon}>\n      {action.label}\n    </MenuItem>\n  );\n}\n"],"names":["useStyles","makeStyles","ViewTitle","children","onBack","actions","styles","displayBackButton","isFunction","additionalList","it","secondaryList","primary","handleBack","handleClick","id","jsxs","Button","jsx","Icon","Title3","Menu","MenuTrigger","MenuPopover","MenuList","AdditionalActionMenuItem","action","onClick","icon","MenuItem"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seij/common-ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -8,15 +8,15 @@
     "url": "https://github.com/seij-net/seij-commons-js.git"
   },
   "dependencies": {
-    "@fluentui/react-components": "9.72.9",
-    "@fluentui/react-icons": "2.0.316",
-    "i18next-browser-languagedetector": "8.2.0",
     "@seij/common-types": "0.1.3",
+    "@seij/common-ui-icons": "0.1.1",
+    "@fluentui/react-components": "9.72.9",
     "i18next": "25.7.3",
-    "i18next-icu": "2.4.1",
-    "lodash-es": "4.17.22",
+    "i18next-browser-languagedetector": "8.2.0",
     "date-fns": "4.1.0",
-    "rifm": "0.12.1"
+    "lodash-es": "4.17.22",
+    "rifm": "0.12.1",
+    "i18next-icu": "2.4.1"
   },
   "devDependencies": {
     "@types/lodash-es": "4.17.12"