@beweco/aurora-ui 1.0.0-beta.117 → 1.0.0-beta.118

package/dist/index.cjs.js

@@ -5469,6 +5469,33 @@ const ITEM_COLLAPSED_CLASS = "w-11 h-11 gap-0 p-0 justify-center";
 // `wrapper` `w-full` — el título se comía el espacio libre y empujaba el `endContent` al borde.
 // El `[data-slot="label"]` de v3 es `w-fit`, que es la otra mitad de P-14.
 const ITEM_TITLE_CLASS = "w-full flex-1 text-sm font-medium text-default-500 group-data-[selected=true]:text-default-600";
+// TECH-2459 · G2 · fix de navegación — resolución de un ítem por su clave.
+//
+// `onSelectionChange` del `ListBox` entrega la CLAVE, no el ítem. v2 no necesitaba esto:
+// cada `ListboxItem` llevaba su propio `onPress={() => handleItemPress(item)}` y el ítem
+// entero viajaba en el closure. La búsqueda es recursiva para cubrir los tres niveles del
+// árbol (sección → ítem → sub-ítem). Solo los de primer nivel están en la colección del
+// `ListBox` —los sub-ítems son markup plano con su propio `onClick`, ver `renderSubItem`—,
+// pero `defaultSelectedKey` SÍ puede apuntar a un sub-ítem, y esa clave es la que hay que
+// resolver en la rama del conjunto vacío de `handleSelectionChange`.
+const findItemByKey = (items, key) => {
+    for (const item of items) {
+        if (item.key === key) {
+            return item;
+        }
+        if (item.items) {
+            const nested = findItemByKey(item.items, key);
+            if (nested) {
+                return nested;
+            }
+        }
+    }
+    return undefined;
+};
+// Un ítem de grupo NO navega nunca: su activación abre/cierra el `<details>` (expandido) o
+// el `Popover` (colapsado). Mismo criterio que v2, donde el `ListboxItem` del grupo era el
+// único sin `onPress`.
+const isNestItem = (item) => (item.items?.length ?? 0) > 0 && item.type === exports.EnumMenuNavListItem.Nest;
 /**
  * @component MenuNavList
  * @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
@@ -5497,6 +5524,64 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
             document.activeElement.blur();
         }
     }, [onSelect]);
+    // TECH-2459 · G2 · fix de navegación — QUÉ SE PERDIÓ AL MIGRAR.
+    //
+    // En v2 la navegación de un ítem de PRIMER NIVEL la disparaba su propio
+    // `onPress={() => handleItemPress(item)}`, puesto en cada `ListboxItem` (v2 lo pasaba a
+    // `usePress` sin condiciones). El `ListBoxItem` de v3 declara `PressEvents` en su tipo
+    // pero NO los cablea: solo cablea `useKeyboard`/`useFocus`/`useHover`, y borra `onClick`
+    // a propósito (`react-aria-components/dist/private/ListBox.mjs`, `delete
+    // DOMProps.onClick`). Al traducir el componente ese `onPress` desapareció sin sustituto,
+    // así que los ítems raíz se quedaron sin ninguna vía para llamar a `onSelect` y el menú
+    // dejó de navegar en las 3 apps. Los sub-ítems no se enteraron porque son markup plano
+    // con `onClick` (ver `renderSubItem`).
+    //
+    // POR QUÉ `onSelectionChange` Y NO `onAction` (leído en react-aria, no deducido):
+    // `useSelectableItem` solo ejecuta la acción si `hasPrimaryAction = allowsActions &&
+    // (!allowsSelection || manager.isEmpty)` (`react-aria/dist/private/selection/
+    // useSelectableItem.mjs:116`). Con `selectionMode="single"` los ítems SÍ son
+    // seleccionables y la selección NUNCA está vacía (`selectedKeys` es siempre un `Set` de
+    // un elemento), así que `hasPrimaryAction` es permanentemente `false` y `onAction` no se
+    // invoca jamás — ni el del `ListBox` ni el de cada `ListBoxItem`, porque ambos se
+    // encadenan en el MISMO hueco (`react-aria/dist/private/listbox/useOption.mjs:68`).
+    // `hasSecondaryAction` tampoco sirve: exige `selectionBehavior="replace"` y solo
+    // dispararía con doble clic. Medido en el navegador antes del arreglo: con el `onAction`
+    // que traía `renderItem`, ratón/Enter/Espacio daban 0 invocaciones de `onSelect`.
+    //
+    // Se pone UNO SOLO de los dos handlers a propósito: con `onAction` + `onSelectionChange`
+    // activos a la vez, un clic navegaría dos veces.
+    const handleSelectionChange = $8WNJc$react.useCallback((keys) => {
+        // `selectionMode="single"` entrega 0 o 1 clave. El conjunto VACÍO no significa "nada
+        // seleccionado": es el RECLIC sobre el ítem ya activo, que react-aria deselecciona
+        // (`SelectionManager.toggleSelection` borra la clave y, sin `disallowEmptySelection`,
+        // emite el `Set` vacío). Ese caso es real —el usuario pulsa dos veces su sección
+        // actual— y la clave que hay que reenviar es la controlada. Por eso el `ListBox` lleva
+        // `escapeKeyBehavior="none"`: es la OTRA fuente de conjunto vacío
+        // (`useSelectableCollection.mjs:187`) y sin desactivarla un Escape con el menú
+        // enfocado navegaría a la ruta actual — medido quitando la prop: 1 invocación
+        // fantasma de `onSelect` con solo pulsar Escape.
+        const changedKey = keys === "all"
+            ? undefined
+            : Array.from(keys)[0];
+        const key = changedKey ?? selectedKey;
+        if (!key) {
+            return;
+        }
+        const item = findItemByKey(items, key);
+        if (!item) {
+            return;
+        }
+        // El grupo se descarta aquí y no en el `ListBoxItem`, porque su press llega por tres
+        // vías: la cabecera del `<details>`, el disparador del `Popover` colapsado y el
+        // burbujeo desde un sub-ítem del `<details>` (el `<button>` plano es descendiente DOM
+        // del `ListBoxItem` padre). Sin este filtro, un clic en un sub-ítem llamaría a
+        // `onSelect` dos veces —una con la clave del sub-ítem y otra con la del grupo— y
+        // abrir un grupo navegaría, algo que v2 no hacía.
+        if (isNestItem(item)) {
+            return;
+        }
+        handleItemPress(item);
+    }, [handleItemPress, items, selectedKey]);
     // Renders a sub-item (text-only, hierarchy line). Estilos de selección vía clase .selected en Menu.scss.
     //
     // ⚠️ TECH-2459 · G2 — markup PLANO (`<li><button>`), NO `ListBox.Item`. Se usa dentro de
@@ -5543,11 +5628,16 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
             return renderNestItem(item);
         }
         const isItemSelected = selectedKey === item.key;
-        return (jsxRuntime.jsx(react.ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, "aria-label": item.title || `Menu item ${item.key}`, className: react.cn(ITEM_BASE_CLASS, isCollapsed && ITEM_COLLAPSED_CLASS), onAction: () => handleItemPress(item), children: isCollapsed ? (jsxRuntime.jsxs(react.Tooltip, { delay: 0, closeDelay: 200, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)) }) }), jsxRuntime.jsx(react.Tooltip.Content, { placement: "right", className: "text-default-500", children: item.title })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)), jsxRuntime.jsx(react.Label, { className: ITEM_TITLE_CLASS, children: item.title }), hideEndContent ? null : (item.endContent ?? null)] })) }, item.key));
-    }, [isCollapsed, hideEndContent, iconClassName, selectedKey, handleItemPress, renderNestItem]);
+        return (jsxRuntime.jsx(react.ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, "aria-label": item.title || `Menu item ${item.key}`, className: react.cn(ITEM_BASE_CLASS, isCollapsed && ITEM_COLLAPSED_CLASS), children: isCollapsed ? (jsxRuntime.jsxs(react.Tooltip, { delay: 0, closeDelay: 200, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)) }) }), jsxRuntime.jsx(react.Tooltip.Content, { placement: "right", className: "text-default-500", children: item.title })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)), jsxRuntime.jsx(react.Label, { className: ITEM_TITLE_CLASS, children: item.title }), hideEndContent ? null : (item.endContent ?? null)] })) }, item.key));
+    }, [isCollapsed, hideEndContent, iconClassName, selectedKey, renderNestItem]);
     // `ListBox` de v3 ya no es polimórfico via `as` (a diferencia de Breadcrumbs/Pagination) —
     // renderiza siempre su propio contenedor; el landmark de navegación se envuelve por fuera.
-    return (jsxRuntime.jsx("nav", { "aria-label": "Menu navigation", ref: ref, children: jsxRuntime.jsx(react.ListBox, { "aria-label": "Menu navigation", className: react.cn("list-none items-center", className), items: items, selectedKeys: selectedKeys, selectionMode: "single", ...props, children: (item) => {
+    return (jsxRuntime.jsx("nav", { "aria-label": "Menu navigation", ref: ref, children: jsxRuntime.jsx(react.ListBox, { "aria-label": "Menu navigation", className: react.cn("list-none items-center", className), items: items, selectedKeys: selectedKeys, selectionMode: "single", onSelectionChange: handleSelectionChange, 
+            // Neutraliza el Escape del `ListBox`: con el valor por defecto
+            // (`clearSelection`) vaciaría la selección y `handleSelectionChange` leería ese
+            // conjunto vacío como un reclic, navegando a la ruta actual sin que nadie haya
+            // pulsado nada. Con `none`, Escape sigue sin hacer nada, igual que en v2.
+            escapeKeyBehavior: "none", ...props, children: (item) => {
                 return item.items &&
                     item.items?.length > 0 &&
                     item?.type === exports.EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && item.items?.length > 0 ? (

package/dist/index.esm.js

@@ -5469,6 +5469,33 @@ const ITEM_COLLAPSED_CLASS = "w-11 h-11 gap-0 p-0 justify-center";
 // `wrapper` `w-full` — el título se comía el espacio libre y empujaba el `endContent` al borde.
 // El `[data-slot="label"]` de v3 es `w-fit`, que es la otra mitad de P-14.
 const ITEM_TITLE_CLASS = "w-full flex-1 text-sm font-medium text-default-500 group-data-[selected=true]:text-default-600";
+// TECH-2459 · G2 · fix de navegación — resolución de un ítem por su clave.
+//
+// `onSelectionChange` del `ListBox` entrega la CLAVE, no el ítem. v2 no necesitaba esto:
+// cada `ListboxItem` llevaba su propio `onPress={() => handleItemPress(item)}` y el ítem
+// entero viajaba en el closure. La búsqueda es recursiva para cubrir los tres niveles del
+// árbol (sección → ítem → sub-ítem). Solo los de primer nivel están en la colección del
+// `ListBox` —los sub-ítems son markup plano con su propio `onClick`, ver `renderSubItem`—,
+// pero `defaultSelectedKey` SÍ puede apuntar a un sub-ítem, y esa clave es la que hay que
+// resolver en la rama del conjunto vacío de `handleSelectionChange`.
+const findItemByKey = (items, key) => {
+    for (const item of items) {
+        if (item.key === key) {
+            return item;
+        }
+        if (item.items) {
+            const nested = findItemByKey(item.items, key);
+            if (nested) {
+                return nested;
+            }
+        }
+    }
+    return undefined;
+};
+// Un ítem de grupo NO navega nunca: su activación abre/cierra el `<details>` (expandido) o
+// el `Popover` (colapsado). Mismo criterio que v2, donde el `ListboxItem` del grupo era el
+// único sin `onPress`.
+const isNestItem = (item) => (item.items?.length ?? 0) > 0 && item.type === EnumMenuNavListItem.Nest;
 /**
  * @component MenuNavList
  * @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
@@ -5497,6 +5524,64 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
             document.activeElement.blur();
         }
     }, [onSelect]);
+    // TECH-2459 · G2 · fix de navegación — QUÉ SE PERDIÓ AL MIGRAR.
+    //
+    // En v2 la navegación de un ítem de PRIMER NIVEL la disparaba su propio
+    // `onPress={() => handleItemPress(item)}`, puesto en cada `ListboxItem` (v2 lo pasaba a
+    // `usePress` sin condiciones). El `ListBoxItem` de v3 declara `PressEvents` en su tipo
+    // pero NO los cablea: solo cablea `useKeyboard`/`useFocus`/`useHover`, y borra `onClick`
+    // a propósito (`react-aria-components/dist/private/ListBox.mjs`, `delete
+    // DOMProps.onClick`). Al traducir el componente ese `onPress` desapareció sin sustituto,
+    // así que los ítems raíz se quedaron sin ninguna vía para llamar a `onSelect` y el menú
+    // dejó de navegar en las 3 apps. Los sub-ítems no se enteraron porque son markup plano
+    // con `onClick` (ver `renderSubItem`).
+    //
+    // POR QUÉ `onSelectionChange` Y NO `onAction` (leído en react-aria, no deducido):
+    // `useSelectableItem` solo ejecuta la acción si `hasPrimaryAction = allowsActions &&
+    // (!allowsSelection || manager.isEmpty)` (`react-aria/dist/private/selection/
+    // useSelectableItem.mjs:116`). Con `selectionMode="single"` los ítems SÍ son
+    // seleccionables y la selección NUNCA está vacía (`selectedKeys` es siempre un `Set` de
+    // un elemento), así que `hasPrimaryAction` es permanentemente `false` y `onAction` no se
+    // invoca jamás — ni el del `ListBox` ni el de cada `ListBoxItem`, porque ambos se
+    // encadenan en el MISMO hueco (`react-aria/dist/private/listbox/useOption.mjs:68`).
+    // `hasSecondaryAction` tampoco sirve: exige `selectionBehavior="replace"` y solo
+    // dispararía con doble clic. Medido en el navegador antes del arreglo: con el `onAction`
+    // que traía `renderItem`, ratón/Enter/Espacio daban 0 invocaciones de `onSelect`.
+    //
+    // Se pone UNO SOLO de los dos handlers a propósito: con `onAction` + `onSelectionChange`
+    // activos a la vez, un clic navegaría dos veces.
+    const handleSelectionChange = $8WNJc$react.useCallback((keys) => {
+        // `selectionMode="single"` entrega 0 o 1 clave. El conjunto VACÍO no significa "nada
+        // seleccionado": es el RECLIC sobre el ítem ya activo, que react-aria deselecciona
+        // (`SelectionManager.toggleSelection` borra la clave y, sin `disallowEmptySelection`,
+        // emite el `Set` vacío). Ese caso es real —el usuario pulsa dos veces su sección
+        // actual— y la clave que hay que reenviar es la controlada. Por eso el `ListBox` lleva
+        // `escapeKeyBehavior="none"`: es la OTRA fuente de conjunto vacío
+        // (`useSelectableCollection.mjs:187`) y sin desactivarla un Escape con el menú
+        // enfocado navegaría a la ruta actual — medido quitando la prop: 1 invocación
+        // fantasma de `onSelect` con solo pulsar Escape.
+        const changedKey = keys === "all"
+            ? undefined
+            : Array.from(keys)[0];
+        const key = changedKey ?? selectedKey;
+        if (!key) {
+            return;
+        }
+        const item = findItemByKey(items, key);
+        if (!item) {
+            return;
+        }
+        // El grupo se descarta aquí y no en el `ListBoxItem`, porque su press llega por tres
+        // vías: la cabecera del `<details>`, el disparador del `Popover` colapsado y el
+        // burbujeo desde un sub-ítem del `<details>` (el `<button>` plano es descendiente DOM
+        // del `ListBoxItem` padre). Sin este filtro, un clic en un sub-ítem llamaría a
+        // `onSelect` dos veces —una con la clave del sub-ítem y otra con la del grupo— y
+        // abrir un grupo navegaría, algo que v2 no hacía.
+        if (isNestItem(item)) {
+            return;
+        }
+        handleItemPress(item);
+    }, [handleItemPress, items, selectedKey]);
     // Renders a sub-item (text-only, hierarchy line). Estilos de selección vía clase .selected en Menu.scss.
     //
     // ⚠️ TECH-2459 · G2 — markup PLANO (`<li><button>`), NO `ListBox.Item`. Se usa dentro de
@@ -5543,11 +5628,16 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
             return renderNestItem(item);
         }
         const isItemSelected = selectedKey === item.key;
-        return (jsx(ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, "aria-label": item.title || `Menu item ${item.key}`, className: cn(ITEM_BASE_CLASS, isCollapsed && ITEM_COLLAPSED_CLASS), onAction: () => handleItemPress(item), children: isCollapsed ? (jsxs(Tooltip$2, { delay: 0, closeDelay: 200, children: [jsx(Tooltip$2.Trigger, { children: jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)) }) }), jsx(Tooltip$2.Content, { placement: "right", className: "text-default-500", children: item.title })] })) : (jsxs(Fragment, { children: [item.icon ? (jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)), jsx(Label, { className: ITEM_TITLE_CLASS, children: item.title }), hideEndContent ? null : (item.endContent ?? null)] })) }, item.key));
-    }, [isCollapsed, hideEndContent, iconClassName, selectedKey, handleItemPress, renderNestItem]);
+        return (jsx(ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, "aria-label": item.title || `Menu item ${item.key}`, className: cn(ITEM_BASE_CLASS, isCollapsed && ITEM_COLLAPSED_CLASS), children: isCollapsed ? (jsxs(Tooltip$2, { delay: 0, closeDelay: 200, children: [jsx(Tooltip$2.Trigger, { children: jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)) }) }), jsx(Tooltip$2.Content, { placement: "right", className: "text-default-500", children: item.title })] })) : (jsxs(Fragment, { children: [item.icon ? (jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)), jsx(Label, { className: ITEM_TITLE_CLASS, children: item.title }), hideEndContent ? null : (item.endContent ?? null)] })) }, item.key));
+    }, [isCollapsed, hideEndContent, iconClassName, selectedKey, renderNestItem]);
     // `ListBox` de v3 ya no es polimórfico via `as` (a diferencia de Breadcrumbs/Pagination) —
     // renderiza siempre su propio contenedor; el landmark de navegación se envuelve por fuera.
-    return (jsx("nav", { "aria-label": "Menu navigation", ref: ref, children: jsx(ListBox, { "aria-label": "Menu navigation", className: cn("list-none items-center", className), items: items, selectedKeys: selectedKeys, selectionMode: "single", ...props, children: (item) => {
+    return (jsx("nav", { "aria-label": "Menu navigation", ref: ref, children: jsx(ListBox, { "aria-label": "Menu navigation", className: cn("list-none items-center", className), items: items, selectedKeys: selectedKeys, selectionMode: "single", onSelectionChange: handleSelectionChange, 
+            // Neutraliza el Escape del `ListBox`: con el valor por defecto
+            // (`clearSelection`) vaciaría la selección y `handleSelectionChange` leería ese
+            // conjunto vacío como un reclic, navegando a la ruta actual sin que nadie haya
+            // pulsado nada. Con `none`, Escape sigue sin hacer nada, igual que en v2.
+            escapeKeyBehavior: "none", ...props, children: (item) => {
                 return item.items &&
                     item.items?.length > 0 &&
                     item?.type === EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && item.items?.length > 0 ? (

package/dist/types/components/menu/_internal/menu-nav-list/MenuNavList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAmC5D;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,sFAucvB,CAAC"}
+{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAoE5D;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,sFAohBvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "1.0.0-beta.117",
+	"version": "1.0.0-beta.118",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",