next-helios-fe 1.8.10 → 1.8.12

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.10",
3
+ "version": "1.8.12",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@ export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
11
11
  maxSizeInMb?: number;
12
12
  buttonOnly?: boolean;
13
13
  width?: "full" | "fit";
14
- height?: "short" | "medium" | "high";
14
+ height?: "short" | "medium" | "high" | "full";
15
15
  hideInputDetail?: boolean;
16
16
  };
17
17
  defaultValue?: any[];
@@ -56,7 +56,11 @@ export const File: React.FC<FileProps> = ({
56
56
  }, [value, defaultValue]);
57
57
 
58
58
  return (
59
- <label className={`grid gap-2 ${width}`}>
59
+ <label
60
+ className={`grid gap-2 ${width} ${
61
+ options?.height === "full" && "h-full"
62
+ }`}
63
+ >
60
64
  {!options?.buttonOnly &&
61
65
  (label ||
62
66
  (!options?.hideInputDetail &&
@@ -93,8 +97,8 @@ export const File: React.FC<FileProps> = ({
93
97
  )}
94
98
  <div
95
99
  className={`flex items-center gap-4 ${
96
- !options?.buttonOnly && "flex-row-reverse"
97
- }`}
100
+ options?.height === "full" && "h-full"
101
+ } ${!options?.buttonOnly && "flex-row-reverse"}`}
98
102
  >
99
103
  {options?.variant !== "drag&drop" ? (
100
104
  <div
@@ -127,10 +131,12 @@ export const File: React.FC<FileProps> = ({
127
131
  </span>
128
132
  </div>
129
133
  ) : (
130
- <div className="relative flex-1 flex items-center">
134
+ <div className="relative flex-1 flex items-center h-full">
131
135
  <input
132
136
  type="file"
133
- className={`w-full h-60 px-4 border-default border border-dashed rounded-md bg-secondary-bg text-transparent cursor-pointer file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light`}
137
+ className={`w-full px-4 border-default border border-dashed rounded-md bg-secondary-bg text-transparent cursor-pointer file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light ${
138
+ options?.height === "full" ? "min-h-60 h-full" : "h-60"
139
+ }`}
134
140
  onChange={(e) => {
135
141
  if (rest.onChange) {
136
142
  rest.onChange({
@@ -189,14 +195,16 @@ export const File: React.FC<FileProps> = ({
189
195
  {...rest}
190
196
  />
191
197
  <div className="absolute flex flex-col gap-8 justify-center items-center w-full h-full px-4 pointer-events-none">
192
- <Icon
193
- icon={
194
- tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
195
- }
196
- className={`text-5xl ${
197
- tempFile.length !== 0 ? "" : "text-disabled"
198
- }`}
199
- />
198
+ <div>
199
+ <Icon
200
+ icon={
201
+ tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
202
+ }
203
+ className={`text-5xl ${
204
+ tempFile.length !== 0 ? "" : "text-disabled"
205
+ }`}
206
+ />
207
+ </div>
200
208
  <div className="flex flex-col gap-2 items-center">
201
209
  {tempFile.length !== 0 ? (
202
210
  <span>{tempFile[0]?.name}</span>
@@ -76,12 +76,14 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
76
76
  }, [value]);
77
77
 
78
78
  useEffect(() => {
79
- if (tempValue.length === 0) {
80
- inputRef.current?.setCustomValidity(
81
- "Please select some items in the list."
82
- );
83
- } else {
84
- inputRef.current?.setCustomValidity("");
79
+ if (required) {
80
+ if (tempValue.length === 0) {
81
+ inputRef.current?.setCustomValidity(
82
+ "Please select some items in the list."
83
+ );
84
+ } else {
85
+ inputRef.current?.setCustomValidity("");
86
+ }
85
87
  }
86
88
  }, [tempValue]);
87
89
 
@@ -1605,6 +1605,8 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1605
1605
  type="number"
1606
1606
  className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
1607
1607
  value={tempValue[1]}
1608
+ required={rest.required}
1609
+ disabled={rest.disabled}
1608
1610
  onChange={(e) => {
1609
1611
  setTempValue((prev) => [prev[0], e.target.value]);
1610
1612
  }}
@@ -62,10 +62,14 @@ export const Select: React.FC<SelectProps> = ({
62
62
  }, [rest.value, rest.defaultValue]);
63
63
 
64
64
  useEffect(() => {
65
- if (!tempValue) {
66
- inputRef.current?.setCustomValidity("Please select an item in the list.");
67
- } else {
68
- inputRef.current?.setCustomValidity("");
65
+ if (rest.required) {
66
+ if (!tempValue) {
67
+ inputRef.current?.setCustomValidity(
68
+ "Please select an item in the list."
69
+ );
70
+ } else {
71
+ inputRef.current?.setCustomValidity("");
72
+ }
69
73
  }
70
74
  }, [tempValue]);
71
75