danielgm-ui 0.4.4 → 0.4.6

package/dist/context-menu.d.ts

@@ -1,12 +1,12 @@
 /** Menú contextual sobre una zona concreta. Radix gestiona el anclaje al puntero y la navegación. */
 import { type ReactElement } from 'react';
 import type { DropdownMenuItem } from './dropdown-menu.js';
-/** Mismo contrato de acciones y separadores que DropdownMenu. */
+/** Mismo contrato de acciones, categorías anidadas y separadores que DropdownMenu. */
 export type ContextMenuItem = DropdownMenuItem;
 export interface ContextMenuProps {
     /** Un único elemento DOM o componente que transmita ref y props; se conserva su aspecto. */
     children: ReactElement;
-    /** Acciones y separadores con IDs únicos. Los atajos son leyendas, no se registran. */
+    /** Acciones, categorías y separadores con IDs únicos por nivel. Los atajos son leyendas. */
     items: readonly ContextMenuItem[];
     /** Apariencia de las opciones; no modifica el panel. @defaultValue 'default' */
     itemVariant?: 'default' | 'ghost';
@@ -16,7 +16,7 @@ export interface ContextMenuProps {
     disabled?: boolean;
     /** Notifica apertura y cierre. La posición y la apertura proceden del disparador. */
     onOpenChange?: (open: boolean) => void;
-    /** Clase CSS del panel renderizado en el portal. */
+    /** Clase CSS de todos los paneles, incluidos los submenús, renderizados en portales. */
     className?: string;
 }
 /** Clic derecho, pulsación prolongada o Shift+F10. El clic izquierdo conserva la acción del hijo. */

package/dist/context-menu.js

@@ -6,6 +6,7 @@ import * as Primitive from '@radix-ui/react-context-menu';
 import { menuItemFocusProps } from './internal/menu-item-focus.js';
 import { restoreFocus } from './internal/focus.js';
 import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { MenuItems } from './internal/menu-items.js';
 import { cx } from './utils.js';
 /** Clic derecho, pulsación prolongada o Shift+F10. El clic izquierdo conserva la acción del hijo. */
 export function ContextMenu({ children, items, itemVariant = 'default', label, disabled = false, onOpenChange, className, }) {
@@ -47,5 +48,5 @@ export function ContextMenu({ children, items, itemVariant = 'default', label, d
                             if (!outside.current && trigger.current?.isConnected)
                                 restoreFocus(trigger.current);
                             outside.current = false;
-                        }, children: [_jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), items.map((item) => item.type === 'separator' ? (_jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id)) : (_jsxs(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: cx('dgm-dropdown-item', (item.variant ?? itemVariant) === 'ghost' && 'dgm-dropdown-item--ghost', item.danger && 'dgm-dropdown-item--danger'), children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut }))] }, item.id)))] }) })] }) }));
+                        }, children: [_jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), _jsx(MenuItems, { primitive: Primitive, items: items, itemVariant: itemVariant, className: cx('dgm-context-menu', className) })] }) })] }) }));
 }

package/dist/dropdown-menu.d.ts

@@ -1,30 +1,37 @@
 /** Menú de acciones: Radix gestiona teclado, búsqueda por letras, portal y foco. */
 import { type ReactElement, type ReactNode } from 'react';
