@zauru-sdk/components 2.1.1 → 2.3.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.
 
+# [2.3.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.2.0...v2.3.0) (2025-06-27)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+# [2.2.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.1.1...v2.2.0) (2025-06-26)
+
+
+### Features
+
+* updating payee relations ([f133cbd](https://github.com/intuitiva/zauru-typescript-sdk/commit/f133cbdbd633330571fe99b1c775fbb900c1caba))
+
+
+
+
+
 ## [2.1.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.1.0...v2.1.1) (2025-06-18)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Buttons/Button.d.ts

@@ -1,3 +1,8 @@
+type DropdownOption = {
+    label: string;
+    value: string;
+    onClick: () => void;
+};
 type Props = {
     type?: "reset" | "button" | "submit" | undefined;
     title?: string;
@@ -11,6 +16,8 @@ type Props = {
     disabled?: boolean;
     enableFormErrorsValidation?: boolean;
     enableFormErrorsDescriptions?: boolean;
+    dropdownOptions?: DropdownOption[];
+    dropdownTitle?: string;
 };
 export declare const Button: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/Buttons/Button.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
+import { useState, useRef, useEffect } from "react";
 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, } = 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);
+    const dropdownRef = useRef(null);
     const formContext = useFormContext();
     const formHasErrors = formContext ? !formContext.formState.isValid : false;
     const formErrors = formContext ? formContext.formState.errors : {};
@@ -58,13 +61,38 @@ export const Button = (props) => {
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = (_jsx("button", { type: type, name: "action", value: name, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `${loading || disabled || (enableFormErrorsValidation && formHasErrors)
-            ? " bg-opacity-25 "
-            : ""} ${loading
-            ? " cursor-progress"
-            : `${disabled || (enableFormErrorsValidation && formHasErrors)
-                ? ""
-                : `hover:${color.bg700}`}`} inline-flex justify-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 ?? title }));
+    // Manejar click fuera del dropdown
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    const isButtonDisabled = loading || disabled || (enableFormErrorsValidation && formHasErrors);
+    const hasDropdown = dropdownOptions.length > 0;
+    // Si no hay opciones de dropdown, comportamiento normal
+    if (!hasDropdown) {
+        const buttonContent = (_jsx("button", { type: type, name: "action", value: name, disabled: isButtonDisabled, onClick: onClickSave, className: `${isButtonDisabled ? " bg-opacity-25 " : ""} ${loading
+                ? " cursor-progress"
+                : `${isButtonDisabled ? "" : `hover:${color.bg700}`}`} inline-flex justify-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 ?? title }));
+        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, buttonContent] }));
+    }
+    // Comportamiento con dropdown
+    const dropdownContent = (_jsxs("div", { className: "relative inline-block text-left", ref: dropdownRef, children: [_jsx("div", { children: _jsxs("button", { type: "button", disabled: isButtonDisabled, onClick: () => setIsDropdownOpen(!isDropdownOpen), className: `${isButtonDisabled ? " bg-opacity-25 " : ""} ${loading
+                        ? " cursor-progress"
+                        : `${isButtonDisabled ? "" : `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 && (_jsx("div", { 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, index) => (_jsx("button", { type: "button", onClick: () => {
+                            option.onClick();
+                            setIsDropdownOpen(false);
+                        }, className: "block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left", children: option.label }, index))) }) }))] }));
     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, buttonContent] }));
+                (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": "2.1.1",
+  "version": "2.3.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -35,11 +35,11 @@
     "@rails/activestorage": "^8.0.200",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^2.1.1",
-    "@zauru-sdk/hooks": "^2.1.1",
+    "@zauru-sdk/common": "^2.2.0",
+    "@zauru-sdk/hooks": "^2.2.0",
     "@zauru-sdk/icons": "^2.0.188",
-    "@zauru-sdk/types": "^2.1.1",
-    "@zauru-sdk/utils": "^2.1.1",
+    "@zauru-sdk/types": "^2.2.0",
+    "@zauru-sdk/utils": "^2.3.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
@@ -52,5 +52,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "6f082bf26e4d521870f887a8576a2c6f41d13392"
+  "gitHead": "c0a2ddf3c3c2b5ba8da9e7c7a3a40043a64688d3"
 }

package/src/Buttons/Button.tsx

@@ -1,5 +1,12 @@
 import type { ColorInterface } from "../NavBar/NavBar.types.js";
 import { useFormContext } from "react-hook-form";
+import { useState, useRef, useEffect } from "react";
+
+type DropdownOption = {
+  label: string;
+  value: string;
+  onClick: () => void;
+};
 
 type Props = {
   type?: "reset" | "button" | "submit" | undefined;
@@ -15,6 +22,9 @@ type Props = {
   disabled?: boolean;
   enableFormErrorsValidation?: boolean;
   enableFormErrorsDescriptions?: boolean;
+  // Nuevas props para dropdown
+  dropdownOptions?: DropdownOption[];
+  dropdownTitle?: string;
 };
 
 export const Button = (props: Props) => {
@@ -31,8 +41,13 @@ export const Button = (props: Props) => {
     disabled = false,
     enableFormErrorsValidation = false,
     enableFormErrorsDescriptions = false,
+    dropdownOptions = [],
+    dropdownTitle,
   } = props;
 
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
   const formContext = useFormContext();
   const formHasErrors = formContext ? !formContext.formState.isValid : false;
   const formErrors = formContext ? formContext.formState.errors : {};
@@ -93,35 +108,123 @@ export const Button = (props: Props) => {
         .join(", ")
     : "";
 
-  const buttonContent = (
-    <button
-      type={type}
-      name={"action"}
-      value={name}
-      disabled={
-        loading || disabled || (enableFormErrorsValidation && formHasErrors)
+  // Manejar click fuera del dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
       }
-      onClick={onClickSave}
-      className={`${
-        loading || disabled || (enableFormErrorsValidation && formHasErrors)
-          ? " bg-opacity-25 "
-          : ""
-      } ${
-        loading
-          ? " cursor-progress"
-          : `${
-              disabled || (enableFormErrorsValidation && formHasErrors)
-                ? ""
-                : `hover:${color.bg700}`
-            }`
-      } inline-flex justify-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}`}
-    >
-      {loading ? children ?? loadingText : children ?? title}
-    </button>
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const isButtonDisabled =
+    loading || disabled || (enableFormErrorsValidation && formHasErrors);
+  const hasDropdown = dropdownOptions.length > 0;
+
+  // Si no hay opciones de dropdown, comportamiento normal
+  if (!hasDropdown) {
+    const buttonContent = (
+      <button
+        type={type}
+        name={"action"}
+        value={name}
+        disabled={isButtonDisabled}
+        onClick={onClickSave}
+        className={`${isButtonDisabled ? " bg-opacity-25 " : ""} ${
+          loading
+            ? " cursor-progress"
+            : `${isButtonDisabled ? "" : `hover:${color.bg700}`}`
+        } inline-flex justify-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}`}
+      >
+        {loading ? children ?? loadingText : children ?? title}
+      </button>
+    );
+
+    return (
+      <>
+        {(enableFormErrorsValidation && formHasErrors && errorMessage) ||
+        (enableFormErrorsDescriptions && errorMessage) ? (
+          <div className="flex flex-col items-end mb-2">
+            <div className="p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm">
+              <p className="text-sm">{errorMessage}</p>
+            </div>
+          </div>
+        ) : null}
+        {buttonContent}
+      </>
+    );
+  }
+
+  // Comportamiento con dropdown
+  const dropdownContent = (
+    <div className="relative inline-block text-left" ref={dropdownRef}>
+      <div>
+        <button
+          type="button"
+          disabled={isButtonDisabled}
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+          className={`${isButtonDisabled ? " bg-opacity-25 " : ""} ${
+            loading
+              ? " cursor-progress"
+              : `${isButtonDisabled ? "" : `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}`}
+        >
+          {loading
+            ? children ?? loadingText
+            : children ?? dropdownTitle ?? title}
+          <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"
+          >
+            <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"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {isDropdownOpen && (
+        <div 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">
+          <div className="py-1">
+            {dropdownOptions.map((option, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={() => {
+                  option.onClick();
+                  setIsDropdownOpen(false);
+                }}
+                className="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left"
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
   );
 
   return (
@@ -134,7 +237,7 @@ export const Button = (props: Props) => {
           </div>
         </div>
       ) : null}
-      {buttonContent}
+      {dropdownContent}
     </>
   );
 };