next-helios-fe 1.8.53 → 1.8.55

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 (23) hide show
  1. package/dist/components/tooltip/index.d.ts +1 -0
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/form/input/checkbox.tsx +6 -8
  5. package/src/components/form/input/color.tsx +8 -10
  6. package/src/components/form/input/date.tsx +8 -10
  7. package/src/components/form/input/email.tsx +5 -6
  8. package/src/components/form/input/file.tsx +2 -2
  9. package/src/components/form/input/number.tsx +2 -2
  10. package/src/components/form/input/password.tsx +5 -6
  11. package/src/components/form/input/radio.tsx +6 -8
  12. package/src/components/form/input/range.tsx +2 -2
  13. package/src/components/form/input/text.tsx +5 -6
  14. package/src/components/form/input/time.tsx +8 -10
  15. package/src/components/form/other/autocomplete.tsx +8 -10
  16. package/src/components/form/other/multipleSelect.tsx +8 -10
  17. package/src/components/form/other/phoneNumber.tsx +8 -10
  18. package/src/components/form/other/pin.tsx +8 -10
  19. package/src/components/form/other/rating.tsx +8 -10
  20. package/src/components/form/other/secret.tsx +8 -10
  21. package/src/components/form/other/select.tsx +8 -10
  22. package/src/components/form/other/textarea.tsx +5 -6
  23. package/src/components/tooltip/index.tsx +7 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.53",
3
+ "version": "1.8.55",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/checkbox.tsx CHANGED
@@ -54,14 +54,12 @@ export const Checkbox: React.FC<CheckboxProps> = ({
54
54
  {label}
55
55
  </span>
56
56
  {description && (
57
- <div className="ms-auto">
58
- <Tooltip content={description}>
59
- <Icon
60
- icon="octicon:info-16"
61
- className="text-sm text-primary-dark"
62
- />
63
- </Tooltip>
64
- </div>
57
+ <Tooltip content={description}>
58
+ <Icon
59
+ icon="octicon:info-16"
60
+ className="text-sm text-primary-dark"
61
+ />
62
+ </Tooltip>
65
63
  )}
66
64
  </div>
67
65
  )}
package/src/components/form/input/color.tsx CHANGED
@@ -49,9 +49,9 @@ export const Color: React.FC<ColorProps> = ({
49
49
  }, [tempValue]);
50
50
 