-/** Una acción tiene un ID estable; los separadores no son seleccionables. */
+/** Acciones, separadores o categorías anidadas con IDs estables y únicos por nivel. */
 export type DropdownMenuItem = {
     id: string;
     type: 'separator';
-} | {
-    id: string;
+} | (MenuEntry & {
     type?: 'item';
-    /** Texto visible, accesible y usado para buscar escribiendo. */
+    /** Leyenda decorativa; no registra un atajo. */
+    shortcut?: string;
+    /** Ejecuta la acción; preventDefault mantiene el menú abierto. */
+    onSelect?: (event: Event) => void;
+}) | (MenuEntry & {
+    type: 'submenu';
+    /** Opciones del panel lateral; admite más categorías. Hover no ejecuta acciones. */
+    items: readonly DropdownMenuItem[];
+});
+/** Presentación compartida por acciones y categorías. */
+interface MenuEntry {
+    id: string;
+    /** Texto visible y accesible, también usado para buscar escribiendo. */
     label: string;
     /** Icono decorativo opcional. */
     icon?: ReactNode;
-    /** Leyenda visual: no registra por sí misma un atajo de teclado. */
-    shortcut?: string;
     disabled?: boolean;
-    /** Apariencia de esta opción; hereda itemVariant del menú. */
+    /** Hereda itemVariant del menú, también en paneles anidados. */
     variant?: 'default' | 'ghost';
-    /** Resalta acciones destructivas sin ejecutarlas automáticamente. */
+    /** Tono semántico destructivo. */
     danger?: boolean;
-    /** Se ejecuta con puntero o teclado. preventDefault mantiene abierto el menú. */
-    onSelect?: (event: Event) => void;
-};
+}
 export interface DropdownMenuProps {
     /** Un único botón que acepte ref y props; Button es compatible. */
     children: ReactElement;
-    /** Acciones y separadores en orden de lectura. IDs únicos. */
+    /** Acciones, categorías y separadores en orden de lectura. IDs únicos por nivel. */
     items: readonly DropdownMenuItem[];
     /** Apariencia de las opciones; no modifica el panel. @defaultValue 'default' */
     itemVariant?: 'default' | 'ghost';
@@ -44,8 +51,9 @@ export interface DropdownMenuProps {
     sideOffset?: number;
     /** Desactiva el disparador. @defaultValue false */
     disabled?: boolean;
-    /** Clase del panel que se renderiza en el portal. */
+    /** Clase de los paneles, incluidos los submenús, renderizados en portales. */
     className?: string;
 }
 /** El menú no bloquea el scroll de la página y devuelve el foco sin desplazarla. */
 export declare function DropdownMenu({ children, items, itemVariant, label, open, defaultOpen, onOpenChange, side, align, sideOffset, disabled, className, }: DropdownMenuProps): ReactElement;
+export {};

package/dist/dropdown-menu.js

@@ -6,6 +6,7 @@ import * as Primitive from '@radix-ui/react-dropdown-menu';
 import { menuItemFocusProps } from './internal/menu-item-focus.js';
 import { restoreFocus } from './internal/focus.js';
 import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { MenuItems } from './internal/menu-items.js';
 import { cx } from './utils.js';
 /** El menú no bloquea el scroll de la página y devuelve el foco sin desplazarla. */
 export function DropdownMenu({ children, items, itemVariant = 'default', label, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 6, disabled, className, }) {
@@ -21,5 +22,5 @@ export function DropdownMenu({ children, items, itemVariant = 'default', label,
                                 restoreFocus(trigger.current);
                             }
                             interactedOutside.current = false;
-                        }, children: [label && _jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), items.map((item) => item.type === 'separator' ? (_jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id)) : (_jsxs(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: cx('dgm-dropdown-item', (item.variant ?? itemVariant) === 'ghost' && 'dgm-dropdown-item--ghost', item.danger && 'dgm-dropdown-item--danger'), children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut }))] }, item.id)))] }) })] }) }));
+                        }, children: [label && _jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), _jsx(MenuItems, { primitive: Primitive, items: items, itemVariant: itemVariant, className: className })] }) })] }) }));
 }

package/dist/internal/menu-items.d.ts

