@zauru-sdk/components 1.0.110 → 1.0.111

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.111](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.110...v1.0.111) (2024-09-19)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.110](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.109...v1.0.110) (2024-09-18)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Buttons/Button.d.ts

@@ -11,6 +11,7 @@ type Props = {
     className?: string;
     disabled?: boolean;
     enableFormErrorsValidation?: boolean;
+    enableFormErrorsDescriptions?: boolean;
 };
 export declare const Button: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/NavBar/NavBar.d.ts

@@ -1,2 +1,2 @@
 import type { NavBarProps } from "./NavBar.types.js";
-export declare const NavBar: ({ title, loggedIn, items, selectedColor, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/NavBar/NavBar.types.d.ts

@@ -12,6 +12,7 @@ export type NavBarProps = {
     items: Array<NavBarItemsSchema>;
     selectedColor: "pink" | "purple" | "slate" | "green" | "yellow" | "red" | "sky";
     LinkComponent?: any;
+    version?: string;
 };
 export type NavBarStateProps = {
     NavBarOpen: boolean;
@@ -41,10 +42,3 @@ export type EntityProps = {
     color: ColorInterface;
     options: any[];
 };
-export type DropDownLinkButtonType = {
-    text: string;
-    path: string;
-    icon?: any;
-    buttonHover?: string;
-    LinkComponent?: any;
-};

package/dist/Table/ZauruTable.d.ts

@@ -1,5 +1,4 @@
 import type { TableProps } from "react-data-table-component";
-import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types.js";
 type Props = TableProps<any> & {
     columns: any;
     conditionalRowStyles?: any;
@@ -14,10 +13,6 @@ type Props = TableProps<any> & {
     search?: {
         placeholderSearch?: string;
     };
-    expandable?: {
-        expandableRowExpanded?: (row: any) => boolean;
-        expandableRowsComponent?: ExpandableRowsComponent<any>;
-    };
     theme?: "solarized" | "subTable";
     className?: string;
 };

package/dist/cjs/Buttons/Button.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const WithTooltip_js_1 = require("../WithTooltip/WithTooltip.js");
 const react_hook_form_1 = require("react-hook-form");
 const Button = (props) => {
-    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, enableFormErrorsValidation = true, } = 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 formContext = (0, react_hook_form_1.useFormContext)();
     const formHasErrors = formContext ? !formContext.formState.isValid : false;
     const formErrors = formContext ? formContext.formState.errors : {};
@@ -45,7 +44,7 @@ const Button = (props) => {
     };
     const color = COLORS[selectedColor];
     const inside = children ?? title;
-    const errorMessage = enableFormErrorsValidation && formHasErrors
+    const errorMessage = formHasErrors
         ? Object.values(formErrors)
             .map((error) => error?.message?.toString())
             .join(", ")
@@ -57,6 +56,7 @@ const Button = (props) => {
             : `${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 ? loadingText : inside }));
-    return enableFormErrorsValidation && formHasErrors ? ((0, jsx_runtime_1.jsx)(WithTooltip_js_1.WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
+                (enableFormErrorsDescriptions && errorMessage) ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-end mb-2", children: (0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
 };
 exports.Button = Button;

package/dist/cjs/NavBar/NavBar.js

@@ -1,20 +1,64 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const icons_1 = require("@zauru-sdk/icons");
 const NavBar_utils_js_1 = require("./NavBar.utils.js");
 const react_2 = require("@remix-run/react");
-const DropDownLinkButton = ({ text, path, icon, buttonHover, }) => ((0, jsx_runtime_1.jsx)(react_2.Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${buttonHover ?? ""} dark:hover:bg-gray-700 dark:hover:text-white`, to: path, prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [icon, (0, jsx_runtime_1.jsx)("span", { children: text })] }) }));
 const OptionsDropDownButton = ({ color, options, name }) => {
     const [showOptionsMenu, setShowOptionsMenu] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "nav-item ml-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-block", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? (0, jsx_runtime_1.jsx)(icons_1.OpcionButtonSvgIcon, {}), (0, jsx_runtime_1.jsx)(icons_1.DropDownArrowSvgIcon, {})] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option) => option) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "nav-item ml-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-block", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? (0, jsx_runtime_1.jsx)(icons_1.OpcionButtonSvgIcon, {}), (0, jsx_runtime_1.jsx)(icons_1.DropDownArrowSvgIcon, {})] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: option }, index))) })] }) }) }));
 };
