@serendie/ui 2.2.2-dev.202510020516 → 2.2.2
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/DatePicker/DatePicker.d.ts +0 -1
- package/dist/components/DatePicker/DatePicker.js +97 -98
- package/dist/components/Select/Select.d.ts +0 -1
- package/dist/components/Select/Select.js +36 -36
- package/dist/components/TextArea/TextArea.d.ts +0 -1
- package/dist/components/TextArea/TextArea.js +15 -16
- package/dist/components/TextField/TextField.d.ts +0 -1
- package/dist/components/TextField/TextField.js +21 -22
- package/package.json +1 -1
|
@@ -1,82 +1,81 @@
|
|
|
1
|
-
import { jsx as e, jsxs as a, Fragment as
|
|
2
|
-
import { SerendieSymbolCalendar as
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { datePickerStyles as
|
|
5
|
-
import { textFieldRecipe as
|
|
6
|
-
import { Portal as
|
|
7
|
-
import { DatePickerRoot as
|
|
8
|
-
import { DatePickerLabel as
|
|
9
|
-
import { DatePickerControl as
|
|
10
|
-
import { cx as
|
|
11
|
-
import { DatePickerTrigger as
|
|
1
|
+
import { jsx as e, jsxs as a, Fragment as y } from "react/jsx-runtime";
|
|
2
|
+
import { SerendieSymbolCalendar as R, SerendieSymbolArrowRight as F, SerendieSymbolChevronDown as I, SerendieSymbolChevronLeft as W, SerendieSymbolChevronRight as O } from "@serendie/symbols";
|
|
3
|
+
import { forwardRef as j, useState as H } from "react";
|
|
4
|
+
import { datePickerStyles as C } from "./styles.js";
|
|
5
|
+
import { textFieldRecipe as A } from "../../styled-system/recipes/text-field-recipe.js";
|
|
6
|
+
import { Portal as L } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
|
|
7
|
+
import { DatePickerRoot as k } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-root.js";
|
|
8
|
+
import { DatePickerLabel as V } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-label.js";
|
|
9
|
+
import { DatePickerControl as q } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-control.js";
|
|
10
|
+
import { cx as p } from "../../styled-system/css/cx.js";
|
|
11
|
+
import { DatePickerTrigger as B } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-trigger.js";
|
|
12
12
|
import { css as t } from "../../styled-system/css/css.js";
|
|
13
|
-
import { DatePickerInput as
|
|
14
|
-
import { DatePickerPositioner as
|
|
15
|
-
import { DatePickerContent as
|
|
16
|
-
import { DatePickerView as
|
|
17
|
-
import { DatePickerContext as
|
|
18
|
-
import { DatePickerViewControl as
|
|
19
|
-
import { DatePickerYearSelect as
|
|
20
|
-
import { DatePickerPrevTrigger as
|
|
21
|
-
import { DatePickerMonthSelect as
|
|
22
|
-
import { DatePickerNextTrigger as
|
|
23
|
-
import { DatePickerTable as
|
|
24
|
-
import { DatePickerTableHead as
|
|
25
|
-
import { DatePickerTableRow as
|
|
26
|
-
import { DatePickerTableHeader as
|
|
27
|
-
import { DatePickerTableBody as
|
|
28
|
-
import { DatePickerTableCell as
|
|
29
|
-
import { DatePickerTableCellTrigger as
|
|
30
|
-
const
|
|
13
|
+
import { DatePickerInput as h } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-input.js";
|
|
14
|
+
import { DatePickerPositioner as J } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-positioner.js";
|
|
15
|
+
import { DatePickerContent as Y } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-content.js";
|
|
16
|
+
import { DatePickerView as _ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view.js";
|
|
17
|
+
import { DatePickerContext as z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-context.js";
|
|
18
|
+
import { DatePickerViewControl as E } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view-control.js";
|
|
19
|
+
import { DatePickerYearSelect as G } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-year-select.js";
|
|
20
|
+
import { DatePickerPrevTrigger as K } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-prev-trigger.js";
|
|
21
|
+
import { DatePickerMonthSelect as Q } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-month-select.js";
|
|
22
|
+
import { DatePickerNextTrigger as U } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-next-trigger.js";
|
|
23
|
+
import { DatePickerTable as X } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table.js";
|
|
24
|
+
import { DatePickerTableHead as Z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-head.js";
|
|
25
|
+
import { DatePickerTableRow as D } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-row.js";
|
|
26
|
+
import { DatePickerTableHeader as $ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-header.js";
|
|
27
|
+
import { DatePickerTableBody as M } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-body.js";
|
|
28
|
+
import { DatePickerTableCell as ee } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell.js";
|
|
29
|
+
import { DatePickerTableCellTrigger as re } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell-trigger.js";
|
|
30
|
+
const Ie = j(
|
|
31
31
|
({
|
|
32
32
|
placeholder: r = "日付を選択",
|
|
33
|
-
label:
|
|
34
|
-
required:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
D,
|
|
33
|
+
label: l,
|
|
34
|
+
required: m,
|
|
35
|
+
invalid: o,
|
|
36
|
+
invalidMessage: n,
|
|
37
|
+
selectionMode: s = "single",
|
|
38
|
+
startPlaceholder: v = "開始日",
|
|
39
|
+
endPlaceholder: x = "終了日",
|
|
40
|
+
locale: f = "ja-JP",
|
|
41
|
+
isCalendarOnly: S = !1,
|
|
42
|
+
...c
|
|
43
|
+
}, N) => {
|
|
44
|
+
const T = C(), i = A(), [g, d] = H(!1), w = s === "range";
|
|
45
|
+
return S ? /* @__PURE__ */ e(
|
|
46
|
+
k,
|
|
48
47
|
{
|
|
49
|
-
locale:
|
|
50
|
-
...
|
|
51
|
-
ref:
|
|
52
|
-
selectionMode:
|
|
48
|
+
locale: f,
|
|
49
|
+
...c,
|
|
50
|
+
ref: N,
|
|
51
|
+
selectionMode: s,
|
|
53
52
|
open: !0,
|
|
54
53
|
className: i.root,
|
|
55
|
-
children: /* @__PURE__ */ e(
|
|
54
|
+
children: /* @__PURE__ */ e(b, {})
|
|
56
55
|
}
|
|
57
56
|
) : /* @__PURE__ */ a(
|
|
58
|
-
|
|
57
|
+
k,
|
|
59
58
|
{
|
|
60
|
-
locale:
|
|
61
|
-
...
|
|
62
|
-
ref:
|
|
63
|
-
selectionMode:
|
|
59
|
+
locale: f,
|
|
60
|
+
...c,
|
|
61
|
+
ref: N,
|
|
62
|
+
selectionMode: s,
|
|
64
63
|
className: i.root,
|
|
65
|
-
open:
|
|
66
|
-
onOpenChange: (
|
|
67
|
-
var
|
|
68
|
-
d(
|
|
64
|
+
open: g,
|
|
65
|
+
onOpenChange: (u) => {
|
|
66
|
+
var P;
|
|
67
|
+
d(u.open), (P = c.onOpenChange) == null || P.call(c, u);
|
|
69
68
|
},
|
|
70
69
|
children: [
|
|
71
|
-
/* @__PURE__ */ a(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
/* @__PURE__ */ a(y, { children: [
|
|
71
|
+
l && /* @__PURE__ */ a(V, { className: i.label, children: [
|
|
72
|
+
l,
|
|
73
|
+
m && /* @__PURE__ */ e("span", { className: i.labelRequired, children: "必須" })
|
|
75
74
|
] }),
|
|
76
75
|
/* @__PURE__ */ a(
|
|
77
|
-
|
|
76
|
+
q,
|
|
78
77
|
{
|
|
79
|
-
className:
|
|
78
|
+
className: p(
|
|
80
79
|
i.inputWrapper,
|
|
81
80
|
t({
|
|
82
81
|
_expanded: {
|
|
@@ -85,11 +84,11 @@ const We = H(
|
|
|
85
84
|
}
|
|
86
85
|
})
|
|
87
86
|
),
|
|
88
|
-
"data-expanded":
|
|
89
|
-
"data-Invalid":
|
|
87
|
+
"data-expanded": g ? !0 : void 0,
|
|
88
|
+
"data-Invalid": o,
|
|
90
89
|
children: [
|
|
91
|
-
/* @__PURE__ */ e("div", { className: i.leftContent, children: /* @__PURE__ */ e(
|
|
92
|
-
|
|
90
|
+
/* @__PURE__ */ e("div", { className: i.leftContent, children: /* @__PURE__ */ e(B, { className: t({ display: "flex" }), children: /* @__PURE__ */ e(R, {}) }) }),
|
|
91
|
+
w ? /* @__PURE__ */ a(
|
|
93
92
|
"div",
|
|
94
93
|
{
|
|
95
94
|
className: t({
|
|
@@ -99,11 +98,11 @@ const We = H(
|
|
|
99
98
|
}),
|
|
100
99
|
children: [
|
|
101
100
|
/* @__PURE__ */ e(
|
|
102
|
-
|
|
101
|
+
h,
|
|
103
102
|
{
|
|
104
103
|
index: 0,
|
|
105
|
-
placeholder:
|
|
106
|
-
className:
|
|
104
|
+
placeholder: v,
|
|
105
|
+
className: p(
|
|
107
106
|
i.input,
|
|
108
107
|
t({
|
|
109
108
|
minWidth: "100%",
|
|
@@ -113,13 +112,13 @@ const We = H(
|
|
|
113
112
|
onFocus: () => d(!0)
|
|
114
113
|
}
|
|
115
114
|
),
|
|
116
|
-
/* @__PURE__ */ e(
|
|
115
|
+
/* @__PURE__ */ e(F, {}),
|
|
117
116
|
/* @__PURE__ */ e(
|
|
118
|
-
|
|
117
|
+
h,
|
|
119
118
|
{
|
|
120
119
|
index: 1,
|
|
121
|
-
placeholder:
|
|
122
|
-
className:
|
|
120
|
+
placeholder: x,
|
|
121
|
+
className: p(
|
|
123
122
|
i.input,
|
|
124
123
|
t({
|
|
125
124
|
minWidth: "100%",
|
|
@@ -132,7 +131,7 @@ const We = H(
|
|
|
132
131
|
]
|
|
133
132
|
}
|
|
134
133
|
) : /* @__PURE__ */ e(
|
|
135
|
-
|
|
134
|
+
h,
|
|
136
135
|
{
|
|
137
136
|
placeholder: r,
|
|
138
137
|
className: i.input,
|
|
@@ -143,25 +142,25 @@ const We = H(
|
|
|
143
142
|
]
|
|
144
143
|
}
|
|
145
144
|
),
|
|
146
|
-
|
|
145
|
+
o && n && /* @__PURE__ */ e("div", { className: i.messageField, children: /* @__PURE__ */ e("p", { className: i.invalidMessage, children: n }) })
|
|
147
146
|
] }),
|
|
148
|
-
/* @__PURE__ */ e(
|
|
147
|
+
/* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(J, { className: T.positioner, children: /* @__PURE__ */ e(b, {}) }) })
|
|
149
148
|
]
|
|
150
149
|
}
|
|
151
150
|
);
|
|
152
151
|
}
|
|
153
|
-
),
|
|
154
|
-
const r =
|
|
155
|
-
return /* @__PURE__ */ e(
|
|
156
|
-
/* @__PURE__ */ a(
|
|
152
|
+
), b = () => {
|
|
153
|
+
const r = C();
|
|
154
|
+
return /* @__PURE__ */ e(Y, { className: r.content, children: /* @__PURE__ */ e(_, { view: "day", className: r.view, children: /* @__PURE__ */ e(z, { children: (l) => /* @__PURE__ */ a(y, { children: [
|
|
155
|
+
/* @__PURE__ */ a(E, { className: r.viewControl, children: [
|
|
157
156
|
/* @__PURE__ */ a("div", { className: r.selectWrapper, children: [
|
|
158
|
-
/* @__PURE__ */ e(
|
|
159
|
-
/* @__PURE__ */ e(
|
|
157
|
+
/* @__PURE__ */ e(G, { className: r.select }),
|
|
158
|
+
/* @__PURE__ */ e(I, { className: r.selectIcon })
|
|
160
159
|
] }),
|
|
161
160
|
/* @__PURE__ */ a("div", { className: t({ display: "flex", alignItems: "center" }), children: [
|
|
162
|
-
/* @__PURE__ */ e(
|
|
161
|
+
/* @__PURE__ */ e(K, { className: r.prevTrigger, children: /* @__PURE__ */ e(W, {}) }),
|
|
163
162
|
/* @__PURE__ */ e(
|
|
164
|
-
|
|
163
|
+
Q,
|
|
165
164
|
{
|
|
166
165
|
className: t({
|
|
167
166
|
appearance: "none",
|
|
@@ -169,36 +168,36 @@ const We = H(
|
|
|
169
168
|
})
|
|
170
169
|
}
|
|
171
170
|
),
|
|
172
|
-
/* @__PURE__ */ e(
|
|
171
|
+
/* @__PURE__ */ e(U, { className: r.nextTrigger, children: /* @__PURE__ */ e(O, {}) })
|
|
173
172
|
] })
|
|
174
173
|
] }),
|
|
175
|
-
/* @__PURE__ */ a(
|
|
176
|
-
/* @__PURE__ */ e(
|
|
177
|
-
|
|
174
|
+
/* @__PURE__ */ a(X, { className: r.table, children: [
|
|
175
|
+
/* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(D, { children: l.weekDays.map((m, o) => /* @__PURE__ */ e(
|
|
176
|
+
$,
|
|
178
177
|
{
|
|
179
178
|
className: r.tableHeader,
|
|
180
|
-
children:
|
|
179
|
+
children: m.narrow
|
|
181
180
|
},
|
|
182
|
-
|
|
181
|
+
o
|
|
183
182
|
)) }) }),
|
|
184
|
-
/* @__PURE__ */ e(
|
|
185
|
-
|
|
183
|
+
/* @__PURE__ */ e(M, { children: l.weeks.map((m, o) => /* @__PURE__ */ e(D, { children: m.map((n, s) => /* @__PURE__ */ e(
|
|
184
|
+
ee,
|
|
186
185
|
{
|
|
187
186
|
value: n,
|
|
188
187
|
className: r.tableCell,
|
|
189
188
|
children: /* @__PURE__ */ e(
|
|
190
|
-
|
|
189
|
+
re,
|
|
191
190
|
{
|
|
192
191
|
className: r.tableCellTrigger,
|
|
193
192
|
children: n.day
|
|
194
193
|
}
|
|
195
194
|
)
|
|
196
195
|
},
|
|
197
|
-
|
|
198
|
-
)) },
|
|
196
|
+
s
|
|
197
|
+
)) }, o)) })
|
|
199
198
|
] })
|
|
200
199
|
] }) }) }) });
|
|
201
200
|
};
|
|
202
201
|
export {
|
|
203
|
-
|
|
202
|
+
Ie as DatePicker
|
|
204
203
|
};
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { SerendieSymbolChevronDown as
|
|
3
|
-
import { List as
|
|
4
|
-
import { ListItem as
|
|
5
|
-
import { createListCollection as
|
|
6
|
-
import { Portal as
|
|
7
|
-
import { sva as
|
|
8
|
-
import { SelectRoot as
|
|
9
|
-
import { cx as
|
|
10
|
-
import { SelectLabel as
|
|
2
|
+
import { SerendieSymbolChevronDown as S } from "@serendie/symbols";
|
|
3
|
+
import { List as f } from "../List/List.js";
|
|
4
|
+
import { ListItem as v } from "../List/ListItem.js";
|
|
5
|
+
import { createListCollection as w } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
|
|
6
|
+
import { Portal as _ } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
|
|
7
|
+
import { sva as C } from "../../styled-system/css/sva.js";
|
|
8
|
+
import { SelectRoot as T } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
|
|
9
|
+
import { cx as N } from "../../styled-system/css/cx.js";
|
|
10
|
+
import { SelectLabel as z } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
|
|
11
11
|
import { css as d } from "../../styled-system/css/css.js";
|
|
12
|
-
import { SelectControl as
|
|
13
|
-
import { SelectTrigger as
|
|
14
|
-
import { SelectValueText as
|
|
15
|
-
import { SelectPositioner as
|
|
16
|
-
import { SelectContent as
|
|
17
|
-
import { SelectItem as
|
|
18
|
-
const n =
|
|
12
|
+
import { SelectControl as R } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
|
|
13
|
+
import { SelectTrigger as V } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
|
|
14
|
+
import { SelectValueText as L } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
|
|
15
|
+
import { SelectPositioner as P } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
|
|
16
|
+
import { SelectContent as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
|
|
17
|
+
import { SelectItem as I } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
|
|
18
|
+
const n = C({
|
|
19
19
|
slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
|
|
20
20
|
base: {
|
|
21
21
|
root: {
|
|
@@ -152,29 +152,28 @@ const n = T({
|
|
|
152
152
|
defaultVariants: {
|
|
153
153
|
size: "medium"
|
|
154
154
|
}
|
|
155
|
-
}),
|
|
155
|
+
}), $ = ({
|
|
156
156
|
placeholder: c = "",
|
|
157
157
|
label: r,
|
|
158
158
|
required: p,
|
|
159
|
-
requiredLabel: y,
|
|
160
159
|
invalid: a,
|
|
161
160
|
invalidMessage: m,
|
|
162
|
-
className:
|
|
163
|
-
items:
|
|
164
|
-
...
|
|
161
|
+
className: y,
|
|
162
|
+
items: g = [],
|
|
163
|
+
...u
|
|
165
164
|
}) => {
|
|
166
|
-
const [t,
|
|
167
|
-
items:
|
|
165
|
+
const [t, x] = n.splitVariantProps(u), o = n(t), { collection: O, ...h } = x, l = w({
|
|
166
|
+
items: g,
|
|
168
167
|
itemToString: (s) => s.label,
|
|
169
168
|
itemToValue: (s) => s.value
|
|
170
169
|
});
|
|
171
170
|
return /* @__PURE__ */ i(
|
|
172
|
-
|
|
171
|
+
T,
|
|
173
172
|
{
|
|
174
|
-
...
|
|
173
|
+
...h,
|
|
175
174
|
collection: l,
|
|
176
175
|
invalid: a,
|
|
177
|
-
className:
|
|
176
|
+
className: N(o.root, y),
|
|
178
177
|
positioning: {
|
|
179
178
|
sameWidth: !0,
|
|
180
179
|
offset: {
|
|
@@ -185,7 +184,7 @@ const n = T({
|
|
|
185
184
|
children: [
|
|
186
185
|
r && t.size != "small" && // smallの場合はラベルを表示しない
|
|
187
186
|
/* @__PURE__ */ i(
|
|
188
|
-
|
|
187
|
+
z,
|
|
189
188
|
{
|
|
190
189
|
className: d({
|
|
191
190
|
textStyle: {
|
|
@@ -195,28 +194,29 @@ const n = T({
|
|
|
195
194
|
}),
|
|
196
195
|
children: [
|
|
197
196
|
r,
|
|
198
|
-
p &&
|
|
197
|
+
p && // とりあえず必須メッセージはハードコード
|
|
198
|
+
/* @__PURE__ */ e(
|
|
199
199
|
"span",
|
|
200
200
|
{
|
|
201
201
|
className: d({
|
|
202
202
|
pl: "sd.system.dimension.spacing.extraSmall",
|
|
203
203
|
color: "sd.system.color.impression.negative"
|
|
204
204
|
}),
|
|
205
|
-
children:
|
|
205
|
+
children: "必須"
|
|
206
206
|
}
|
|
207
207
|
)
|
|
208
208
|
]
|
|
209
209
|
}
|
|
210
210
|
),
|
|
211
|
-
/* @__PURE__ */ e(
|
|
211
|
+
/* @__PURE__ */ e(R, { children: /* @__PURE__ */ i(V, { className: o.trigger, children: [
|
|
212
212
|
/* @__PURE__ */ e(
|
|
213
|
-
|
|
213
|
+
L,
|
|
214
214
|
{
|
|
215
215
|
placeholder: c,
|
|
216
216
|
className: o.valueText
|
|
217
217
|
}
|
|
218
218
|
),
|
|
219
|
-
/* @__PURE__ */ e(
|
|
219
|
+
/* @__PURE__ */ e(S, { className: o.iconBox })
|
|
220
220
|
] }) }),
|
|
221
221
|
a && m && /* @__PURE__ */ e(
|
|
222
222
|
"div",
|
|
@@ -231,20 +231,20 @@ const n = T({
|
|
|
231
231
|
children: m
|
|
232
232
|
}
|
|
233
233
|
),
|
|
234
|
-
/* @__PURE__ */ e(
|
|
235
|
-
|
|
234
|
+
/* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(B, { className: o.content, children: /* @__PURE__ */ e(f, { children: l.items.map((s, b) => /* @__PURE__ */ e(I, { item: s, children: /* @__PURE__ */ e(
|
|
235
|
+
v,
|
|
236
236
|
{
|
|
237
237
|
title: s.label,
|
|
238
238
|
value: s.value,
|
|
239
239
|
className: o.item,
|
|
240
240
|
size: t.size == "small" ? "small" : void 0
|
|
241
241
|
}
|
|
242
|
-
) },
|
|
242
|
+
) }, b)) }) }) }) })
|
|
243
243
|
]
|
|
244
244
|
}
|
|
245
245
|
);
|
|
246
246
|
};
|
|
247
247
|
export {
|
|
248
|
-
|
|
248
|
+
$ as Select,
|
|
249
249
|
n as SelectStyle
|
|
250
250
|
};
|
|
@@ -5,5 +5,4 @@ export declare const TextArea: React.ForwardRefExoticComponent<{
|
|
|
5
5
|
invalid?: boolean;
|
|
6
6
|
invalidMessage?: string;
|
|
7
7
|
autoAdjustHeight?: boolean;
|
|
8
|
-
requiredLabel?: string;
|
|
9
8
|
} & Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as i, jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import c, { forwardRef as
|
|
4
|
-
import { sva as
|
|
5
|
-
import { cx as
|
|
6
|
-
const p =
|
|
2
|
+
import v from "../../node_modules/merge-refs/dist/esm/index.js";
|
|
3
|
+
import c, { forwardRef as _ } from "react";
|
|
4
|
+
import { sva as w } from "../../styled-system/css/sva.js";
|
|
5
|
+
import { cx as C } from "../../styled-system/css/cx.js";
|
|
6
|
+
const p = w({
|
|
7
7
|
slots: [
|
|
8
8
|
"root",
|
|
9
9
|
"label",
|
|
@@ -95,24 +95,23 @@ const p = C({
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
|
-
}),
|
|
98
|
+
}), A = _(
|
|
99
99
|
({
|
|
100
100
|
placeholder: y,
|
|
101
101
|
label: r,
|
|
102
102
|
description: t,
|
|
103
103
|
required: d,
|
|
104
|
-
requiredLabel: u,
|
|
105
104
|
invalidMessage: o,
|
|
106
105
|
invalid: a,
|
|
107
106
|
disabled: n,
|
|
108
|
-
className:
|
|
107
|
+
className: u,
|
|
109
108
|
...l
|
|
110
|
-
},
|
|
111
|
-
const
|
|
112
|
-
return /* @__PURE__ */ i("div", { className:
|
|
109
|
+
}, g) => {
|
|
110
|
+
const x = c.useRef(null), h = v(x, g), [b, f] = p.splitVariantProps(l), e = p(b), S = t || a && o, m = l.id || c.useId();
|
|
111
|
+
return /* @__PURE__ */ i("div", { className: C(e.root, u), children: [
|
|
113
112
|
r ? /* @__PURE__ */ i("label", { className: e.label, htmlFor: m, children: [
|
|
114
113
|
r,
|
|
115
|
-
d && /* @__PURE__ */ s("span", { className: e.required, children:
|
|
114
|
+
d && /* @__PURE__ */ s("span", { className: e.required, children: "必須" })
|
|
116
115
|
] }) : null,
|
|
117
116
|
/* @__PURE__ */ s(
|
|
118
117
|
"div",
|
|
@@ -123,18 +122,18 @@ const p = C({
|
|
|
123
122
|
children: /* @__PURE__ */ s(
|
|
124
123
|
"textarea",
|
|
125
124
|
{
|
|
126
|
-
ref:
|
|
125
|
+
ref: h,
|
|
127
126
|
id: m,
|
|
128
127
|
placeholder: y,
|
|
129
128
|
required: d,
|
|
130
129
|
disabled: n,
|
|
131
130
|
className: e.textarea,
|
|
132
|
-
...
|
|
131
|
+
...f
|
|
133
132
|
}
|
|
134
133
|
)
|
|
135
134
|
}
|
|
136
135
|
),
|
|
137
|
-
|
|
136
|
+
S && /* @__PURE__ */ i("div", { className: e.messageField, children: [
|
|
138
137
|
t && /* @__PURE__ */ s("p", { className: e.description, children: t }),
|
|
139
138
|
a && o && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: o })
|
|
140
139
|
] })
|
|
@@ -142,5 +141,5 @@ const p = C({
|
|
|
142
141
|
}
|
|
143
142
|
);
|
|
144
143
|
export {
|
|
145
|
-
|
|
144
|
+
A as TextArea
|
|
146
145
|
};
|
|
@@ -6,5 +6,4 @@ export declare const TextField: React.ForwardRefExoticComponent<{
|
|
|
6
6
|
invalidMessage?: string;
|
|
7
7
|
leftContent?: React.ReactNode;
|
|
8
8
|
rightContent?: React.ReactNode;
|
|
9
|
-
requiredLabel?: string;
|
|
10
9
|
} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,41 +1,40 @@
|
|
|
1
1
|
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { SerendieSymbolAlertCircle as
|
|
3
|
-
import
|
|
4
|
-
import m, { forwardRef as
|
|
2
|
+
import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as T } from "@serendie/symbols";
|
|
3
|
+
import W from "../../node_modules/merge-refs/dist/esm/index.js";
|
|
4
|
+
import m, { forwardRef as q } from "react";
|
|
5
5
|
import { textFieldRecipe as x } from "../../styled-system/recipes/text-field-recipe.js";
|
|
6
|
-
import { cx as
|
|
6
|
+
import { cx as z } from "../../styled-system/css/cx.js";
|
|
7
7
|
import { css as b } from "../../styled-system/css/css.js";
|
|
8
|
-
const
|
|
8
|
+
const L = q(
|
|
9
9
|
({
|
|
10
10
|
placeholder: F,
|
|
11
11
|
label: d,
|
|
12
12
|
description: i,
|
|
13
13
|
required: u,
|
|
14
|
-
requiredLabel: S,
|
|
15
14
|
invalidMessage: c,
|
|
16
15
|
invalid: a,
|
|
17
|
-
type:
|
|
16
|
+
type: S = "text",
|
|
18
17
|
disabled: n,
|
|
19
18
|
onChange: h,
|
|
20
19
|
value: f,
|
|
21
|
-
className:
|
|
20
|
+
className: V,
|
|
22
21
|
leftContent: N,
|
|
23
22
|
rightContent: p,
|
|
24
23
|
...l
|
|
25
|
-
},
|
|
26
|
-
const o = m.useRef(null),
|
|
24
|
+
}, w) => {
|
|
25
|
+
const o = m.useRef(null), y = W(o, w), [C, P] = x.splitVariantProps(l), t = x(C), _ = i || a && c, [j, I] = m.useState(l.defaultValue || f), v = l.id || m.useId(), k = () => {
|
|
27
26
|
var R;
|
|
28
27
|
const s = {
|
|
29
28
|
target: { value: "" }
|
|
30
29
|
};
|
|
31
30
|
g(s), (R = l.onReset) == null || R.call(l, s), o.current && (o.current.value = "");
|
|
32
31
|
}, g = (s) => {
|
|
33
|
-
|
|
32
|
+
I(s.target.value), h && h(s);
|
|
34
33
|
};
|
|
35
|
-
return /* @__PURE__ */ r("div", { className:
|
|
34
|
+
return /* @__PURE__ */ r("div", { className: z(t.root, V), children: [
|
|
36
35
|
d ? /* @__PURE__ */ r("label", { className: t.label, htmlFor: v, children: [
|
|
37
36
|
d,
|
|
38
|
-
u && /* @__PURE__ */ e("span", { className: t.labelRequired, children:
|
|
37
|
+
u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: "必須" })
|
|
39
38
|
] }) : null,
|
|
40
39
|
/* @__PURE__ */ r(
|
|
41
40
|
"div",
|
|
@@ -48,16 +47,16 @@ const M = z(
|
|
|
48
47
|
/* @__PURE__ */ e(
|
|
49
48
|
"input",
|
|
50
49
|
{
|
|
51
|
-
ref:
|
|
50
|
+
ref: y,
|
|
52
51
|
id: v,
|
|
53
52
|
placeholder: F,
|
|
54
53
|
required: u,
|
|
55
54
|
disabled: n,
|
|
56
55
|
value: f,
|
|
57
|
-
type:
|
|
56
|
+
type: S,
|
|
58
57
|
className: t.input,
|
|
59
58
|
onChange: g,
|
|
60
|
-
...
|
|
59
|
+
...P
|
|
61
60
|
}
|
|
62
61
|
),
|
|
63
62
|
p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
|
|
@@ -67,21 +66,21 @@ const M = z(
|
|
|
67
66
|
className: b({
|
|
68
67
|
color: "sd.system.color.impression.negative"
|
|
69
68
|
}),
|
|
70
|
-
children: /* @__PURE__ */ e(
|
|
69
|
+
children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
|
|
71
70
|
}
|
|
72
|
-
) :
|
|
71
|
+
) : j ? /* @__PURE__ */ e(
|
|
73
72
|
"button",
|
|
74
73
|
{
|
|
75
74
|
className: b({ cursor: "pointer" }),
|
|
76
|
-
onClick:
|
|
75
|
+
onClick: k,
|
|
77
76
|
"aria-label": "値をクリア",
|
|
78
|
-
children: /* @__PURE__ */ e(
|
|
77
|
+
children: /* @__PURE__ */ e(T, { width: 20, height: 20 })
|
|
79
78
|
}
|
|
80
79
|
) : null) })
|
|
81
80
|
]
|
|
82
81
|
}
|
|
83
82
|
),
|
|
84
|
-
|
|
83
|
+
_ && /* @__PURE__ */ r("div", { className: t.messageField, children: [
|
|
85
84
|
i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
|
|
86
85
|
a && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
|
|
87
86
|
] })
|
|
@@ -89,5 +88,5 @@ const M = z(
|
|
|
89
88
|
}
|
|
90
89
|
);
|
|
91
90
|
export {
|
|
92
|
-
|
|
91
|
+
L as TextField
|
|
93
92
|
};
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@serendie/ui",
|
|
3
3
|
"description": "Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "2.2.2
|
|
5
|
+
"version": "2.2.2",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": [
|