next-helios-fe 1.8.51 → 1.8.53

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.
@@ -1,10 +1,3 @@
1
- /*
2
- * React Tooltip
3
- * {@link https://github.com/ReactTooltip/react-tooltip}
4
- * @copyright ReactTooltip Team
5
- * @license MIT
6
- */
7
-
8
1
  /*!
9
2
  Copyright (c) 2018 Jed Watson.
10
3
  Licensed under the MIT License (MIT), see
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.51",
3
+ "version": "1.8.53",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -32,7 +32,6 @@
32
32
  "react-leaflet": "^4.2.1",
33
33
  "react-pin-field": "^3.1.5",
34
34
  "react-syntax-highlighter": "^15.5.0",
35
- "react-tooltip": "^5.28.0",
36
35
  "sass": "^1.77.8",
37
36
  "xlsx": "^0.18.5"
38
37
  },
@@ -18,7 +18,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
18
18
  position?: "left" | "center" | "right";
19
19
  border?: boolean;
20
20
  };
21
- tooltip?: { content: React.ReactNode };
21
+ tooltip?: string | React.ReactNode;
22
22
  loading?: boolean;
23
23
  active?: boolean;
24
24
  }
@@ -34,19 +34,19 @@ export const Button: React.FC<ButtonProps> = ({
34
34
  }) => {
35
35
  const variant =
36
36
  options?.variant === "primary"
37
- ? "text-white bg-primary shadow-sm shadow-primary hover:bg-primary-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
37
+ ? "text-white bg-primary shadow-sm hover:bg-primary-dark disabled:bg-secondary-dark"
38
38
  : options?.variant === "secondary"
39
- ? "text-white bg-secondary shadow-sm shadow-secondary hover:bg-secondary-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
39
+ ? "text-white bg-secondary shadow-sm hover:bg-secondary-dark disabled:bg-secondary-dark"
40
40
  : options?.variant === "success"
41
- ? "text-white bg-success shadow-sm shadow-success hover:bg-success-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
41
+ ? "text-white bg-success shadow-sm hover:bg-success-dark disabled:bg-secondary-dark"
42
42
  : options?.variant === "warning"
43
- ? "text-white bg-warning shadow-sm shadow-warning hover:bg-warning-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
43
+ ? "text-white bg-warning shadow-sm hover:bg-warning-dark disabled:bg-secondary-dark"
44
44
  : options?.variant === "danger"
45
- ? "text-white bg-danger shadow-sm shadow-danger hover:bg-danger-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
45
+ ? "text-white bg-danger shadow-sm hover:bg-danger-dark disabled:bg-secondary-dark"
46
46
  : `text-default hover:bg-secondary-light ${
47
47
  loading
48
48
  ? ""
49
- : "disabled:bg-primary disabled:text-white disabled:shadow-sm disabled:shadow-primary"
49
+ : "disabled:bg-primary disabled:text-white disabled:shadow-sm"
50
50
  }`;
51
51
  const width = options?.width === "fit" ? "w-fit" : "w-full";
52
52
  const height =
@@ -67,7 +67,33 @@ export const Button: React.FC<ButtonProps> = ({
67
67
  ? "bg-secondary-light shadow-sm shadow-secondary-light"
68
68
  : "";
69
69
 
70
- return (
70
+ return tooltip ? (
71
+ <Tooltip content={tooltip}>
72
+ <button
73
+ className={`relative ${width} px-3 ${height} rounded-md text-left ${variant} ${border} ${isActive} select-none disabled:pointer-events-none ${className}`}
74
+ disabled={loading || rest.disabled}
75
+ {...rest}
76
+ >
77
+ <div
78
+ className={`flex ${position} items-center ${gap} w-full h-full ${
79
+ loading && "invisible"
80
+ }`}
81
+ >
82
+ {children}
83
+ </div>
84
+ {loading && (
85
+ <div className="absolute left-0 top-0 flex justify-center items-center w-full h-full">
86
+ <Icon
87
+ icon="mingcute:loading-fill"
88
+ className={`animate-spin ${
89
+ options?.height === "high" ? "text-2xl" : "text-xl"
90
+ }`}
91
+ />
92
+ </div>
93
+ )}
94
+ </button>
95
+ </Tooltip>
96
+ ) : (
71
97
  <button
72
98
  className={`relative ${width} px-3 ${height} rounded-md text-left ${variant} ${border} ${isActive} select-none disabled:pointer-events-none ${className}`}
73
99
  disabled={loading || rest.disabled}
@@ -90,7 +116,6 @@ export const Button: React.FC<ButtonProps> = ({
90
116
  />
91
117
  </div>
92
118
  )}
93
- {tooltip && <Tooltip id={rest.id as string} content={tooltip.content} />}
94
119
  </button>
95
120
  );
96
121
  };
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface CheckboxProps
@@ -53,12 +54,14 @@ export const Checkbox: React.FC<CheckboxProps> = ({
53
54
  {label}
54
55
  </span>
55
56
  {description && (
56
- <span
57
- title={description}
58
- className="ms-auto text-sm text-primary-dark"
59
- >
60
- <Icon icon="octicon:info-16" />
61
- </span>
57
+ <div className="ms-auto">
58
+ <Tooltip content={description}>
59
+ <Icon
60
+ icon="octicon:info-16"
61
+ className="text-sm text-primary-dark"
62
+ />
63
+ </Tooltip>
64
+ </div>
62
65
  )}
63
66
  </div>
64
67
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface ColorProps
@@ -62,12 +63,14 @@ export const Color: React.FC<ColorProps> = ({
62
63
  </span>
63
64
  )}
64
65
  {description && (
65
- <span
66
- title={description}
67
- className="ms-auto text-sm text-primary-dark"
68
- >
69
- <Icon icon="octicon:info-16" />
70
- </span>
66
+ <div className="ms-auto">
67
+ <Tooltip content={description}>
68
+ <Icon
69
+ icon="octicon:info-16"
70
+ className="text-sm text-primary-dark"
71
+ />
72
+ </Tooltip>
73
+ </div>
71
74
  )}
72
75
  </div>
73
76
  )}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
- import { Dropdown, Calendar } from "../../../components";
3
+ import { Tooltip, Dropdown, Calendar } from "../../../components";
4
4
  import { Icon } from "@iconify/react";
5
5
  import dayjs from "dayjs";
6
6
 
@@ -100,12 +100,14 @@ export const Date: React.FC<DateProps> = ({
100
100
  </span>
101
101
  )}
102
102
  {description && (
103
- <span
104
- title={description}
105
- className="ms-auto text-sm text-primary-dark"
106
- >
107
- <Icon icon="octicon:info-16" />
108
- </span>
103
+ <div className="ms-auto">
104
+ <Tooltip content={description}>
105
+ <Icon
106
+ icon="octicon:info-16"
107
+ className="text-sm text-primary-dark"
108
+ />
109
+ </Tooltip>
110
+ </div>
109
111
  )}
110
112
  </div>
111
113
  )}
@@ -157,6 +159,7 @@ export const Date: React.FC<DateProps> = ({
157
159
  type="button"
158
160
  ref={dropdownRef}
159
161
  className={`w-0 my-0.5 ${height}`}
162
+ tabIndex={-1}
160
163
  >
161
164
  1
162
165
  </button>
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface EmailProps
@@ -51,9 +52,12 @@ export const Email: React.FC<EmailProps> = ({
51
52
  </span>
52
53
  )}
53
54
  {description && (
54
- <span title={description} className="text-sm text-primary-dark">
55
- <Icon icon="octicon:info-16" />
56
- </span>
55
+ <Tooltip content={description}>
56
+ <Icon
57
+ icon="octicon:info-16"
58
+ className="text-sm text-primary-dark"
59
+ />
60
+ </Tooltip>
57
61
  )}
58
62
  </div>
59
63
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -84,12 +85,12 @@ export const File: React.FC<FileProps> = ({
84
85
  </span>
85
86
  )}
86
87
  {description && (
87
- <span
88
- title={description}
89
- className="text-sm text-primary-dark"
90
- >
91
- <Icon icon="octicon:info-16" />
92
- </span>
88
+ <Tooltip content={description}>
89
+ <Icon
90
+ icon="octicon:info-16"
91
+ className="text-sm text-primary-dark"
92
+ />
93
+ </Tooltip>
93
94
  )}
94
95
  </div>
95
96
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useRef } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface NumberProps
@@ -53,9 +54,12 @@ export const Number: React.FC<NumberProps> = ({
53
54
  </span>
54
55
  )}
55
56
  {description && (
56
- <span title={description} className="text-sm text-primary-dark">
57
- <Icon icon="octicon:info-16" />
58
- </span>
57
+ <Tooltip content={description}>
58
+ <Icon
59
+ icon="octicon:info-16"
60
+ className="text-sm text-primary-dark"
61
+ />
62
+ </Tooltip>
59
63
  )}
60
64
  </div>
61
65
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface PasswordProps
@@ -52,9 +53,12 @@ export const Password: React.FC<PasswordProps> = ({
52
53
  </span>
53
54
  )}
54
55
  {description && (
55
- <span title={description} className="text-sm text-primary-dark">
56
- <Icon icon="octicon:info-16" />
57
- </span>
56
+ <Tooltip content={description}>
57
+ <Icon
58
+ icon="octicon:info-16"
59
+ className="text-sm text-primary-dark"
60
+ />
61
+ </Tooltip>
58
62
  )}
59
63
  </div>
60
64
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface RadioProps
@@ -52,12 +53,14 @@ export const Radio: React.FC<RadioProps> = ({
52
53
  {label}
53
54
  </span>
54
55
  {description && (
55
- <span
56
- title={description}
57
- className="ms-auto text-sm text-primary-dark"
58
- >
59
- <Icon icon="octicon:info-16" />
60
- </span>
56
+ <div className="ms-auto">
57
+ <Tooltip content={description}>
58
+ <Icon
59
+ icon="octicon:info-16"
60
+ className="text-sm text-primary-dark"
61
+ />
62
+ </Tooltip>
63
+ </div>
61
64
  )}
62
65
  </div>
63
66
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useRef } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface RangeProps
@@ -47,9 +48,12 @@ export const Range: React.FC<RangeProps> = ({
47
48
  </span>
48
49
  )}
49
50
  {description && (
50
- <span title={description} className="text-sm text-primary-dark">
51
- <Icon icon="octicon:info-16" />
52
- </span>
51
+ <Tooltip content={description}>
52
+ <Icon
53
+ icon="octicon:info-16"
54
+ className="text-sm text-primary-dark"
55
+ />
56
+ </Tooltip>
53
57
  )}
54
58
  </div>
55
59
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface TextProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -50,9 +51,12 @@ export const Text: React.FC<TextProps> = ({
50
51
  </span>
51
52
  )}
52
53
  {description && (
53
- <span title={description} className="text-sm text-primary-dark">
54
- <Icon icon="octicon:info-16" />
55
- </span>
54
+ <Tooltip content={description}>
55
+ <Icon
56
+ icon="octicon:info-16"
57
+ className="text-sm text-primary-dark"
58
+ />
59
+ </Tooltip>
56
60
  )}
57
61
  </div>
58
62
  )}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
- import { Dropdown } from "../../../components";
3
+ import { Tooltip, Dropdown } from "../../../components";
4
4
  import { Icon } from "@iconify/react";
5
5
  import dayjs from "dayjs";
6
6
 
@@ -172,12 +172,14 @@ export const Time: React.FC<TimeProps> = ({
172
172
  </span>
173
173
  )}
174
174
  {description && (
175
- <span
176
- title={description}
177
- className="ms-auto text-sm text-primary-dark"
178
- >
179
- <Icon icon="octicon:info-16" />
180
- </span>
175
+ <div className="ms-auto">
176
+ <Tooltip content={description}>
177
+ <Icon
178
+ icon="octicon:info-16"
179
+ className="text-sm text-primary-dark"
180
+ />
181
+ </Tooltip>
182
+ </div>
181
183
  )}
182
184
  </div>
183
185
  )}
@@ -214,6 +216,7 @@ export const Time: React.FC<TimeProps> = ({
214
216
  type="button"
215
217
  ref={dropdownRef}
216
218
  className={`w-0 my-0.5 ${height}`}
219
+ tabIndex={-1}
217
220
  >
218
221
  1
219
222
  </button>
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { createPortal } from "react-dom";
4
5
  import { Icon } from "@iconify/react";
5
6
 
@@ -122,12 +123,14 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
122
123
  </span>
123
124
  )}
124
125
  {description && (
125
- <span
126
- title={description}
127
- className="ms-auto text-sm text-primary-dark"
128
- >
129
- <Icon icon="octicon:info-16" />
130
- </span>
126
+ <div className="ms-auto">
127
+ <Tooltip content={description}>
128
+ <Icon
129
+ icon="octicon:info-16"
130
+ className="text-sm text-primary-dark"
131
+ />
132
+ </Tooltip>
133
+ </div>
131
134
  )}
132
135
  </div>
133
136
  )}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
- import { Dropdown } from "../../../components";
3
+ import { Tooltip, Dropdown } from "../../../components";
4
4
  import { Icon } from "@iconify/react";
5
5
 
6
6
  export interface MultipleSelectProps
@@ -116,12 +116,14 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
116
116
  </span>
117
117
  )}
118
118
  {description && (
119
- <span
120
- title={description}
121
- className="ms-auto text-sm text-primary-dark"
122
- >
123
- <Icon icon="octicon:info-16" />
124
- </span>
119
+ <div className="ms-auto">
120
+ <Tooltip content={description}>
121
+ <Icon
122
+ icon="octicon:info-16"
123
+ className="text-sm text-primary-dark"
124
+ />
125
+ </Tooltip>
126
+ </div>
125
127
  )}
126
128
  </div>
127
129
  )}
@@ -248,6 +250,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
248
250
  style={{
249
251
  height: dropdownHeight,
250
252
  }}
253
+ tabIndex={-1}
251
254
  >
252
255
  1
253
256
  </button>
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
- import { Dropdown } from "../../../components";
3
+ import { Tooltip, Dropdown } from "../../../components";
4
4
  import { Icon } from "@iconify/react";
5
5
 
6
6
  const countryPhoneCode = [
@@ -1527,12 +1527,14 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1527
1527
  </span>
1528
1528
  )}
1529
1529
  {description && (
1530
- <span
1531
- title={description}
1532
- className="ms-auto text-sm text-primary-dark"
1533
- >
1534
- <Icon icon="octicon:info-16" />
1535
- </span>
1530
+ <div className="ms-auto">
1531
+ <Tooltip content={description}>
1532
+ <Icon
1533
+ icon="octicon:info-16"
1534
+ className="text-sm text-primary-dark"
1535
+ />
1536
+ </Tooltip>
1537
+ </div>
1536
1538
  )}
1537
1539
  </div>
1538
1540
  )}
@@ -1602,6 +1604,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
1602
1604
  type="button"
1603
1605
  ref={dropdownRef}
1604
1606
  className={`w-0 my-0.5 ${height}`}
1607
+ tabIndex={-1}
1605
1608
  >
1606
1609
  1
1607
1610
  </button>
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { PinField } from "react-pin-field";
4
5
  import { Icon } from "@iconify/react";
5
6
 
@@ -42,12 +43,14 @@ export const Pin: React.FC<PinProps> = ({
42
43
  </span>
43
44
  )}
44
45
  {description && (
45
- <span
46
- title={description}
47
- className="ms-auto text-sm text-primary-dark"
48
- >
49
- <Icon icon="octicon:info-16" />
50
- </span>
46
+ <div className="ms-auto">
47
+ <Tooltip content={description}>
48
+ <Icon
49
+ icon="octicon:info-16"
50
+ className="text-sm text-primary-dark"
51
+ />
52
+ </Tooltip>
53
+ </div>
51
54
  )}
52
55
  </div>
53
56
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface RatingProps
@@ -57,12 +58,14 @@ export const Rating: React.FC<RatingProps> = ({
57
58
  </span>
58
59
  )}
59
60
  {description && (
60
- <span
61
- title={description}
62
- className="ms-auto text-sm text-primary-dark"
63
- >
64
- <Icon icon="octicon:info-16" />
65
- </span>
61
+ <div className="ms-auto">
62
+ <Tooltip content={description}>
63
+ <Icon
64
+ icon="octicon:info-16"
65
+ className="text-sm text-primary-dark"
66
+ />
67
+ </Tooltip>
68
+ </div>
66
69
  )}
67
70
  </div>
68
71
  )}
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState } from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface SecretProps
@@ -46,12 +47,14 @@ export const Secret: React.FC<SecretProps> = ({
46
47
  </span>
47
48
  )}
48
49
  {description && (
49
- <span
50
- title={description}
51
- className="ms-auto text-sm text-primary-dark"
52
- >
53
- <Icon icon="octicon:info-16" />
54
- </span>
50
+ <div className="ms-auto">
51
+ <Tooltip content={description}>
52
+ <Icon
53
+ icon="octicon:info-16"
54
+ className="text-sm text-primary-dark"
55
+ />
56
+ </Tooltip>
57
+ </div>
55
58
  )}
56
59
  </div>
57
60
  )}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import React, { useState, useEffect, useRef } from "react";
3
- import { Dropdown } from "../../../components";
3
+ import { Tooltip, Dropdown } from "../../../components";
4
4
  import { Icon } from "@iconify/react";
5
5
 
6
6
  export interface SelectProps
@@ -89,12 +89,14 @@ export const Select: React.FC<SelectProps> = ({
89
89
  </span>
90
90
  )}
91
91
  {description && (
92
- <span
93
- title={description}
94
- className="ms-auto text-sm text-primary-dark"
95
- >
96
- <Icon icon="octicon:info-16" />
97
- </span>
92
+ <div className="ms-auto">
93
+ <Tooltip content={description}>
94
+ <Icon
95
+ icon="octicon:info-16"
96
+ className="text-sm text-primary-dark"
97
+ />
98
+ </Tooltip>
99
+ </div>
98
100
  )}
99
101
  </div>
100
102
  )}
@@ -145,6 +147,7 @@ export const Select: React.FC<SelectProps> = ({
145
147
  type="button"
146
148
  ref={dropdownRef}
147
149
  className={`w-0 my-0.5 ${height}`}
150
+ tabIndex={-1}
148
151
  >
149
152
  1
150
153
  </button>
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React from "react";
3
+ import { Tooltip } from "../../../components";
3
4
  import { Icon } from "@iconify/react";
4
5
 
5
6
  export interface TextareaProps
@@ -51,9 +52,12 @@ export const Textarea: React.FC<TextareaProps> = ({
51
52
  </span>
52
53
  )}
53
54
  {description && (
54
- <span title={description} className="text-sm text-primary-dark">
55
- <Icon icon="octicon:info-16" />
56
- </span>
55
+ <Tooltip content={description}>
56
+ <Icon
57
+ icon="octicon:info-16"
58
+ className="text-sm text-primary-dark"
59
+ />
60
+ </Tooltip>
57
61
  )}
58
62
  </div>
59
63
  )}