next-helios-fe 1.8.65 → 1.8.67

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 (13) hide show
  1. package/dist/components/dropdown/item.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 +8 -2
  6. package/src/components/dropdown/index.tsx +4 -2
  7. package/src/components/dropdown/item.tsx +15 -2
  8. package/src/components/form/input/date.tsx +1 -0
  9. package/src/components/form/input/time.tsx +45 -21
  10. package/src/components/form/other/multipleSelect.tsx +24 -19
  11. package/src/components/form/other/phoneNumber.tsx +38 -35
  12. package/src/components/form/other/select.tsx +38 -54
  13. package/src/components/tooltip/index.tsx +6 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.65",
3
+ "version": "1.8.67",
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
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React, { useEffect } from "react";
2
+ import React, { useState, useEffect } from "react";
3
3
  import ReactDom from "react-dom";
4
4
  import { Icon } from "@iconify/react";
5
5
  import { Button } from "../../../components";
@@ -28,6 +28,12 @@ export const Modal: React.FC<ModalProps> = ({
28
28
  open,
29
29
  onClose,
30
30
  }) => {
31
+ const [isRendered, setIsRendered] = useState(false);
32
+
33
+ useEffect(() => {
34
+ setIsRendered(true);
35
+ }, []);
36
+
31
37
  useEffect(() => {
32
38
  if (!options?.disableClose) {
33
39
  if (open) {
@@ -53,7 +59,7 @@ export const Modal: React.FC<ModalProps> = ({
53
59
  : "w-11/12 sm:w-9/12 md:w-7/12 lg:w-5/12 h-5/6 sm:h-4/6 md:h-2/3 lg:h-2/4";
54
60
 
55
61
  return (
56
- typeof document !== "undefined" &&
62
+ isRendered &&
57
63
  open &&
58
64
  ReactDom.createPortal(
59
65
  <div
package/src/components/dropdown/index.tsx CHANGED
@@ -49,7 +49,7 @@ export const Dropdown: DropdownComponent = ({
49
49
  base: `min-w-40 w-full my-0.5 rounded-md text-sm text-left text-default ${
50
50
  childrenList.length > 0 && !header && itemList.length === 0
51
51
  ? ""
52
- : "px-4 py-2 hover:bg-secondary-light"
52
+ : "px-4 py-2"
53
53
  }`,
54
54
  },
55
55
  },
@@ -59,7 +59,9 @@ export const Dropdown: DropdownComponent = ({
59
59
  {header}
60
60
  {itemList}
61
61
  {childrenList.length > 0 && !header && itemList.length === 0 && (
62
- <Dd.Item className="grid cursor-default">{children}</Dd.Item>
62
+ <Dd.Item className="flex flex-col cursor-default" as="div">
63
+ {children}
64
+ </Dd.Item>
63
65
  )}
64
66
  </Dd>
65
67
  );
package/src/components/dropdown/item.tsx CHANGED
@@ -5,15 +5,28 @@ import { Dropdown as Dd } from "flowbite-react";
5
5
  export interface ItemProps {
6
6
  children: React.ReactNode;
7
7
  active?: boolean;
8
+ as?: "button" | "title";
9
+ disabled?: boolean;
8
10
  onClick?: () => void;
9
11
  }
10
12
 
11
- export const Item: React.FC<ItemProps> = ({ children, active, onClick }) => {
13
+ export const Item: React.FC<ItemProps> = ({
14
+ children,
15
+ active,
16
+ as,
17
+ disabled,
18
+ onClick,
19
+ }) => {
12
20
  return (
13
21
  <Dd.Item
14
22
  className={`${
15
- active && "bg-primary-transparent text-primary pointer-events-none"
23
+ active
24
+ ? "disabled:bg-primary-transparent disabled:text-primary"
25
+ : `disabled:text-disabled ${
26
+ as === "title" ? "" : "hover:bg-secondary-light"
27
+ }`
16
28
  }`}
29
+ disabled={active ? true : (disabled || as === "title") ?? false}
17
30
  onClick={onClick}
18
31
  >
19
32
  {children}
package/src/components/form/input/date.tsx CHANGED
@@ -158,6 +158,7 @@ export const Date: React.FC<DateProps> = ({
158
158
  ref={dropdownRef}
159
159
  className={`w-0 my-0.5 ${height}`}
160
160
  tabIndex={-1}
161
+ disabled={rest.disabled ?? false}
161
162
  >
162
163
  1
163
164
  </button>
package/src/components/form/input/time.tsx CHANGED
@@ -215,6 +215,7 @@ export const Time: React.FC<TimeProps> = ({
215
215
  ref={dropdownRef}
216
216
  className={`w-0 my-0.5 ${height}`}
217
217
  tabIndex={-1}
218
+ disabled={rest.disabled ?? false}
218
219
  >
219
220
  1
220
221
  </button>
@@ -242,17 +243,31 @@ export const Time: React.FC<TimeProps> = ({
242
243
  : tempValue.split(":")[0]) === item
243
244
  }
244
245
  onMouseDown={() => {
246
+ if (item === "12") {
247
+ if (selectedAmPm === "am") {
248
+ setTempValue(`00:${tempValue.split(":")[1]}`);
249
+ } else if (selectedAmPm === "pm") {
250
+ setTempValue(`12:${tempValue.split(":")[1]}`);
251
+ }
252
+ } else {
253
+ if (selectedAmPm === "am") {
254
+ setTempValue(`${item}:${tempValue.split(":")[1]}`);
255
+ } else if (selectedAmPm === "pm") {
256
+ setTempValue(
257
+ `${parseInt(item) + 12}:${tempValue.split(":")[1]}`
258
+ );
259
+ }
260
+ }
261
+
245
262
  if (rest.onChange) {
246
263
  if (item === "12") {
247
264
  if (selectedAmPm === "am") {
248
- setTempValue(`00:${tempValue.split(":")[1]}`);
249
265
  rest.onChange({
250
266
  target: {
251
267
  value: `00:${tempValue.split(":")[1]}`,
252
268
  } as HTMLInputElement,
253
269
  } as any);
254
270
  } else if (selectedAmPm === "pm") {
255
- setTempValue(`12:${tempValue.split(":")[1]}`);
256
271
  rest.onChange({
257
272
  target: {
258
273
  value: `12:${tempValue.split(":")[1]}`,
@@ -261,16 +276,12 @@ export const Time: React.FC<TimeProps> = ({
261
276
  }
262
277
  } else {
263
278
  if (selectedAmPm === "am") {
264
- setTempValue(`${item}:${tempValue.split(":")[1]}`);
265
279
  rest.onChange({
266
280
  target: {
267
281
  value: `${item}:${tempValue.split(":")[1]}`,
268
282
  } as HTMLInputElement,
269
283
  } as any);
270
284
  } else if (selectedAmPm === "pm") {
271
- setTempValue(
272
- `${parseInt(item) + 12}:${tempValue.split(":")[1]}`
273
- );
274
285
  rest.onChange({
275
286
  target: {
276
287
  value: `${parseInt(item) + 12}:${
@@ -300,6 +311,7 @@ export const Time: React.FC<TimeProps> = ({
300
311
  disabled={tempValue.split(":")[1] === item}
301
312
  onMouseDown={() => {
302
313
  setTempValue(`${tempValue.split(":")[0]}:${item}`);
314
+
303
315
  if (rest.onChange) {
304
316
  rest.onChange({
305
317
  target: {
@@ -322,10 +334,36 @@ export const Time: React.FC<TimeProps> = ({
322
334
  disabled={selectedAmPm === item}
323
335
  onMouseDown={() => {
324
336
  setSelectedAmPm(item);
337
+
338
+ if (parseInt(tempValue.split(":")[0]) === 12) {
339
+ if (item === "am") {
340
+ setTempValue(`00:${tempValue.split(":")[1]}`);
341
+ }
342
+ } else if (parseInt(tempValue.split(":")[0]) < 12) {
343
+ if (item === "pm") {
344
+ setTempValue(
345
+ `${parseInt(tempValue.split(":")[0]) + 12}:${
346
+ tempValue.split(":")[1]
347
+ }`
348
+ );
349
+ }
350
+ } else if (parseInt(tempValue.split(":")[0]) > 12) {
351
+ if (item === "am") {
352
+ setTempValue(
353
+ `${
354
+ parseInt(tempValue.split(":")[0]) - 12 < 10
355
+ ? "0"
356
+ : ""
357
+ }${parseInt(tempValue.split(":")[0]) - 12}:${
358
+ tempValue.split(":")[1]
359
+ }`
360
+ );
361
+ }
362
+ }
363
+
325
364
  if (rest.onChange) {
326
365
  if (parseInt(tempValue.split(":")[0]) === 12) {
327
366
  if (item === "am") {
328
- setTempValue(`00:${tempValue.split(":")[1]}`);
329
367
  rest.onChange({
330
368
  target: {
331
369
  value: `00:${tempValue.split(":")[1]}`,
@@ -334,11 +372,6 @@ export const Time: React.FC<TimeProps> = ({
334
372
  }
335
373
  } else if (parseInt(tempValue.split(":")[0]) < 12) {
336
374
  if (item === "pm") {
337
- setTempValue(
338
- `${parseInt(tempValue.split(":")[0]) + 12}:${
339
- tempValue.split(":")[1]
340
- }`
341
- );
342
375
  rest.onChange({
343
376
  target: {
344
377
  value: `${
@@ -349,15 +382,6 @@ export const Time: React.FC<TimeProps> = ({
349
382
  }
350
383
  } else if (parseInt(tempValue.split(":")[0]) > 12) {
351
384
  if (item === "am") {
352
- setTempValue(
353
- `${
354
- parseInt(tempValue.split(":")[0]) - 12 < 10
355
- ? "0"
356
- : ""
357
- }${parseInt(tempValue.split(":")[0]) - 12}:${
358
- tempValue.split(":")[1]
359
- }`
360
- );
361
385
  rest.onChange({
362
386
  target: {
363
387
  value: `${
package/src/components/form/other/multipleSelect.tsx CHANGED
@@ -250,27 +250,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
250
250
  height: dropdownHeight,
251
251
  }}
252
252
  tabIndex={-1}
253
+ disabled={disabled ?? false}
253
254
  >
254
255
  1
255
256
  </button>
256
257
  }
257
258
  >
258
- <div
259
- style={{
260
- width: dropdownWidth - 11,
261
- }}
262
- >
263
- {menus.length === 0 ? (
264
- <div className="flex justify-center">
265
- <span className="px-4 py-1">No data found</span>
259
+ {menus.length === 0 ? (
260
+ <Dropdown.Item>
261
+ <div
262
+ className="flex justify-center"
263
+ style={{ width: dropdownWidth - 43 }}
264
+ >
265
+ <span>No data found</span>
266
266
  </div>
267
- ) : (
268
- menus.map((item, index) => (
269
- <button
267
+ </Dropdown.Item>
268
+ ) : (
269
+ menus.map((item, index) => {
270
+ return (
271
+ <Dropdown.Item
270
272
  key={index}
271
- type="button"
272
- className="min-w-40 w-full my-0.5 ps-4 pe-14 py-2 rounded-md text-sm text-left text-default hover:bg-secondary-light disabled:bg-primary-transparent"
273
- disabled={
273
+ active={
274
274
  tempValue?.find((i) => i === item.value) ? true : false
275
275
  }
276
276
  onClick={() => {
@@ -287,11 +287,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
287
287
  }
288
288
  }}
289
289
  >
290
- {item.label}
291
- </button>
292
- ))
293
- )}
294
- </div>
290
+ <span
291
+ className="flex justify-between items-center gap-4"
292
+ style={{ width: dropdownWidth - 43 }}
293
+ >
294
+ {item.label}
295
+ </span>
296
+ </Dropdown.Item>
297
+ );
298
+ })
299
+ )}
295
300
  </Dropdown>
296
301
  </div>
297
302
  )}
package/src/components/form/other/phoneNumber.tsx CHANGED
@@ -1603,48 +1603,51 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1603
1603
  ref={dropdownRef}
1604
1604
  className={`w-0 my-0.5 ${height}`}
1605
1605
  tabIndex={-1}
1606
+ disabled={rest.disabled ?? false}
1606
1607
  >
1607
1608
  1
1608
1609
  </button>
1609
1610
  }
1610
1611
  >
1611
- <div
1612
- style={{
1613
- width: dropdownWidth - 11,
1614
- }}
1615
- >
1616
- {countryPhoneCode.length === 0 ? (
1617
- <div className="flex justify-center">
1618
- <span className="px-4 py-1">No data found</span>
1612
+ {countryPhoneCode.length === 0 ? (
1613
+ <Dropdown.Item>
1614
+ <div
1615
+ className="flex justify-center"
1616
+ style={{ width: dropdownWidth - 51 }}
1617
+ >
1618
+ <span>No data found</span>
1619
1619
  </div>
1620
- ) : (
1621
- countryPhoneCode.map((item, index) => {
1622
- return (
1623
- <button
1624
- key={index}
1625
- type="button"
1626
- className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
1627
- disabled={selectedCountry === item.dial_code}
1628
- onClick={() => {
1629
- rest.onChange &&
1630
- rest.onChange({
1631
- target: {
1632
- value: `${item.dial_code}${
1633
- ((rest.value || "") as string).split(
1634
- selectedCountry
1635
- )[1]
1636
- }`,
1637
- } as HTMLInputElement,
1638
- } as any);
1639
- setOpenDropdown(false);
1640
- }}
1620
+ </Dropdown.Item>
1621
+ ) : (
1622
+ countryPhoneCode.map((item, index) => {
1623
+ return (
1624
+ <Dropdown.Item
1625
+ key={index}
1626
+ active={selectedCountry === item.dial_code ? true : false}
1627
+ onClick={() => {
1628
+ rest.onChange &&
1629
+ rest.onChange({
1630
+ target: {
1631
+ value: `${item.dial_code}${
1632
+ ((rest.value || "") as string).split(
1633
+ selectedCountry
1634
+ )[1]
1635
+ }`,
1636
+ } as HTMLInputElement,
1637
+ } as any);
1638
+ setOpenDropdown(false);
1639
+ }}
1640
+ >
1641
+ <span
1642
+ className="flex justify-between items-center gap-4"
1643
+ style={{ width: dropdownWidth - 51 }}
1641
1644
  >
1642
- <span>{`${item.emoji} ${item.name}`}</span>
1643
- </button>
1644
- );
1645
- })
1646
- )}
1647
- </div>
1645
+ {`${item.emoji} ${item.name}`}
1646
+ </span>
1647
+ </Dropdown.Item>
1648
+ );
1649
+ })
1650
+ )}
1648
1651
  </Dropdown>
1649
1652
  </div>
1650
1653
  <input type="text" className="hidden" {...rest} />
package/src/components/form/other/select.tsx CHANGED
@@ -8,6 +8,7 @@ export interface SelectProps
8
8
  menus: {
9
9
  label: string;
10
10
  value: string;
11
+ variant?: "button" | "title";
11
12
  disabled?: boolean;
12
13
  [key: string]: any;
13
14
  }[];
@@ -146,66 +147,49 @@ export const Select: React.FC<SelectProps> = ({
146
147
  ref={dropdownRef}
147
148
  className={`w-0 my-0.5 ${height}`}
148
149
  tabIndex={-1}
150
+ disabled={rest.disabled ?? false}
149
151
  >
150
152
  1
151
153
  </button>
152
154
  }
153
155
  >
154
- <div
155
- style={{
156
- width: dropdownWidth - 11,
157
- }}
158
- >
159
- {menus.length === 0 ? (
160
- <div className="flex justify-center">
161
- <span className="px-4 py-1">No data found</span>
156
+ {menus.length === 0 ? (
157
+ <Dropdown.Item>
158
+ <div
159
+ className="flex justify-center"
160
+ style={{ width: dropdownWidth - 43 }}
161
+ >
162
+ <span>No data found</span>
162
163
  </div>
163
- ) : (
164
- menus.map((item, index) => {
165
- if (tempValue === item.value) {
166
- return (
167
- <button
168
- key={index}
169
- type="button"
170
- className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
171
- disabled
172
- onClick={() => {
173
- setTempValue(item.value);
174
- if (rest.onChange) {
175
- rest.onChange({
176
- target: { value: item.value } as HTMLSelectElement,
177
- } as any);
178
- }
179
- }}
180
- >
181
- <span>{item.label}</span>
182
- {labelComponent ? labelComponent(item) : ""}
183
- </button>
184
- );
185
- } else {
186
- return (
187
- <button
188
- key={index}
189
- type="button"
190
- className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-disabled"
191
- disabled={item.disabled}
192
- onClick={() => {
193
- setTempValue(item.value);
194
- if (rest.onChange) {
195
- rest.onChange({
196
- target: { value: item.value } as HTMLSelectElement,
197
- } as any);
198
- }
199
- }}
200
- >
201
- <span>{item.label}</span>
202
- {labelComponent ? labelComponent(item) : ""}
203
- </button>
204
- );
205
- }
206
- })
207
- )}
208
- </div>
164
+ </Dropdown.Item>
165
+ ) : (
166
+ menus.map((item, index) => {
167
+ return (
168
+ <Dropdown.Item
169
+ key={index}
170
+ active={tempValue === item.value ? true : false}
171
+ as={item.variant || "button"}
172
+ disabled={item.disabled ?? false}
173
+ onClick={() => {
174
+ setTempValue(item.value);
175
+ if (rest.onChange) {
176
+ rest.onChange({
177
+ target: { value: item.value } as HTMLSelectElement,
178
+ } as any);
179
+ }
180
+ }}
181
+ >
182
+ <div
183
+ className="flex justify-between items-center gap-4"
184
+ style={{ width: dropdownWidth - 43 }}
185
+ >
186
+ <span>{item.label}</span>
187
+ {labelComponent ? labelComponent(item) : ""}
188
+ </div>
189
+ </Dropdown.Item>
190
+ );
191
+ })
192
+ )}
209
193
  </Dropdown>
210
194
  </div>
211
195
  </div>
package/src/components/tooltip/index.tsx CHANGED
@@ -16,6 +16,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
16
16
  content,
17
17
  options,
18
18
  }) => {
19
+ const [isRendered, setIsRendered] = useState(false);
19
20
  const [visible, setVisible] = useState(false);
20
21
  const [position, setPosition] = useState(options?.position ?? "right");
21
22
  const tooltipRef = useRef<HTMLDivElement | null>(null);
@@ -27,6 +28,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
27
28
  null
28
29
  );
29
30
 
31
+ useEffect(() => {
32
+ setIsRendered(true);
33
+ }, []);
34
+
30
35
  useEffect(() => {
31
36
  setPosition(options?.position ?? "right");
32
37
  }, [options?.position]);
@@ -184,7 +189,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
184
189
  onMouseLeave={() => setVisible(false)}
185
190
  >
186
191
  {children}
187
- {typeof document !== "undefined" &&
192
+ {isRendered &&
188
193
  createPortal(
189
194
  <div
190
195
  ref={tooltipRef}
@@ -205,8 +210,6 @@ export const Tooltip: React.FC<TooltipProps> = ({
205
210
  </div>
206
211
  )}
207
212
  <div
208
-
209
-
210
213
  className="w-fit px-3 py-1.5 rounded-md bg-black/75 text-sm text-white"
211
214
  style={{ maxWidth: "50dvw" }}
212
215
  >