@zauru-sdk/components 6.19.1 → 6.19.2

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 (6) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/Form/DatePicker/index.js +2 -2
  3. package/dist/esm/Form/TimePicker/index.js +2 -2
  4. package/package.json +2 -2
  5. package/src/Form/DatePicker/index.tsx +2 -2
  6. package/src/Form/TimePicker/index.tsx +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.19.2](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.19.1...@zauru-sdk/components@6.19.2) (2026-10-31)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **components:** mostrar tooltips de fecha y hora por encima de otros campos ([f8647e8](https://github.com/intuitiva/zauru-typescript-sdk/commit/f8647e8da1eb7d81c5be13ec639338559d37721d))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [6.19.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.19.0...@zauru-sdk/components@6.19.1) (2026-10-31)
7
18
 
8
19
 
package/dist/esm/Form/DatePicker/index.js CHANGED
@@ -23,11 +23,11 @@ export const FormDatePicker = (props) => {
23
23
  setValue("");
24
24
  onChange && onChange("");
25
25
  };
26
- return (_jsxs("div", { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(CalendarIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "date", value: value ?? "", pattern: "\\d{4}-\\d{2}-\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`, ...(register ?? {}), name: name, onChange: (e) => {
26
+ return (_jsxs("div", { className: showTooltip ? "relative z-50" : "relative", children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(CalendarIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "date", value: value ?? "", pattern: "\\d{4}-\\d{2}-\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`, ...(register ?? {}), name: name, onChange: (e) => {
27
27
  setValue(e.target.value);
28
28
  onChange && onChange(e.target.value);
29
29
  if (register) {
30
30
  register.onChange(e);
31
31
  }
32
- } }), value && isClearable && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
32
+ } }), value && isClearable && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 z-50 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
33
33
  };
package/dist/esm/Form/TimePicker/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
3
3
  import { useEffect, useState } from "react";
4
4
  import { useFormContext } from "react-hook-form";
@@ -30,5 +30,5 @@ export const FormTimePicker = (props) => {
30
30
  register.onChange(e);
31
31
  }
32
32
  };
33
- return (_jsxs(_Fragment, { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(ClockIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "time", value: value, pattern: "\\d{2}:\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`, ...(register ?? {}), name: name, onChange: handleOnChange }), value && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
33
+ return (_jsxs("div", { className: showTooltip ? "relative z-50" : "relative", children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(ClockIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "time", value: value, pattern: "\\d{2}:\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`, ...(register ?? {}), name: name, onChange: handleOnChange }), value && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 z-50 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
34
34
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zauru-sdk/components",
3
- "version": "6.19.1",
3
+ "version": "6.19.2",
4
4
  "description": "Componentes reutilizables en las WebApps de Zauru.",
5
5
  "main": "./dist/esm/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -62,5 +62,5 @@
62
62
  "styled-components": "^5.3.5",
63
63
  "zod": "^3.23.8"
64
64
  },
65
- "gitHead": "08f14cc3a87fabe1b2dfe678b9fdeb32ed4aaaef"
65
+ "gitHead": "376b5afd123ab7078d3d92315a09d9a26ed12ea2"
66
66
  }
package/src/Form/DatePicker/index.tsx CHANGED
@@ -61,7 +61,7 @@ export const FormDatePicker = (props: Props) => {
61
61
  };
62
62
 
63
63
  return (
64
- <div>
64
+ <div className={showTooltip ? "relative z-50" : "relative"}>
65
65
  {title && (
66
66
  <label
67
67
  htmlFor={error ? `${name}-error` : `${name}-success`}
@@ -110,7 +110,7 @@ export const FormDatePicker = (props: Props) => {
110
110
  >
111
111
  <IdeaIconSVG />
112
112
  {showTooltip && (
113
- <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black">
113
+ <div className="absolute -left-48 top-0 z-50 mt-8 p-2 bg-white border rounded shadow text-black">
114
114
  {helpText}
115
115
  </div>
116
116
  )}
package/src/Form/TimePicker/index.tsx CHANGED
@@ -65,7 +65,7 @@ export const FormTimePicker = (props: Props) => {
65
65
  };
66
66
 
67
67
  return (
68
- <>
68
+ <div className={showTooltip ? "relative z-50" : "relative"}>
69
69
  {title && (
70
70
  <label
71
71
  htmlFor={error ? `${name}-error` : `${name}-success`}
@@ -108,7 +108,7 @@ export const FormTimePicker = (props: Props) => {
108
108
  >
109
109
  <IdeaIconSVG />
110
110
  {showTooltip && (
111
- <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black">
111
+ <div className="absolute -left-48 top-0 z-50 mt-8 p-2 bg-white border rounded shadow text-black">
112
112
  {helpText}
113
113
  </div>
114
114
  )}
@@ -128,6 +128,6 @@ export const FormTimePicker = (props: Props) => {
128
128
  {hint}
129
129
  </p>
130
130
  )}
131
- </>
131
+ </div>
132
132
  );
133
133
  };