@iota/apps-ui-kit 0.7.1 → 0.7.3
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/CHANGELOG.md +15 -0
- package/dist/index.es.js +169 -169
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +7 -7
- package/dist/index.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/lib/components/molecules/account/Account.tsx +41 -38
- package/src/lib/components/molecules/input/TextArea.tsx +3 -1
- package/src/lib/components/molecules/visual-asset-card/VisualAssetCard.tsx +5 -3
- package/src/lib/styles/base.css +7 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iota/apps-ui-kit",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.3",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"classnames": "^2.5.1",
|
|
31
31
|
"lodash.merge": "^4.6.2",
|
|
32
32
|
"react-number-format": "^5.2.2",
|
|
33
|
-
"@iota/apps-ui-icons": "0.4.
|
|
33
|
+
"@iota/apps-ui-icons": "0.4.2"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^18 || ^19",
|
|
@@ -125,13 +125,15 @@ export function Account({
|
|
|
125
125
|
},
|
|
126
126
|
)}
|
|
127
127
|
>
|
|
128
|
-
<div className="flex items-center
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
128
|
+
<div className="flex w-full items-center gap-x-3">
|
|
129
|
+
<div>
|
|
130
|
+
<Avatar isLocked={isLocked} />
|
|
131
|
+
</div>
|
|
132
|
+
<div className="flex w-full min-w-0 flex-col items-start py-xs">
|
|
133
|
+
<div className="flex w-full min-w-0 items-center space-x-2">
|
|
134
|
+
<p className="account-title-color min-w-0 max-w-full truncate font-inter text-title-md">
|
|
133
135
|
{title}
|
|
134
|
-
</
|
|
136
|
+
</p>
|
|
135
137
|
{badgeText && badgeType ? (
|
|
136
138
|
badgeTooltipText ? (
|
|
137
139
|
<Tooltip text={badgeTooltipText} position={badgeTooltipPosition}>
|
|
@@ -151,41 +153,42 @@ export function Account({
|
|
|
151
153
|
isExternal={isExternal}
|
|
152
154
|
/>
|
|
153
155
|
</div>
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
156
|
+
|
|
157
|
+
<div className="ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
|
|
158
|
+
<div className="account-icon-color flex items-center space-x-2 [&_button:not(.locked)]:invisible group-hover:[&_button:not(.locked)]:visible">
|
|
159
|
+
{onOptionsClick && (
|
|
160
|
+
<ButtonUnstyled onClick={onOptionsClick}>
|
|
161
|
+
<MoreHoriz />
|
|
162
|
+
</ButtonUnstyled>
|
|
163
|
+
)}
|
|
164
|
+
{onLockAccountClick &&
|
|
165
|
+
onUnlockAccountClick &&
|
|
166
|
+
(isLocked ? (
|
|
167
|
+
<div className="flex items-center">
|
|
168
|
+
<ButtonUnstyled
|
|
169
|
+
onClick={onUnlockAccountClick}
|
|
170
|
+
testId="account-unlock"
|
|
171
|
+
className="locked"
|
|
172
|
+
>
|
|
173
|
+
<LockLocked />
|
|
174
|
+
</ButtonUnstyled>
|
|
175
|
+
</div>
|
|
176
|
+
) : (
|
|
177
|
+
<ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
|
|
178
|
+
<LockUnlocked />
|
|
179
|
+
</ButtonUnstyled>
|
|
180
|
+
))}
|
|
181
|
+
</div>
|
|
182
|
+
{showSelected && (
|
|
183
|
+
<ButtonUnstyled>
|
|
184
|
+
{isSelected ? (
|
|
185
|
+
<CheckmarkFilled className="account-check-active-color h-5 w-5" />
|
|
186
|
+
) : (
|
|
187
|
+
<RadioOff className="account-check-inactive-color h-5 w-5" />
|
|
188
|
+
)}
|
|
160
189
|
</ButtonUnstyled>
|
|
161
190
|
)}
|
|
162
|
-
{onLockAccountClick &&
|
|
163
|
-
onUnlockAccountClick &&
|
|
164
|
-
(isLocked ? (
|
|
165
|
-
<div className="flex items-center">
|
|
166
|
-
<ButtonUnstyled
|
|
167
|
-
onClick={onUnlockAccountClick}
|
|
168
|
-
testId="account-unlock"
|
|
169
|
-
className="locked"
|
|
170
|
-
>
|
|
171
|
-
<LockLocked />
|
|
172
|
-
</ButtonUnstyled>
|
|
173
|
-
</div>
|
|
174
|
-
) : (
|
|
175
|
-
<ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
|
|
176
|
-
<LockUnlocked />
|
|
177
|
-
</ButtonUnstyled>
|
|
178
|
-
))}
|
|
179
191
|
</div>
|
|
180
|
-
{showSelected && (
|
|
181
|
-
<ButtonUnstyled>
|
|
182
|
-
{isSelected ? (
|
|
183
|
-
<CheckmarkFilled className="account-check-active-color h-5 w-5" />
|
|
184
|
-
) : (
|
|
185
|
-
<RadioOff className="account-check-inactive-color h-5 w-5" />
|
|
186
|
-
)}
|
|
187
|
-
</ButtonUnstyled>
|
|
188
|
-
)}
|
|
189
192
|
</div>
|
|
190
193
|
</div>
|
|
191
194
|
);
|
|
@@ -62,6 +62,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(func
|
|
|
62
62
|
isResizeEnabled,
|
|
63
63
|
required,
|
|
64
64
|
isContentVisible,
|
|
65
|
+
defaultValue,
|
|
65
66
|
...textareaProps
|
|
66
67
|
},
|
|
67
68
|
ref,
|
|
@@ -101,7 +102,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(func
|
|
|
101
102
|
isInputContentVisible && isResizeEnabled ? 'resize-y' : 'resize-none',
|
|
102
103
|
!isInputContentVisible && 'not-visible select-none text-transparent',
|
|
103
104
|
)}
|
|
104
|
-
|
|
105
|
+
defaultValue={isInputContentVisible && defaultValue ? defaultValue : undefined}
|
|
106
|
+
value={isInputContentVisible && value ? value : undefined}
|
|
105
107
|
{...textareaProps}
|
|
106
108
|
/>
|
|
107
109
|
{!isInputContentVisible && (
|
|
@@ -71,15 +71,17 @@ export function VisualAssetCard({
|
|
|
71
71
|
)}
|
|
72
72
|
{isHoverable && onIconClick && (
|
|
73
73
|
<ButtonUnstyled
|
|
74
|
-
className="visual-asset-icon-color absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
|
|
74
|
+
className="visual-asset-icon-color absolute right-2 top-2 z-10 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
|
|
75
75
|
onClick={handleIconClick}
|
|
76
76
|
>
|
|
77
77
|
{icon}
|
|
78
78
|
</ButtonUnstyled>
|
|
79
79
|
)}
|
|
80
80
|
{isHoverable && assetTitle && (
|
|
81
|
-
<div className="absolute bottom-0
|
|
82
|
-
<span className="visual-asset-title-color text-title-md">
|
|
81
|
+
<div className="absolute bottom-0 w-full p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
|
|
82
|
+
<span className="visual-asset-title-color break-words text-title-md">
|
|
83
|
+
{assetTitle}
|
|
84
|
+
</span>
|
|
83
85
|
</div>
|
|
84
86
|
)}
|
|
85
87
|
</div>
|
package/src/lib/styles/base.css
CHANGED
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
@supports selector(::-webkit-scrollbar) {
|
|
115
115
|
*::-webkit-scrollbar {
|
|
116
116
|
width: 0.875rem;
|
|
117
|
+
height: 0.875rem;
|
|
117
118
|
}
|
|
118
119
|
|
|
119
120
|
*::-webkit-scrollbar-track {
|
|
@@ -134,4 +135,10 @@
|
|
|
134
135
|
.names *::-webkit-scrollbar-thumb {
|
|
135
136
|
box-shadow: inset 0 0 10px 10px #3c4656;
|
|
136
137
|
}
|
|
138
|
+
|
|
139
|
+
*::-webkit-scrollbar-corner,
|
|
140
|
+
.dark *::-webkit-scrollbar-corner,
|
|
141
|
+
.names *::-webkit-scrollbar-corner {
|
|
142
|
+
background: transparent;
|
|
143
|
+
}
|
|
137
144
|
}
|