@x-plat/design-system 0.5.22 → 0.5.23
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/ChatInput/index.cjs +57 -94
- package/dist/components/ChatInput/index.css +2 -48
- package/dist/components/ChatInput/index.js +55 -92
- package/dist/components/index.cjs +529 -509
- package/dist/components/index.css +48 -48
- package/dist/components/index.js +483 -463
- package/dist/index.cjs +529 -509
- package/dist/index.css +48 -48
- package/dist/index.js +483 -463
- package/package.json +1 -1
|
@@ -35,104 +35,29 @@ __export(ChatInput_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(ChatInput_exports);
|
|
36
36
|
|
|
37
37
|
// src/components/ChatInput/ChatInput.tsx
|
|
38
|
-
var import_react2 = __toESM(require("react"), 1);
|
|
39
|
-
|
|
40
|
-
// src/components/TextArea/TextArea.tsx
|
|
41
38
|
var import_react = __toESM(require("react"), 1);
|
|
42
39
|
|
|
43
|
-
// ../../node_modules/clsx/dist/clsx.mjs
|
|
44
|
-
function r(e) {
|
|
45
|
-
var t, f, n = "";
|
|
46
|
-
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
47
|
-
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
48
|
-
var o = e.length;
|
|
49
|
-
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
50
|
-
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
51
|
-
return n;
|
|
52
|
-
}
|
|
53
|
-
function clsx() {
|
|
54
|
-
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
55
|
-
return n;
|
|
56
|
-
}
|
|
57
|
-
var clsx_default = clsx;
|
|
58
|
-
|
|
59
|
-
// src/components/TextArea/TextArea.tsx
|
|
60
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
61
|
-
var TextArea = import_react.default.forwardRef(
|
|
62
|
-
(props, ref) => {
|
|
63
|
-
const { value, onChange, disabled, ...textareaProps } = props;
|
|
64
|
-
const localRef = import_react.default.useRef(null);
|
|
65
|
-
const setRefs = (el) => {
|
|
66
|
-
localRef.current = el;
|
|
67
|
-
if (!ref) return;
|
|
68
|
-
if (typeof ref === "function") {
|
|
69
|
-
ref(el);
|
|
70
|
-
} else if (ref && typeof ref === "object" && "current" in ref) {
|
|
71
|
-
ref.current = el;
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const handleOnChange = (e) => {
|
|
75
|
-
const val = e.target.value;
|
|
76
|
-
if (onChange) {
|
|
77
|
-
const event = {
|
|
78
|
-
...e,
|
|
79
|
-
target: { value: val }
|
|
80
|
-
};
|
|
81
|
-
onChange(event);
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
import_react.default.useEffect(() => {
|
|
85
|
-
const el = localRef.current;
|
|
86
|
-
if (!el) return;
|
|
87
|
-
el.style.height = "0px";
|
|
88
|
-
const nextHeight = Math.min(el.scrollHeight, 400);
|
|
89
|
-
el.style.height = `${nextHeight}px`;
|
|
90
|
-
}, [value]);
|
|
91
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
-
"div",
|
|
93
|
-
{
|
|
94
|
-
className: clsx_default(
|
|
95
|
-
"lib-xplat-textarea",
|
|
96
|
-
disabled ? "disabled" : void 0
|
|
97
|
-
),
|
|
98
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
-
"textarea",
|
|
100
|
-
{
|
|
101
|
-
...textareaProps,
|
|
102
|
-
ref: setRefs,
|
|
103
|
-
disabled,
|
|
104
|
-
value,
|
|
105
|
-
onChange: handleOnChange
|
|
106
|
-
}
|
|
107
|
-
)
|
|
108
|
-
}
|
|
109
|
-
) });
|
|
110
|
-
}
|
|
111
|
-
);
|
|
112
|
-
TextArea.displayName = "TextArea";
|
|
113
|
-
var TextArea_default = TextArea;
|
|
114
|
-
|
|
115
40
|
// src/tokens/svg/communication/BellIcon.tsx
|
|
116
|
-
var
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
117
42
|
|
|
118
43
|
// src/tokens/svg/communication/BellOffIcon.tsx
|
|
119
|
-
var
|
|
44
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
120
45
|
|
|
121
46
|
// src/tokens/svg/communication/InboxIcon.tsx
|
|
122
|
-
var
|
|
47
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
123
48
|
|
|
124
49
|
// src/tokens/svg/communication/MessageCircleIcon.tsx
|
|
125
|
-
var
|
|
50
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
126
51
|
|
|
127
52
|
// src/tokens/svg/communication/MessageSquareIcon.tsx
|
|
128
|
-
var
|
|
53
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
129
54
|
|
|
130
55
|
// src/tokens/svg/communication/PaperclipIcon.tsx
|
|
131
|
-
var
|
|
56
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
132
57
|
|
|
133
58
|
// src/tokens/svg/communication/SendIcon.tsx
|
|
134
|
-
var
|
|
135
|
-
var SendIcon = () => /* @__PURE__ */ (0,
|
|
59
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
60
|
+
var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
136
61
|
"svg",
|
|
137
62
|
{
|
|
138
63
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -141,16 +66,33 @@ var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
|
141
66
|
viewBox: "0 0 20 20",
|
|
142
67
|
fill: "none",
|
|
143
68
|
children: [
|
|
144
|
-
/* @__PURE__ */ (0,
|
|
145
|
-
/* @__PURE__ */ (0,
|
|
69
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3558 0.918873C18.3887 0.919879 18.4212 0.9224 18.4535 0.927663C18.4642 0.929393 18.4751 0.930348 18.4857 0.932545C18.527 0.941123 18.5675 0.953269 18.6068 0.968678C18.6178 0.972968 18.6282 0.978499 18.639 0.983327C18.6672 0.995914 18.6945 1.01021 18.7211 1.0263C18.7403 1.03794 18.7594 1.04988 18.7777 1.0634C18.7803 1.06534 18.7829 1.0673 18.7855 1.06926C18.8126 1.08979 18.839 1.11195 18.8637 1.13665C18.8872 1.16018 18.9084 1.18517 18.9281 1.21087C18.9322 1.21625 18.9359 1.22198 18.9398 1.22747C18.9501 1.24168 18.959 1.25667 18.9681 1.27141C18.9866 1.30108 19.0029 1.33154 19.017 1.36321C19.0214 1.37309 19.0267 1.38248 19.0306 1.39251C19.0461 1.43186 19.0581 1.47231 19.0668 1.5136C19.069 1.52426 19.0699 1.5351 19.0717 1.54583C19.077 1.57815 19.0794 1.61062 19.0805 1.64348C19.0808 1.65621 19.0817 1.66884 19.0814 1.68157C19.0799 1.75981 19.0681 1.83872 19.0414 1.91497L13.2074 18.581C13.1058 18.871 12.8377 19.0703 12.5306 19.0829C12.2237 19.0954 11.9398 18.9192 11.8148 18.6386L8.59706 11.4003L1.3617 8.18547C1.08085 8.06057 0.90492 7.77678 0.917368 7.46965C0.929915 7.16252 1.12827 6.89358 1.41834 6.79192L18.0853 0.958913C18.1613 0.932334 18.2398 0.919479 18.3178 0.917897C18.3305 0.91763 18.3431 0.918498 18.3558 0.918873ZM10.0609 10.999L12.4164 16.2997L16.5375 4.52239L10.0609 10.999ZM3.69862 7.58294L9.00038 9.93841L15.4808 3.45794L3.69862 7.58294Z", fill: "currentColor" }) }),
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("clipPath", { id: "send-clip", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
|
|
146
71
|
]
|
|
147
72
|
}
|
|
148
73
|
);
|
|
149
74
|
var SendIcon_default = SendIcon;
|
|
150
75
|
|
|
76
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
77
|
+
function r(e) {
|
|
78
|
+
var t, f, n = "";
|
|
79
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
80
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
81
|
+
var o = e.length;
|
|
82
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
83
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
84
|
+
return n;
|
|
85
|
+
}
|
|
86
|
+
function clsx() {
|
|
87
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
88
|
+
return n;
|
|
89
|
+
}
|
|
90
|
+
var clsx_default = clsx;
|
|
91
|
+
|
|
151
92
|
// src/components/ChatInput/ChatInput.tsx
|
|
152
|
-
var
|
|
153
|
-
var
|
|
93
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
94
|
+
var MAX_HEIGHT = 200;
|
|
95
|
+
var ChatInput = import_react.default.forwardRef(
|
|
154
96
|
(props, ref) => {
|
|
155
97
|
const {
|
|
156
98
|
placeholder,
|
|
@@ -161,9 +103,24 @@ var ChatInput = import_react2.default.forwardRef(
|
|
|
161
103
|
onChange
|
|
162
104
|
} = props;
|
|
163
105
|
const isControlled = valueProp !== void 0;
|
|
164
|
-
const [internalValue, setInternalValue] =
|
|
106
|
+
const [internalValue, setInternalValue] = import_react.default.useState("");
|
|
165
107
|
const value = isControlled ? valueProp : internalValue;
|
|
166
108
|
const hasText = value.trim().length > 0;
|
|
109
|
+
const textareaRef = import_react.default.useRef(null);
|
|
110
|
+
const setRefs = import_react.default.useCallback(
|
|
111
|
+
(el) => {
|
|
112
|
+
textareaRef.current = el;
|
|
113
|
+
if (typeof ref === "function") ref(el);
|
|
114
|
+
else if (ref) ref.current = el;
|
|
115
|
+
},
|
|
116
|
+
[ref]
|
|
117
|
+
);
|
|
118
|
+
const updateHeight = import_react.default.useCallback(() => {
|
|
119
|
+
const el = textareaRef.current;
|
|
120
|
+
if (!el) return;
|
|
121
|
+
el.style.height = "0px";
|
|
122
|
+
el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
|
|
123
|
+
}, []);
|
|
167
124
|
const handleChange = (e) => {
|
|
168
125
|
const val = e.target.value;
|
|
169
126
|
if (!isControlled) setInternalValue(val);
|
|
@@ -173,6 +130,7 @@ var ChatInput = import_react2.default.forwardRef(
|
|
|
173
130
|
if (!hasText || disabled) return;
|
|
174
131
|
onSubmit?.(value);
|
|
175
132
|
if (!isControlled) setInternalValue("");
|
|
133
|
+
requestAnimationFrame(updateHeight);
|
|
176
134
|
};
|
|
177
135
|
const handleKeyDown = (e) => {
|
|
178
136
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
@@ -180,19 +138,24 @@ var ChatInput = import_react2.default.forwardRef(
|
|
|
180
138
|
handleSubmit();
|
|
181
139
|
}
|
|
182
140
|
};
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
141
|
+
import_react.default.useEffect(() => {
|
|
142
|
+
updateHeight();
|
|
143
|
+
}, [value, updateHeight]);
|
|
144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
146
|
+
"textarea",
|
|
186
147
|
{
|
|
187
|
-
ref,
|
|
148
|
+
ref: setRefs,
|
|
149
|
+
className: "chat-input-textarea",
|
|
188
150
|
placeholder,
|
|
189
151
|
value,
|
|
190
152
|
disabled,
|
|
153
|
+
rows: 1,
|
|
191
154
|
onChange: handleChange,
|
|
192
155
|
onKeyDown: handleKeyDown
|
|
193
156
|
}
|
|
194
157
|
),
|
|
195
|
-
/* @__PURE__ */ (0,
|
|
158
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
196
159
|
"button",
|
|
197
160
|
{
|
|
198
161
|
type: "button",
|
|
@@ -200,7 +163,7 @@ var ChatInput = import_react2.default.forwardRef(
|
|
|
200
163
|
disabled: !hasText || disabled,
|
|
201
164
|
onClick: handleSubmit,
|
|
202
165
|
"aria-label": "\uC804\uC1A1",
|
|
203
|
-
children: /* @__PURE__ */ (0,
|
|
166
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SendIcon_default, {})
|
|
204
167
|
}
|
|
205
168
|
)
|
|
206
169
|
] });
|
|
@@ -1,49 +1,3 @@
|
|
|
1
|
-
/* src/components/TextArea/textArea.scss */
|
|
2
|
-
.lib-xplat-textarea-wrapper {
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
gap: var(--spacing-space-2);
|
|
6
|
-
}
|
|
7
|
-
.lib-xplat-textarea-wrapper .lib-xplat-textarea {
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
border: 1px solid var(--semantic-border-default);
|
|
11
|
-
border-radius: var(--spacing-radius-md);
|
|
12
|
-
min-height: var(--spacing-control-height-md);
|
|
13
|
-
overflow: hidden;
|
|
14
|
-
background-color: var(--semantic-surface-neutral-default);
|
|
15
|
-
width: 100%;
|
|
16
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
17
|
-
}
|
|
18
|
-
.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
|
|
19
|
-
border-color: var(--semantic-border-strong);
|
|
20
|
-
}
|
|
21
|
-
.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
|
|
22
|
-
border-color: var(--semantic-interaction-focus-ring);
|
|
23
|
-
box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
|
|
24
|
-
}
|
|
25
|
-
.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
|
|
26
|
-
border-color: var(--semantic-border-strong);
|
|
27
|
-
}
|
|
28
|
-
.lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
|
|
29
|
-
background-color: var(--semantic-surface-neutral-disabled);
|
|
30
|
-
cursor: not-allowed;
|
|
31
|
-
}
|
|
32
|
-
.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
|
|
33
|
-
border: none;
|
|
34
|
-
outline: none;
|
|
35
|
-
flex: 1;
|
|
36
|
-
padding-left: var(--spacing-space-4);
|
|
37
|
-
padding-right: var(--spacing-space-4);
|
|
38
|
-
width: 100%;
|
|
39
|
-
color: var(--semantic-text-subtle);
|
|
40
|
-
resize: none;
|
|
41
|
-
height: 1.5em;
|
|
42
|
-
}
|
|
43
|
-
.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
|
|
44
|
-
cursor: not-allowed;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
1
|
/* src/components/ChatInput/chatInput.scss */
|
|
48
2
|
.lib-xplat-chat-input {
|
|
49
3
|
display: flex;
|
|
@@ -93,8 +47,8 @@
|
|
|
93
47
|
align-items: center;
|
|
94
48
|
justify-content: center;
|
|
95
49
|
flex-shrink: 0;
|
|
96
|
-
width: var(--spacing-control-height-
|
|
97
|
-
height: var(--spacing-control-height-
|
|
50
|
+
width: var(--spacing-control-height-md);
|
|
51
|
+
height: var(--spacing-control-height-md);
|
|
98
52
|
border: none;
|
|
99
53
|
border-radius: var(--spacing-radius-md);
|
|
100
54
|
cursor: pointer;
|
|
@@ -1,101 +1,26 @@
|
|
|
1
1
|
// src/components/ChatInput/ChatInput.tsx
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
|
|
4
|
-
// src/components/TextArea/TextArea.tsx
|
|
5
2
|
import React from "react";
|
|
6
3
|
|
|
7
|
-
// ../../node_modules/clsx/dist/clsx.mjs
|
|
8
|
-
function r(e) {
|
|
9
|
-
var t, f, n = "";
|
|
10
|
-
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
11
|
-
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
12
|
-
var o = e.length;
|
|
13
|
-
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
14
|
-
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
15
|
-
return n;
|
|
16
|
-
}
|
|
17
|
-
function clsx() {
|
|
18
|
-
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
19
|
-
return n;
|
|
20
|
-
}
|
|
21
|
-
var clsx_default = clsx;
|
|
22
|
-
|
|
23
|
-
// src/components/TextArea/TextArea.tsx
|
|
24
|
-
import { jsx } from "react/jsx-runtime";
|
|
25
|
-
var TextArea = React.forwardRef(
|
|
26
|
-
(props, ref) => {
|
|
27
|
-
const { value, onChange, disabled, ...textareaProps } = props;
|
|
28
|
-
const localRef = React.useRef(null);
|
|
29
|
-
const setRefs = (el) => {
|
|
30
|
-
localRef.current = el;
|
|
31
|
-
if (!ref) return;
|
|
32
|
-
if (typeof ref === "function") {
|
|
33
|
-
ref(el);
|
|
34
|
-
} else if (ref && typeof ref === "object" && "current" in ref) {
|
|
35
|
-
ref.current = el;
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const handleOnChange = (e) => {
|
|
39
|
-
const val = e.target.value;
|
|
40
|
-
if (onChange) {
|
|
41
|
-
const event = {
|
|
42
|
-
...e,
|
|
43
|
-
target: { value: val }
|
|
44
|
-
};
|
|
45
|
-
onChange(event);
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
React.useEffect(() => {
|
|
49
|
-
const el = localRef.current;
|
|
50
|
-
if (!el) return;
|
|
51
|
-
el.style.height = "0px";
|
|
52
|
-
const nextHeight = Math.min(el.scrollHeight, 400);
|
|
53
|
-
el.style.height = `${nextHeight}px`;
|
|
54
|
-
}, [value]);
|
|
55
|
-
return /* @__PURE__ */ jsx("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx(
|
|
56
|
-
"div",
|
|
57
|
-
{
|
|
58
|
-
className: clsx_default(
|
|
59
|
-
"lib-xplat-textarea",
|
|
60
|
-
disabled ? "disabled" : void 0
|
|
61
|
-
),
|
|
62
|
-
children: /* @__PURE__ */ jsx(
|
|
63
|
-
"textarea",
|
|
64
|
-
{
|
|
65
|
-
...textareaProps,
|
|
66
|
-
ref: setRefs,
|
|
67
|
-
disabled,
|
|
68
|
-
value,
|
|
69
|
-
onChange: handleOnChange
|
|
70
|
-
}
|
|
71
|
-
)
|
|
72
|
-
}
|
|
73
|
-
) });
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
TextArea.displayName = "TextArea";
|
|
77
|
-
var TextArea_default = TextArea;
|
|
78
|
-
|
|
79
4
|
// src/tokens/svg/communication/BellIcon.tsx
|
|
80
|
-
import { jsx
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
81
6
|
|
|
82
7
|
// src/tokens/svg/communication/BellOffIcon.tsx
|
|
83
|
-
import { jsx as
|
|
8
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
84
9
|
|
|
85
10
|
// src/tokens/svg/communication/InboxIcon.tsx
|
|
86
|
-
import { jsx as
|
|
11
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
87
12
|
|
|
88
13
|
// src/tokens/svg/communication/MessageCircleIcon.tsx
|
|
89
|
-
import { jsx as
|
|
14
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
90
15
|
|
|
91
16
|
// src/tokens/svg/communication/MessageSquareIcon.tsx
|
|
92
|
-
import { jsx as
|
|
17
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
93
18
|
|
|
94
19
|
// src/tokens/svg/communication/PaperclipIcon.tsx
|
|
95
|
-
import { jsx as
|
|
20
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
96
21
|
|
|
97
22
|
// src/tokens/svg/communication/SendIcon.tsx
|
|
98
|
-
import { jsx as
|
|
23
|
+
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
99
24
|
var SendIcon = () => /* @__PURE__ */ jsxs3(
|
|
100
25
|
"svg",
|
|
101
26
|
{
|
|
@@ -105,16 +30,33 @@ var SendIcon = () => /* @__PURE__ */ jsxs3(
|
|
|
105
30
|
viewBox: "0 0 20 20",
|
|
106
31
|
fill: "none",
|
|
107
32
|
children: [
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
33
|
+
/* @__PURE__ */ jsx7("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ jsx7("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3558 0.918873C18.3887 0.919879 18.4212 0.9224 18.4535 0.927663C18.4642 0.929393 18.4751 0.930348 18.4857 0.932545C18.527 0.941123 18.5675 0.953269 18.6068 0.968678C18.6178 0.972968 18.6282 0.978499 18.639 0.983327C18.6672 0.995914 18.6945 1.01021 18.7211 1.0263C18.7403 1.03794 18.7594 1.04988 18.7777 1.0634C18.7803 1.06534 18.7829 1.0673 18.7855 1.06926C18.8126 1.08979 18.839 1.11195 18.8637 1.13665C18.8872 1.16018 18.9084 1.18517 18.9281 1.21087C18.9322 1.21625 18.9359 1.22198 18.9398 1.22747C18.9501 1.24168 18.959 1.25667 18.9681 1.27141C18.9866 1.30108 19.0029 1.33154 19.017 1.36321C19.0214 1.37309 19.0267 1.38248 19.0306 1.39251C19.0461 1.43186 19.0581 1.47231 19.0668 1.5136C19.069 1.52426 19.0699 1.5351 19.0717 1.54583C19.077 1.57815 19.0794 1.61062 19.0805 1.64348C19.0808 1.65621 19.0817 1.66884 19.0814 1.68157C19.0799 1.75981 19.0681 1.83872 19.0414 1.91497L13.2074 18.581C13.1058 18.871 12.8377 19.0703 12.5306 19.0829C12.2237 19.0954 11.9398 18.9192 11.8148 18.6386L8.59706 11.4003L1.3617 8.18547C1.08085 8.06057 0.90492 7.77678 0.917368 7.46965C0.929915 7.16252 1.12827 6.89358 1.41834 6.79192L18.0853 0.958913C18.1613 0.932334 18.2398 0.919479 18.3178 0.917897C18.3305 0.91763 18.3431 0.918498 18.3558 0.918873ZM10.0609 10.999L12.4164 16.2997L16.5375 4.52239L10.0609 10.999ZM3.69862 7.58294L9.00038 9.93841L15.4808 3.45794L3.69862 7.58294Z", fill: "currentColor" }) }),
|
|
34
|
+
/* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: "send-clip", children: /* @__PURE__ */ jsx7("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
|
|
110
35
|
]
|
|
111
36
|
}
|
|
112
37
|
);
|
|
113
38
|
var SendIcon_default = SendIcon;
|
|
114
39
|
|
|
40
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
41
|
+
function r(e) {
|
|
42
|
+
var t, f, n = "";
|
|
43
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
44
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
45
|
+
var o = e.length;
|
|
46
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
47
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
48
|
+
return n;
|
|
49
|
+
}
|
|
50
|
+
function clsx() {
|
|
51
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
52
|
+
return n;
|
|
53
|
+
}
|
|
54
|
+
var clsx_default = clsx;
|
|
55
|
+
|
|
115
56
|
// src/components/ChatInput/ChatInput.tsx
|
|
116
|
-
import { jsx as
|
|
117
|
-
var
|
|
57
|
+
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
58
|
+
var MAX_HEIGHT = 200;
|
|
59
|
+
var ChatInput = React.forwardRef(
|
|
118
60
|
(props, ref) => {
|
|
119
61
|
const {
|
|
120
62
|
placeholder,
|
|
@@ -125,9 +67,24 @@ var ChatInput = React2.forwardRef(
|
|
|
125
67
|
onChange
|
|
126
68
|
} = props;
|
|
127
69
|
const isControlled = valueProp !== void 0;
|
|
128
|
-
const [internalValue, setInternalValue] =
|
|
70
|
+
const [internalValue, setInternalValue] = React.useState("");
|
|
129
71
|
const value = isControlled ? valueProp : internalValue;
|
|
130
72
|
const hasText = value.trim().length > 0;
|
|
73
|
+
const textareaRef = React.useRef(null);
|
|
74
|
+
const setRefs = React.useCallback(
|
|
75
|
+
(el) => {
|
|
76
|
+
textareaRef.current = el;
|
|
77
|
+
if (typeof ref === "function") ref(el);
|
|
78
|
+
else if (ref) ref.current = el;
|
|
79
|
+
},
|
|
80
|
+
[ref]
|
|
81
|
+
);
|
|
82
|
+
const updateHeight = React.useCallback(() => {
|
|
83
|
+
const el = textareaRef.current;
|
|
84
|
+
if (!el) return;
|
|
85
|
+
el.style.height = "0px";
|
|
86
|
+
el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
|
|
87
|
+
}, []);
|
|
131
88
|
const handleChange = (e) => {
|
|
132
89
|
const val = e.target.value;
|
|
133
90
|
if (!isControlled) setInternalValue(val);
|
|
@@ -137,6 +94,7 @@ var ChatInput = React2.forwardRef(
|
|
|
137
94
|
if (!hasText || disabled) return;
|
|
138
95
|
onSubmit?.(value);
|
|
139
96
|
if (!isControlled) setInternalValue("");
|
|
97
|
+
requestAnimationFrame(updateHeight);
|
|
140
98
|
};
|
|
141
99
|
const handleKeyDown = (e) => {
|
|
142
100
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
@@ -144,19 +102,24 @@ var ChatInput = React2.forwardRef(
|
|
|
144
102
|
handleSubmit();
|
|
145
103
|
}
|
|
146
104
|
};
|
|
105
|
+
React.useEffect(() => {
|
|
106
|
+
updateHeight();
|
|
107
|
+
}, [value, updateHeight]);
|
|
147
108
|
return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
|
|
148
|
-
/* @__PURE__ */
|
|
149
|
-
|
|
109
|
+
/* @__PURE__ */ jsx8(
|
|
110
|
+
"textarea",
|
|
150
111
|
{
|
|
151
|
-
ref,
|
|
112
|
+
ref: setRefs,
|
|
113
|
+
className: "chat-input-textarea",
|
|
152
114
|
placeholder,
|
|
153
115
|
value,
|
|
154
116
|
disabled,
|
|
117
|
+
rows: 1,
|
|
155
118
|
onChange: handleChange,
|
|
156
119
|
onKeyDown: handleKeyDown
|
|
157
120
|
}
|
|
158
121
|
),
|
|
159
|
-
/* @__PURE__ */
|
|
122
|
+
/* @__PURE__ */ jsx8(
|
|
160
123
|
"button",
|
|
161
124
|
{
|
|
162
125
|
type: "button",
|
|
@@ -164,7 +127,7 @@ var ChatInput = React2.forwardRef(
|
|
|
164
127
|
disabled: !hasText || disabled,
|
|
165
128
|
onClick: handleSubmit,
|
|
166
129
|
"aria-label": "\uC804\uC1A1",
|
|
167
|
-
children: /* @__PURE__ */
|
|
130
|
+
children: /* @__PURE__ */ jsx8(SendIcon_default, {})
|
|
168
131
|
}
|
|
169
132
|
)
|
|
170
133
|
] });
|