next-helios-fe 1.9.15 → 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.
Files changed (8) hide show
  1. package/dist/components/form/other/multipleSelect.d.ts +2 -0
  2. package/dist/components/form/other/select.d.ts +1 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/content-container/modal/index.tsx +1 -1
  6. package/src/components/form/other/multipleSelect.tsx +62 -53
  7. package/src/components/form/other/select.tsx +4 -1
  8. package/src/components/table/index.tsx +29 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.9.15",
3
+ "version": "1.9.17",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/content-container/modal/index.tsx CHANGED
@@ -49,7 +49,7 @@ export const Modal: React.FC<ModalProps> = ({
49
49
 
50
50
  const size =
51
51
  options?.size === "fit"
52
- ? "w-fit h-fit"
52
+ ? "w-fit h-fit max-h-dvh"
53
53
  : options?.size === "large"
54
54
  ? "w-11/12 sm:w-9/12 md:w-7/12 h-5/6 md:h-4/6"
55
55
  : options?.size === "extra-large"
package/src/components/form/other/multipleSelect.tsx CHANGED
@@ -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) => {
package/src/components/form/other/select.tsx CHANGED
@@ -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>
package/src/components/table/index.tsx CHANGED
@@ -445,7 +445,7 @@ export const Table: TableComponentProps = ({
445
445
  <button
446
446
  type="button"
447
447
  className="group/header flex w-full items-center justify-between gap-4"
448
- disabled={item.disableSort}
448
+ disabled={item.disableSort ? true : loading}
449
449
  onClick={() => {
450
450
  setSortBy((prev: any) => {
451
451
  if (prev.column !== item.key) {
@@ -484,6 +484,7 @@ export const Table: TableComponentProps = ({
484
484
  <button
485
485
  type="button"
486
486
  className="flex items-center rounded-full hover:bg-secondary-light"
487
+ disabled={loading}
487
488
  >
488
489
  <Icon icon="ion:filter" />
489
490
  </button>
@@ -578,6 +579,7 @@ export const Table: TableComponentProps = ({
578
579
  <button
579
580
  type="button"
580
581
  className="flex items-center rounded-full hover:bg-secondary-light"
582
+ disabled={loading}
581
583
  >
582
584
  <Icon icon="akar-icons:calendar" />
583
585
  </button>
@@ -618,7 +620,7 @@ export const Table: TableComponentProps = ({
618
620
  item.type !== "date" ? "px-6 border-b" : "pe-6 border-b-0"
619
621
  }`}
620
622
  placeholder="Search..."
621
- disabled={item.type === "date"}
623
+ disabled={item.type === "date" ? true : loading}
622
624
  value={
623
625
  item.type !== "date"
624
626
  ? filter?.find(
@@ -668,6 +670,7 @@ export const Table: TableComponentProps = ({
668
670
  <button
669
671
  type="button"
670
672
  className="absolute right-0 rounded-full text-disabled hover:bg-secondary-light"
673
+ disabled={loading}
671
674
  onClick={() => {
672
675
  if (item.type !== "date") {
673
676
  setFilter(
@@ -718,6 +721,7 @@ export const Table: TableComponentProps = ({
718
721
  <td className="sticky left-0 z-[1] w-8 bg-secondary-bg px-4 py-1.5">
719
722
  <Form.Checkbox
720
723
  options={{ disableHover: true }}
724
+ disabled={loading}
721
725
  checked={
722
726
  selected?.find(
723
727
  (selectedItem) =>
@@ -849,7 +853,8 @@ export const Table: TableComponentProps = ({
849
853
  >
850
854
  <button
851
855
  type="button"
852
- className={`rounded-full p-1.5 text-white ${variant}`}
856
+ className={`rounded-full p-1.5 text-white disabled:bg-secondary-dark ${variant}`}
857
+ disabled={loading}
853
858
  onClick={(e) => {
854
859
  item.onClick && item.onClick(e);
855
860
  }}
@@ -866,7 +871,8 @@ export const Table: TableComponentProps = ({
866
871
  >
867
872
  <button
868
873
  type="button"
869
- className="rounded-full bg-primary p-1.5 text-white hover:bg-primary-dark"
874
+ className="rounded-full bg-primary p-1.5 text-white hover:bg-primary-dark disabled:bg-secondary-dark"
875
+ disabled={loading}
870
876
  onClick={(e) => {
871
877
  options?.toolbar?.addData?.onClick &&
872
878
  options?.toolbar?.addData?.onClick(e);
@@ -888,7 +894,8 @@ export const Table: TableComponentProps = ({
888
894
  >
889
895
  <button
890
896
  type="button"
891
- className="rounded-full px-2 py-2 hover:bg-secondary-light"
897
+ className="rounded-full px-2 py-2 hover:bg-secondary-light disabled:bg-secondary-light"
898
+ disabled={loading}
892
899
  >
893
900
  <Icon icon="mage:filter" className="text-xl" />
894
901
  </button>
@@ -929,6 +936,7 @@ export const Table: TableComponentProps = ({
929
936
  <Form.Search
930
937
  options={{ width: "fit" }}
931
938
  placeholder="Search..."
939
+ disabled={loading}
932
940
  value={search}
933
941
  onChange={(e) => {
934
942
  setSearch(e.target.value);
@@ -941,6 +949,7 @@ export const Table: TableComponentProps = ({
941
949
  type="button"
942
950
  tooltip={options?.toolbar?.export?.tooltip || "Export Data"}
943
951
  options={{ variant: "primary", width: "fit" }}
952
+ disabled={loading}
944
953
  onClick={() => {
945
954
  const exportData = filteredData?.map((item) => {
946
955
  return header
@@ -987,6 +996,7 @@ export const Table: TableComponentProps = ({
987
996
  <div className="flex flex-col">
988
997
  <Form.Checkbox
989
998
  options={{ disableHover: true }}
999
+ disabled={loading}
990
1000
  checked={
991
1001
  (dynamicTable?.setValue?.totalData ??
992
1002
  filteredData?.length) !== 0 &&
@@ -1147,6 +1157,7 @@ export const Table: TableComponentProps = ({
1147
1157
  { label: "50", value: "50" },
1148
1158
  { label: "100", value: "100" },
1149
1159
  ]}
1160
+ disabled={loading}
1150
1161
  value={maxRow?.toString()}
1151
1162
  onChange={(e) => {
1152
1163
  setMaxRow(Number(e.target.value));
@@ -1166,6 +1177,7 @@ export const Table: TableComponentProps = ({
1166
1177
  { label: "50", value: "50" },
1167
1178
  { label: "100", value: "100" },
1168
1179
  ]}
1180
+ disabled={loading}
1169
1181
  value={maxRow?.toString()}
1170
1182
  onChange={(e) => {
1171
1183
  setMaxRow(Number(e.target.value));
@@ -1191,7 +1203,7 @@ export const Table: TableComponentProps = ({
1191
1203
  <button
1192
1204
  type="button"
1193
1205
  className="flex h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled"
1194
- disabled={page === 1}
1206
+ disabled={page === 1 ? true : loading}
1195
1207
  onClick={() => {
1196
1208
  setPage(1);
1197
1209
  }}
@@ -1201,7 +1213,7 @@ export const Table: TableComponentProps = ({
1201
1213
  <button
1202
1214
  type="button"
1203
1215
  className="hidden h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled md:flex"
1204
- disabled={page === 1}
1216
+ disabled={page === 1 ? true : loading}
1205
1217
  onClick={() => {
1206
1218
  setPage((prev) => prev - 1);
1207
1219
  }}
@@ -1223,8 +1235,12 @@ export const Table: TableComponentProps = ({
1223
1235
  key={index}
1224
1236
  id={`pagination-page-${index}`}
1225
1237
  type="button"
1226
- className="flex items-center justify-center h-9 min-w-9 px-4 border rounded-md select-none hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
1227
- disabled={page === index + 1}
1238
+ className={`flex items-center justify-center h-9 min-w-9 px-4 border rounded-md select-none hover:bg-secondary-light ${
1239
+ page === index + 1
1240
+ ? "disabled:bg-primary-transparent disabled:text-primary"
1241
+ : "disabled:bg-secondary-light disabled:text-disabled"
1242
+ }`}
1243
+ disabled={page === index + 1 ? true : loading}
1228
1244
  onClick={() => {
1229
1245
  setPage(index + 1);
1230
1246
  }}
@@ -1240,6 +1256,8 @@ export const Table: TableComponentProps = ({
1240
1256
  disabled={
1241
1257
  (dynamicTable?.setValue?.totalData ?? filteredData?.length) <=
1242
1258
  page * maxRow
1259
+ ? true
1260
+ : loading
1243
1261
  }
1244
1262
  onClick={() => {
1245
1263
  setPage((prev) => prev + 1);
@@ -1253,6 +1271,8 @@ export const Table: TableComponentProps = ({
1253
1271
  disabled={
1254
1272
  (dynamicTable?.setValue?.totalData ?? filteredData?.length) <=
1255
1273
  page * maxRow
1274
+ ? true
1275
+ : loading
1256
1276
  }
1257
1277
  onClick={() => {
1258
1278
  setPage(