@alveole/storybook 2.0.0-alpha.10 → 2.0.0-alpha.11

package/dist/components/BarreDeFiltres.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarreDeFiltres.d.ts","sourceRoot":"","sources":["../../src/components/BarreDeFiltres.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,qFAQ5B,mBAAmB,sBA2CrB,CAAC"}
+{"version":3,"file":"BarreDeFiltres.d.ts","sourceRoot":"","sources":["../../src/components/BarreDeFiltres.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,qFAQ5B,mBAAmB,sBAiDrB,CAAC"}

package/dist/components/BarreDeFiltres.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Platform, ScrollView } from 'react-native';
 import { ALL_STORY_FLAGS } from '../utils';
@@ -13,12 +14,17 @@ import { SearchField } from './SearchField';
  * l'ecran n'a besoin de savoir quel menu est ouvert.
  */
 export const BarreDeFiltres = ({ recherche, onRecherche, tags, tagChoisi, onTag, indicateurChoisi, onIndicateur, }) => {
+    const { isVariant, spacingValue } = useTheme();
+    const marge = isVariant('mobile') ? spacingValue('3W') : 0;
     const [menuOuvert, setMenuOuvert] = React.useState(null);
     const deroule = (menu) => ({
         ouvert: menuOuvert === menu,
         onOuvrir: (ouvert) => setMenuOuvert(ouvert ? menu : null),
     });
-    return (_jsxs(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row', gap: 8, alignItems: 'center' }, children: [_jsx(Box, { style: { minWidth: 200 }, children: _jsx(SearchField, { placeholder: "Button, Tabs, Card...", value: recherche, onChangeText: onRecherche, size: "sm" }) }), _jsx(FiltreDeroulant, { libelle: "Tags", options: tags.map(tag => ({ key: tag, label: tag })), choisi: tagChoisi, onChoisir: tag => {
+    return (_jsxs(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, 
+        // La zone défile jusqu'aux bords ; seuls le premier et le dernier contrôle
+        // gardent la marge de ScreenZone, à l'intérieur du contenu défilant.
+        style: { marginHorizontal: -marge, flexGrow: 0, flexShrink: 0 }, contentInsetAdjustmentBehavior: "never", contentContainerStyle: { flexDirection: 'row', gap: 8, alignItems: 'center', paddingHorizontal: marge }, children: [_jsx(Box, { style: { minWidth: 200 }, children: _jsx(SearchField, { placeholder: "Button, Tabs, Card...", value: recherche, onChangeText: onRecherche, size: "sm" }) }), _jsx(FiltreDeroulant, { libelle: "Tags", options: tags.map(tag => ({ key: tag, label: tag })), choisi: tagChoisi, onChoisir: tag => {
                     onTag(tag);
                     setMenuOuvert(null);
                 }, ...deroule('tags') }), _jsx(FiltreDeroulant, { libelle: "Indicateurs", options: ALL_STORY_FLAGS, choisi: indicateurChoisi, onChoisir: indicateur => {

package/dist/components/ExampleBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ExampleBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6F1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,YAAY,GAAI,kCAA0C,iBAAiB,sBAkCvF,CAAC"}
+{"version":3,"file":"ExampleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ExampleBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8F1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,YAAY,GAAI,kCAA0C,iBAAiB,sBAkCvF,CAAC"}

package/dist/components/ExampleBlock.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Button, Highlight, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
+import { Platform } from 'react-native';
 import { decouperSource } from '../storySource';
 /** Au delà, la source prend plus de place que ce qu'elle documente. */
 const LIGNES_VISIBLES = 12;
@@ -16,7 +17,7 @@ const PAS_DE_LA_TRAME = 16;
  */
 const Scene = ({ children, pleinEcran }) => {
     const { color } = useTheme();
-    return (_jsx(Box, { p: '150', style: {
+    return (_jsx(Box, { p: Platform.OS === 'web' ? '3W' : '1W', style: {
             backgroundColor: color.light.background['default-grey'],
             backgroundImage: `radial-gradient(circle, ${color.light.border['default-grey']} 1px, transparent 1px)`,
             backgroundSize: `${PAS_DE_LA_TRAME}px ${PAS_DE_LA_TRAME}px`,
@@ -40,8 +41,8 @@ const BarreDeSource = ({ onCopier }) => {
             justifyContent: 'space-between',
             // Les côtés s'alignent sur la colonne du code, qui est le contenu principal du bas
             // du bloc ; la hauteur reste au plus juste de ce que la barre porte.
-            paddingLeft: spacingValue('2W'),
-            paddingRight: spacingValue('2W'),
+            paddingLeft: spacingValue(Platform.OS === 'web' ? '2W' : '1W'),
+            paddingRight: spacingValue(Platform.OS === 'web' ? '2W' : '1W'),
             paddingTop: spacingValue('1W'),
             paddingBottom: spacingValue('1W'),
         }, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "tsx" }), _jsx(Button, { title: "Copier", size: "sm", variant: "tertiary", leading: "Copy", onPress: onCopier })] }));

package/dist/components/ExemplesDeLaStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExemplesDeLaStory.d.ts","sourceRoot":"","sources":["../../src/components/ExemplesDeLaStory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAwEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,gCAUrF,CAAC"}
+{"version":3,"file":"ExemplesDeLaStory.d.ts","sourceRoot":"","sources":["../../src/components/ExemplesDeLaStory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAiEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,gCAUrF,CAAC"}

package/dist/components/ExemplesDeLaStory.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnchorHeading, Box, MarkdownDescription, Tag, Typography } from '@alveole/components';
-import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
+import { A, AnchorHeading, Box, MarkdownDescription, Tag, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
 import { descriptionDeLExemple, sourceDeLExemple } from '../screens/sourcesDExemples';
 import { getStoryFlags } from '../utils';
 import { ExampleBlock } from './ExampleBlock';
-import { styleDuLienBrut } from './styleDuLienBrut';
 /**
  * Une demonstration. Le titre et la description appartiennent au document : ils restent dans le
  * flux de la page, hors de tout cadre, pour pouvoir etre ancres et repris dans un sommaire. Le
@@ -22,7 +21,7 @@ const UnExemple = ({ story, nom, Rendu, gabarit }) => {
  */
 const StatutDeLaFiche = ({ meta }) => {
     const { color, text } = useTheme();
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Tag, { size: "md", children: tag }, tag))), getStoryFlags(meta).map(flag => (_jsx(Tag, { size: "md", children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx("a", { href: meta.figmaURL, rel: "noreferrer", style: styleDuLienBrut, target: "_blank", [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Bold, color: color.light.text['action-high-primary'] }, children: "Ouvrir Figma" }) })) : null] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Tag, { size: "md", children: tag }, tag))), getStoryFlags(meta).map(flag => (_jsx(Tag, { size: "md", children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx(A, { href: meta.figmaURL, target: "_blank", children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Bold, color: color.light.text['action-high-primary'] }, children: "Ouvrir Figma" }) })) : null] }));
 };
 /** Les demonstrations d'une fiche, les unes sous les autres, sous le statut de la fiche. */
 export const ExemplesDeLaStory = ({ story, exemples, gabarit }) => (_jsxs(Box, { display: "flex", gap: 40, mt: '5W', children: [_jsx(StatutDeLaFiche, { meta: story.default }), exemples.map(([nom, Rendu]) => (_jsx(UnExemple, { story: story, nom: nom, Rendu: Rendu, gabarit: gabarit }, nom)))] }));

package/dist/components/UIKitTopBar.d.ts

@@ -10,6 +10,7 @@ export type UIKitTopBarItem = {
 export type UIKitTopBarProps = {
     activeKey: string;
     items: UIKitTopBarItem[];
+    logo?: React.ReactNode;
     /**
      * Niveau 2 de la rubrique courante. Sur desktop il est rendu par la colonne ; sous 992px
      * la colonne se replie et son contenu descend ici, pour que le menu de la barre reste la
@@ -17,5 +18,5 @@ export type UIKitTopBarProps = {
      */
     columnGroups?: UIKitColumnGroup[];
 };
-export declare const UIKitTopBar: ({ activeKey, items, columnGroups }: UIKitTopBarProps) => React.JSX.Element;
+export declare const UIKitTopBar: ({ activeKey, items, columnGroups, logo }: UIKitTopBarProps) => React.JSX.Element;
 //# sourceMappingURL=UIKitTopBar.d.ts.map

package/dist/components/UIKitTopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAA2E,MAAM,qBAAqB,CAAC;AAEjH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC,CAAC;AAwJF,eAAO,MAAM,WAAW,GAAI,oCAAyC,gBAAgB,sBAgBpF,CAAC"}
+{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAA2E,MAAM,qBAAqB,CAAC;AAGjH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC,CAAC;AAsJF,eAAO,MAAM,WAAW,GAAI,0CAAsD,gBAAgB,sBAkBjG,CAAC"}

package/dist/components/UIKitTopBar.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { A, Box, Divider, Header, LucideIcon, SidebarGroup, SidebarItem, Typography } from '@alveole/components';
 import { makeStyles, useTheme } from '@alveole/theme';
+import { usePathname } from 'expo-router';
 import React from 'react';
-import { Pressable } from 'react-native';
-const AlveoleLogo = () => {
-    const { color, radius, text } = useTheme();
-    return (_jsx(Box, { style: {
-            width: 32,
-            height: 32,
-            borderRadius: radius('md'),
-            backgroundColor: color.light.background['action-high-primary'],
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }, children: _jsx(Typography, { style: { ...text['Corps de texte'].XS.Bold, color: '#fff' }, children: "A" }) }));
-};
+import { Platform, Pressable, ScrollView, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 const useNavItemStyles = makeStyles(({ color, radius, spacingValue, text }) => {
     const activeLabelTypography = text['Corps de texte'].MD.Medium;
     return {
@@ -62,41 +52,37 @@ const NavItem = ({ label, href, current, block = false }) => {
     const styles = useNavItemStyles();
     return (_jsxs(A, { href: href, direction: "replace", ariaCurrent: current ? 'page' : undefined, style: { ...styles.container, alignItems: block ? 'flex-start' : 'center' }, backgroundColor: { hover: styles.containerHover.backgroundColor }, children: [_jsx(Typography, { style: current ? styles.labelCurrent : styles.label, children: label }), _jsx(Box, { "aria-hidden": true, children: _jsx(Typography, { style: styles.labelGhost, children: label }) })] }));
 };
-/**
- * La barre en version mobile : un menu qui se deplie sous l'entete. L'etat d'ouverture vit ici,
- * avec le seul rendu qui s'en sert, plutot que dans la barre qui n'en a pas besoin autrement.
- */
-const BarreMobile = ({ activeKey, items, columnGroups }) => {
-    const { color, spacing } = useTheme();
-    // Les items sont des ancres : la navigation ne passe plus par un callback qui pourrait
-    // refermer le menu au clic. On retient donc la page pour laquelle le menu a été ouvert,
-    // et il se referme de lui-même dès qu'on arrive ailleurs, sans effet de synchronisation.
-    const [openedFor, setOpenedFor] = React.useState(null);
-    const menuOpen = openedFor === activeKey;
-    const toggleMenu = () => setOpenedFor(menuOpen ? null : activeKey);
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { logo: _jsx(AlveoleLogo, {}), right: _jsx(Pressable, { accessibilityRole: "button", onPress: toggleMenu, style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }), menuOpen && (_jsxs(Box, { style: {
-                    position: 'sticky',
-                    top: 64,
+const MobileMenuItems = ({ activeKey, items, columnGroups }) => (_jsxs(_Fragment, { children: [items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key, block: true }, key))), columnGroups.length > 0 && _jsx(Divider, {}), columnGroups.map(group => (_jsx(SidebarGroup, { title: group.title, children: group.items.map(item => (_jsx(SidebarItem, { title: item.title, href: item.href }, item.key))) }, group.title)))] }));
+/** La barre mobile garde sa commande visible et fait défiler le menu sous celle-ci. */
+const BarreMobile = ({ activeKey, items, columnGroups, logo }) => {
+    const { color, spacingValue } = useTheme();
+    const { height } = useWindowDimensions();
+    const { top, bottom } = useSafeAreaInsets();
+    const [barHeight, setBarHeight] = React.useState(0);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const toggleMenu = () => setMenuOpen(open => !open);
+    // En natif, le menu remplit le bas de l'écran, zone de l'indicateur d'accueil comprise.
+    const menuHeight = Math.max(0, height - top - barHeight - (Platform.OS === 'web' ? bottom : 0));
+    const header = (_jsx(Header, { logo: logo, right: _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: menuOpen ? 'Fermer le menu' : 'Ouvrir le menu', accessibilityState: { expanded: menuOpen }, onPress: toggleMenu, style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { style: { position: Platform.OS === 'web' ? 'sticky' : 'relative', top: 0, zIndex: 100, flexShrink: 0 }, onLayout: event => setBarHeight(event.nativeEvent.layout.height), children: header }), menuOpen && (_jsx(Box, { style: {
+                    position: Platform.OS === 'web' ? 'sticky' : 'relative',
+                    top: Platform.OS === 'web' ? 64 : 0,
                     left: 0,
                     right: 0,
                     zIndex: 99,
                     backgroundColor: color.light.background['default-grey'],
                     borderBottomWidth: 1,
                     borderBottomColor: color.light.border['default-grey'],
-                    paddingTop: spacing('2W'),
-                    paddingBottom: spacing('2W'),
-                    paddingLeft: spacing('2W'),
-                    paddingRight: spacing('2W'),
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: spacing('050'),
-                }, children: [items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key, block: true }, key))), columnGroups.length > 0 && _jsx(Divider, {}), columnGroups.map(group => (_jsx(SidebarGroup, { title: group.title, children: group.items.map(item => (_jsx(SidebarItem, { title: item.title, href: item.href }, item.key))) }, group.title)))] }))] }));
+                    flexShrink: 0,
+                }, children: _jsx(ScrollView, { style: { ...(Platform.OS === 'web' ? { maxHeight: menuHeight } : { height: menuHeight }), flexGrow: 0 }, contentContainerStyle: { padding: spacingValue('2W'), gap: spacingValue('050') }, keyboardShouldPersistTaps: "handled", children: _jsx(MobileMenuItems, { activeKey: activeKey, items: items, columnGroups: columnGroups }) }) }))] }));
 };
-export const UIKitTopBar = ({ activeKey, items, columnGroups = [] }) => {
+export const UIKitTopBar = ({ activeKey, items, columnGroups = [], logo = null }) => {
     const { isVariant } = useTheme();
+    const pathname = usePathname();
     if (isVariant('mobile')) {
-        return _jsx(BarreMobile, { activeKey: activeKey, items: items, columnGroups: columnGroups });
+        // Toute nouvelle fiche repart avec un menu fermé, y compris dans la même rubrique.
+        return _jsx(BarreMobile, { activeKey: activeKey, items: items, columnGroups: columnGroups, logo: logo }, pathname);
     }
     const right = (_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key }, key))) }));
-    return _jsx(Header, { logo: _jsx(AlveoleLogo, {}), title: "Alveole UI Kit", right: right });
+    return _jsx(Header, { logo: logo, title: "Alveole UI Kit", right: right });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",