next-helios-fe 1.8.52 → 1.8.54

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.52",
3
+ "version": "1.8.54",
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
  )}
@@ -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
  )}
@@ -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
  )}
@@ -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
  )}
@@ -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
  )}
@@ -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
  )}