-const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => ((0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: childrens.length > 0 ? ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => ((0, jsx_runtime_1.jsx)(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : ((0, jsx_runtime_1.jsx)("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: (0, jsx_runtime_1.jsx)(react_2.Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [icon, (0, jsx_runtime_1.jsx)("span", { children: name })] }) }) })) }));
-const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
+const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => ((0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: childrens.length > 0 ? ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => ((0, jsx_runtime_1.jsx)(react_2.Link, { to: x.link, className: "hover:bg-red-100", children: x.name }, index))) })) : ((0, jsx_runtime_1.jsx)("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: (0, jsx_runtime_1.jsx)(react_2.Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [icon, (0, jsx_runtime_1.jsx)("span", { children: name })] }) }) })) }));
+const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
     const color = NavBar_utils_js_1.COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = (0, react_1.useState)(false);
+    const [isDarkMode, setIsDarkMode] = (0, react_1.useState)(false);
+    const [currentVersion, setCurrentVersion] = (0, react_1.useState)(version);
+    const navigate = (0, react_2.useNavigate)();
+    (0, react_1.useEffect)(() => {
+        if (isDarkMode) {
+            document.documentElement.classList.add("dark");
+        }
+        else {
+            document.documentElement.classList.remove("dark");
+        }
+    }, [isDarkMode]);
+    (0, react_1.useEffect)(() => {
+        if (version !== currentVersion) {
+            setCurrentVersion(version);
+        }
+    }, [version, currentVersion]);
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+    };
+    const refreshPage = () => {
+        navigate(0);
+    };
     const renderNavItems = (items) => ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col lg:flex-row w-full", children: items.map((item, index) => {
             const specialColor = item.color
                 ? NavBar_utils_js_1.COLORS[item.color]
@@ -24,8 +68,9 @@ const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
                 }) }, index));
         }) }));
     const options = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items.filter((item) => item.loggedIn === loggedIn)) }), (0, jsx_runtime_1.jsx)("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { color: color, options: [
-                        (0, jsx_runtime_1.jsx)(DropDownLinkButton, { text: "Cerrar Sesi\u00F3n", path: "/logout", icon: (0, jsx_runtime_1.jsx)(icons_1.LogoutDropDownSvgIcon, {}), buttonHover: "hover:bg-red-100" }, 0),
+                        (0, jsx_runtime_1.jsx)(react_2.Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/logout", prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [(0, jsx_runtime_1.jsx)(icons_1.LogoutDropDownSvgIcon, {}), (0, jsx_runtime_1.jsx)("span", { children: "Cerrar sesi\u00F3n" })] }) }),
+                        (0, jsx_runtime_1.jsx)("button", { className: `block w-full text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white`, onClick: toggleDarkMode, children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [isDarkMode ? "🌞" : "🌙", (0, jsx_runtime_1.jsx)("span", { children: isDarkMode ? "Modo Claro" : "Modo Oscuro" })] }) }),
                     ] })) })] }));