51
51
  return (
52
- <label className={`grid gap-2 ${width}`}>
52
+ <label className={`flex flex-col gap-2 ${width}`}>
53
53
  {(label || description) && (
54
- <div className="flex items-center">
54
+ <div className="flex justify-between items-center gap-2">
55
55
  {label && (
56
56
  <span
57
57
  className={`text-sm select-none ${
@@ -63,14 +63,12 @@ export const Color: React.FC<ColorProps> = ({
63
63
  </span>
64
64
  )}
65
65
  {description && (
66
- <div className="ms-auto">
67
- <Tooltip content={description}>
68
- <Icon
69
- icon="octicon:info-16"
70
- className="text-sm text-primary-dark"
71
- />
72
- </Tooltip>
73
- </div>
66
+ <Tooltip content={description}>
67
+ <Icon
68
+ icon="octicon:info-16"
69
+ className="text-sm text-primary-dark"
70
+ />
71
+ </Tooltip>
74
72
  )}
75
73
  </div>
76
74
  )}
package/src/components/form/input/date.tsx CHANGED
@@ -86,9 +86,9 @@ export const Date: React.FC<DateProps> = ({
86
86
 
87
87
  return (
88
88
  <div className="flex items-end">
89
- <label className={`grid gap-2 ${width}`}>
89
+ <label className={`flex flex-col gap-2 ${width}`}>
90
90
  {(label || description) && (
91
- <div className="flex items-center">
91
+ <div className="flex justify-between items-center gap-2">
92
92
  {label && (
93
93
  <span
94
94
  className={`text-sm select-none ${
@@ -100,14 +100,12 @@ export const Date: React.FC<DateProps> = ({
100
100
  </span>
101
101
  )}
102
102
  {description && (
103
- <div className="ms-auto">
104
- <Tooltip content={description}>
105
- <Icon
106
- icon="octicon:info-16"
107
- className="text-sm text-primary-dark"
108
- />
109
- </Tooltip>
110
- </div>
103
+ <Tooltip content={description}>
104
+ <Icon
105
+ icon="octicon:info-16"
106
+ className="text-sm text-primary-dark"
107
+ />
108
+ </Tooltip>
111
109
  )}
112
110
  </div>
113
111
  )}
package/src/components/form/input/email.tsx CHANGED
@@ -29,11 +29,10 @@ export const Email: React.FC<EmailProps> = ({
29
29
  : "py-1.5";
30
30
 
31
31
  return (
32
- <label className={`grid gap-2 ${width}`}>
32
+ <label className={`flex flex-col gap-2 ${width}`}>
33
33
  {(label ||
34
- (!options?.hideInputDetail &&
35
- (rest.minLength || rest.maxLength || description))) && (
36
- <div className="flex items-center">
34
+ (!options?.hideInputDetail && (rest.maxLength || description))) && (
35
+ <div className="flex items-center gap-2">
37
36
  {label && (
38
37
  <span
39
38
  className={`text-sm select-none ${
@@ -46,9 +45,9 @@ export const Email: React.FC<EmailProps> = ({
46
45
  )}
47
46
  {!options?.hideInputDetail && (
48
47
  <div className="flex-1 flex justify-end items-center gap-2">
49
- {(rest.minLength || rest.maxLength) && (
48
+ {rest.maxLength && (
50
49
  <span className="text-sm select-none">
51
- {rest.minLength || 0}/{rest.maxLength || "∞"}
50
+ {((rest.value as String) || "").length || 0}/{rest.maxLength}
52
51
  </span>
53
52
  )}
54
53
  {description && (
package/src/components/form/input/file.tsx CHANGED
@@ -58,7 +58,7 @@ export const File: React.FC<FileProps> = ({
58
58
 
59
59
  return (
60
60
  <label
61
- className={`grid gap-2 ${width} ${
61
+ className={`flex flex-col gap-2 ${width} ${
62
62
  options?.height === "full" && "h-full"
63
63
  }`}
64
64
  >
@@ -66,7 +66,7 @@ export const File: React.FC<FileProps> = ({
66
66
  (label ||
67
67
  (!options?.hideInputDetail &&
68
68
  (options?.maxSizeInMb || description))) && (
69
- <div className="flex items-center">
69
+ <div className="flex items-center gap-2">
70
70
  {label && (
71
71
  <span
72
72
  className={`text-sm select-none ${
package/src/components/form/input/number.tsx CHANGED
@@ -30,11 +30,11 @@ export const Number: React.FC<NumberProps> = ({
30
30
  : "py-1.5";
31
31
 
32
32
  return (
33
- <label className={`grid gap-2 ${width}`}>
33
+ <label className={`flex flex-col gap-2 ${width}`}>
34
34
  {(label ||
35
35
  (!options?.hideInputDetail &&
36
36
  (rest.min || rest.max || description))) && (
37
- <div className="flex items-center">
37
+ <div className="flex items-center gap-2">
38
38
  {label && (
39
39
  <span
40
40
  className={`text-sm select-none ${
package/src/components/form/input/password.tsx CHANGED
@@ -30,11 +30,10 @@ export const Password: React.FC<PasswordProps> = ({
30
30
  : "py-1.5";
31
31
 
32
32
  return (
33
- <label className={`grid gap-2 ${width}`}>
33
+ <label className={`flex flex-col gap-2 ${width}`}>
34
34
  {(label ||
35
- (!options?.hideInputDetail &&
36
- (rest.minLength || rest.maxLength || description))) && (
37
- <div className="flex items-center">
35
+ (!options?.hideInputDetail && (rest.maxLength || description))) && (
36
+ <div className="flex items-center gap-2">
38
37
  {label && (
39
38
  <span
40
39
  className={`text-sm select-none ${
@@ -47,9 +46,9 @@ export const Password: React.FC<PasswordProps> = ({
47
46
  )}
48
47
  {!options?.hideInputDetail && (
49
48
  <div className="flex-1 flex justify-end items-center gap-2">
50
- {(rest.minLength || rest.maxLength) && (
49
+ {rest.maxLength && (
51
50
  <span className="text-sm select-none">
52
- {rest.minLength || 0}/{rest.maxLength || "∞"}
51
+ {((rest.value as String) || "").length || 0}/{rest.maxLength}
53
52
  </span>
54
53
  )}
55
54
  {description && (
package/src/components/form/input/radio.tsx CHANGED
@@ -53,14 +53,12 @@ export const Radio: React.FC<RadioProps> = ({
53
53
  {label}
54
54
  </span>
55
55
  {description && (
56
- <div className="ms-auto">
57
- <Tooltip content={description}>
58
- <Icon
59
- icon="octicon:info-16"
60
- className="text-sm text-primary-dark"
61
- />
62
- </Tooltip>
63
- </div>
56
+ <Tooltip content={description}>
57
+ <Icon
58
+ icon="octicon:info-16"
59
+ className="text-sm text-primary-dark"
60
+ />
61
+ </Tooltip>
64
62
  )}
65
63
  </div>
66
64
  )}
package/src/components/form/input/range.tsx CHANGED
@@ -25,11 +25,11 @@ export const Range: React.FC<RangeProps> = ({
25
25
  const width = options?.width === "fit" ? "w-fit" : "w-full";
26
26
 
27
27
  return (
28
- <label className={`grid gap-2 ${width}`}>
28
+ <label className={`flex flex-col gap-2 ${width}`}>
29
29
  {(label ||
30
30
  (!options?.hideInputDetail &&
31
31
  (rest.min || rest.max || description))) && (
32
- <div className="flex items-center">
32
+ <div className="flex items-center gap-2">
33
33
  {label && (
34
34
  <span
35
35
  className={`text-sm select-none ${
package/src/components/form/input/text.tsx CHANGED
@@ -28,11 +28,10 @@ export const Text: React.FC<TextProps> = ({
28
28
  : "py-1.5";
29
29
 
30
30
  return (
31
- <label className={`grid gap-2 ${width}`}>
31
+ <label className={`flex flex-col gap-2 ${width}`}>
32
32
  {(label ||
33
- (!options?.hideInputDetail &&
34
- (rest.minLength || rest.maxLength || description))) && (
35
- <div className="flex items-center">
33
+ (!options?.hideInputDetail && (rest.maxLength || description))) && (
34
+ <div className="flex items-center gap-2">
36
35
  {label && (
37
36
  <span
38
37
  className={`text-sm select-none ${
@@ -45,9 +44,9 @@ export const Text: React.FC<TextProps> = ({
45
44
  )}
46
45
  {!options?.hideInputDetail && (
47
46
  <div className="flex-1 flex justify-end items-center gap-2">
48
- {(rest.minLength || rest.maxLength) && (
47
+ {rest.maxLength && (
49
48
  <span className="text-sm select-none">
50
- {rest.minLength || 0}/{rest.maxLength || "∞"}
49
+ {((rest.value as String) || "").length || 0}/{rest.maxLength}
51
50
  </span>
52
51
  )}
53
52
  {description && (
package/src/components/form/input/time.tsx CHANGED
@@ -158,9 +158,9 @@ export const Time: React.FC<TimeProps> = ({
158
158
 
159
159
  return (
160
160
  <div className="flex items-end">
161
- <label className={`grid gap-2 ${width}`}>
161
+ <label className={`flex flex-col gap-2 ${width}`}>
162
162
  {(label || description) && (
163
- <div className="flex items-center">
163
+ <div className="flex justify-between items-center gap-2">
164
164
  {label && (
165
165
  <span
166
166
  className={`text-sm select-none ${
@@ -172,14 +172,12 @@ export const Time: React.FC<TimeProps> = ({
172
172
  </span>
173
173
  )}
174
174
  {description && (
175
- <div className="ms-auto">
176
- <Tooltip content={description}>
177
- <Icon
178
- icon="octicon:info-16"
179
- className="text-sm text-primary-dark"
180
- />
181
- </Tooltip>
182
- </div>
175
+ <Tooltip content={description}>
176
+ <Icon
177
+ icon="octicon:info-16"
178
+ className="text-sm text-primary-dark"
179
+ />
180
+ </Tooltip>
183
181
  )}
184
182
  </div>
185
183
  )}
package/src/components/form/other/autocomplete.tsx CHANGED
@@ -109,9 +109,9 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
109
109
  }, [rest.value, rest.defaultValue]);
110
110
 
111
111
  return (
112
- <label className={`grid gap-2 ${width}`}>
112
+ <label className={`flex flex-col gap-2 ${width}`}>
113
113
  {(label || description) && (
114
- <div className="flex items-center">
114
+ <div className="flex justify-between items-center gap-2">
115
115
  {label && (
116
116
  <span
117
117
  className={`text-sm select-none ${
@@ -123,14 +123,12 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
123
123
  </span>
124
124
  )}
125
125
  {description && (
126
- <div className="ms-auto">
127
- <Tooltip content={description}>
128
- <Icon
129
- icon="octicon:info-16"
130
- className="text-sm text-primary-dark"
131
- />
132
- </Tooltip>
133
- </div>
126
+ <Tooltip content={description}>
127
+ <Icon
128
+ icon="octicon:info-16"
129
+ className="text-sm text-primary-dark"
130
+ />
131
+ </Tooltip>
134
132
  )}
135
133
  </div>
136
134
  )}
package/src/components/form/other/multipleSelect.tsx CHANGED
@@ -103,9 +103,9 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
103
103
 
104
104
  return (
105
105
  <div className="flex flex-row-reverse items-end">
106
- <label className={`grid gap-2 ${width}`}>
106
+ <label className={`flex flex-col gap-2 ${width}`}>
107
107
  {(label || description) && (
108
- <div className="flex items-center">
108
+ <div className="flex justify-between items-center gap-2">
109
109
  {label && (
110
110
  <span
111
111
  className={`text-sm select-none ${
@@ -116,14 +116,12 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
116
116
  </span>
117
117
  )}
118
118
  {description && (
119
- <div className="ms-auto">
120
- <Tooltip content={description}>
121
- <Icon
122
- icon="octicon:info-16"
123
- className="text-sm text-primary-dark"
124
- />
125
- </Tooltip>
126
- </div>
119
+ <Tooltip content={description}>
120
+ <Icon
121
+ icon="octicon:info-16"
122
+ className="text-sm text-primary-dark"
123
+ />
124
+ </Tooltip>
127
125
  )}
128
126
  </div>
129
127
  )}
package/src/components/form/other/phoneNumber.tsx CHANGED
@@ -1513,9 +1513,9 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1513
1513
 
1514
1514
  return (
1515
1515
  <div className="flex flex-row-reverse items-end">
1516
- <label className={`grid gap-2 ${width}`}>
1516
+ <label className={`flex flex-col gap-2 ${width}`}>
1517
1517
  {(label || description) && (
1518
- <div className="flex items-center">
1518
+ <div className="flex justify-between items-center gap-2">
1519
1519
  {label && (
1520
1520
  <span
1521
1521
  className={`text-sm select-none ${
@@ -1527,14 +1527,12 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1527
1527
  </span>
1528
1528
  )}
1529
1529
  {description && (
1530
- <div className="ms-auto">
1531
- <Tooltip content={description}>
1532
- <Icon
1533
- icon="octicon:info-16"
1534
- className="text-sm text-primary-dark"
1535
- />
1536
- </Tooltip>
1537
- </div>
1530
+ <Tooltip content={description}>
1531
+ <Icon
1532
+ icon="octicon:info-16"
1533
+ className="text-sm text-primary-dark"
1534
+ />
1535
+ </Tooltip>
1538
1536
  )}
1539
1537
  </div>
1540
1538
  )}
package/src/components/form/other/pin.tsx CHANGED
@@ -29,9 +29,9 @@ export const Pin: React.FC<PinProps> = ({
29
29
  : "py-1.5";
30
30
 
31
31
  return (
32
- <label className="grid gap-2 w-fit">
32
+ <label className="flex flex-col gap-2 w-fit">
33
33
  {(label || description) && (
34
- <div className="flex items-center">
34
+ <div className="flex justify-between items-center gap-2">
35
35
  {label && (
36
36
  <span
37
37
  className={`text-sm select-none ${
@@ -43,14 +43,12 @@ export const Pin: React.FC<PinProps> = ({
43
43
  </span>
44
44
  )}
45
45
  {description && (
46
- <div className="ms-auto">
47
- <Tooltip content={description}>
48
- <Icon
49
- icon="octicon:info-16"
50
- className="text-sm text-primary-dark"
51
- />
52
- </Tooltip>
53
- </div>
46
+ <Tooltip content={description}>
47
+ <Icon
48
+ icon="octicon:info-16"
49
+ className="text-sm text-primary-dark"
50
+ />
51
+ </Tooltip>
54
52
  )}
55
53
  </div>
56
54
  )}
package/src/components/form/other/rating.tsx CHANGED
@@ -44,9 +44,9 @@ export const Rating: React.FC<RatingProps> = ({
44
44
  }, [rest.value, rest.defaultValue]);
45
45
 
46
46
  return (
47
- <div className="grid gap-2 w-fit">
47
+ <div className="flex flex-col gap-2 w-fit">
48
48
  {(label || description) && (
49
- <div className="flex items-center">
49
+ <div className="flex justify-between items-center gap-2">
50
50
  {label && (
51
51
  <span
52
52
  className={`text-sm select-none ${
@@ -58,14 +58,12 @@ export const Rating: React.FC<RatingProps> = ({
58
58
  </span>
59
59
  )}
60
60
  {description && (
61
- <div className="ms-auto">
62
- <Tooltip content={description}>
63
- <Icon
64
- icon="octicon:info-16"
65
- className="text-sm text-primary-dark"
66
- />
67
- </Tooltip>
68
- </div>
61
+ <Tooltip content={description}>
62
+ <Icon
63
+ icon="octicon:info-16"
64
+ className="text-sm text-primary-dark"
65
+ />
66
+ </Tooltip>
69
67
  )}
70
68
  </div>
71
69
  )}
package/src/components/form/other/secret.tsx CHANGED
@@ -33,9 +33,9 @@ export const Secret: React.FC<SecretProps> = ({
33
33
  : "py-1.5";
34
34
 
35
35
  return (
36
- <label className={`grid gap-2 ${width}`}>
36
+ <label className={`flex flex-col gap-2 ${width}`}>
37
37
  {(label || description) && (
38
- <div className="flex items-center">
38
+ <div className="flex justify-between items-center gap-2">
39
39
  {label && (
40
40
  <span
41
41
  className={`text-sm select-none ${
@@ -47,14 +47,12 @@ export const Secret: React.FC<SecretProps> = ({
47
47
  </span>
48
48
  )}
49
49
  {description && (
50
- <div className="ms-auto">
51
- <Tooltip content={description}>
52
- <Icon
53
- icon="octicon:info-16"
54
- className="text-sm text-primary-dark"
55
- />
56
- </Tooltip>
57
- </div>
50
+ <Tooltip content={description}>
51
+ <Icon
52
+ icon="octicon:info-16"
53
+ className="text-sm text-primary-dark"
54
+ />
55
+ </Tooltip>
58
56
  )}
59
57
  </div>
60
58
  )}
package/src/components/form/other/select.tsx CHANGED
@@ -75,9 +75,9 @@ export const Select: React.FC<SelectProps> = ({
75
75
 
76
76
  return (
77
77
  <div className="flex flex-row-reverse items-end">
78
- <label className={`grid gap-2 ${width}`}>
78
+ <label className={`flex flex-col gap-2 ${width}`}>
79
79
  {(label || description) && (
80
- <div className="flex items-center">
80
+ <div className="flex justify-between items-center gap-2">
81
81
  {label && (
82
82
  <span
83
83
  className={`text-sm select-none ${
@@ -89,14 +89,12 @@ export const Select: React.FC<SelectProps> = ({
89
89
  </span>
90
90
  )}
91
91
  {description && (
92
- <div className="ms-auto">
93
- <Tooltip content={description}>
94
- <Icon
95
- icon="octicon:info-16"
96
- className="text-sm text-primary-dark"
97
- />
98
- </Tooltip>
99
- </div>
92
+ <Tooltip content={description}>
93
+ <Icon
94
+ icon="octicon:info-16"
95
+ className="text-sm text-primary-dark"
96
+ />
97
+ </Tooltip>
100
98
  )}
101
99
  </div>
102
100
  )}
package/src/components/form/other/textarea.tsx CHANGED
@@ -29,11 +29,10 @@ export const Textarea: React.FC<TextareaProps> = ({
29
29
  : "py-1.5";
30
30
 
31
31
  return (
32
- <label className={`grid gap-2 ${width}`}>
32
+ <label className={`flex flex-col gap-2 ${width}`}>
33
33
  {(label ||
34
- (!options?.hideInputDetail &&
35
- (rest.minLength || rest.maxLength || description))) && (
36
- <div className="flex items-center">
34
+ (!options?.hideInputDetail && (rest.maxLength || description))) && (
35
+ <div className="flex items-center gap-2">
37
36
  {label && (
38
37
  <span
39
38
  className={`text-sm select-none ${
@@ -46,9 +45,9 @@ export const Textarea: React.FC<TextareaProps> = ({
46
45
  )}
47
46
  {!options?.hideInputDetail && (
48
47
  <div className="flex-1 flex justify-end items-center gap-2">
49
- {(rest.minLength || rest.maxLength) && (
48
+ {rest.maxLength && (
50
49
  <span className="text-sm select-none">
51
- {rest.minLength || 0}/{rest.maxLength || "∞"}
50
+ {((rest.value as String) || "").length || 0}/{rest.maxLength}
52
51
  </span>
53
52
  )}
54
53
  {description && (
package/src/components/tooltip/index.tsx CHANGED
@@ -7,10 +7,15 @@ interface TooltipProps {
7
7
  content: string | React.ReactNode;
8
8
  options?: {
9
9
  position?: "left" | "right" | "top" | "bottom";
10
+ enableHover?: boolean;
10
11
  };
11
12
  }
12
13
 
13
- export const Tooltip: React.FC<TooltipProps> = ({ children, content, options }) => {
14
+ export const Tooltip: React.FC<TooltipProps> = ({
15
+ children,
16
+ content,
17
+ options,
18
+ }) => {
14
19
  const [visible, setVisible] = useState(false);
15
20
  const [position, setPosition] = useState(options?.position ?? "right");
16
21
  const tooltipRef = useRef<HTMLDivElement | null>(null);
@@ -184,7 +189,7 @@ export const Tooltip: React.FC<TooltipProps> = ({ children, content, options })
184
189
  ref={tooltipRef}
185
190
  className={`absolute z-50 duration-200 transition-opacity ${
186
191
  visible ? "opacity-100" : "opacity-0 pointer-events-none"
187
- }`}
192
+ } ${options?.enableHover ? "" : "pointer-events-none"}`}
188
193
  style={getTooltipPosition()}
189
194
  >
190
195
  {position === "bottom" && (