next-helios-fe 1.9.16 → 1.9.17

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.17",
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,25 +165,26 @@ 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}
174
178
  disabled={disabled}
175
179
  value={tempValue.join(", ")}
176
180
  onChange={(e) => {}}
181
+ readOnly={readOnly ?? false}
177
182
  onClick={(e) => {
178
183
  e.preventDefault();
179
184
  setOpenDropdown(true);
180
185
  dropdownTriggerRef.current?.click();
181
186
  setDropdownWidth(
182
- inputRef?.current?.getBoundingClientRect()?.width || 0,
187
+ inputRef?.current?.getBoundingClientRect()?.width || 0
183
188
  );
184
189
  }}
185
190
  onKeyDown={(e) => {
@@ -212,33 +217,35 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
212
217
  }`}
213
218
  >
214
219
  <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
- });
220
+ {!readOnly && (
221
+ <button
222
+ type="button"
223
+ disabled={
224
+ disabled ||
225
+ menus.find((i) => i.value === item)?.disableUnselect
237
226
  }
238
- }}
239
- >
240
- <Icon icon="pajamas:close" />
241
- </button>
227
+ tabIndex={-1}
228
+ onClick={() => {
229
+ setTempValue(tempValue.filter((i) => i !== item));
230
+ if (onChange) {
231
+ onChange({
232
+ target: {
233
+ value: tempValue.filter((i) => i !== item),
234
+ },
235
+ } as any);
236
+ }
237
+ if (onRemove) {
238
+ onRemove({
239
+ target: {
240
+ value: item,
241
+ },
242
+ });
243
+ }
244
+ }}
245
+ >
246
+ <Icon icon="pajamas:close" />
247
+ </button>
248
+ )}
242
249
  </div>
243
250
  );
244
251
  })}
@@ -261,16 +268,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
261
268
  (options?.height === "short"
262
269
  ? 7
263
270
  : options?.height === "high"
264
- ? 15
265
- : 10)
271
+ ? 15
272
+ : 10)
266
273
  : options?.height === "short"
267
- ? 35
268
- : options?.height === "high"
269
- ? 43
270
- : 39,
274
+ ? 35
275
+ : options?.height === "high"
276
+ ? 43
277
+ : 39,
271
278
  }}
272
279
  tabIndex={-1}
273
- disabled={disabled ?? false}
280
+ disabled={disabled ?? readOnly ?? false}
274
281
  >
275
282
  1
276
283
  </button>
@@ -306,16 +313,18 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
306
313
  as={item.variant || "button"}
307
314
  disabled={item.disabled ?? false}
308
315
  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
- });
316
+ if (!max || tempValue.length < max) {
317
+ setTempValue([...tempValue, item.value]);
318
+ if (onChange) {
319
+ onChange({
320
+ target: { value: [...tempValue, item.value] },
321
+ } as any);
322
+ }
323
+ if (onSelect) {
324
+ onSelect({
325
+ target: { value: item.value },
326
+ });
327
+ }
319
328
  }
320
329
  }}
321
330
  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("");
@@ -112,6 +114,7 @@ export const Select: React.FC<SelectProps> = ({
112
114
  ? menus.find((item) => item.value === tempValue)?.label
113
115
  : ""
114
116
  }
117
+ readOnly={readOnly ?? false}
115
118
  onChange={(e) => {}}
116
119
  onClick={(e) => {
117
120
  e.preventDefault();
@@ -149,7 +152,7 @@ export const Select: React.FC<SelectProps> = ({
149
152
  ref={dropdownTriggerRef}
150
153
  className={`w-0 my-0.5 ${height}`}
151
154
  tabIndex={-1}
152
- disabled={rest.disabled ?? false}
155
+ disabled={rest.disabled ?? readOnly ?? false}
153
156
  >
154
157
  1
155
158
  </button>