-    return ((0, jsx_runtime_1.jsx)("nav", { className: `py-3 ${color.bg600}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between ml-5 mr-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full lg:w-auto", children: [(0, jsx_runtime_1.jsx)(react_2.Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-block mr-2 mb-2 align-middle", children: (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), (0, jsx_runtime_1.jsx)("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: (0, jsx_runtime_1.jsx)(icons_1.MenuAlt4Svg, { open: NavBarOpen }) })] }), (0, jsx_runtime_1.jsx)("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: options }) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
+    return ((0, jsx_runtime_1.jsx)("nav", { className: `py-3 ${color.bg600} dark:bg-gray-800`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between ml-5 mr-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center w-full lg:w-auto", children: [(0, jsx_runtime_1.jsx)(react_2.Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-block mr-2 mb-2 align-middle", children: (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), version !== currentVersion && ((0, jsx_runtime_1.jsx)("button", { className: `ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`, onClick: refreshPage, children: "\uD83D\uDD04 Actualizar versi\u00F3n" })), (0, jsx_runtime_1.jsx)("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: (0, jsx_runtime_1.jsx)(icons_1.MenuAlt4Svg, { open: NavBarOpen }) })] }), (0, jsx_runtime_1.jsx)("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} dark:bg-gray-900 shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: options }) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };
 exports.NavBar = NavBar;

package/dist/cjs/Table/ZauruTable.js

@@ -113,7 +113,7 @@ const customStyles = {
 });
 //Documentación de la tabla https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
 const ZauruTable = (props) => {
-    const { columns, conditionalRowStyles, data, loading = false, pagination, search, expandable, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
+    const { columns, conditionalRowStyles, data, loading = false, pagination, search, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
     const [, setSearchParams] = (0, react_1.useSearchParams)({
         page: "1",
         perPage: "10",
@@ -179,7 +179,7 @@ const ZauruTable = (props) => {
     };
     const loadSubHeader = !!(search || offlineSearch.length > 0);
     const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
-    return ((0, jsx_runtime_1.jsx)(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
+    return ((0, jsx_runtime_1.jsx)(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
             ? pagination.rowsPerPageOptions
             : [10, 50, 100], ...others }));
 };

package/dist/esm/Buttons/Button.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { WithTooltip } from "../WithTooltip/WithTooltip.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 export const Button = (props) => {
-    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, enableFormErrorsValidation = true, } = 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 formContext = useFormContext();
     const formHasErrors = formContext ? !formContext.formState.isValid : false;
     const formErrors = formContext ? formContext.formState.errors : {};
@@ -42,7 +41,7 @@ export const Button = (props) => {
     };
     const color = COLORS[selectedColor];
     const inside = children ?? title;
-    const errorMessage = enableFormErrorsValidation && formHasErrors
+    const errorMessage = formHasErrors
         ? Object.values(formErrors)
             .map((error) => error?.message?.toString())
             .join(", ")
@@ -54,5 +53,6 @@ export const Button = (props) => {
             : `${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 ? loadingText : inside }));
-    return enableFormErrorsValidation && formHasErrors ? (_jsx(WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
+    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] }));
 };

package/dist/esm/NavBar/NavBar.js

@@ -1,17 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "@zauru-sdk/icons";
 import { COLORS } from "./NavBar.utils.js";