@@ -0,0 +1,10 @@
+import type * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
+import type { DropdownMenuItem } from '../dropdown-menu.js';
+type MenuPrimitive = Pick<typeof DropdownPrimitive, 'Item' | 'Separator' | 'Sub' | 'SubTrigger' | 'SubContent' | 'Portal'>;
+export declare function MenuItems({ primitive: Primitive, items, itemVariant, className, }: {
+    primitive: MenuPrimitive;
+    items: readonly DropdownMenuItem[];
+    itemVariant: 'default' | 'ghost';
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/internal/menu-items.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Mantiene idéntica la composición de ambos menús sin reemplazar la intención de puntero de Radix. */
+import { useEffect, useRef, useState } from 'react';
+import { cx } from '../utils.js';
+import { menuItemFocusProps } from './menu-item-focus.js';
+import { useOverlayLayer } from './overlay-layer.js';
+export function MenuItems({ primitive: Primitive, items, itemVariant, className, }) {
+    return (_jsx(_Fragment, { children: items.map((item) => {
+            if (item.type === 'separator')
+                return _jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id);
+            const itemClass = cx('dgm-dropdown-item', (item.variant ?? itemVariant) === 'ghost' && 'dgm-dropdown-item--ghost', item.danger && 'dgm-dropdown-item--danger');
+            const content = (_jsxs(_Fragment, { children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.type === 'submenu' ? (_jsx("svg", { className: "dgm-dropdown-chevron", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) })) : (item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut })))] }));
+            if (item.type !== 'submenu')
+                return (_jsx(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: itemClass, children: content }, item.id));
+            return (_jsx(Submenu, { primitive: Primitive, item: item, itemVariant: itemVariant, className: className, itemClass: itemClass, children: content }, item.id));
+        }) }));
+}
+/** Solo Escape se adapta: Radix cierra toda la raíz por defecto; aquí conserva los niveles padres. */
+function Submenu({ primitive: Primitive, item, itemVariant, className, itemClass, children, }) {
+    const [open, setOpen] = useState(false);
+    const trigger = useRef(null);
+    const leaveTimer = useRef(undefined);
+    const cancelLeave = () => clearTimeout(leaveTimer.current);
+    // Radix conserva su corredor de intención entre paneles; el cierre exterior espera
+    // a que el puntero pueda entrar en cualquiera de las dos superficies.
+    const scheduleLeave = (event) => {
+        if (event.pointerType !== 'mouse')
+            return;
+        cancelLeave();
+        leaveTimer.current = setTimeout(() => setOpen(false), 400);
+    };
+    useEffect(() => cancelLeave, []);
+    const { style } = useOverlayLayer();
+    return (_jsxs(Primitive.Sub, { open: open, onOpenChange: (next) => {
+            cancelLeave();
+            setOpen(next);
+        }, children: [_jsx(Primitive.SubTrigger, { ref: trigger, onPointerEnter: cancelLeave, onPointerLeave: scheduleLeave, textValue: item.label, disabled: item.disabled, className: itemClass, children: children }), _jsx(Primitive.Portal, { children: _jsx(Primitive.SubContent, { ...menuItemFocusProps, onPointerEnter: cancelLeave, onPointerLeave: scheduleLeave, style: style, sideOffset: 6, collisionPadding: 12, className: cx('dgm-dropdown', className), onEscapeKeyDown: (event) => {
+                        event.preventDefault();
+                        cancelLeave();
+                        setOpen(false);
+                        trigger.current?.focus({ preventScroll: true });
+                    }, onContextMenu: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }, children: _jsx(MenuItems, { primitive: Primitive, items: item.items, itemVariant: itemVariant, className: className }) }) })] }));
+}

package/dist/styles.css

@@ -1651,8 +1651,8 @@ button.dgm-step:hover:not(:disabled),
 .dgm-dropdown {
   box-sizing: border-box;
   z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);
-  min-width: min(12rem, calc(100vw - 1.5rem));
-  max-width: min(24rem, calc(100vw - 1.5rem));
+  min-width: min(12rem, var(--radix-popper-available-width, calc(100vw - 1.5rem)));
+  max-width: min(24rem, calc(100vw - 1.5rem), var(--radix-popper-available-width));
   max-height: var(--radix-dropdown-menu-content-available-height);
   overflow-y: auto;
   padding: var(--dgm-list-padding);
@@ -2191,6 +2191,14 @@ button.dgm-step:hover:not(:disabled),
   }
 }
 
+/* La flecha no reduce el texto de categorías largas ni cambia sus métricas al abrir. */
+.dgm-dropdown-chevron {
+  flex-shrink: 0;
+}
+.dgm-dropdown-chevron:dir(rtl) {
+  transform: rotate(180deg);
+}
+
 /* Componentes compuestos: esta hoja se distribuye unida a styles.css, sin imports adicionales. */
 .dgm-visually-hidden,
 .dgm-form-value {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danielgm-ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Accessible React components for Next.js and the web.",
   "repository": {
     "type": "git",