next-helios-fe 1.9.16 → 1.9.18

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.9.16",
3
+ "version": "1.9.18",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -25,6 +25,7 @@ export interface MultipleSelectProps
25
25
  height?: "short" | "medium" | "high";
26
26
  disableDropdown?: boolean;
27
27
  };
28
+ max?: number;
28
29
  required?: boolean;
29
30
  disabled?: boolean;
30
31
  value?: string[];
@@ -34,6 +35,7 @@ export interface MultipleSelectProps
34
35
  value: string[];
35
36
  };
36
37
  }) => void;
38
+ readOnly?: boolean;
37
39
  onSelect?: (e: {
38
40
  target: {
39
41
  value: string;
@@ -53,11 +55,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
53
55
  placeholder,
54
56
  description,
55
57
  labelComponent,
58
+ max,
56
59
  required,
57
60
  disabled,
58
61
  value,
59
62
  onClick,
60
63
  onChange,
64
+ readOnly,
61
65
  onSelect,
62
66
  onRemove,
63
67
  ...rest
@@ -75,8 +79,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
75
79
  options?.height === "short"
76
80
  ? "py-[3.5px]"
77
81
  : options?.height === "high"
78
- ? "py-[7.5px]"
79
- : "py-[5px]";
82
+ ? "py-[7.5px]"
83
+ : "py-[5px]";
80
84
 
81
85
  useEffect(() => {
82
86
  function handleClickOutside(event: MouseEvent) {
@@ -116,7 +120,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
116
120
  if (required) {
117
121
  if (tempValue.length === 0) {
118
122
  inputRef.current?.setCustomValidity(
119
- "Please select some items in the list.",
123
+ "Please select some items in the list."
120
124
  );
121
125
  } else {
122
126
  inputRef.current?.setCustomValidity("");
@@ -161,13 +165,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
161
165
  (options?.height === "short"
162
166
  ? 7
163
167
  : options?.height === "high"
164
- ? 15
165
- : 10)
168
+ ? 15
169
+ : 10)
166
170
  : options?.height === "short"
167
- ? 35
168
- : options?.height === "high"
169
- ? 43
170
- : 39,
171
+ ? 35
172
+ : options?.height === "high"
173
+ ? 43
174
+ : 39,
171
175
  }}
172
176
  placeholder={placeholder}
173
177
  required={required}
@@ -176,11 +180,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
176
180
  onChange={(e) => {}}
177
181
  onClick={(e) => {
178
182
  e.preventDefault();
179
- setOpenDropdown(true);
180
183
  dropdownTriggerRef.current?.click();
181
184
  setDropdownWidth(
182
- inputRef?.current?.getBoundingClientRect()?.width || 0,
185
+ inputRef?.current?.getBoundingClientRect()?.width || 0
183
186
  );
187
+ if (!readOnly) {
188
+ setOpenDropdown(true);
189
+ }
184
190
  }}
185
191
  onKeyDown={(e) => {
186
192
  if (e.key === "Enter") {
@@ -212,33 +218,35 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
212
218
  }`}
213
219
  >
214
220
  <span>{menus.find((i) => i.value === item)?.label}</span>
215
- <button
216
- type="button"
217
- disabled={
218
- disabled ||
219
- menus.find((i) => i.value === item)?.disableUnselect
220
- }
221
- tabIndex={-1}
222
- onClick={() => {
223
- setTempValue(tempValue.filter((i) => i !== item));
224
- if (onChange) {
225
- onChange({
226
- target: {
227
- value: tempValue.filter((i) => i !== item),
228
- },
229
- } as any);
230
- }
231
- if (onRemove) {
232
- onRemove({
233
- target: {
234
- value: item,
235
- },
236
- });
221
+ {!readOnly && (
222
+ <button
223
+ type="button"
224
+ disabled={
225
+ disabled ||
226
+ menus.find((i) => i.value === item)?.disableUnselect
237
227
  }
238
- }}
239
- >
240
- <Icon icon="pajamas:close" />
241
- </button>
228
+ tabIndex={-1}
229
+ onClick={() => {
230
+ setTempValue(tempValue.filter((i) => i !== item));
231
+ if (onChange) {
232
+ onChange({
233
+ target: {
234
+ value: tempValue.filter((i) => i !== item),
235
+ },
236
+ } as any);
237
+ }
238
+ if (onRemove) {
239
+ onRemove({
240
+ target: {
241
+ value: item,
242
+ },
243
+ });
244
+ }
245
+ }}
246
+ >
247
+ <Icon icon="pajamas:close" />
248
+ </button>
249
+ )}
242
250
  </div>
243
251
  );
244
252
  })}
@@ -261,16 +269,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
261
269
  (options?.height === "short"
262
270
  ? 7
263
271
  : options?.height === "high"
264
- ? 15
265
- : 10)
272
+ ? 15
273
+ : 10)
266
274
  : options?.height === "short"
267
- ? 35
268
- : options?.height === "high"
269
- ? 43
270
- : 39,
275
+ ? 35
276
+ : options?.height === "high"
277
+ ? 43
278
+ : 39,
271
279
  }}
272
280
  tabIndex={-1}
273
- disabled={disabled ?? false}
281
+ disabled={disabled ?? readOnly ?? false}
274
282
  >
275
283
  1
276
284
  </button>
@@ -306,16 +314,18 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
306
314
  as={item.variant || "button"}
307
315
  disabled={item.disabled ?? false}
308
316
  onClick={() => {
309
- setTempValue([...tempValue, item.value]);
310
- if (onChange) {
311
- onChange({
312
- target: { value: [...tempValue, item.value] },
313
- } as any);
314
- }
315
- if (onSelect) {
316
- onSelect({
317
- target: { value: item.value },
318
- });
317
+ if (!max || tempValue.length < max) {
318
+ setTempValue([...tempValue, item.value]);
319
+ if (onChange) {
320
+ onChange({
321
+ target: { value: [...tempValue, item.value] },
322
+ } as any);
323
+ }
324
+ if (onSelect) {
325
+ onSelect({
326
+ target: { value: item.value },
327
+ });
328
+ }
319
329
  }
320
330
  }}
321
331
  onKeyDown={(e) => {
@@ -20,6 +20,7 @@ export interface SelectProps
20
20
  width?: "full" | "fit";
21
21
  height?: "short" | "medium" | "high";
22
22
  };
23
+ readOnly?: boolean;
23
24
  }
24
25
 
25
26
  export const Select: React.FC<SelectProps> = ({
@@ -29,6 +30,7 @@ export const Select: React.FC<SelectProps> = ({
29
30
  description,
30
31
  labelComponent,
31
32
  options,
33
+ readOnly,
32
34
  ...rest
33
35
  }) => {
34
36
  const [tempValue, setTempValue] = useState("");
@@ -115,11 +117,13 @@ export const Select: React.FC<SelectProps> = ({
115
117
  onChange={(e) => {}}
116
118
  onClick={(e) => {
117
119
  e.preventDefault();
118
- setOpenDropdown(true);
119
120
  dropdownTriggerRef.current?.click();
120
121
  setDropdownWidth(
121
122
  inputRef?.current?.getBoundingClientRect()?.width || 0
122
123
  );
124
+ if (!readOnly) {
125
+ setOpenDropdown(true);
126
+ }
123
127
  }}
124
128
  onKeyDown={(e) => {
125
129
  if (e.key === "Enter") {
@@ -149,7 +153,7 @@ export const Select: React.FC<SelectProps> = ({
149
153
  ref={dropdownTriggerRef}
150
154
  className={`w-0 my-0.5 ${height}`}
151
155
  tabIndex={-1}
152
- disabled={rest.disabled ?? false}
156
+ disabled={rest.disabled ?? readOnly ?? false}
153
157
  >
154
158
  1
155
159
  </button>