-import { Link } from "@remix-run/react";
-const DropDownLinkButton = ({ text, path, icon, buttonHover, }) => (_jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${buttonHover ?? ""} dark:hover:bg-gray-700 dark:hover:text-white`, to: path, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: text })] }) }));
+import { Link, useNavigate } from "@remix-run/react";
 const OptionsDropDownButton = ({ color, options, name }) => {
     const [showOptionsMenu, setShowOptionsMenu] = useState(true);
-    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option) => option) })] }) }) }));
+    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
 };
-const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => (_jsx(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : (_jsx("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
-export const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
+const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => (_jsx(Link, { to: x.link, className: "hover:bg-red-100", children: x.name }, index))) })) : (_jsx("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
+export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);
+    const [isDarkMode, setIsDarkMode] = useState(false);
+    const [currentVersion, setCurrentVersion] = useState(version);
+    const navigate = useNavigate();
+    useEffect(() => {
+        if (isDarkMode) {
+            document.documentElement.classList.add("dark");
+        }
+        else {
+            document.documentElement.classList.remove("dark");
+        }
+    }, [isDarkMode]);
+    useEffect(() => {
+        if (version !== currentVersion) {
+            setCurrentVersion(version);
+        }
+    }, [version, currentVersion]);
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+    };
+    const refreshPage = () => {
+        navigate(0);
+    };
     const renderNavItems = (items) => (_jsx("div", { className: "flex flex-col lg:flex-row w-full", children: items.map((item, index) => {
             const specialColor = item.color
                 ? COLORS[item.color]
@@ -21,7 +42,8 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
                 }) }, index));
         }) }));
     const options = (_jsxs(_Fragment, { children: [_jsx("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items.filter((item) => item.loggedIn === loggedIn)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
-                        _jsx(DropDownLinkButton, { text: "Cerrar Sesi\u00F3n", path: "/logout", icon: _jsx(LogoutDropDownSvgIcon, {}), buttonHover: "hover:bg-red-100" }, 0),
+                        _jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/logout", prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }),
+                        _jsx("button", { className: `block w-full text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white`, onClick: toggleDarkMode, children: _jsxs("div", { className: "mx-auto pt-2", children: [isDarkMode ? "🌞" : "🌙", _jsx("span", { children: isDarkMode ? "Modo Claro" : "Modo Oscuro" })] }) }),
                     ] })) })] }));
-    return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
+    return (_jsx("nav", { className: `py-3 ${color.bg600} dark:bg-gray-800`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between items-center w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), version !== currentVersion && (_jsx("button", { className: `ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`, onClick: refreshPage, children: "\uD83D\uDD04 Actualizar versi\u00F3n" })), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} dark:bg-gray-900 shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };

package/dist/esm/Table/ZauruTable.js

@@ -87,7 +87,7 @@ createTheme("subTable", {
 });
 //Documentación de la tabla https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
 export const ZauruTable = (props) => {
-    const { columns, conditionalRowStyles, data, loading = false, pagination, search, expandable, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
+    const { columns, conditionalRowStyles, data, loading = false, pagination, search, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
     const [, setSearchParams] = useSearchParams({
         page: "1",
         perPage: "10",
@@ -153,7 +153,7 @@ export const ZauruTable = (props) => {
     };
     const loadSubHeader = !!(search || offlineSearch.length > 0);
     const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
-    return (_jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
+    return (_jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
             ? pagination.rowsPerPageOptions
             : [10, 50, 100], ...others }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.110",
+  "version": "1.0.111",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -38,7 +38,7 @@
     "@zauru-sdk/hooks": "^1.0.110",
     "@zauru-sdk/icons": "^1.0.60",
     "@zauru-sdk/types": "^1.0.109",
-    "@zauru-sdk/utils": "^1.0.110",
+    "@zauru-sdk/utils": "^1.0.111",
     "framer-motion": "^11.0.8",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -50,5 +50,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "15d8ecf97b16b9c4bd50b8a5984435b451a846e5"
+  "gitHead": "0ba44e89c12e146c8f0c3bd7a4604e0ccda29b1e"
 }

package/src/Buttons/Button.tsx

@@ -1,4 +1,3 @@
-import { WithTooltip } from "../WithTooltip/WithTooltip.js";
 import type { ColorInterface } from "../NavBar/NavBar.types.js";
 import { useFormContext } from "react-hook-form";
 
@@ -15,6 +14,7 @@ type Props = {
   className?: string;
   disabled?: boolean;
   enableFormErrorsValidation?: boolean;
+  enableFormErrorsDescriptions?: boolean;
 };
 
 export const Button = (props: Props) => {
@@ -29,7 +29,8 @@ export const Button = (props: Props) => {
     children,
     className = "",
     disabled = false,
-    enableFormErrorsValidation = true,
+    enableFormErrorsValidation = false,
+    enableFormErrorsDescriptions = false,
   } = props;
 
   const formContext = useFormContext();
@@ -75,12 +76,11 @@ export const Button = (props: Props) => {
 
   const inside = children ?? title;
 
-  const errorMessage =
-    enableFormErrorsValidation && formHasErrors
-      ? Object.values(formErrors)
-          .map((error) => error?.message?.toString())
-          .join(", ")
-      : "";
+  const errorMessage = formHasErrors
+    ? Object.values(formErrors)
+        .map((error) => error?.message?.toString())
+        .join(", ")
+    : "";
 
   const buttonContent = (
     <button
@@ -113,9 +113,17 @@ export const Button = (props: Props) => {
     </button>
   );
 
-  return enableFormErrorsValidation && formHasErrors ? (
-    <WithTooltip text={errorMessage}>{buttonContent}</WithTooltip>
-  ) : (
-    buttonContent
+  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}
+    </>
   );
 };

package/src/NavBar/NavBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   DropDownArrowSvgIcon,
   LogoutDropDownSvgIcon,
@@ -8,33 +8,12 @@ import {
 import { COLORS } from "./NavBar.utils.js";
 import type {
   ColorInterface,
-  DropDownLinkButtonType,
   EntityProps,
   NavBarItemsSchema,
   NavBarProps,
   NavItemProps,
 } from "./NavBar.types.js";
-import { Link } from "@remix-run/react";
-
-const DropDownLinkButton = ({
-  text,
-  path,
-  icon,
-  buttonHover,
-}: DropDownLinkButtonType) => (
-  <Link
-    className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${
-      buttonHover ?? ""
-    } dark:hover:bg-gray-700 dark:hover:text-white`}
-    to={path}
-    prefetch="none"
-  >
-    <div className="mx-auto pt-2">
-      {icon}
-      <span>{text}</span>
-    </div>
-  </Link>
-);
+import { Link, useNavigate } from "@remix-run/react";
 
 const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
   const [showOptionsMenu, setShowOptionsMenu] = useState(true);
