mimir-ui-kit 1.37.8 → 1.37.9
Sign up to get free protection for your applications and to get access to all the features.
package/dist/assets/TextArea.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._textarea-
|
|
1
|
+
._textarea-wrapper_rk5xe_2 ._textarea_rk5xe_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_rk5xe_2 ._textarea_rk5xe_2._has-label_rk5xe_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_rk5xe_2 ._clear_rk5xe_11{align-self:flex-start!important;margin-top:var(--textarea-clear-margin-top)}._textarea-wrapper_rk5xe_2 ._required-mark_rk5xe_15{display:block;flex:0 0 var(--input-required-mark-size);align-self:flex-start;width:var(--input-required-mark-size);height:var(--input-required-mark-size);margin-top:var(--required-mark-margin);margin-left:var(--mimir-space-m);background-color:var(--citrine-normal);border-radius:50%}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--mimir-space-m);z-index:1;display:flex;max-width:calc(100% - var(--textarea-space));color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;-moz-column-gap:var(--mimir-space-xs);column-gap:var(--mimir-space-xs);transform-origin:left center;transition:transform .15s ease-out,font-size .15s ease-out,left .15s ease-out,color .15s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}._textarea-wrapper_rk5xe_2 ._label-text_rk5xe_42{overflow:hidden;text-overflow:ellipsis}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26._has-right-slot_rk5xe_46{max-width:calc(100% - var(--textarea-space) - var(--mimir-space-2xl))}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26._has-right-slot_rk5xe_46._has-required_rk5xe_49{max-width:calc(100% - var(--textarea-space) - var(--mimir-space-2xl) - var(--mimir-space-xl))}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26._has-required_rk5xe_49{max-width:calc(100% - var(--textarea-space) - var(--mimir-space-2xl))}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26._has-left-slot_rk5xe_55{left:calc(var(--mimir-space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26._active-label_rk5xe_58{font-size:var(--label-font-size-active);transform:var(--active-label-transform)}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26._active-label_rk5xe_58._has-left-slot_rk5xe_55{left:var(--mimir-space-m)}._textarea-wrapper_rk5xe_2 ._label_rk5xe_26._active-label_rk5xe_58 ._required-mark_rk5xe_15{align-self:center;margin-top:0;margin-left:0}._s_rk5xe_71{--textarea-space: var(--mimir-space-2s);--required-mark-margin: var(--mimir-space-2s);--textarea-top-space: var(--mimir-space-l);--textarea-height: 76px;--textarea-padding: var(--mimir-space-xs) var(--mimir-space-s);--active-label-transform: translate( 0, calc(var(--label-font-size-active) * -1) );--textarea-clear-margin-top: var(--mimir-space-m)}._m_rk5xe_84{--textarea-space: var(--mimir-space-2s);--required-mark-margin: var(--mimir-space-2s);--textarea-top-space: var(--mimir-space-l);--textarea-height: 88px;--textarea-padding: var(--mimir-space-xs) var(--mimir-space-s);--active-label-transform: translate( 0, calc(var(--label-font-size-active) * -1) );--textarea-clear-margin-top: var(--mimir-space-m)}._l_rk5xe_26{--textarea-space: var(--mimir-space-2m);--required-mark-margin: var(--mimir-space-2m);--textarea-top-space: 25px;--textarea-height: 120px;--textarea-padding: var(--mimir-space-2m);--active-label-transform: translate( 0, calc(var(--label-font-size-active) * -1) );--textarea-clear-margin-top: var(--mimir-space-xl)}._input-s_rk5xe_110{--textarea-height: var(--mimir-space-xxl) !important;--textarea-space: var(--mimir-space-1xs) !important;--textarea-top-space: calc(var(--mimir-space-l) - 1px) !important;--active-label-transform: translate(0, calc(var(--mimir-space-xs) * -1));--required-mark-margin: var(--mimir-space-2m)}._input-m_rk5xe_118{--textarea-height: var(--mimir-space-4xl) !important;--textarea-space: var(--mimir-space-2xs) !important;--textarea-top-space: calc(var(--mimir-space-l) + 1px) !important;--active-label-transform: translate(0, calc(var(--mimir-space-xss) * -1));--required-mark-margin: var(--mimir-space-l)}._input-l_rk5xe_126{--textarea-height: var(--mimir-space-4xxl) !important;--textarea-space: var(--mimir-space-2xs) !important;--required-mark-margin: var(--mimir-space-1xl)}
|
|
@@ -1,165 +1,171 @@
|
|
|
1
|
-
import { jsxs as B, jsx as
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsxs as B, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { c as o } from "../../index-DIxK0V-G.js";
|
|
3
3
|
import { memo as Q, forwardRef as U, useState as F, useRef as X, useEffect as Y } from "react";
|
|
4
4
|
import { useAutoResizeTextArea as Z } from "./hooks.js";
|
|
5
5
|
import { useMergeRefs as $ } from "../../hooks/useMergeRefs/useMergeRefs.js";
|
|
6
6
|
import { Icon as ee } from "../../icons/Icon.js";
|
|
7
|
-
import { Button as
|
|
7
|
+
import { Button as te } from "../Button/Button.js";
|
|
8
8
|
import { c as e } from "../../Input-BYrIS5GU.js";
|
|
9
|
-
import { EInputVariant as
|
|
10
|
-
import '../../assets/TextArea.css';const
|
|
11
|
-
"textarea-wrapper": "_textarea-
|
|
12
|
-
textarea:
|
|
13
|
-
"has-label": "_has-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
import { EInputVariant as ae } from "../Input/constants.js";
|
|
10
|
+
import '../../assets/TextArea.css';const re = "_textarea_rk5xe_2", se = "_clear_rk5xe_11", le = "_label_rk5xe_26", ne = "_s_rk5xe_71", oe = "_m_rk5xe_84", ce = "_l_rk5xe_26", t = {
|
|
11
|
+
"textarea-wrapper": "_textarea-wrapper_rk5xe_2",
|
|
12
|
+
textarea: re,
|
|
13
|
+
"has-label": "_has-label_rk5xe_8",
|
|
14
|
+
clear: se,
|
|
15
|
+
"required-mark": "_required-mark_rk5xe_15",
|
|
16
|
+
label: le,
|
|
17
|
+
"label-text": "_label-text_rk5xe_42",
|
|
18
|
+
"has-right-slot": "_has-right-slot_rk5xe_46",
|
|
19
|
+
"has-required": "_has-required_rk5xe_49",
|
|
20
|
+
"has-left-slot": "_has-left-slot_rk5xe_55",
|
|
21
|
+
"active-label": "_active-label_rk5xe_58",
|
|
22
|
+
s: ne,
|
|
23
|
+
m: oe,
|
|
24
|
+
l: ce,
|
|
25
|
+
"input-s": "_input-s_rk5xe_110",
|
|
26
|
+
"input-m": "_input-m_rk5xe_118",
|
|
27
|
+
"input-l": "_input-l_rk5xe_126"
|
|
28
|
+
}, j = (a) => {
|
|
29
|
+
var p, c;
|
|
30
|
+
if (!a)
|
|
27
31
|
return null;
|
|
28
|
-
switch (
|
|
32
|
+
switch (a.addonType) {
|
|
29
33
|
case "icon": {
|
|
30
|
-
const
|
|
31
|
-
return /* @__PURE__ */
|
|
34
|
+
const x = (p = a.addonContent) == null ? void 0 : p.includes("16px"), N = (c = a.addonContent) == null ? void 0 : c.includes("24px");
|
|
35
|
+
return /* @__PURE__ */ r(
|
|
32
36
|
ee,
|
|
33
37
|
{
|
|
34
38
|
style: {
|
|
35
|
-
"--icon-size":
|
|
36
|
-
"16px":
|
|
37
|
-
"24px":
|
|
39
|
+
"--icon-size": o({
|
|
40
|
+
"16px": x,
|
|
41
|
+
"24px": N
|
|
38
42
|
})
|
|
39
43
|
},
|
|
40
44
|
className: e["addon-icon"],
|
|
41
|
-
iconName:
|
|
45
|
+
iconName: a.addonContent
|
|
42
46
|
}
|
|
43
47
|
);
|
|
44
48
|
}
|
|
45
49
|
case "text":
|
|
46
|
-
return
|
|
50
|
+
return a.addonContent;
|
|
47
51
|
default:
|
|
48
52
|
return null;
|
|
49
53
|
}
|
|
50
|
-
},
|
|
54
|
+
}, ie = Q(
|
|
51
55
|
U(
|
|
52
|
-
(
|
|
56
|
+
(a, p) => {
|
|
53
57
|
const {
|
|
54
|
-
value:
|
|
55
|
-
className:
|
|
56
|
-
wrapperClassName:
|
|
57
|
-
variant: R =
|
|
58
|
-
autofocus:
|
|
58
|
+
value: c,
|
|
59
|
+
className: x,
|
|
60
|
+
wrapperClassName: N,
|
|
61
|
+
variant: R = ae.DefaultGray,
|
|
62
|
+
autofocus: g,
|
|
59
63
|
readonly: s,
|
|
60
64
|
status: T,
|
|
61
65
|
id: I,
|
|
62
|
-
onFocus:
|
|
63
|
-
onBlur:
|
|
66
|
+
onFocus: C,
|
|
67
|
+
onBlur: q,
|
|
64
68
|
label: u,
|
|
65
|
-
onChange:
|
|
69
|
+
onChange: i,
|
|
66
70
|
withClearButton: E,
|
|
67
71
|
disabled: d,
|
|
68
72
|
rightAddon: L,
|
|
69
73
|
leftAddon: S,
|
|
70
74
|
size: m = "m",
|
|
71
75
|
inputSize: v,
|
|
72
|
-
required:
|
|
76
|
+
required: h,
|
|
73
77
|
...D
|
|
74
|
-
} =
|
|
78
|
+
} = a, [_, A] = F(g), [f, w] = F(!!c), l = X(null), G = $(l, p);
|
|
75
79
|
Y(() => {
|
|
76
|
-
|
|
77
|
-
}, [
|
|
80
|
+
g && A(!0);
|
|
81
|
+
}, [g]);
|
|
78
82
|
const V = Z(
|
|
79
|
-
|
|
83
|
+
l.current,
|
|
80
84
|
v
|
|
81
|
-
), M = (
|
|
82
|
-
const z =
|
|
83
|
-
|
|
84
|
-
}, O = (
|
|
85
|
-
s || (
|
|
85
|
+
), M = (n) => {
|
|
86
|
+
const z = n.currentTarget.value;
|
|
87
|
+
q == null || q(n), A(!1), w(!!z);
|
|
88
|
+
}, O = (n) => {
|
|
89
|
+
s || (A(!0), C == null || C(n));
|
|
86
90
|
}, P = () => {
|
|
87
|
-
|
|
91
|
+
l != null && l.current && (l.current.value = "", l.current.focus(), w(!1), V(), i == null || i({
|
|
88
92
|
target: { value: "" }
|
|
89
93
|
}));
|
|
90
|
-
}, W = (
|
|
91
|
-
const z =
|
|
92
|
-
|
|
93
|
-
},
|
|
94
|
+
}, W = (n) => {
|
|
95
|
+
const z = n.target.value;
|
|
96
|
+
w(!!z), V(), i == null || i(n);
|
|
97
|
+
}, b = j(S), k = j(L), H = {
|
|
94
98
|
[e.readonly]: d || s,
|
|
95
|
-
[e.focused]:
|
|
99
|
+
[e.focused]: _,
|
|
96
100
|
[e.disabled]: d || s,
|
|
97
|
-
[e["has-left-slot"]]: !!
|
|
101
|
+
[e["has-left-slot"]]: !!b,
|
|
98
102
|
[e["has-right-slot"]]: !!k,
|
|
99
|
-
[
|
|
100
|
-
},
|
|
103
|
+
[t["has-label"]]: !!u
|
|
104
|
+
}, y = _ || f || !!c, J = o(
|
|
101
105
|
e.label,
|
|
102
|
-
|
|
106
|
+
t.label,
|
|
103
107
|
{
|
|
104
|
-
[
|
|
108
|
+
[t["active-label"]]: y,
|
|
105
109
|
[e.disabled]: d || s,
|
|
106
|
-
[
|
|
110
|
+
[t["has-left-slot"]]: !!b,
|
|
111
|
+
[t["has-right-slot"]]: !!k,
|
|
112
|
+
[t["has-required"]]: h
|
|
107
113
|
},
|
|
108
|
-
|
|
114
|
+
x,
|
|
109
115
|
e[m]
|
|
110
|
-
), K =
|
|
111
|
-
|
|
116
|
+
), K = o(
|
|
117
|
+
t.textarea,
|
|
112
118
|
e.input,
|
|
113
119
|
H,
|
|
114
|
-
|
|
120
|
+
x,
|
|
115
121
|
[
|
|
116
122
|
e[R],
|
|
117
|
-
|
|
123
|
+
t[m],
|
|
118
124
|
e[m],
|
|
119
|
-
|
|
125
|
+
t[v ?? ""],
|
|
120
126
|
e[T ?? ""]
|
|
121
127
|
]
|
|
122
128
|
);
|
|
123
129
|
return /* @__PURE__ */ B(
|
|
124
130
|
"div",
|
|
125
131
|
{
|
|
126
|
-
className:
|
|
132
|
+
className: o(
|
|
127
133
|
e["input-wrapper"],
|
|
128
|
-
|
|
134
|
+
t["textarea-wrapper"],
|
|
129
135
|
e[R],
|
|
130
136
|
e[T ?? ""],
|
|
131
|
-
|
|
137
|
+
t[m],
|
|
132
138
|
e[m],
|
|
133
|
-
|
|
139
|
+
t[v ?? ""],
|
|
134
140
|
{
|
|
135
141
|
[e.disabled]: d || s,
|
|
136
|
-
[e.focused]:
|
|
142
|
+
[e.focused]: _
|
|
137
143
|
},
|
|
138
|
-
|
|
144
|
+
N
|
|
139
145
|
),
|
|
140
146
|
children: [
|
|
141
147
|
u && /* @__PURE__ */ B("label", { htmlFor: I, className: J, children: [
|
|
142
|
-
u,
|
|
143
|
-
|
|
148
|
+
/* @__PURE__ */ r("span", { className: t["label-text"], children: u }),
|
|
149
|
+
h && (f || _) && /* @__PURE__ */ r(
|
|
144
150
|
"span",
|
|
145
151
|
{
|
|
146
|
-
className:
|
|
152
|
+
className: t["required-mark"],
|
|
147
153
|
"data-testid": "required-mark"
|
|
148
154
|
}
|
|
149
155
|
)
|
|
150
156
|
] }),
|
|
151
|
-
|
|
157
|
+
b && /* @__PURE__ */ r(
|
|
152
158
|
"span",
|
|
153
159
|
{
|
|
154
|
-
className:
|
|
155
|
-
[e.focused]:
|
|
160
|
+
className: o(e["left-slot"], {
|
|
161
|
+
[e.focused]: y,
|
|
156
162
|
[e["has-label"]]: !!u
|
|
157
163
|
}),
|
|
158
164
|
"data-testid": "left-addon",
|
|
159
|
-
children:
|
|
165
|
+
children: b
|
|
160
166
|
}
|
|
161
167
|
),
|
|
162
|
-
/* @__PURE__ */
|
|
168
|
+
/* @__PURE__ */ r(
|
|
163
169
|
"textarea",
|
|
164
170
|
{
|
|
165
171
|
ref: G,
|
|
@@ -168,35 +174,35 @@ import '../../assets/TextArea.css';const se = "_textarea_ta2xa_2", re = "_label_
|
|
|
168
174
|
onFocus: O,
|
|
169
175
|
onBlur: M,
|
|
170
176
|
readOnly: s,
|
|
171
|
-
value:
|
|
177
|
+
value: c,
|
|
172
178
|
onChange: W,
|
|
173
|
-
required:
|
|
179
|
+
required: h,
|
|
174
180
|
...D
|
|
175
181
|
}
|
|
176
182
|
),
|
|
177
|
-
k && /* @__PURE__ */
|
|
183
|
+
k && /* @__PURE__ */ r(
|
|
178
184
|
"span",
|
|
179
185
|
{
|
|
180
|
-
className:
|
|
181
|
-
[e.focused]:
|
|
186
|
+
className: o(e["right-slot"], {
|
|
187
|
+
[e.focused]: y,
|
|
182
188
|
[e["has-label"]]: !!u
|
|
183
189
|
}),
|
|
184
190
|
"data-testid": "right-addon",
|
|
185
191
|
children: k
|
|
186
192
|
}
|
|
187
193
|
),
|
|
188
|
-
|
|
194
|
+
h && !f && !_ && /* @__PURE__ */ r(
|
|
189
195
|
"span",
|
|
190
196
|
{
|
|
191
|
-
className:
|
|
197
|
+
className: t["required-mark"],
|
|
192
198
|
"data-testid": "required-mark"
|
|
193
199
|
}
|
|
194
200
|
),
|
|
195
|
-
E &&
|
|
196
|
-
|
|
201
|
+
E && f && /* @__PURE__ */ r(
|
|
202
|
+
te,
|
|
197
203
|
{
|
|
198
204
|
tabIndex: -1,
|
|
199
|
-
className: e.clear,
|
|
205
|
+
className: o(e.clear, t.clear),
|
|
200
206
|
isIconButton: !0,
|
|
201
207
|
iconName: "Close16px",
|
|
202
208
|
size: "m-s",
|
|
@@ -212,7 +218,7 @@ import '../../assets/TextArea.css';const se = "_textarea_ta2xa_2", re = "_label_
|
|
|
212
218
|
}
|
|
213
219
|
)
|
|
214
220
|
);
|
|
215
|
-
|
|
221
|
+
ie.displayName = "TextArea";
|
|
216
222
|
export {
|
|
217
|
-
|
|
223
|
+
ie as TextArea
|
|
218
224
|
};
|