@zauru-sdk/components 2.0.46 → 2.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/Alerts/ComponentError/index.d.ts +4 -0
  3. package/dist/Alerts/index.d.ts +1 -0
  4. package/dist/DynamicTable/GenericDynamicTable.d.ts +2 -0
  5. package/dist/Layouts/errorLayout/index.d.ts +2 -1
  6. package/dist/SidePanel/index.d.ts +2 -2
  7. package/dist/esm/Alerts/ComponentError/index.js +6 -0
  8. package/dist/esm/Alerts/index.js +1 -0
  9. package/dist/esm/DynamicTable/GenericDynamicTable.js +183 -173
  10. package/dist/esm/Form/SelectField/index.js +7 -17
  11. package/dist/esm/Layouts/errorLayout/index.js +7 -3
  12. package/dist/esm/SidePanel/index.js +1 -2
  13. package/package.json +3 -3
  14. package/src/Alerts/ComponentError/index.tsx +48 -0
  15. package/src/Alerts/index.ts +1 -0
  16. package/src/DynamicTable/GenericDynamicTable.tsx +388 -368
  17. package/src/Form/SelectField/index.tsx +7 -18
  18. package/src/Layouts/errorLayout/index.tsx +28 -3
  19. package/src/SidePanel/index.tsx +1 -3
package/src/Form/SelectField/index.tsx CHANGED
@@ -61,7 +61,6 @@ export const SelectField = (props: Props) => {
61
61
  const selectRef = useRef<HTMLDivElement>(null);
62
62
  const optionsRef = useRef<HTMLUListElement>(null);
63
63
  const [isTabPressed, setIsTabPressed] = useState<boolean>(false);
64
- const [isEnterPressed, setIsEnterPressed] = useState<boolean>(false);
65
64
  const [isSearching, setIsSearching] = useState<boolean>(false);
66
65
  const {
67
66
  register: tempRegister,
@@ -145,6 +144,9 @@ export const SelectField = (props: Props) => {
145
144
  setFormValue(name || "", option.value);
146
145
  }
147
146
  }
147
+ setHighlightedIndex(-1);
148
+ setIsSearching(false);
149
+ setFilteredOptions([]);
148
150
  setIsOpen(false);
149
151
  };
150
152
 
@@ -167,25 +169,13 @@ export const SelectField = (props: Props) => {
167
169
 
168
170
  const handleBlur = () => {
169
171
  setTimeout(() => {
170
- if (
171
- isTabPressed &&
172
- filteredOptions.length > 0 &&
173
- !isEnterPressed &&
174
- isSearching
175
- ) {
176
- if (highlightedIndex >= 0) {
177
- handleOptionClick(filteredOptions[highlightedIndex]);
178
- } else {
179
- handleOptionClick(filteredOptions[0]);
180
- }
181
- } else if (isTabPressed) {
182
- if (highlightedIndex >= 0) {
183
- handleOptionClick(filteredOptions[highlightedIndex]);
184
- }
172
+ if (isTabPressed && highlightedIndex >= 0) {
173
+ handleOptionClick(filteredOptions[highlightedIndex]);
174
+ } else if (isTabPressed && filteredOptions.length > 0 && isSearching) {
175
+ handleOptionClick(filteredOptions[0]);
185
176
  }
186
177
 
187
178
  setIsTabPressed(false);
188
- setIsEnterPressed(false);
189
179
  setIsSearching(false);
190
180
  setIsOpen(false);
191
181
  }, 200);
@@ -208,7 +198,6 @@ export const SelectField = (props: Props) => {
208
198
  scrollToHighlightedOption();
209
199
  } else if (e.key === "Enter" && highlightedIndex !== -1) {
210
200
  e.preventDefault();
211
- setIsEnterPressed(true);
212
201
  handleOptionClick(filteredOptions[highlightedIndex]);
213
202
  } else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
214
203
  e.preventDefault();
package/src/Layouts/errorLayout/index.tsx CHANGED
@@ -6,9 +6,17 @@ import {
6
6
  useRouteError,
7
7
  Link,
8
8
  } from "@remix-run/react";
9
+ import { useState } from "react";
9
10
 
10
- export const ErrorLayout = ({ from }: { from?: string }) => {
11
+ export const ErrorLayout = ({
12
+ from,
13
+ error: parentError,
14
+ }: {
15
+ from?: string;
16
+ error?: Error;
17
+ }) => {
11
18
  const error = useRouteError();
19
+ const [showDetails, setShowDetails] = useState(!!parentError);
12
20
 
13
21
  return (
14
22
  <html lang="es" className="bg-gray-900 text-white">
@@ -22,7 +30,7 @@ export const ErrorLayout = ({ from }: { from?: string }) => {
22
30
  <body className="min-h-screen flex flex-col items-center justify-center p-4">
23
31
  <img src="/logo.png" alt="Zauru Logo" className="mb-8 h-20" />
24
32
  <h1 className="text-5xl font-extrabold text-red-500 mb-6">¡Ups!</h1>
25
- <div className="w-full max-w-2xl">
33
+ <div className="w-full max-w-2xl flex flex-col items-center">
26
34
  <p className="text-2xl text-gray-300 mb-8 text-center">
27
35
  {isRouteErrorResponse(error)
28
36
  ? `Error ${error.status}: ${error.statusText}`
@@ -35,6 +43,23 @@ export const ErrorLayout = ({ from }: { from?: string }) => {
35
43
  Error lanzado desde: {from}
36
44
  </p>
37
45
  )}
46
+ {parentError && (
47
+ <div className="mb-4 text-center">
48
+ <button
49
+ onClick={() => setShowDetails(!showDetails)}
50
+ className="text-blue-400 hover:text-blue-300 transition duration-300"
51
+ >
52
+ {showDetails ? "Ocultar detalles" : "Ver más detalles"}
53
+ </button>
54
+ {showDetails && (
55
+ <p className="mt-2 text-gray-400 text-sm">
56
+ {parentError instanceof Error
57
+ ? parentError.message
58
+ : String(parentError)}
59
+ </p>
60
+ )}
61
+ </div>
62
+ )}
38
63
  </div>
39
64
  <Link
40
65
  to="/"
@@ -42,7 +67,7 @@ export const ErrorLayout = ({ from }: { from?: string }) => {
42
67
  >
43
68
  Regresar al inicio
44
69
  </Link>
45
- <div className="mt-12 text-gray-500">
70
+ <div className="mt-12 text-gray-500 text-center">
46
71
  <p>Si el problema persiste, por favor contacta a soporte.</p>
47
72
  </div>
48
73
  <Scripts />
package/src/SidePanel/index.tsx CHANGED
@@ -69,7 +69,7 @@ const FilterIcon = () => (
69
69
  </svg>
70
70
  );
71
71
 
72
- const SidePanel: React.FC<SidePanelProps> = ({
72
+ export const SidePanel: React.FC<SidePanelProps> = ({
73
73
  children,
74
74
  closeOnClickOutside = true,
75
75
  widthPercentage = 25,
@@ -149,5 +149,3 @@ const SidePanel: React.FC<SidePanelProps> = ({
149
149
  </>
150
150
  );
151
151
  };
152
-
153
- export default SidePanel;