@@ -55,7 +34,9 @@ const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
             hidden={showOptionsMenu}
             onMouseLeave={() => setShowOptionsMenu(true)}
           >
-            {options.map((option) => option)}
+            {options.map((option, index) => (
+              <React.Fragment key={index}>{option}</React.Fragment>
+            ))}
           </div>
         </div>
       </div>
@@ -77,12 +58,9 @@ const NavItem = ({
         name={name}
         color={color}
         options={childrens.map((x, index) => (
-          <DropDownLinkButton
-            key={index}
-            text={x.name}
-            path={x.link}
-            buttonHover="hover:bg-red-100"
-          />
+          <Link key={index} to={x.link} className="hover:bg-red-100">
+            {x.name}
+          </Link>
         ))}
       />
     ) : (
@@ -111,9 +89,35 @@ export const NavBar = ({
   loggedIn,
   items,
   selectedColor,
+  version,
 }: NavBarProps) => {
   const color: ColorInterface = COLORS[selectedColor];
   const [NavBarOpen, setNavBarOpen] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [currentVersion, setCurrentVersion] = useState(version);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [isDarkMode]);
+
+  useEffect(() => {
+    if (version !== currentVersion) {
+      setCurrentVersion(version);
+    }
+  }, [version, currentVersion]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  const refreshPage = () => {
+    navigate(0);
+  };
 
   const renderNavItems = (items: NavBarItemsSchema[]) => (
     <div className="flex flex-col lg:flex-row w-full">
@@ -148,13 +152,25 @@ export const NavBar = ({
           <OptionsDropDownButton
             color={color}
             options={[
-              <DropDownLinkButton
-                key={0}
-                text="Cerrar Sesión"
-                path="/logout"
-                icon={<LogoutDropDownSvgIcon />}
-                buttonHover="hover:bg-red-100"
-              />,
+              <Link
+                className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`}
+                to="/logout"
+                prefetch="none"
+              >
+                <div className="mx-auto pt-2">
+                  {<LogoutDropDownSvgIcon />}
+                  <span>Cerrar sesión</span>
+                </div>
+              </Link>,
+              <button
+                className={`block w-full text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white`}
+                onClick={toggleDarkMode}
+              >
+                <div className="mx-auto pt-2">
+                  {isDarkMode ? "🌞" : "🌙"}
+                  <span>{isDarkMode ? "Modo Claro" : "Modo Oscuro"}</span>
+                </div>
+              </button>,
             ]}
           />
         )}
@@ -163,9 +179,9 @@ export const NavBar = ({
   );
 
   return (
-    <nav className={`py-3 ${color.bg600}`}>
+    <nav className={`py-3 ${color.bg600} dark:bg-gray-800`}>
       <div className="flex items-center justify-between ml-5 mr-5">
-        <div className="flex justify-between w-full lg:w-auto">
+        <div className="flex justify-between items-center w-full lg:w-auto">
           <Link
             className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
             to={"/home"}
@@ -183,6 +199,14 @@ export const NavBar = ({
               </>
             }
           />
+          {version !== currentVersion && (
+            <button
+              className={`ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`}
+              onClick={refreshPage}
+            >
+              🔄 Actualizar versión
+            </button>
+          )}
           <button
             className={`rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`}
             aria-label="Toggle mobile menu"
@@ -196,7 +220,7 @@ export const NavBar = ({
         <div
           className={`lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${
             color.bg700
-          } shadow-lg transform ${
+          } dark:bg-gray-900 shadow-lg transform ${
             NavBarOpen ? "translate-x-0" : "-translate-x-full"
           } transition-transform duration-300 ease-in-out overflow-y-auto`}
         >

package/src/NavBar/NavBar.types.ts

@@ -20,6 +20,7 @@ export type NavBarProps = {
     | "red"
     | "sky";
   LinkComponent?: any;
+  version?: string;
 };
 
 export type NavBarStateProps = {
@@ -54,11 +55,3 @@ export type EntityProps = {
   color: ColorInterface;
   options: any[];
 };
-
-export type DropDownLinkButtonType = {
-  text: string;
-  path: string;
-  icon?: any;
-  buttonHover?: string;
-  LinkComponent?: any;
-};

package/src/Table/ZauruTable.tsx

@@ -9,7 +9,6 @@ import { createTheme } from "react-data-table-component";
 import { SearchSVG } from "@zauru-sdk/icons";
 import * as ReactDataTableComponent from "react-data-table-component";
 const DataTable = ReactDataTableComponent.default as any;
-import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types.js";
 
 const customStyles: TableStyles = {
   headCells: {
@@ -108,10 +107,6 @@ type Props = TableProps<any> & {
   search?: {
     placeholderSearch?: string;
   };
-  expandable?: {
-    expandableRowExpanded?: (row: any) => boolean;
-    expandableRowsComponent?: ExpandableRowsComponent<any>;
-  };
   theme?: "solarized" | "subTable";
   className?: string;
 };
@@ -125,7 +120,6 @@ export const ZauruTable = (props: Props) => {
     loading = false,
     pagination,
     search,
-    expandable,
     theme,
     className,
     offlineSearch = [],
@@ -249,13 +243,6 @@ export const ZauruTable = (props: Props) => {
       persistTableHead
       responsive
       noHeader
-      expandableRows={!!expandable}
-      expandableRowExpanded={
-        expandable ? expandable.expandableRowExpanded : undefined
-      }
-      expandableRowsComponent={
-        expandable ? expandable.expandableRowsComponent : undefined
-      }
       subHeader={loadSubHeader}
       subHeaderComponent={subHeaderComponent}
       paginationServer={!!pagination}