@zauru-sdk/components 6.11.0 → 6.12.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.12.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.11.1...@zauru-sdk/components@6.12.0) (2026-10-07)
+
+
+### Features
+
+* agregar submenús anidados al dropdown de Button ([8bf8c5e](https://github.com/intuitiva/zauru-typescript-sdk/commit/8bf8c5ecb80d03cb10f806d912f148084576d655))
+
+
+
+
+
+## [6.11.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.11.0...@zauru-sdk/components@6.11.1) (2026-10-07)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 # [6.11.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.10.0...@zauru-sdk/components@6.11.0) (2026-10-05)
 
 

package/dist/Buttons/Button.d.ts

@@ -1,17 +1,19 @@
+import { type MouseEvent as ReactMouseEvent, type ReactNode } from "react";
 export type DropdownOption = {
     label: string;
     value: string;
-    onClick: () => void;
+    onClick?: () => void;
+    children?: DropdownOption[];
 };
 type Props = {
     type?: "reset" | "button" | "submit" | undefined;
     title?: string;
     name?: string;
-    onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClickSave?: (e: ReactMouseEvent<HTMLButtonElement>) => void;
     loading?: boolean;
     loadingText?: string;
     selectedColor?: "indigo" | "green" | "red" | "yellow" | "gray";
-    children?: React.ReactNode;
+    children?: ReactNode;
     className?: string;
     disabled?: boolean;
     enableFormErrorsValidation?: boolean;

package/dist/esm/Buttons/Button.js

@@ -1,6 +1,75 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
-import { useState, useRef, useEffect } from "react";
+import { useEffect, useRef, useState, } from "react";
+const SUBMENU_OPEN_DELAY_MS = 150;
+const SUBMENU_CLOSE_DELAY_MS = 200;
+const prefersReducedMotion = () => typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const DropdownMenuItem = ({ option, onLeafClick }) => {
+    const hasChildren = Boolean(option.children?.length);
+    const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+    const openTimerRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const clearTimers = () => {
+        if (openTimerRef.current != null) {
+            window.clearTimeout(openTimerRef.current);
+            openTimerRef.current = null;
+        }
+        if (closeTimerRef.current != null) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
+    useEffect(() => {
+        return () => {
+            clearTimers();
+        };
+    }, []);
+    const openSubmenu = (immediate = false) => {
+        if (!hasChildren)
+            return;
+        clearTimers();
+        if (immediate || prefersReducedMotion()) {
+            setIsSubmenuOpen(true);
+            return;
+        }
+        openTimerRef.current = window.setTimeout(() => {
+            setIsSubmenuOpen(true);
+        }, SUBMENU_OPEN_DELAY_MS);
+    };
+    const closeSubmenu = (immediate = false) => {
+        clearTimers();
+        if (immediate || prefersReducedMotion()) {
+            setIsSubmenuOpen(false);
+            return;
+        }
+        closeTimerRef.current = window.setTimeout(() => {
+            setIsSubmenuOpen(false);
+        }, SUBMENU_CLOSE_DELAY_MS);
+    };
+    const handleClick = () => {
+        if (hasChildren) {
+            setIsSubmenuOpen((open) => !open);
+            return;
+        }
+        option.onClick?.();
+        onLeafClick();
+    };
+    const handleKeyDown = (event) => {
+        if (!hasChildren)
+            return;
+        if (event.key === "ArrowRight" || event.key === "Enter") {
+            event.preventDefault();
+            openSubmenu(true);
+        }
+        if (event.key === "ArrowLeft" || event.key === "Escape") {
+            event.preventDefault();
+            closeSubmenu(true);
+        }
+    };
+    const itemClassName = "flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:ring-2 focus:ring-indigo-500 focus:ring-inset motion-reduce:transition-none";
+    return (_jsxs("div", { className: "relative", onMouseEnter: () => openSubmenu(), onMouseLeave: () => closeSubmenu(), children: [_jsxs("button", { type: "button", role: "menuitem", "aria-haspopup": hasChildren ? "menu" : undefined, "aria-expanded": hasChildren ? isSubmenuOpen : undefined, onClick: handleClick, onKeyDown: handleKeyDown, className: itemClassName, children: [_jsx("span", { children: option.label }), hasChildren ? (_jsx("svg", { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-gray-500", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) })) : null] }), hasChildren && isSubmenuOpen ? (_jsx("div", { role: "menu", className: "absolute right-full top-0 z-20 mr-1 w-56 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", children: option.children?.map((child) => (_jsx(DropdownMenuItem, { option: child, onLeafClick: onLeafClick }, child.value))) })) : null] }));
+};
 export const Button = (props) => {
     const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, enableFormErrorsValidation = false, enableFormErrorsDescriptions = false, dropdownOptions = [], dropdownTitle, } = props;
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -69,9 +138,16 @@ export const Button = (props) => {
                 setIsDropdownOpen(false);
             }
         };
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                setIsDropdownOpen(false);
+            }
+        };
         document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleEscape);
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleEscape);
         };
     }, []);
     const isButtonDisabled = loading || disabled || (enableFormErrorsValidation && formHasErrors);
@@ -89,10 +165,7 @@ export const Button = (props) => {
                         ? " cursor-progress"
                         : `${isButtonDisabled ? " cursor-not-allowed" : `cursor-pointer hover:${color.bg700}`}`} inline-flex justify-center items-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: [loading
                             ? children ?? loadingText
-                            : children ?? dropdownTitle ?? title, _jsx("svg", { className: `ml-2 -mr-1 h-4 w-4 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }) }), isDropdownOpen && !isButtonDisabled ? (_jsx("div", { role: "menu", className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", children: _jsx("div", { className: "py-1", children: dropdownOptions.map((option) => (_jsx("button", { type: "button", role: "menuitem", onClick: () => {
-                            option.onClick();
-                            setIsDropdownOpen(false);
-                        }, className: "block w-full cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left", children: option.label }, option.value))) }) })) : null] }));
+                            : children ?? dropdownTitle ?? title, _jsx("svg", { className: `ml-2 -mr-1 h-4 w-4 transition-transform motion-reduce:transition-none ${isDropdownOpen ? "rotate-180" : ""}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }) }), isDropdownOpen && !isButtonDisabled ? (_jsx("div", { role: "menu", className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", children: _jsx("div", { className: "py-1", children: dropdownOptions.map((option) => (_jsx(DropdownMenuItem, { option: option, onLeafClick: () => setIsDropdownOpen(false) }, option.value))) }) })) : null] }));
     return (_jsxs(_Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                 (enableFormErrorsDescriptions && errorMessage) ? (_jsx("div", { className: "flex flex-col items-end mb-2", children: _jsx("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: _jsx("p", { className: "text-sm", children: errorMessage }) }) })) : null, dropdownContent] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.11.0",
+  "version": "6.12.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.8.5",
-    "@zauru-sdk/hooks": "^6.3.18",
+    "@zauru-sdk/common": "^6.8.6",
+    "@zauru-sdk/hooks": "^6.3.19",
     "@zauru-sdk/icons": "^6.1.0",
-    "@zauru-sdk/redux": "^6.5.16",
-    "@zauru-sdk/types": "^6.23.0",
-    "@zauru-sdk/utils": "^6.22.0",
+    "@zauru-sdk/redux": "^6.5.17",
+    "@zauru-sdk/types": "^6.24.0",
+    "@zauru-sdk/utils": "^6.22.1",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "885c1d44afb4c5717ae823664b37ac48b30283db"
+  "gitHead": "9ab463da344ee7b835fc9e1367d75d70f357ac1a"
 }

package/src/Buttons/Button.tsx

@@ -1,23 +1,163 @@
 import type { ColorInterface } from "../NavBar/NavBar.types.js";
 import { useFormContext } from "react-hook-form";
-import { useState, useRef, useEffect } from "react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+} from "react";
 
 export type DropdownOption = {
   label: string;
   value: string;
-  onClick: () => void;
+  onClick?: () => void;
+  children?: DropdownOption[];
+};
+
+const SUBMENU_OPEN_DELAY_MS = 150;
+const SUBMENU_CLOSE_DELAY_MS = 200;
+
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+type DropdownMenuItemProps = {
+  option: DropdownOption;
+  onLeafClick: () => void;
+};
+
+const DropdownMenuItem = ({ option, onLeafClick }: DropdownMenuItemProps) => {
+  const hasChildren = Boolean(option.children?.length);
+  const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+  const openTimerRef = useRef<number | null>(null);
+  const closeTimerRef = useRef<number | null>(null);
+
+  const clearTimers = () => {
+    if (openTimerRef.current != null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current != null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      clearTimers();
+    };
+  }, []);
+
+  const openSubmenu = (immediate = false) => {
+    if (!hasChildren) return;
+    clearTimers();
+    if (immediate || prefersReducedMotion()) {
+      setIsSubmenuOpen(true);
+      return;
+    }
+    openTimerRef.current = window.setTimeout(() => {
+      setIsSubmenuOpen(true);
+    }, SUBMENU_OPEN_DELAY_MS);
+  };
+
+  const closeSubmenu = (immediate = false) => {
+    clearTimers();
+    if (immediate || prefersReducedMotion()) {
+      setIsSubmenuOpen(false);
+      return;
+    }
+    closeTimerRef.current = window.setTimeout(() => {
+      setIsSubmenuOpen(false);
+    }, SUBMENU_CLOSE_DELAY_MS);
+  };
+
+  const handleClick = () => {
+    if (hasChildren) {
+      setIsSubmenuOpen((open) => !open);
+      return;
+    }
+    option.onClick?.();
+    onLeafClick();
+  };
+
+  const handleKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+    if (!hasChildren) return;
+    if (event.key === "ArrowRight" || event.key === "Enter") {
+      event.preventDefault();
+      openSubmenu(true);
+    }
+    if (event.key === "ArrowLeft" || event.key === "Escape") {
+      event.preventDefault();
+      closeSubmenu(true);
+    }
+  };
+
+  const itemClassName =
+    "flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:ring-2 focus:ring-indigo-500 focus:ring-inset motion-reduce:transition-none";
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => openSubmenu()}
+      onMouseLeave={() => closeSubmenu()}
+    >
+      <button
+        type="button"
+        role="menuitem"
+        aria-haspopup={hasChildren ? "menu" : undefined}
+        aria-expanded={hasChildren ? isSubmenuOpen : undefined}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        className={itemClassName}
+      >
+        <span>{option.label}</span>
+        {hasChildren ? (
+          <svg
+            aria-hidden="true"
+            className="h-4 w-4 shrink-0 text-gray-500"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        ) : null}
+      </button>
+      {hasChildren && isSubmenuOpen ? (
+        <div
+          role="menu"
+          className="absolute right-full top-0 z-20 mr-1 w-56 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          {option.children?.map((child) => (
+            <DropdownMenuItem
+              key={child.value}
+              option={child}
+              onLeafClick={onLeafClick}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
 };
 
 type Props = {
   type?: "reset" | "button" | "submit" | undefined;
   title?: string;
   name?: string;
-  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onClickSave?: (e: ReactMouseEvent<HTMLButtonElement>) => void;
   //Cargando...
   loading?: boolean;
   loadingText?: string;
   selectedColor?: "indigo" | "green" | "red" | "yellow" | "gray";
-  children?: React.ReactNode;
+  children?: ReactNode;
   className?: string;
   disabled?: boolean;
   enableFormErrorsValidation?: boolean;
@@ -119,9 +259,17 @@ export const Button = (props: Props) => {
       }
     };
 
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsDropdownOpen(false);
+      }
+    };
+
     document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, []);
 
@@ -191,12 +339,13 @@ export const Button = (props: Props) => {
             ? children ?? loadingText
             : children ?? dropdownTitle ?? title}
           <svg
-            className={`ml-2 -mr-1 h-4 w-4 transition-transform ${
+            className={`ml-2 -mr-1 h-4 w-4 transition-transform motion-reduce:transition-none ${
               isDropdownOpen ? "rotate-180" : ""
             }`}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"
+            aria-hidden="true"
           >
             <path
               fillRule="evenodd"
@@ -214,18 +363,11 @@ export const Button = (props: Props) => {
         >
           <div className="py-1">
             {dropdownOptions.map((option) => (
-              <button
+              <DropdownMenuItem
                 key={option.value}
-                type="button"
-                role="menuitem"
-                onClick={() => {
-                  option.onClick();
-                  setIsDropdownOpen(false);
-                }}
-                className="block w-full cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left"
-              >
-                {option.label}
-              </button>
+                option={option}
+                onLeafClick={() => setIsDropdownOpen(false)}
+              />
             ))}
           </div>
         </div>