next-helios-fe 1.8.7 → 1.8.9
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/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/content-container/drawer.tsx +1 -1
- package/src/components/content-container/modal/index.tsx +2 -2
- package/src/components/content-container/wizard/index.tsx +6 -3
- package/src/components/dialog/index.tsx +1 -1
- package/src/components/form/input/checkbox.tsx +1 -1
- package/src/components/form/input/color.tsx +3 -3
- package/src/components/form/input/date.tsx +2 -2
- package/src/components/form/input/email.tsx +1 -1
- package/src/components/form/input/file.tsx +5 -5
- package/src/components/form/input/number.tsx +1 -1
- package/src/components/form/input/password.tsx +2 -2
- package/src/components/form/input/radio.tsx +1 -1
- package/src/components/form/input/search.tsx +3 -3
- package/src/components/form/input/text.tsx +1 -1
- package/src/components/form/input/time.tsx +2 -2
- package/src/components/form/other/autocomplete.tsx +2 -2
- package/src/components/form/other/multipleSelect.tsx +16 -22
- package/src/components/form/other/phoneNumber.tsx +3 -3
- package/src/components/form/other/pin.tsx +1 -1
- package/src/components/form/other/rating.tsx +1 -1
- package/src/components/form/other/secret.tsx +3 -3
- package/src/components/form/other/select.tsx +3 -3
- package/src/components/form/other/textarea.tsx +1 -1
- package/src/components/syntax-highlighter/index.tsx +1 -1
- package/src/components/table/index.tsx +11 -11
package/package.json
CHANGED
@@ -61,7 +61,7 @@ export const Drawer: React.FC<DrawerProps> = ({
|
|
61
61
|
</div>
|
62
62
|
<button
|
63
63
|
type="button"
|
64
|
-
className="flex justify-center items-center rounded-full p-1 text-
|
64
|
+
className="flex justify-center items-center rounded-full p-1 text-disabled hover:bg-secondary-light"
|
65
65
|
onClick={() => {
|
66
66
|
setOpen(false);
|
67
67
|
}}
|
@@ -68,10 +68,10 @@ export const Modal: React.FC<ModalProps> = ({
|
|
68
68
|
<span className="text-lg">{title}</span>
|
69
69
|
{!options?.disableClose && (
|
70
70
|
<div className="flex items-center gap-2">
|
71
|
-
<span className="text-sm text-
|
71
|
+
<span className="text-sm text-disabled">[esc]</span>
|
72
72
|
<button
|
73
73
|
type="button"
|
74
|
-
className="flex justify-center items-center rounded-full px-1 py-1 text-
|
74
|
+
className="flex justify-center items-center rounded-full px-1 py-1 text-disabled hover:bg-secondary-light"
|
75
75
|
onClick={() => {
|
76
76
|
onClose && onClose();
|
77
77
|
}}
|
@@ -108,7 +108,10 @@ export const Wizard: WizardComponent = ({
|
|
108
108
|
setActiveTab(index);
|
109
109
|
}}
|
110
110
|
>
|
111
|
-
<Icon
|
111
|
+
<Icon
|
112
|
+
icon={tab.icon}
|
113
|
+
className="text-2xl pointer-events-none"
|
114
|
+
/>
|
112
115
|
</button>
|
113
116
|
</div>
|
114
117
|
<div className="flex flex-col items-center text-center">
|
@@ -135,7 +138,7 @@ export const Wizard: WizardComponent = ({
|
|
135
138
|
<div className="flex justify-between">
|
136
139
|
<button
|
137
140
|
type="button"
|
138
|
-
className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-
|
141
|
+
className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
|
139
142
|
disabled={activeTab === 0}
|
140
143
|
onClick={() => {
|
141
144
|
setActiveTab((prev) => prev - 1);
|
@@ -148,7 +151,7 @@ export const Wizard: WizardComponent = ({
|
|
148
151
|
</button>
|
149
152
|
<button
|
150
153
|
type="button"
|
151
|
-
className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-
|
154
|
+
className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
|
152
155
|
disabled={activeTab === childrenList.length - 1}
|
153
156
|
onClick={() => {
|
154
157
|
setActiveTab((prev) => prev + 1);
|
@@ -84,7 +84,7 @@ export const Dialog: React.FC<DialogProps> = ({
|
|
84
84
|
<div className="flex justify-end gap-4">
|
85
85
|
<button
|
86
86
|
type="button"
|
87
|
-
className={`disabled:text-
|
87
|
+
className={`disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
|
88
88
|
disabled={loading}
|
89
89
|
onClick={() => {
|
90
90
|
action.onClick && action.onClick();
|
@@ -47,7 +47,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
|
|
47
47
|
<div className="flex items-center gap-2">
|
48
48
|
<span
|
49
49
|
className={`flex-1 text-sm select-none ${
|
50
|
-
rest.disabled ? "text-
|
50
|
+
rest.disabled ? "text-disabled" : "cursor-pointer"
|
51
51
|
}`}
|
52
52
|
>
|
53
53
|
{label}
|
@@ -75,7 +75,7 @@ export const Color: React.FC<ColorProps> = ({
|
|
75
75
|
<div className="relative flex flex-col">
|
76
76
|
<button
|
77
77
|
type="button"
|
78
|
-
className={`h-full px-4 border-default border rounded-md text-
|
78
|
+
className={`h-full px-4 border-default border rounded-md text-disabled cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
79
79
|
style={{ backgroundColor: tempValue }}
|
80
80
|
tabIndex={-1}
|
81
81
|
onClick={() => {
|
@@ -99,14 +99,14 @@ export const Color: React.FC<ColorProps> = ({
|
|
99
99
|
<div className="relative flex-1 flex items-center">
|
100
100
|
<input
|
101
101
|
type="text"
|
102
|
-
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
102
|
+
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
103
103
|
placeholder={rest.placeholder}
|
104
104
|
value={tempValue}
|
105
105
|
onChange={(e) => setTempValue(e.target.value.toUpperCase())}
|
106
106
|
/>
|
107
107
|
<button
|
108
108
|
type="button"
|
109
|
-
className="absolute right-4 p-1 rounded-full text-xl text-
|
109
|
+
className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
110
110
|
tabIndex={-1}
|
111
111
|
onClick={(e) => {
|
112
112
|
e.preventDefault();
|
@@ -111,7 +111,7 @@ export const Date: React.FC<DateProps> = ({
|
|
111
111
|
<div className="relative flex items-center">
|
112
112
|
<input
|
113
113
|
type="text"
|
114
|
-
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
114
|
+
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
115
115
|
disabled={rest.disabled}
|
116
116
|
readOnly
|
117
117
|
value={
|
@@ -128,7 +128,7 @@ export const Date: React.FC<DateProps> = ({
|
|
128
128
|
/>
|
129
129
|
<button
|
130
130
|
type="button"
|
131
|
-
className="absolute right-4 p-1 rounded-full text-xl text-
|
131
|
+
className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
132
132
|
tabIndex={-1}
|
133
133
|
disabled={rest.disabled}
|
134
134
|
onClick={(e) => {
|
@@ -61,7 +61,7 @@ export const Email: React.FC<EmailProps> = ({
|
|
61
61
|
)}
|
62
62
|
<input
|
63
63
|
type="email"
|
64
|
-
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
64
|
+
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
65
65
|
{...rest}
|
66
66
|
/>
|
67
67
|
</label>
|
@@ -105,7 +105,7 @@ export const File: React.FC<FileProps> = ({
|
|
105
105
|
<input
|
106
106
|
ref={inputRef}
|
107
107
|
type="file"
|
108
|
-
className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-
|
108
|
+
className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
109
109
|
onChange={(e) => {
|
110
110
|
if (rest.onChange) {
|
111
111
|
rest.onChange({
|
@@ -120,7 +120,7 @@ export const File: React.FC<FileProps> = ({
|
|
120
120
|
<span
|
121
121
|
className={`absolute px-4 pointer-events-none ${
|
122
122
|
tempFile.length === 0 &&
|
123
|
-
"text-
|
123
|
+
"text-silent duration-300 translate-x-0 peer-focus/file:translate-x-1"
|
124
124
|
}`}
|
125
125
|
>
|
126
126
|
{tempFile[0]?.name ?? rest.placeholder}
|
@@ -194,14 +194,14 @@ export const File: React.FC<FileProps> = ({
|
|
194
194
|
tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
|
195
195
|
}
|
196
196
|
className={`text-5xl ${
|
197
|
-
tempFile.length !== 0 ? "" : "text-
|
197
|
+
tempFile.length !== 0 ? "" : "text-disabled"
|
198
198
|
}`}
|
199
199
|
/>
|
200
200
|
<div className="flex flex-col gap-2 items-center">
|
201
201
|
{tempFile.length !== 0 ? (
|
202
202
|
<span>{tempFile[0]?.name}</span>
|
203
203
|
) : (
|
204
|
-
<div className="flex gap-2 text-
|
204
|
+
<div className="flex gap-2 text-disabled">
|
205
205
|
<span className="underline underline-offset-2">
|
206
206
|
Click to upload
|
207
207
|
</span>
|
@@ -210,7 +210,7 @@ export const File: React.FC<FileProps> = ({
|
|
210
210
|
)}
|
211
211
|
<span
|
212
212
|
className={`text-sm font-light ${
|
213
|
-
tempFile.length !== 0 ? "" : "text-
|
213
|
+
tempFile.length !== 0 ? "" : "text-disabled"
|
214
214
|
}`}
|
215
215
|
>
|
216
216
|
{tempFile.length !== 0
|
@@ -65,7 +65,7 @@ export const Number: React.FC<NumberProps> = ({
|
|
65
65
|
<input
|
66
66
|
ref={inputRef}
|
67
67
|
type="number"
|
68
|
-
className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
68
|
+
className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
69
69
|
{...rest}
|
70
70
|
/>
|
71
71
|
<div className="absolute right-4 flex gap-2">
|
@@ -63,12 +63,12 @@ export const Password: React.FC<PasswordProps> = ({
|
|
63
63
|
<div className="relative flex items-center">
|
64
64
|
<input
|
65
65
|
type={show ? "text" : "password"}
|
66
|
-
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
66
|
+
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
67
67
|
{...rest}
|
68
68
|
/>
|
69
69
|
<button
|
70
70
|
type="button"
|
71
|
-
className="absolute right-4 p-1 rounded-full text-xl text-
|
71
|
+
className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
72
72
|
tabIndex={-1}
|
73
73
|
onClick={(e) => {
|
74
74
|
e.preventDefault();
|
@@ -46,7 +46,7 @@ export const Radio: React.FC<RadioProps> = ({
|
|
46
46
|
<div className="flex items-center gap-2">
|
47
47
|
<span
|
48
48
|
className={`flex-1 text-sm select-none ${
|
49
|
-
rest.disabled ? "text-
|
49
|
+
rest.disabled ? "text-disabled" : "cursor-pointer"
|
50
50
|
}`}
|
51
51
|
>
|
52
52
|
{label}
|
@@ -23,17 +23,17 @@ export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
|
|
23
23
|
<label className={`relative flex items-center ${width}`}>
|
24
24
|
<Icon
|
25
25
|
icon="ic:round-search"
|
26
|
-
className="absolute left-3 text-lg text-
|
26
|
+
className="absolute left-3 text-lg text-disabled"
|
27
27
|
/>
|
28
28
|
<input
|
29
29
|
type="search"
|
30
|
-
className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-
|
30
|
+
className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
31
31
|
{...rest}
|
32
32
|
/>
|
33
33
|
{rest.value && (
|
34
34
|
<div
|
35
35
|
className={
|
36
|
-
"absolute right-4 p-1 rounded-full text-xl text-
|
36
|
+
"absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
37
37
|
}
|
38
38
|
onClick={() => {
|
39
39
|
rest.onChange &&
|
@@ -60,7 +60,7 @@ export const Text: React.FC<TextProps> = ({
|
|
60
60
|
)}
|
61
61
|
<input
|
62
62
|
type="text"
|
63
|
-
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
63
|
+
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
64
64
|
{...rest}
|
65
65
|
/>
|
66
66
|
</label>
|
@@ -184,7 +184,7 @@ export const Time: React.FC<TimeProps> = ({
|
|
184
184
|
<div className="relative flex items-center">
|
185
185
|
<input
|
186
186
|
type="time"
|
187
|
-
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden focus:placeholder:translate-x-1 placeholder:text-
|
187
|
+
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
188
188
|
value={tempValue}
|
189
189
|
onChange={(e) => {
|
190
190
|
setTempValue(e.target.value);
|
@@ -193,7 +193,7 @@ export const Time: React.FC<TimeProps> = ({
|
|
193
193
|
/>
|
194
194
|
<button
|
195
195
|
type="button"
|
196
|
-
className="absolute right-4 p-1 rounded-full text-xl text-
|
196
|
+
className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
197
197
|
tabIndex={-1}
|
198
198
|
disabled={rest.disabled}
|
199
199
|
onClick={(e) => {
|
@@ -138,7 +138,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
|
|
138
138
|
>
|
139
139
|
<input
|
140
140
|
type="text"
|
141
|
-
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
141
|
+
className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
142
142
|
placeholder={placeholder}
|
143
143
|
required={rest.required}
|
144
144
|
disabled={rest.disabled}
|
@@ -152,7 +152,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
|
|
152
152
|
setTempFilter("");
|
153
153
|
}}
|
154
154
|
/>
|
155
|
-
<div className="absolute right-4 text-xl text-
|
155
|
+
<div className="absolute right-4 text-xl text-disabled pointer-events-none">
|
156
156
|
<Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
|
157
157
|
</div>
|
158
158
|
</div>
|
@@ -69,25 +69,12 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
69
69
|
}, []);
|
70
70
|
|
71
71
|
useEffect(() => {
|
72
|
-
if (value) {
|
72
|
+
if (value?.length) {
|
73
73
|
setTempValue(value);
|
74
74
|
return;
|
75
75
|
}
|
76
76
|
}, [value]);
|
77
77
|
|
78
|
-
useEffect(() => {
|
79
|
-
onChange &&
|
80
|
-
onChange({
|
81
|
-
target: { value: tempValue },
|
82
|
-
});
|
83
|
-
}, [tempValue]);
|
84
|
-
|
85
|
-
useEffect(() => {
|
86
|
-
if (tempValue.length === 0) {
|
87
|
-
fakeInputRef.current;
|
88
|
-
}
|
89
|
-
}, [tempValue]);
|
90
|
-
|
91
78
|
useEffect(() => {
|
92
79
|
if (tempValue.length === 0) {
|
93
80
|
inputRef.current?.setCustomValidity(
|
@@ -150,7 +137,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
150
137
|
>
|
151
138
|
{!tempValue || tempValue?.length === 0 ? (
|
152
139
|
<span
|
153
|
-
className={`text-
|
140
|
+
className={`text-silent select-none duration-300 ${
|
154
141
|
openDropdown ? "translate-x-1" : "translate-x-0"
|
155
142
|
}`}
|
156
143
|
>
|
@@ -168,12 +155,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
168
155
|
className="flex items-center gap-2 px-2 py-0.5 rounded-md bg-primary text-white cursor-default pointer-events-auto"
|
169
156
|
>
|
170
157
|
<span>{menus.find((i) => i.value === item)?.label}</span>
|
171
|
-
<div
|
172
|
-
className="cursor-pointer"
|
173
|
-
onClick={() => {
|
174
|
-
setTempValue(tempValue.filter((i) => i !== item));
|
175
|
-
}}
|
176
|
-
>
|
158
|
+
<div className="cursor-pointer">
|
177
159
|
<Icon icon="pajamas:close" />
|
178
160
|
</div>
|
179
161
|
</div>
|
@@ -181,7 +163,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
181
163
|
})}
|
182
164
|
</div>
|
183
165
|
)}
|
184
|
-
<div className="ms-auto text-xl text-
|
166
|
+
<div className="ms-auto text-xl text-disabled pointer-events-none">
|
185
167
|
<Icon
|
186
168
|
icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
|
187
169
|
/>
|
@@ -210,6 +192,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
210
192
|
onClick={() => {
|
211
193
|
if (!disabled) {
|
212
194
|
setTempValue(tempValue.filter((i) => i !== item));
|
195
|
+
if (onChange) {
|
196
|
+
onChange({
|
197
|
+
target: {
|
198
|
+
value: tempValue.filter((i) => i !== item),
|
199
|
+
},
|
200
|
+
} as any);
|
201
|
+
}
|
213
202
|
}
|
214
203
|
}}
|
215
204
|
>
|
@@ -258,6 +247,11 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
258
247
|
}
|
259
248
|
onClick={() => {
|
260
249
|
setTempValue([...tempValue, item.value]);
|
250
|
+
if (onChange) {
|
251
|
+
onChange({
|
252
|
+
target: { value: [...tempValue, item.value] },
|
253
|
+
} as any);
|
254
|
+
}
|
261
255
|
}}
|
262
256
|
>
|
263
257
|
{item.label}
|
@@ -1595,7 +1595,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1595
1595
|
<div className="flex flex-row-reverse gap-4">
|
1596
1596
|
<div className="relative flex-1 flex items-center">
|
1597
1597
|
<div className="absolute left-0 flex justify-center w-14 border-r">
|
1598
|
-
<span className="text-
|
1598
|
+
<span className="text-disabled">
|
1599
1599
|
{countryCodes.find(
|
1600
1600
|
(item) => item.code === tempValue[0].split(" ")[1]
|
1601
1601
|
)?.dial_code || ""}
|
@@ -1603,7 +1603,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1603
1603
|
</div>
|
1604
1604
|
<input
|
1605
1605
|
type="number"
|
1606
|
-
className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
1606
|
+
className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
1607
1607
|
value={tempValue[1]}
|
1608
1608
|
onChange={(e) => {
|
1609
1609
|
setTempValue((prev) => [prev[0], e.target.value]);
|
@@ -1614,7 +1614,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1614
1614
|
<div className="relative" ref={triggerRef}>
|
1615
1615
|
<input
|
1616
1616
|
type="text"
|
1617
|
-
className={`max-w-[92px] w-min px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
1617
|
+
className={`max-w-[92px] w-min px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height}`}
|
1618
1618
|
disabled={rest.disabled}
|
1619
1619
|
value={tempValue[0]}
|
1620
1620
|
onChange={(e) => {
|
@@ -53,7 +53,7 @@ export const Pin: React.FC<PinProps> = ({
|
|
53
53
|
)}
|
54
54
|
<div className="flex items-center gap-4">
|
55
55
|
<PinField
|
56
|
-
className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
56
|
+
className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
57
57
|
length={6}
|
58
58
|
validate={/^[0-9]$/}
|
59
59
|
onChange={(value) => {
|
@@ -58,7 +58,7 @@ export const Secret: React.FC<SecretProps> = ({
|
|
58
58
|
<div className="relative flex items-center">
|
59
59
|
<input
|
60
60
|
type="text"
|
61
|
-
className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
61
|
+
className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
62
62
|
value={show ? value : value ? value.slice(0, 3) + ".." : ""}
|
63
63
|
disabled
|
64
64
|
{...rest}
|
@@ -66,7 +66,7 @@ export const Secret: React.FC<SecretProps> = ({
|
|
66
66
|
<div className="absolute right-4 flex">
|
67
67
|
<button
|
68
68
|
type="button"
|
69
|
-
className="p-1 rounded-full text-xl text-
|
69
|
+
className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
70
70
|
tabIndex={-1}
|
71
71
|
onClick={(e) => {
|
72
72
|
e.preventDefault();
|
@@ -77,7 +77,7 @@ export const Secret: React.FC<SecretProps> = ({
|
|
77
77
|
</button>
|
78
78
|
<button
|
79
79
|
type="button"
|
80
|
-
className="p-1 rounded-full text-xl text-
|
80
|
+
className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
81
81
|
tabIndex={-1}
|
82
82
|
onClick={(e) => {
|
83
83
|
e.preventDefault();
|
@@ -98,7 +98,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
98
98
|
<input
|
99
99
|
ref={inputRef}
|
100
100
|
type="text"
|
101
|
-
className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-
|
101
|
+
className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
|
102
102
|
openDropdown
|
103
103
|
? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
|
104
104
|
: "border-default placeholder:translate-x-0"
|
@@ -121,7 +121,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
121
121
|
);
|
122
122
|
}}
|
123
123
|
/>
|
124
|
-
<div className="absolute right-4 text-xl text-
|
124
|
+
<div className="absolute right-4 text-xl text-disabled pointer-events-none">
|
125
125
|
<Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
|
126
126
|
</div>
|
127
127
|
</div>
|
@@ -182,7 +182,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
182
182
|
<button
|
183
183
|
key={index}
|
184
184
|
type="button"
|
185
|
-
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-
|
185
|
+
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"
|
186
186
|
disabled={item.disabled}
|
187
187
|
onClick={() => {
|
188
188
|
setTempValue(item.value);
|
@@ -61,7 +61,7 @@ export const Textarea: React.FC<TextareaProps> = ({
|
|
61
61
|
)}
|
62
62
|
<textarea
|
63
63
|
rows={rest.rows || 10}
|
64
|
-
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-
|
64
|
+
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
65
65
|
{...rest}
|
66
66
|
/>
|
67
67
|
</label>
|
@@ -31,7 +31,7 @@ export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
|
|
31
31
|
{codeString}
|
32
32
|
</SH>
|
33
33
|
<div
|
34
|
-
className="absolute top-4 right-4 p-1 rounded-full text-xl text-
|
34
|
+
className="absolute top-4 right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
|
35
35
|
onClick={(e) => {
|
36
36
|
e.preventDefault();
|
37
37
|
navigator.clipboard.writeText(codeString);
|
@@ -348,11 +348,11 @@ export const Table: TableComponentProps = ({
|
|
348
348
|
<div className="relative flex items-center">
|
349
349
|
<Icon
|
350
350
|
icon="ic:round-search"
|
351
|
-
className="absolute text-sm text-
|
351
|
+
className="absolute text-sm text-disabled"
|
352
352
|
/>
|
353
353
|
<input
|
354
354
|
type="search"
|
355
|
-
className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-
|
355
|
+
className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
|
356
356
|
placeholder="search.."
|
357
357
|
value={
|
358
358
|
filter?.find((filterItem) => filterItem.key === item.key)
|
@@ -371,7 +371,7 @@ export const Table: TableComponentProps = ({
|
|
371
371
|
{filter?.find((filterItem) => filterItem.key === item.key)
|
372
372
|
?.value && (
|
373
373
|
<button
|
374
|
-
className="absolute right-0 rounded-full text-
|
374
|
+
className="absolute right-0 rounded-full text-disabled hover:bg-secondary-light"
|
375
375
|
onClick={() => {
|
376
376
|
setFilter(
|
377
377
|
filter?.map((filterItem) => {
|
@@ -669,7 +669,7 @@ export const Table: TableComponentProps = ({
|
|
669
669
|
<div className="invisible w-0 overflow-hidden">
|
670
670
|
<input
|
671
671
|
type="search"
|
672
|
-
className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-
|
672
|
+
className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
|
673
673
|
/>
|
674
674
|
</div>
|
675
675
|
)}
|
@@ -684,7 +684,7 @@ export const Table: TableComponentProps = ({
|
|
684
684
|
<div className="invisible w-0 overflow-hidden">
|
685
685
|
<input
|
686
686
|
type="search"
|
687
|
-
className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-
|
687
|
+
className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
|
688
688
|
/>
|
689
689
|
</div>
|
690
690
|
)}
|
@@ -701,7 +701,7 @@ export const Table: TableComponentProps = ({
|
|
701
701
|
<div className="invisible w-0 overflow-hidden">
|
702
702
|
<input
|
703
703
|
type="search"
|
704
|
-
className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-
|
704
|
+
className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
|
705
705
|
/>
|
706
706
|
</div>
|
707
707
|
)}
|
@@ -768,7 +768,7 @@ export const Table: TableComponentProps = ({
|
|
768
768
|
/>
|
769
769
|
</div>
|
770
770
|
{filteredData && filteredData.length !== 0 && (
|
771
|
-
<span className="hidden md:block text-sm text-
|
771
|
+
<span className="hidden md:block text-sm text-disabled">{`Showing ${
|
772
772
|
(page - 1) * maxRow + 1
|
773
773
|
} to ${
|
774
774
|
page * maxRow > filteredData?.length
|
@@ -779,7 +779,7 @@ export const Table: TableComponentProps = ({
|
|
779
779
|
<div className="flex items-center gap-2 text-xs">
|
780
780
|
<button
|
781
781
|
type="button"
|
782
|
-
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-
|
782
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
|
783
783
|
disabled={page === 1}
|
784
784
|
onClick={() => {
|
785
785
|
setPage(1);
|
@@ -793,7 +793,7 @@ export const Table: TableComponentProps = ({
|
|
793
793
|
</button>
|
794
794
|
<button
|
795
795
|
type="button"
|
796
|
-
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-
|
796
|
+
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
|
797
797
|
disabled={page === 1}
|
798
798
|
onClick={() => {
|
799
799
|
setPage((prev) => prev - 1);
|
@@ -827,7 +827,7 @@ export const Table: TableComponentProps = ({
|
|
827
827
|
</div>
|
828
828
|
<button
|
829
829
|
type="button"
|
830
|
-
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-
|
830
|
+
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
|
831
831
|
disabled={filteredData?.length <= page * maxRow}
|
832
832
|
onClick={() => {
|
833
833
|
setPage((prev) => prev + 1);
|
@@ -838,7 +838,7 @@ export const Table: TableComponentProps = ({
|
|
838
838
|
</button>
|
839
839
|
<button
|
840
840
|
type="button"
|
841
|
-
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-
|
841
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
|
842
842
|
disabled={filteredData?.length <= page * maxRow}
|
843
843
|
onClick={() => {
|
844
844
|
setPage(Math.ceil(filteredData?.length / maxRow));
|