@serendie/ui 2.3.0-dev.202601080645 → 2.3.0-dev.202601080839
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 +7 -0
- package/dist/components/DatePicker/DatePicker.js +97 -88
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +7 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +43 -38
- package/dist/components/Search/Search.d.ts +7 -0
- package/dist/components/Search/Search.js +43 -34
- package/dist/components/Select/Select.d.ts +7 -0
- package/dist/components/Select/Select.js +50 -48
- package/dist/hooks/useAutoPortalContainer.d.ts +21 -0
- package/dist/hooks/useAutoPortalContainer.js +16 -0
- package/package.json +1 -1
|
@@ -11,4 +11,11 @@ export declare const DatePicker: import('react').ForwardRefExoticComponent<ArkDa
|
|
|
11
11
|
startPlaceholder?: string;
|
|
12
12
|
endPlaceholder?: string;
|
|
13
13
|
isCalendarOnly?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Portalを使用するかどうか
|
|
16
|
+
* - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
|
|
17
|
+
* - `false`: ポータルを使用せず、その場にレンダリングする
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
portalled?: boolean;
|
|
14
21
|
} & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1,52 +1,54 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { SerendieSymbolCalendar as
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { datePickerStyles as
|
|
5
|
-
import { textFieldRecipe as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
1
|
+
import { jsx as e, jsxs as a, Fragment as T } from "react/jsx-runtime";
|
|
2
|
+
import { SerendieSymbolCalendar as B, SerendieSymbolArrowRight as J, SerendieSymbolChevronDown as Y, SerendieSymbolChevronLeft as _, SerendieSymbolChevronRight as z } from "@serendie/symbols";
|
|
3
|
+
import { forwardRef as E, useState as G } from "react";
|
|
4
|
+
import { datePickerStyles as S } from "./styles.js";
|
|
5
|
+
import { textFieldRecipe as C } from "../../recipes/textFieldRecipe.js";
|
|
6
|
+
import { useAutoPortalContainer as K } from "../../hooks/useAutoPortalContainer.js";
|
|
7
|
+
import { useTranslations as Q } from "../../i18n/index.js";
|
|
8
|
+
import { Portal as U } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
|
|
8
9
|
import { DatePickerRoot as y } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-root.js";
|
|
9
|
-
import { DatePickerLabel as
|
|
10
|
-
import { DatePickerControl as
|
|
10
|
+
import { DatePickerLabel as X } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-label.js";
|
|
11
|
+
import { DatePickerControl as Z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-control.js";
|
|
11
12
|
import { cx as f } from "../../styled-system/css/cx.js";
|
|
12
|
-
import { DatePickerTrigger as
|
|
13
|
-
import { css as
|
|
13
|
+
import { DatePickerTrigger as $ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-trigger.js";
|
|
14
|
+
import { css as i } from "../../styled-system/css/css.js";
|
|
14
15
|
import { DatePickerInput as P } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-input.js";
|
|
15
|
-
import { DatePickerPositioner as
|
|
16
|
-
import { DatePickerContent as
|
|
17
|
-
import { DatePickerView as
|
|
18
|
-
import { DatePickerContext as
|
|
19
|
-
import { DatePickerViewControl as
|
|
20
|
-
import { DatePickerYearSelect as
|
|
21
|
-
import { DatePickerPrevTrigger as
|
|
22
|
-
import { DatePickerMonthSelect as
|
|
23
|
-
import { DatePickerNextTrigger as
|
|
24
|
-
import { DatePickerTable as
|
|
25
|
-
import { DatePickerTableHead as
|
|
26
|
-
import { DatePickerTableRow as
|
|
27
|
-
import { DatePickerTableHeader as
|
|
28
|
-
import { DatePickerTableBody as
|
|
29
|
-
import { DatePickerTableCell as
|
|
30
|
-
import { DatePickerTableCellTrigger as
|
|
31
|
-
const
|
|
16
|
+
import { DatePickerPositioner as M } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-positioner.js";
|
|
17
|
+
import { DatePickerContent as ee } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-content.js";
|
|
18
|
+
import { DatePickerView as re } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view.js";
|
|
19
|
+
import { DatePickerContext as te } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-context.js";
|
|
20
|
+
import { DatePickerViewControl as ae } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view-control.js";
|
|
21
|
+
import { DatePickerYearSelect as ie } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-year-select.js";
|
|
22
|
+
import { DatePickerPrevTrigger as oe } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-prev-trigger.js";
|
|
23
|
+
import { DatePickerMonthSelect as le } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-month-select.js";
|
|
24
|
+
import { DatePickerNextTrigger as ne } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-next-trigger.js";
|
|
25
|
+
import { DatePickerTable as se } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table.js";
|
|
26
|
+
import { DatePickerTableHead as ce } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-head.js";
|
|
27
|
+
import { DatePickerTableRow as v } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-row.js";
|
|
28
|
+
import { DatePickerTableHeader as me } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-header.js";
|
|
29
|
+
import { DatePickerTableBody as de } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-body.js";
|
|
30
|
+
import { DatePickerTableCell as pe } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell.js";
|
|
31
|
+
import { DatePickerTableCellTrigger as he } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell-trigger.js";
|
|
32
|
+
const Ee = E(
|
|
32
33
|
({
|
|
33
34
|
placeholder: r,
|
|
34
35
|
label: o,
|
|
35
36
|
required: l,
|
|
36
|
-
requiredLabel:
|
|
37
|
-
invalid:
|
|
37
|
+
requiredLabel: n,
|
|
38
|
+
invalid: s,
|
|
38
39
|
invalidMessage: m,
|
|
39
40
|
selectionMode: h = "single",
|
|
40
|
-
startPlaceholder:
|
|
41
|
-
endPlaceholder:
|
|
41
|
+
startPlaceholder: w,
|
|
42
|
+
endPlaceholder: R,
|
|
42
43
|
locale: u = "ja-JP",
|
|
43
|
-
isCalendarOnly:
|
|
44
|
+
isCalendarOnly: F = !1,
|
|
45
|
+
portalled: g = !0,
|
|
44
46
|
...c
|
|
45
47
|
}, k) => {
|
|
46
|
-
const d =
|
|
48
|
+
const d = Q(), I = r ?? d("datePicker.selectDate"), W = w ?? d("datePicker.startDate"), O = R ?? d("datePicker.endDate"), j = S(), [A, H] = C.splitVariantProps({
|
|
47
49
|
...c
|
|
48
|
-
}),
|
|
49
|
-
return
|
|
50
|
+
}), t = C(A), [N, p] = G(!1), V = h === "range", { triggerRef: q, portalContainerRef: L } = K(g);
|
|
51
|
+
return F ? /* @__PURE__ */ e(
|
|
50
52
|
y,
|
|
51
53
|
{
|
|
52
54
|
locale: u,
|
|
@@ -54,34 +56,34 @@ const Be = Y(
|
|
|
54
56
|
ref: k,
|
|
55
57
|
selectionMode: h,
|
|
56
58
|
open: !0,
|
|
57
|
-
className:
|
|
58
|
-
children: /* @__PURE__ */ e(
|
|
59
|
+
className: t.root,
|
|
60
|
+
children: /* @__PURE__ */ e(x, {})
|
|
59
61
|
}
|
|
60
|
-
) : /* @__PURE__ */
|
|
62
|
+
) : /* @__PURE__ */ a(
|
|
61
63
|
y,
|
|
62
64
|
{
|
|
63
65
|
locale: u,
|
|
64
66
|
...c,
|
|
65
67
|
ref: k,
|
|
66
68
|
selectionMode: h,
|
|
67
|
-
className:
|
|
69
|
+
className: t.root,
|
|
68
70
|
open: N,
|
|
69
|
-
onOpenChange: (
|
|
70
|
-
var
|
|
71
|
-
p(
|
|
71
|
+
onOpenChange: (D) => {
|
|
72
|
+
var b;
|
|
73
|
+
p(D.open), (b = c.onOpenChange) == null || b.call(c, D);
|
|
72
74
|
},
|
|
73
75
|
children: [
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
-
o && /* @__PURE__ */
|
|
76
|
+
/* @__PURE__ */ a(T, { children: [
|
|
77
|
+
o && /* @__PURE__ */ a(X, { className: t.label, children: [
|
|
76
78
|
o,
|
|
77
|
-
l && /* @__PURE__ */ e("span", { className:
|
|
79
|
+
l && /* @__PURE__ */ e("span", { className: t.labelRequired, children: n ?? d("common.required") })
|
|
78
80
|
] }),
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
-
|
|
81
|
+
/* @__PURE__ */ a(
|
|
82
|
+
Z,
|
|
81
83
|
{
|
|
82
84
|
className: f(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
+
t.inputWrapper,
|
|
86
|
+
i({
|
|
85
87
|
_expanded: {
|
|
86
88
|
outlineWidth: "sd.system.dimension.border.thick",
|
|
87
89
|
outlineColor: "sd.system.color.impression.primary"
|
|
@@ -89,13 +91,20 @@ const Be = Y(
|
|
|
89
91
|
})
|
|
90
92
|
),
|
|
91
93
|
"data-expanded": N ? !0 : void 0,
|
|
92
|
-
"data-Invalid":
|
|
94
|
+
"data-Invalid": s,
|
|
93
95
|
children: [
|
|
94
|
-
/* @__PURE__ */ e("div", { className:
|
|
95
|
-
|
|
96
|
+
/* @__PURE__ */ e("div", { className: t.leftContent, children: /* @__PURE__ */ e(
|
|
97
|
+
$,
|
|
98
|
+
{
|
|
99
|
+
className: i({ display: "flex" }),
|
|
100
|
+
ref: q,
|
|
101
|
+
children: /* @__PURE__ */ e(B, {})
|
|
102
|
+
}
|
|
103
|
+
) }),
|
|
104
|
+
V ? /* @__PURE__ */ a(
|
|
96
105
|
"div",
|
|
97
106
|
{
|
|
98
|
-
className:
|
|
107
|
+
className: i({
|
|
99
108
|
display: "grid",
|
|
100
109
|
gridTemplateColumns: "1fr auto 1fr",
|
|
101
110
|
alignItems: "center"
|
|
@@ -105,10 +114,10 @@ const Be = Y(
|
|
|
105
114
|
P,
|
|
106
115
|
{
|
|
107
116
|
index: 0,
|
|
108
|
-
placeholder:
|
|
117
|
+
placeholder: W,
|
|
109
118
|
className: f(
|
|
110
|
-
|
|
111
|
-
|
|
119
|
+
t.input,
|
|
120
|
+
i({
|
|
112
121
|
minWidth: "100%",
|
|
113
122
|
borderRadius: "sd.system.dimension.radius.medium"
|
|
114
123
|
})
|
|
@@ -116,15 +125,15 @@ const Be = Y(
|
|
|
116
125
|
onFocus: () => p(!0)
|
|
117
126
|
}
|
|
118
127
|
),
|
|
119
|
-
/* @__PURE__ */ e(
|
|
128
|
+
/* @__PURE__ */ e(J, {}),
|
|
120
129
|
/* @__PURE__ */ e(
|
|
121
130
|
P,
|
|
122
131
|
{
|
|
123
132
|
index: 1,
|
|
124
|
-
placeholder:
|
|
133
|
+
placeholder: O,
|
|
125
134
|
className: f(
|
|
126
|
-
|
|
127
|
-
|
|
135
|
+
t.input,
|
|
136
|
+
i({
|
|
128
137
|
minWidth: "100%",
|
|
129
138
|
borderRadius: "sd.system.dimension.radius.medium"
|
|
130
139
|
})
|
|
@@ -137,8 +146,8 @@ const Be = Y(
|
|
|
137
146
|
) : /* @__PURE__ */ e(
|
|
138
147
|
P,
|
|
139
148
|
{
|
|
140
|
-
placeholder:
|
|
141
|
-
className:
|
|
149
|
+
placeholder: I,
|
|
150
|
+
className: t.input,
|
|
142
151
|
onFocus: () => p(!0)
|
|
143
152
|
}
|
|
144
153
|
),
|
|
@@ -146,62 +155,62 @@ const Be = Y(
|
|
|
146
155
|
]
|
|
147
156
|
}
|
|
148
157
|
),
|
|
149
|
-
|
|
158
|
+
s && m && /* @__PURE__ */ e("div", { className: t.messageField, children: /* @__PURE__ */ e("p", { className: t.invalidMessage, children: m }) })
|
|
150
159
|
] }),
|
|
151
|
-
/* @__PURE__ */ e(
|
|
160
|
+
/* @__PURE__ */ e(U, { disabled: !g, container: L, children: /* @__PURE__ */ e(M, { className: j.positioner, children: /* @__PURE__ */ e(x, {}) }) })
|
|
152
161
|
]
|
|
153
162
|
}
|
|
154
163
|
);
|
|
155
164
|
}
|
|
156
|
-
),
|
|
157
|
-
const r =
|
|
158
|
-
return /* @__PURE__ */ e(
|
|
159
|
-
/* @__PURE__ */
|
|
160
|
-
/* @__PURE__ */
|
|
161
|
-
/* @__PURE__ */ e(
|
|
162
|
-
/* @__PURE__ */ e(
|
|
165
|
+
), x = () => {
|
|
166
|
+
const r = S();
|
|
167
|
+
return /* @__PURE__ */ e(ee, { className: r.content, children: /* @__PURE__ */ e(re, { view: "day", className: r.view, children: /* @__PURE__ */ e(te, { children: (o) => /* @__PURE__ */ a(T, { children: [
|
|
168
|
+
/* @__PURE__ */ a(ae, { className: r.viewControl, children: [
|
|
169
|
+
/* @__PURE__ */ a("div", { className: r.selectWrapper, children: [
|
|
170
|
+
/* @__PURE__ */ e(ie, { className: r.select }),
|
|
171
|
+
/* @__PURE__ */ e(Y, { className: r.selectIcon })
|
|
163
172
|
] }),
|
|
164
|
-
/* @__PURE__ */
|
|
165
|
-
/* @__PURE__ */ e(
|
|
173
|
+
/* @__PURE__ */ a("div", { className: i({ display: "flex", alignItems: "center" }), children: [
|
|
174
|
+
/* @__PURE__ */ e(oe, { className: r.prevTrigger, children: /* @__PURE__ */ e(_, {}) }),
|
|
166
175
|
/* @__PURE__ */ e(
|
|
167
|
-
|
|
176
|
+
le,
|
|
168
177
|
{
|
|
169
|
-
className:
|
|
178
|
+
className: i({
|
|
170
179
|
appearance: "none",
|
|
171
180
|
textAlign: "center"
|
|
172
181
|
})
|
|
173
182
|
}
|
|
174
183
|
),
|
|
175
|
-
/* @__PURE__ */ e(
|
|
184
|
+
/* @__PURE__ */ e(ne, { className: r.nextTrigger, children: /* @__PURE__ */ e(z, {}) })
|
|
176
185
|
] })
|
|
177
186
|
] }),
|
|
178
|
-
/* @__PURE__ */
|
|
179
|
-
/* @__PURE__ */ e(
|
|
180
|
-
|
|
187
|
+
/* @__PURE__ */ a(se, { className: r.table, children: [
|
|
188
|
+
/* @__PURE__ */ e(ce, { children: /* @__PURE__ */ e(v, { children: o.weekDays.map((l, n) => /* @__PURE__ */ e(
|
|
189
|
+
me,
|
|
181
190
|
{
|
|
182
191
|
className: r.tableHeader,
|
|
183
192
|
children: l.narrow
|
|
184
193
|
},
|
|
185
|
-
|
|
194
|
+
n
|
|
186
195
|
)) }) }),
|
|
187
|
-
/* @__PURE__ */ e(
|
|
188
|
-
|
|
196
|
+
/* @__PURE__ */ e(de, { children: o.weeks.map((l, n) => /* @__PURE__ */ e(v, { children: l.map((s, m) => /* @__PURE__ */ e(
|
|
197
|
+
pe,
|
|
189
198
|
{
|
|
190
|
-
value:
|
|
199
|
+
value: s,
|
|
191
200
|
className: r.tableCell,
|
|
192
201
|
children: /* @__PURE__ */ e(
|
|
193
|
-
|
|
202
|
+
he,
|
|
194
203
|
{
|
|
195
204
|
className: r.tableCellTrigger,
|
|
196
|
-
children:
|
|
205
|
+
children: s.day
|
|
197
206
|
}
|
|
198
207
|
)
|
|
199
208
|
},
|
|
200
209
|
m
|
|
201
|
-
)) },
|
|
210
|
+
)) }, n)) })
|
|
202
211
|
] })
|
|
203
212
|
] }) }) }) });
|
|
204
213
|
};
|
|
205
214
|
export {
|
|
206
|
-
|
|
215
|
+
Ee as DatePicker
|
|
207
216
|
};
|
|
@@ -11,5 +11,12 @@ export type DropdownMenuProps = {
|
|
|
11
11
|
items: MenuItemProps[];
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
icon?: React.ReactElement;
|
|
14
|
+
/**
|
|
15
|
+
* Portalを使用するかどうか
|
|
16
|
+
* - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
|
|
17
|
+
* - `false`: ポータルを使用せず、その場にレンダリングする
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
portalled?: boolean;
|
|
14
21
|
};
|
|
15
22
|
export declare const DropdownMenu: React.FC<DropdownMenuProps & MenuRootProps>;
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { SerendieSymbolMenu as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { IconButton as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
|
|
1
|
+
import { jsxs as m, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { SerendieSymbolMenu as u, SerendieSymbolChevronDown as y } from "@serendie/symbols";
|
|
3
|
+
import { Button as g } from "../Button/Button.js";
|
|
4
|
+
import { IconButton as h } from "../IconButton/IconButton.js";
|
|
5
|
+
import { useAutoPortalContainer as f } from "../../hooks/useAutoPortalContainer.js";
|
|
6
|
+
import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
|
|
7
|
+
import { sva as b } from "../../styled-system/css/sva.js";
|
|
8
|
+
import { MenuRoot as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
|
|
9
|
+
import { MenuTrigger as I } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
|
|
10
|
+
import { MenuPositioner as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
|
|
11
|
+
import { MenuContent as _ } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
|
|
12
|
+
import { MenuItemGroup as C } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
|
|
13
|
+
import { MenuItem as M } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
|
|
14
|
+
const w = b({
|
|
14
15
|
slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
|
|
15
16
|
base: {
|
|
16
17
|
content: {
|
|
@@ -18,7 +19,8 @@ const I = g({
|
|
|
18
19
|
borderRadius: "sd.system.dimension.radius.medium",
|
|
19
20
|
bg: "sd.system.color.component.surface",
|
|
20
21
|
boxShadow: "sd.system.elevation.shadow.level1",
|
|
21
|
-
outline: "none"
|
|
22
|
+
outline: "none",
|
|
23
|
+
zIndex: "sd.system.elevation.zIndex.dropdown"
|
|
22
24
|
},
|
|
23
25
|
itemGroup: {
|
|
24
26
|
width: 240
|
|
@@ -81,17 +83,18 @@ const I = g({
|
|
|
81
83
|
transition: "transform 0.2s"
|
|
82
84
|
}
|
|
83
85
|
}
|
|
84
|
-
}),
|
|
85
|
-
styleType:
|
|
86
|
-
title:
|
|
87
|
-
items:
|
|
88
|
-
disabled:
|
|
89
|
-
icon:
|
|
90
|
-
|
|
86
|
+
}), O = ({
|
|
87
|
+
styleType: d = "default",
|
|
88
|
+
title: n,
|
|
89
|
+
items: a,
|
|
90
|
+
disabled: s,
|
|
91
|
+
icon: l,
|
|
92
|
+
portalled: i = !0,
|
|
93
|
+
...c
|
|
91
94
|
}) => {
|
|
92
|
-
const o =
|
|
93
|
-
return /* @__PURE__ */
|
|
94
|
-
|
|
95
|
+
const o = w(), { triggerRef: r, portalContainerRef: p } = f(i);
|
|
96
|
+
return /* @__PURE__ */ m(
|
|
97
|
+
S,
|
|
95
98
|
{
|
|
96
99
|
positioning: {
|
|
97
100
|
offset: {
|
|
@@ -99,30 +102,32 @@ const I = g({
|
|
|
99
102
|
crossAxis: 0
|
|
100
103
|
}
|
|
101
104
|
},
|
|
102
|
-
...
|
|
105
|
+
...c,
|
|
103
106
|
children: [
|
|
104
|
-
/* @__PURE__ */ e(
|
|
105
|
-
|
|
107
|
+
/* @__PURE__ */ e(I, { asChild: !0, children: d === "iconButton" ? /* @__PURE__ */ e(
|
|
108
|
+
h,
|
|
106
109
|
{
|
|
107
|
-
|
|
110
|
+
ref: r,
|
|
111
|
+
icon: l || /* @__PURE__ */ e(u, { className: o.buttonIcon }),
|
|
108
112
|
shape: "rectangle",
|
|
109
|
-
disabled:
|
|
113
|
+
disabled: s,
|
|
110
114
|
styleType: "outlined",
|
|
111
|
-
title:
|
|
115
|
+
title: n
|
|
112
116
|
}
|
|
113
117
|
) : /* @__PURE__ */ e(
|
|
114
|
-
|
|
118
|
+
g,
|
|
115
119
|
{
|
|
120
|
+
ref: r,
|
|
116
121
|
styleType: "rectangle",
|
|
117
122
|
size: "medium",
|
|
118
|
-
disabled:
|
|
119
|
-
rightIcon: /* @__PURE__ */ e(
|
|
123
|
+
disabled: s,
|
|
124
|
+
rightIcon: /* @__PURE__ */ e(y, { className: o.buttonIcon }),
|
|
120
125
|
className: o.button,
|
|
121
|
-
children:
|
|
126
|
+
children: n
|
|
122
127
|
}
|
|
123
128
|
) }),
|
|
124
|
-
/* @__PURE__ */ e(
|
|
125
|
-
|
|
129
|
+
/* @__PURE__ */ e(x, { disabled: !i, container: p, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(_, { className: o.content, children: /* @__PURE__ */ e(C, { className: o.itemGroup, children: a.map((t) => /* @__PURE__ */ m(
|
|
130
|
+
M,
|
|
126
131
|
{
|
|
127
132
|
value: t.value,
|
|
128
133
|
className: o.item,
|
|
@@ -138,6 +143,6 @@ const I = g({
|
|
|
138
143
|
);
|
|
139
144
|
};
|
|
140
145
|
export {
|
|
141
|
-
|
|
142
|
-
|
|
146
|
+
O as DropdownMenu,
|
|
147
|
+
w as DropdownMenuStyle
|
|
143
148
|
};
|
|
@@ -48,6 +48,13 @@ export declare const SearchStyle: import('../../../styled-system/types').SlotRec
|
|
|
48
48
|
}>;
|
|
49
49
|
type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle> & {
|
|
50
50
|
items?: string[];
|
|
51
|
+
/**
|
|
52
|
+
* Portalを使用するかどうか
|
|
53
|
+
* - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
|
|
54
|
+
* - `false`: ポータルを使用せず、その場にレンダリングする
|
|
55
|
+
* @default true
|
|
56
|
+
*/
|
|
57
|
+
portalled?: boolean;
|
|
51
58
|
};
|
|
52
59
|
export declare const Search: React.FC<SearchStyleProps>;
|
|
53
60
|
export {};
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import { jsxs as e, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { SerendieSymbolMagnifyingGlass as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
|
|
2
|
+
import { SerendieSymbolMagnifyingGlass as x, SerendieSymbolClose as b } from "@serendie/symbols";
|
|
3
|
+
import { useAutoPortalContainer as u } from "../../hooks/useAutoPortalContainer.js";
|
|
4
|
+
import { createListCollection as f } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
|
|
5
|
+
import { Portal as h } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
|
|
6
|
+
import { Box as S } from "../../styled-system/jsx/box.js";
|
|
7
|
+
import { sva as C } from "../../styled-system/css/sva.js";
|
|
8
|
+
import { ComboboxRoot as w } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
|
|
9
|
+
import { ComboboxControl as I } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
|
|
10
|
+
import { cx as v } from "../../styled-system/css/cx.js";
|
|
11
|
+
import { ComboboxInput as B } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
|
|
12
|
+
import { ComboboxTrigger as N } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-trigger.js";
|
|
13
|
+
import { ComboboxPositioner as R } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
|
|
14
|
+
import { ComboboxContent as _ } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
|
|
15
|
+
import { ComboboxItemGroup as P } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
|
|
16
|
+
import { ComboboxItem as E } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
|
|
17
|
+
import { ComboboxItemText as T } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
|
|
18
|
+
const d = C({
|
|
18
19
|
slots: [
|
|
19
20
|
"input",
|
|
20
21
|
"control",
|
|
@@ -143,16 +144,17 @@ const d = u({
|
|
|
143
144
|
defaultVariants: {
|
|
144
145
|
size: "medium"
|
|
145
146
|
}
|
|
146
|
-
}),
|
|
147
|
+
}), X = ({
|
|
147
148
|
items: i = [],
|
|
148
|
-
|
|
149
|
+
portalled: t = !0,
|
|
150
|
+
...r
|
|
149
151
|
}) => {
|
|
150
|
-
const [
|
|
152
|
+
const [l, c] = d.splitVariantProps(r), s = d(l), { collection: L, ...n } = c, { triggerRef: p, portalContainerRef: g } = u(t), m = f({ items: i });
|
|
151
153
|
return /* @__PURE__ */ e(
|
|
152
|
-
|
|
154
|
+
w,
|
|
153
155
|
{
|
|
154
|
-
...
|
|
155
|
-
collection:
|
|
156
|
+
...n,
|
|
157
|
+
collection: m,
|
|
156
158
|
lazyMount: !0,
|
|
157
159
|
unmountOnExit: !0,
|
|
158
160
|
positioning: {
|
|
@@ -162,34 +164,41 @@ const d = u({
|
|
|
162
164
|
}
|
|
163
165
|
},
|
|
164
166
|
children: [
|
|
165
|
-
/* @__PURE__ */ e(
|
|
166
|
-
|
|
167
|
-
/* @__PURE__ */ o(C, { className: s.input }),
|
|
168
|
-
i.length > 0 && /* @__PURE__ */ o(w, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(g, { className: s.icon }) }) })
|
|
169
|
-
] }),
|
|
170
|
-
/* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(v, { className: s.combobox, children: /* @__PURE__ */ o(B, { id: "framework", children: n.items.map((m, c) => /* @__PURE__ */ e(
|
|
171
|
-
N,
|
|
167
|
+
/* @__PURE__ */ e(
|
|
168
|
+
I,
|
|
172
169
|
{
|
|
173
|
-
|
|
170
|
+
className: v(s.control, n.className),
|
|
171
|
+
ref: p,
|
|
172
|
+
children: [
|
|
173
|
+
/* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(x, { className: s.icon }) }),
|
|
174
|
+
/* @__PURE__ */ o(B, { className: s.input }),
|
|
175
|
+
i.length > 0 && /* @__PURE__ */ o(N, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(b, { className: s.icon }) }) })
|
|
176
|
+
]
|
|
177
|
+
}
|
|
178
|
+
),
|
|
179
|
+
/* @__PURE__ */ o(h, { disabled: !t, container: g, children: /* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(_, { className: s.combobox, children: /* @__PURE__ */ o(P, { id: "framework", children: m.items.map((a, y) => /* @__PURE__ */ e(
|
|
180
|
+
E,
|
|
181
|
+
{
|
|
182
|
+
item: a,
|
|
174
183
|
className: s.comboboxItem,
|
|
175
184
|
children: [
|
|
176
185
|
/* @__PURE__ */ o(
|
|
177
|
-
|
|
186
|
+
S,
|
|
178
187
|
{
|
|
179
188
|
w: "sd.system.dimension.spacing.large",
|
|
180
189
|
h: "sd.system.dimension.spacing.large"
|
|
181
190
|
}
|
|
182
191
|
),
|
|
183
|
-
/* @__PURE__ */ o(
|
|
192
|
+
/* @__PURE__ */ o(T, { children: a })
|
|
184
193
|
]
|
|
185
194
|
},
|
|
186
|
-
|
|
195
|
+
y
|
|
187
196
|
)) }) }) }) })
|
|
188
197
|
]
|
|
189
198
|
}
|
|
190
199
|
);
|
|
191
200
|
};
|
|
192
201
|
export {
|
|
193
|
-
|
|
202
|
+
X as Search,
|
|
194
203
|
d as SearchStyle
|
|
195
204
|
};
|
|
@@ -58,6 +58,13 @@ type Props = {
|
|
|
58
58
|
invalidMessage?: string;
|
|
59
59
|
items?: selectItem[];
|
|
60
60
|
collection?: SelectRootProps<selectItem>["collection"];
|
|
61
|
+
/**
|
|
62
|
+
* Portalを使用するかどうか
|
|
63
|
+
* - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
|
|
64
|
+
* - `false`: ポータルを使用せず、その場にレンダリングする
|
|
65
|
+
* @default true
|
|
66
|
+
*/
|
|
67
|
+
portalled?: boolean;
|
|
61
68
|
};
|
|
62
69
|
type selectItem = {
|
|
63
70
|
label: string;
|
|
@@ -1,22 +1,23 @@
|
|
|
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 {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
2
|
+
import { SerendieSymbolChevronDown as C } from "@serendie/symbols";
|
|
3
|
+
import { List as T } from "../List/List.js";
|
|
4
|
+
import { ListItem as N } from "../List/ListItem.js";
|
|
5
|
+
import { useAutoPortalContainer as R } from "../../hooks/useAutoPortalContainer.js";
|
|
6
|
+
import { useTranslations as z } from "../../i18n/index.js";
|
|
7
|
+
import { createListCollection as P } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
|
|
8
|
+
import { Portal as V } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
|
|
9
|
+
import { sva as L } from "../../styled-system/css/sva.js";
|
|
10
|
+
import { SelectRoot as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
|
|
11
|
+
import { cx as I } from "../../styled-system/css/cx.js";
|
|
12
|
+
import { SelectLabel as A } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
|
|
12
13
|
import { css as r } from "../../styled-system/css/css.js";
|
|
13
|
-
import { SelectControl as
|
|
14
|
-
import { SelectTrigger as
|
|
15
|
-
import { SelectValueText as
|
|
16
|
-
import { SelectPositioner as
|
|
17
|
-
import { SelectContent as
|
|
18
|
-
import { SelectItem as
|
|
19
|
-
const
|
|
14
|
+
import { SelectControl as O } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
|
|
15
|
+
import { SelectTrigger as j } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
|
|
16
|
+
import { SelectValueText as W } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
|
|
17
|
+
import { SelectPositioner as E } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
|
|
18
|
+
import { SelectContent as k } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
|
|
19
|
+
import { SelectItem as q } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
|
|
20
|
+
const c = L({
|
|
20
21
|
slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
|
|
21
22
|
base: {
|
|
22
23
|
root: {
|
|
@@ -157,29 +158,30 @@ const l = z({
|
|
|
157
158
|
defaultVariants: {
|
|
158
159
|
size: "medium"
|
|
159
160
|
}
|
|
160
|
-
}),
|
|
161
|
-
placeholder:
|
|
162
|
-
label:
|
|
163
|
-
required:
|
|
164
|
-
requiredLabel:
|
|
165
|
-
invalid:
|
|
161
|
+
}), de = ({
|
|
162
|
+
placeholder: p = "",
|
|
163
|
+
label: a,
|
|
164
|
+
required: y,
|
|
165
|
+
requiredLabel: g,
|
|
166
|
+
invalid: d,
|
|
166
167
|
invalidMessage: m,
|
|
167
|
-
className:
|
|
168
|
-
items:
|
|
169
|
-
|
|
168
|
+
className: u,
|
|
169
|
+
items: x = [],
|
|
170
|
+
portalled: n = !0,
|
|
171
|
+
...h
|
|
170
172
|
}) => {
|
|
171
|
-
const
|
|
172
|
-
items:
|
|
173
|
+
const b = z(), [t, f] = c.splitVariantProps(h), o = c(t), { collection: D, ...S } = f, { triggerRef: v, portalContainerRef: w } = R(n), l = P({
|
|
174
|
+
items: x,
|
|
173
175
|
itemToString: (s) => s.label,
|
|
174
176
|
itemToValue: (s) => s.value
|
|
175
177
|
});
|
|
176
178
|
return /* @__PURE__ */ i(
|
|
177
|
-
|
|
179
|
+
B,
|
|
178
180
|
{
|
|
179
|
-
...
|
|
180
|
-
collection:
|
|
181
|
-
invalid:
|
|
182
|
-
className:
|
|
181
|
+
...S,
|
|
182
|
+
collection: l,
|
|
183
|
+
invalid: d,
|
|
184
|
+
className: I(o.root, u),
|
|
183
185
|
positioning: {
|
|
184
186
|
sameWidth: !0,
|
|
185
187
|
offset: {
|
|
@@ -188,9 +190,9 @@ const l = z({
|
|
|
188
190
|
}
|
|
189
191
|
},
|
|
190
192
|
children: [
|
|
191
|
-
|
|
193
|
+
a && t.size != "small" && // smallの場合はラベルを表示しない
|
|
192
194
|
/* @__PURE__ */ i(
|
|
193
|
-
|
|
195
|
+
A,
|
|
194
196
|
{
|
|
195
197
|
className: r({
|
|
196
198
|
textStyle: {
|
|
@@ -199,31 +201,31 @@ const l = z({
|
|
|
199
201
|
}
|
|
200
202
|
}),
|
|
201
203
|
children: [
|
|
202
|
-
|
|
203
|
-
|
|
204
|
+
a,
|
|
205
|
+
y && /* @__PURE__ */ e(
|
|
204
206
|
"span",
|
|
205
207
|
{
|
|
206
208
|
className: r({
|
|
207
209
|
pl: "sd.system.dimension.spacing.extraSmall",
|
|
208
210
|
color: "sd.system.color.impression.negative"
|
|
209
211
|
}),
|
|
210
|
-
children:
|
|
212
|
+
children: g ?? b("common.required")
|
|
211
213
|
}
|
|
212
214
|
)
|
|
213
215
|
]
|
|
214
216
|
}
|
|
215
217
|
),
|
|
216
|
-
/* @__PURE__ */ e(
|
|
218
|
+
/* @__PURE__ */ e(O, { children: /* @__PURE__ */ i(j, { className: o.trigger, ref: v, children: [
|
|
217
219
|
/* @__PURE__ */ e(
|
|
218
|
-
|
|
220
|
+
W,
|
|
219
221
|
{
|
|
220
|
-
placeholder:
|
|
222
|
+
placeholder: p,
|
|
221
223
|
className: o.valueText
|
|
222
224
|
}
|
|
223
225
|
),
|
|
224
|
-
/* @__PURE__ */ e(
|
|
226
|
+
/* @__PURE__ */ e(C, { className: o.iconBox })
|
|
225
227
|
] }) }),
|
|
226
|
-
|
|
228
|
+
d && m && /* @__PURE__ */ e(
|
|
227
229
|
"div",
|
|
228
230
|
{
|
|
229
231
|
className: r({
|
|
@@ -236,20 +238,20 @@ const l = z({
|
|
|
236
238
|
children: m
|
|
237
239
|
}
|
|
238
240
|
),
|
|
239
|
-
/* @__PURE__ */ e(
|
|
240
|
-
|
|
241
|
+
/* @__PURE__ */ e(V, { disabled: !n, container: w, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(k, { className: o.content, children: /* @__PURE__ */ e(T, { children: l.items.map((s, _) => /* @__PURE__ */ e(q, { item: s, children: /* @__PURE__ */ e(
|
|
242
|
+
N,
|
|
241
243
|
{
|
|
242
244
|
title: s.label,
|
|
243
245
|
value: s.value,
|
|
244
246
|
className: o.item,
|
|
245
247
|
size: t.size == "small" ? "small" : void 0
|
|
246
248
|
}
|
|
247
|
-
) },
|
|
249
|
+
) }, _)) }) }) }) })
|
|
248
250
|
]
|
|
249
251
|
}
|
|
250
252
|
);
|
|
251
253
|
};
|
|
252
254
|
export {
|
|
253
|
-
|
|
254
|
-
|
|
255
|
+
de as Select,
|
|
256
|
+
c as SelectStyle
|
|
255
257
|
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ModalDialog/Drawer内にある場合、自動的にそのコンテンツ要素をポータルコンテナとして検出するフック
|
|
3
|
+
*
|
|
4
|
+
* @param portalled - Portalを使用するかどうか
|
|
5
|
+
* @returns triggerRef - トリガー要素に設定するref
|
|
6
|
+
* @returns portalContainerRef - Portalのcontainerプロパティに渡すref
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* const { triggerRef, portalContainerRef } = useAutoPortalContainer(portalled);
|
|
11
|
+
*
|
|
12
|
+
* <Trigger ref={triggerRef}>...</Trigger>
|
|
13
|
+
* <Portal container={portalContainerRef}>...</Portal>
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export declare const useAutoPortalContainer: (portalled: boolean) => {
|
|
17
|
+
triggerRef: import('react').RefObject<HTMLElement>;
|
|
18
|
+
portalContainerRef: {
|
|
19
|
+
current: HTMLElement;
|
|
20
|
+
} | undefined;
|
|
21
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useRef as a, useState as c, useEffect as s } from "react";
|
|
2
|
+
const l = (r) => {
|
|
3
|
+
const t = a(null), [e, o] = c(
|
|
4
|
+
null
|
|
5
|
+
);
|
|
6
|
+
return s(() => {
|
|
7
|
+
if (!r || !t.current) return;
|
|
8
|
+
const n = t.current.closest(
|
|
9
|
+
'[data-scope="dialog"][data-part="content"], [data-scope="drawer"][data-part="content"]'
|
|
10
|
+
);
|
|
11
|
+
n && o(n);
|
|
12
|
+
}, [r]), { triggerRef: t, portalContainerRef: e ? { current: e } : void 0 };
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
l as useAutoPortalContainer
|
|
16
|
+
};
|
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.3.0-dev.
|
|
5
|
+
"version": "2.3.0-dev.202601080839",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": [
|