next-helios-fe 1.8.6 → 1.8.8
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/components/form/other/multipleSelect.d.ts +1 -1
- 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 +39 -10
- 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 +12 -4
- 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>
|
@@ -4,7 +4,10 @@ import { Dropdown } from "../../../components";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
5
5
|
|
6
6
|
export interface MultipleSelectProps
|
7
|
-
extends Omit<
|
7
|
+
extends Omit<
|
8
|
+
React.HTMLAttributes<HTMLDivElement>,
|
9
|
+
"defaultvalue" | "value" | "onChange"
|
10
|
+
> {
|
8
11
|
menus: {
|
9
12
|
label: string;
|
10
13
|
value: string;
|
@@ -45,7 +48,9 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
45
48
|
const [openDropdown, setOpenDropdown] = useState(false);
|
46
49
|
const [dropdownWidth, setDropdownWidth] = useState<number>(0);
|
47
50
|
const [dropdownHeight, setDropdownHeight] = useState<number>(0);
|
48
|
-
const
|
51
|
+
const fakeInputRef = useRef<HTMLDivElement>(null);
|
52
|
+
const itemContainerRef = useRef<HTMLDivElement>(null);
|
53
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
49
54
|
const dropdownRef = useRef<HTMLButtonElement>(null);
|
50
55
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
51
56
|
const height =
|
@@ -77,6 +82,22 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
77
82
|
});
|
78
83
|
}, [tempValue]);
|
79
84
|
|
85
|
+
useEffect(() => {
|
86
|
+
if (tempValue.length === 0) {
|
87
|
+
fakeInputRef.current;
|
88
|
+
}
|
89
|
+
}, [tempValue]);
|
90
|
+
|
91
|
+
useEffect(() => {
|
92
|
+
if (tempValue.length === 0) {
|
93
|
+
inputRef.current?.setCustomValidity(
|
94
|
+
"Please select some items in the list."
|
95
|
+
);
|
96
|
+
} else {
|
97
|
+
inputRef.current?.setCustomValidity("");
|
98
|
+
}
|
99
|
+
}, [tempValue]);
|
100
|
+
|
80
101
|
return (
|
81
102
|
<div className="flex flex-row-reverse items-end">
|
82
103
|
<label className={`grid gap-2 ${width}`}>
|
@@ -103,7 +124,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
103
124
|
)}
|
104
125
|
<div className="relative flex items-center">
|
105
126
|
<div
|
106
|
-
ref={
|
127
|
+
ref={fakeInputRef}
|
107
128
|
className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
|
108
129
|
disabled
|
109
130
|
? "bg-secondary-light cursor-default pointer-events-none"
|
@@ -119,24 +140,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
119
140
|
setOpenDropdown(true);
|
120
141
|
dropdownRef.current?.click();
|
121
142
|
setDropdownWidth(
|
122
|
-
|
143
|
+
fakeInputRef?.current?.getBoundingClientRect()?.width || 0
|
123
144
|
);
|
124
145
|
setDropdownHeight(
|
125
|
-
|
146
|
+
fakeInputRef?.current?.getBoundingClientRect()?.height || 0
|
126
147
|
);
|
127
148
|
}}
|
128
149
|
{...rest}
|
129
150
|
>
|
130
151
|
{!tempValue || tempValue?.length === 0 ? (
|
131
152
|
<span
|
132
|
-
className={`text-
|
153
|
+
className={`text-silent select-none duration-300 ${
|
133
154
|
openDropdown ? "translate-x-1" : "translate-x-0"
|
134
155
|
}`}
|
135
156
|
>
|
136
157
|
{placeholder}
|
137
158
|
</span>
|
138
159
|
) : (
|
139
|
-
<div
|
160
|
+
<div
|
161
|
+
ref={itemContainerRef}
|
162
|
+
className="flex flex-wrap gap-2 w-full h-min pointer-events-none invisible"
|
163
|
+
>
|
140
164
|
{tempValue?.map((item) => {
|
141
165
|
return (
|
142
166
|
<div
|
@@ -157,15 +181,20 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
157
181
|
})}
|
158
182
|
</div>
|
159
183
|
)}
|
160
|
-
<div className="ms-auto text-xl text-
|
184
|
+
<div className="ms-auto text-xl text-disabled pointer-events-none">
|
161
185
|
<Icon
|
162
186
|
icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
|
163
187
|
/>
|
164
188
|
</div>
|
165
189
|
</div>
|
190
|
+
<input
|
191
|
+
ref={inputRef}
|
192
|
+
type="text"
|
193
|
+
className="absolute bottom-0 -z-10 w-full border-0 focus:ring-0"
|
194
|
+
/>
|
166
195
|
<div
|
167
|
-
className="absolute flex flex-wrap gap-2 h-min
|
168
|
-
style={{ width:
|
196
|
+
className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
|
197
|
+
style={{ width: itemContainerRef.current?.clientWidth }}
|
169
198
|
>
|
170
199
|
{tempValue?.map((item) => {
|
171
200
|
return (
|
@@ -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();
|
@@ -61,6 +61,14 @@ export const Select: React.FC<SelectProps> = ({
|
|
61
61
|
}
|
62
62
|
}, [rest.value, rest.defaultValue]);
|
63
63
|
|
64
|
+
useEffect(() => {
|
65
|
+
if (!tempValue) {
|
66
|
+
inputRef.current?.setCustomValidity("Please select an item in the list.");
|
67
|
+
} else {
|
68
|
+
inputRef.current?.setCustomValidity("");
|
69
|
+
}
|
70
|
+
}, [tempValue]);
|
71
|
+
|
64
72
|
return (
|
65
73
|
<div className="flex flex-row-reverse items-end">
|
66
74
|
<label className={`grid gap-2 ${width}`}>
|
@@ -90,7 +98,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
90
98
|
<input
|
91
99
|
ref={inputRef}
|
92
100
|
type="text"
|
93
|
-
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} ${
|
94
102
|
openDropdown
|
95
103
|
? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
|
96
104
|
: "border-default placeholder:translate-x-0"
|
@@ -98,12 +106,12 @@ export const Select: React.FC<SelectProps> = ({
|
|
98
106
|
placeholder={placeholder}
|
99
107
|
required={rest.required}
|
100
108
|
disabled={rest.disabled}
|
101
|
-
readOnly
|
102
109
|
value={
|
103
110
|
tempValue
|
104
111
|
? menus.find((item) => item.value === tempValue)?.label
|
105
112
|
: ""
|
106
113
|
}
|
114
|
+
onChange={(e) => {}}
|
107
115
|
onClick={(e) => {
|
108
116
|
e.preventDefault();
|
109
117
|
setOpenDropdown(true);
|
@@ -113,7 +121,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
113
121
|
);
|
114
122
|
}}
|
115
123
|
/>
|
116
|
-
<div className="absolute right-4 text-xl text-
|
124
|
+
<div className="absolute right-4 text-xl text-disabled pointer-events-none">
|
117
125
|
<Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
|
118
126
|
</div>
|
119
127
|
</div>
|
@@ -174,7 +182,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
174
182
|
<button
|
175
183
|
key={index}
|
176
184
|
type="button"
|
177
|
-
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"
|
178
186
|
disabled={item.disabled}
|
179
187
|
onClick={() => {
|
180
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);
|