@bioturing/components 0.47.0 → 0.48.0
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/base-menu/index.d.ts +1 -1
- package/dist/components/base-menu/index.d.ts.map +1 -1
- package/dist/components/base-menu/item.css +1 -1
- package/dist/components/base-menu/item.d.ts +13 -2
- package/dist/components/base-menu/item.d.ts.map +1 -1
- package/dist/components/base-menu/item.js +62 -47
- package/dist/components/base-menu/item.js.map +1 -1
- package/dist/components/base-menu/style.css +1 -1
- package/dist/components/combobox/component.d.ts.map +1 -1
- package/dist/components/combobox/component.js +121 -121
- package/dist/components/combobox/component.js.map +1 -1
- package/dist/components/combobox/style.css +1 -1
- package/dist/components/data-table/component.d.ts.map +1 -1
- package/dist/components/data-table/component.js +81 -70
- package/dist/components/data-table/component.js.map +1 -1
- package/dist/components/data-table/components/TableBody.d.ts +3 -2
- package/dist/components/data-table/components/TableBody.d.ts.map +1 -1
- package/dist/components/data-table/components/TableBody.js +107 -99
- package/dist/components/data-table/components/TableBody.js.map +1 -1
- package/dist/components/data-table/components/TableHeader.d.ts +3 -1
- package/dist/components/data-table/components/TableHeader.d.ts.map +1 -1
- package/dist/components/data-table/components/TableHeader.js +121 -93
- package/dist/components/data-table/components/TableHeader.js.map +1 -1
- package/dist/components/data-table/components/TablePagination.d.ts.map +1 -1
- package/dist/components/data-table/components/TablePagination.js +32 -21
- package/dist/components/data-table/components/TablePagination.js.map +1 -1
- package/dist/components/data-table/hooks.d.ts.map +1 -1
- package/dist/components/data-table/hooks.js +98 -84
- package/dist/components/data-table/hooks.js.map +1 -1
- package/dist/components/data-table/style.css +1 -1
- package/dist/components/data-table/utils.js +37 -30
- package/dist/components/data-table/utils.js.map +1 -1
- package/dist/components/dropdown-menu/component.d.ts.map +1 -1
- package/dist/components/dropdown-menu/component.js +121 -144
- package/dist/components/dropdown-menu/component.js.map +1 -1
- package/dist/components/dropdown-menu/index.d.ts +2 -0
- package/dist/components/dropdown-menu/index.d.ts.map +1 -1
- package/dist/components/dropdown-menu/item.d.ts +7 -15
- package/dist/components/dropdown-menu/item.d.ts.map +1 -1
- package/dist/components/dropdown-menu/item.js +132 -81
- package/dist/components/dropdown-menu/item.js.map +1 -1
- package/dist/components/dropdown-menu/radio-group.d.ts +14 -0
- package/dist/components/dropdown-menu/radio-group.d.ts.map +1 -0
- package/dist/components/dropdown-menu/radio-group.js +45 -0
- package/dist/components/dropdown-menu/radio-group.js.map +1 -0
- package/dist/components/dropdown-menu/search-mode.d.ts +4 -0
- package/dist/components/dropdown-menu/search-mode.d.ts.map +1 -0
- package/dist/components/dropdown-menu/search-mode.js +6 -0
- package/dist/components/dropdown-menu/search-mode.js.map +1 -0
- package/dist/components/dropdown-menu/style.css +1 -1
- package/dist/components/dropdown-menu/submenu.d.ts +25 -0
- package/dist/components/dropdown-menu/submenu.d.ts.map +1 -0
- package/dist/components/dropdown-menu/submenu.js +96 -0
- package/dist/components/dropdown-menu/submenu.js.map +1 -0
- package/dist/components/dropdown-menu/types.d.ts +85 -12
- package/dist/components/dropdown-menu/types.d.ts.map +1 -1
- package/dist/components/dropdown-menu/useDropdownMenu.d.ts +4 -8
- package/dist/components/dropdown-menu/useDropdownMenu.d.ts.map +1 -1
- package/dist/components/dropdown-menu/useDropdownMenu.js +108 -81
- package/dist/components/dropdown-menu/useDropdownMenu.js.map +1 -1
- package/dist/components/select/component.js +29 -29
- package/dist/components/select/component.js.map +1 -1
- package/dist/index.js +278 -274
- package/dist/index.js.map +1 -1
- package/dist/stats.html +1 -1
- package/package.json +1 -1
|
@@ -1,64 +1,61 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Menu as
|
|
2
|
+
import { jsxs as m, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { Menu as u } from "@base-ui/react/menu";
|
|
4
4
|
import { Combobox as t } from "@base-ui/react/combobox";
|
|
5
|
-
import { useRef as ne, useState as te, useCallback as
|
|
6
|
-
import { FormItemInputContext as
|
|
7
|
-
import { PopupPanelSize as
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import { createRenderProp as
|
|
13
|
-
import { DROPDOWN_COLLISION_AVOIDANCE as
|
|
14
|
-
import { Input as
|
|
15
|
-
import { useControlledState as
|
|
16
|
-
import { useCls as
|
|
17
|
-
import { useTheme as
|
|
5
|
+
import { useRef as ne, useState as te, useEffect as ie, useCallback as f, useMemo as g } from "react";
|
|
6
|
+
import { FormItemInputContext as pe } from "antd/es/form/context";
|
|
7
|
+
import { PopupPanelSize as q } from "../popup-panel/constants.js";
|
|
8
|
+
import { hasUnsupportedDropdownMenuSearchItems as de } from "./search-mode.js";
|
|
9
|
+
import { useDropdownMenu as me } from "./useDropdownMenu.js";
|
|
10
|
+
import { BaseMenu as z } from "../base-menu/index.js";
|
|
11
|
+
import { parseAntdPlacement as ue } from "../utils/placement.js";
|
|
12
|
+
import { createRenderProp as le } from "../utils/renderProp.js";
|
|
13
|
+
import { DROPDOWN_COLLISION_AVOIDANCE as ce } from "../utils/constants.js";
|
|
14
|
+
import { Input as ae } from "../input/component.js";
|
|
15
|
+
import { useControlledState as se } from "../hooks/useControlledState.js";
|
|
16
|
+
import { useCls as fe } from "../utils/antdUtils.js";
|
|
17
|
+
import { useTheme as ge } from "../theme-provider/context/themeStore.js";
|
|
18
|
+
import { ScrollArea as B } from "../scroll-area/component.js";
|
|
18
19
|
import { clsx as h } from "../utils/cn.js";
|
|
19
|
-
import { reactNodeToString as
|
|
20
|
-
const
|
|
21
|
-
children:
|
|
22
|
-
items:
|
|
23
|
-
placement:
|
|
24
|
-
openOnHover:
|
|
25
|
-
open:
|
|
26
|
-
onOpenChange:
|
|
27
|
-
defaultOpen:
|
|
28
|
-
className:
|
|
29
|
-
itemRender:
|
|
20
|
+
import { reactNodeToString as he } from "../utils/reactToString.js";
|
|
21
|
+
const Ge = ({
|
|
22
|
+
children: D,
|
|
23
|
+
items: b,
|
|
24
|
+
placement: J,
|
|
25
|
+
openOnHover: N,
|
|
26
|
+
open: Q,
|
|
27
|
+
onOpenChange: W,
|
|
28
|
+
defaultOpen: X = !1,
|
|
29
|
+
className: E,
|
|
30
|
+
itemRender: Y,
|
|
30
31
|
classNames: n,
|
|
31
|
-
size:
|
|
32
|
-
showSearch:
|
|
33
|
-
inCombobox:
|
|
32
|
+
size: w = "auto",
|
|
33
|
+
showSearch: l,
|
|
34
|
+
inCombobox: M,
|
|
34
35
|
searchProps: i = {
|
|
35
36
|
placeholder: "Search..."
|
|
36
37
|
},
|
|
37
|
-
popupMatchTriggerWidth:
|
|
38
|
-
beforeList:
|
|
39
|
-
afterList:
|
|
40
|
-
keepOpenOnSelect:
|
|
41
|
-
highlightedItemKey:
|
|
42
|
-
selectedItemKeys:
|
|
43
|
-
getItemKeywords:
|
|
44
|
-
showCheckbox:
|
|
45
|
-
itemLabelRender:
|
|
46
|
-
nativeButton:
|
|
38
|
+
popupMatchTriggerWidth: T,
|
|
39
|
+
beforeList: P,
|
|
40
|
+
afterList: S,
|
|
41
|
+
keepOpenOnSelect: Z,
|
|
42
|
+
highlightedItemKey: be,
|
|
43
|
+
selectedItemKeys: $,
|
|
44
|
+
getItemKeywords: ee,
|
|
45
|
+
showCheckbox: v,
|
|
46
|
+
itemLabelRender: oe,
|
|
47
|
+
nativeButton: V = !0
|
|
47
48
|
}) => {
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
itemLabelRender: ee,
|
|
59
|
-
itemRender: X,
|
|
60
|
-
inCombobox: oe,
|
|
61
|
-
onOpenChange: C,
|
|
49
|
+
const C = typeof M == "boolean" ? M : l, [A, x] = se(Q, W, X), o = fe(), { className: c } = ge(), a = ue(J), _ = ne(null), { itemGroups: I, renderGroup: y } = me({
|
|
50
|
+
items: b,
|
|
51
|
+
keepOpenOnSelect: Z,
|
|
52
|
+
selectedItemKeys: $,
|
|
53
|
+
showCheckbox: v,
|
|
54
|
+
getItemKeywords: ee,
|
|
55
|
+
itemLabelRender: oe,
|
|
56
|
+
itemRender: Y,
|
|
57
|
+
inCombobox: C,
|
|
58
|
+
onOpenChange: x,
|
|
62
59
|
classNames: {
|
|
63
60
|
item: n?.item,
|
|
64
61
|
itemIcon: n?.itemIcon,
|
|
@@ -67,97 +64,77 @@ const _e = ({
|
|
|
67
64
|
groupLabel: n?.groupLabel,
|
|
68
65
|
divider: n?.divider
|
|
69
66
|
}
|
|
70
|
-
}), [
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
67
|
+
}), [O, re] = te("");
|
|
68
|
+
ie(() => {
|
|
69
|
+
!C || process.env.NODE_ENV === "production" || de(b) && console.warn(
|
|
70
|
+
"DropdownMenu search/combobox mode only supports flat `item`, `header`, and `divider` entries. Checkbox, radio-group, and submenu items are ignored."
|
|
71
|
+
);
|
|
72
|
+
}, [C, b]);
|
|
73
|
+
const j = f(() => {
|
|
74
|
+
if (!l)
|
|
75
|
+
return /* @__PURE__ */ m("div", { className: o("dropdown-menu-container"), children: [
|
|
76
|
+
P,
|
|
77
|
+
/* @__PURE__ */ e(B, { fadeEdges: !0, children: I.map(y) }),
|
|
78
|
+
S
|
|
76
79
|
] });
|
|
77
|
-
const r = /* @__PURE__ */ e(
|
|
80
|
+
const r = /* @__PURE__ */ e(pe.Provider, { value: {}, children: /* @__PURE__ */ e(
|
|
78
81
|
t.Input,
|
|
79
82
|
{
|
|
80
83
|
placeholder: i?.placeholder || "Search",
|
|
81
84
|
render: ({ ref: s, ...p }) => /* @__PURE__ */ e(
|
|
82
|
-
|
|
85
|
+
ae,
|
|
83
86
|
{
|
|
84
87
|
...p,
|
|
85
|
-
ref: (
|
|
86
|
-
if (!
|
|
87
|
-
s(
|
|
88
|
+
ref: (d) => {
|
|
89
|
+
if (!d || !d.input) return;
|
|
90
|
+
s(d.input);
|
|
88
91
|
},
|
|
89
92
|
allowClear: !0,
|
|
90
93
|
placeholder: i?.placeholder || "Search",
|
|
91
|
-
value:
|
|
92
|
-
onChange: (
|
|
93
|
-
className: h(
|
|
94
|
-
o("dropdown-menu-search"),
|
|
95
|
-
i?.className
|
|
96
|
-
)
|
|
94
|
+
value: O,
|
|
95
|
+
onChange: (d) => re(d.target.value),
|
|
96
|
+
className: h(o("dropdown-menu-search"), i?.className)
|
|
97
97
|
}
|
|
98
98
|
),
|
|
99
99
|
...i
|
|
100
100
|
},
|
|
101
101
|
"search"
|
|
102
|
-
) }), R = /* @__PURE__ */
|
|
102
|
+
) }), R = /* @__PURE__ */ m(B, { fadeEdges: !0, children: [
|
|
103
103
|
/* @__PURE__ */ e(t.Empty, { className: o("dropdown-menu-empty"), children: "No results found." }),
|
|
104
|
-
/* @__PURE__ */ e(t.List, { className: o("dropdown-menu-list"), children: (s, p) =>
|
|
104
|
+
/* @__PURE__ */ e(t.List, { className: o("dropdown-menu-list"), children: (s, p) => y(s, p) })
|
|
105
105
|
] });
|
|
106
|
-
return /* @__PURE__ */
|
|
107
|
-
/* @__PURE__ */ e(
|
|
108
|
-
|
|
109
|
-
{
|
|
110
|
-
className: o("dropdown-menu-search-wrapper"),
|
|
111
|
-
children: r
|
|
112
|
-
}
|
|
113
|
-
),
|
|
114
|
-
b,
|
|
106
|
+
return /* @__PURE__ */ m("div", { className: o("dropdown-menu-container"), children: [
|
|
107
|
+
/* @__PURE__ */ e("div", { className: o("dropdown-menu-search-wrapper"), children: r }),
|
|
108
|
+
P,
|
|
115
109
|
R,
|
|
116
|
-
|
|
110
|
+
S
|
|
117
111
|
] });
|
|
118
|
-
}, [
|
|
119
|
-
u,
|
|
120
|
-
o,
|
|
121
|
-
i,
|
|
122
|
-
x,
|
|
123
|
-
b,
|
|
124
|
-
w,
|
|
125
|
-
v,
|
|
126
|
-
I
|
|
127
|
-
]), _ = g(
|
|
112
|
+
}, [l, o, i, O, P, S, I, y]), k = f(
|
|
128
113
|
(r, R) => {
|
|
129
114
|
const { openOnHover: s, ...p } = r;
|
|
130
|
-
return
|
|
115
|
+
return le(D, p, R);
|
|
131
116
|
},
|
|
132
|
-
[
|
|
133
|
-
),
|
|
117
|
+
[D]
|
|
118
|
+
), G = g(
|
|
134
119
|
() => ({
|
|
135
|
-
ref:
|
|
136
|
-
openOnHover:
|
|
137
|
-
nativeButton:
|
|
138
|
-
className: h(
|
|
139
|
-
|
|
140
|
-
n?.trigger,
|
|
141
|
-
c
|
|
142
|
-
),
|
|
143
|
-
render: _
|
|
120
|
+
ref: _,
|
|
121
|
+
openOnHover: N,
|
|
122
|
+
nativeButton: V,
|
|
123
|
+
className: h(o("dropdown-menu-trigger"), n?.trigger, c),
|
|
124
|
+
render: k
|
|
144
125
|
}),
|
|
145
|
-
[
|
|
146
|
-
), G = g(
|
|
147
|
-
(r) => /* @__PURE__ */ e(U.Root, { ...r }),
|
|
148
|
-
[]
|
|
126
|
+
[_, N, V, o, n?.trigger, c, k]
|
|
149
127
|
), L = f(
|
|
128
|
+
(r) => /* @__PURE__ */ e(z.Root, { ...r }),
|
|
129
|
+
[]
|
|
130
|
+
), U = g(
|
|
150
131
|
() => ({
|
|
151
132
|
side: a.side,
|
|
152
133
|
align: a.align,
|
|
153
134
|
sideOffset: 4,
|
|
154
|
-
className: h(
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
n?.root
|
|
158
|
-
),
|
|
159
|
-
collisionAvoidance: le,
|
|
160
|
-
render: G
|
|
135
|
+
className: h(o("dropdown-menu-root"), c, n?.root),
|
|
136
|
+
collisionAvoidance: ce,
|
|
137
|
+
render: L
|
|
161
138
|
}),
|
|
162
139
|
[
|
|
163
140
|
a.side,
|
|
@@ -165,60 +142,60 @@ const _e = ({
|
|
|
165
142
|
o,
|
|
166
143
|
c,
|
|
167
144
|
n?.root,
|
|
168
|
-
|
|
145
|
+
L
|
|
169
146
|
]
|
|
170
|
-
), k = g(
|
|
171
|
-
(r) => /* @__PURE__ */ e(U.Popup, { ...r }),
|
|
172
|
-
[]
|
|
173
147
|
), F = f(
|
|
148
|
+
(r) => /* @__PURE__ */ e(z.Popup, { ...r }),
|
|
149
|
+
[]
|
|
150
|
+
), H = g(
|
|
174
151
|
() => ({
|
|
175
|
-
"--size-width":
|
|
152
|
+
"--size-width": w in q ? q[w] : void 0
|
|
176
153
|
}),
|
|
177
|
-
[
|
|
178
|
-
),
|
|
154
|
+
[w]
|
|
155
|
+
), K = g(
|
|
179
156
|
() => ({
|
|
180
157
|
className: h(
|
|
181
158
|
o(
|
|
182
159
|
"dropdown-menu",
|
|
183
|
-
|
|
184
|
-
|
|
160
|
+
v && "dropdown-menu-show-checkbox",
|
|
161
|
+
T && "dropdown-menu-match-trigger-width"
|
|
185
162
|
),
|
|
186
|
-
|
|
163
|
+
E,
|
|
187
164
|
n?.popup
|
|
188
165
|
),
|
|
189
|
-
style:
|
|
190
|
-
render:
|
|
166
|
+
style: H,
|
|
167
|
+
render: F
|
|
191
168
|
}),
|
|
192
169
|
[
|
|
193
170
|
o,
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
171
|
+
v,
|
|
172
|
+
T,
|
|
173
|
+
E,
|
|
197
174
|
n?.popup,
|
|
198
|
-
|
|
199
|
-
|
|
175
|
+
H,
|
|
176
|
+
F
|
|
200
177
|
]
|
|
201
178
|
);
|
|
202
|
-
return
|
|
179
|
+
return l ? /* @__PURE__ */ m(
|
|
203
180
|
t.Root,
|
|
204
181
|
{
|
|
205
|
-
open:
|
|
206
|
-
onOpenChange:
|
|
207
|
-
items:
|
|
208
|
-
itemToStringLabel: (r) => r.type == "item" ?
|
|
182
|
+
open: A,
|
|
183
|
+
onOpenChange: x,
|
|
184
|
+
items: I,
|
|
185
|
+
itemToStringLabel: (r) => r.type == "item" ? he(r.label) : "",
|
|
209
186
|
itemToStringValue: (r) => r.type == "item" ? String(r.key) : "",
|
|
210
|
-
inputValue:
|
|
187
|
+
inputValue: O,
|
|
211
188
|
children: [
|
|
212
|
-
/* @__PURE__ */ e(t.Trigger, { ...
|
|
213
|
-
/* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(t.Positioner, { ...
|
|
189
|
+
/* @__PURE__ */ e(t.Trigger, { ...G }),
|
|
190
|
+
/* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(t.Positioner, { ...U, children: /* @__PURE__ */ e(t.Popup, { ...K, children: j() }) }) })
|
|
214
191
|
]
|
|
215
192
|
}
|
|
216
|
-
) : /* @__PURE__ */
|
|
217
|
-
/* @__PURE__ */ e(
|
|
218
|
-
/* @__PURE__ */ e(
|
|
193
|
+
) : /* @__PURE__ */ m(u.Root, { open: A, onOpenChange: x, children: [
|
|
194
|
+
/* @__PURE__ */ e(u.Trigger, { ...G }),
|
|
195
|
+
/* @__PURE__ */ e(u.Portal, { children: /* @__PURE__ */ e(u.Positioner, { ...U, children: /* @__PURE__ */ e(u.Popup, { ...K, children: j() }) }) })
|
|
219
196
|
] });
|
|
220
197
|
};
|
|
221
198
|
export {
|
|
222
|
-
|
|
199
|
+
Ge as DropdownMenu
|
|
223
200
|
};
|
|
224
201
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui/react/menu\";\nimport { Combobox, type ComboboxTriggerState } from \"@base-ui/react/combobox\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useMemo, useRef, useState, RefCallback } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n reactNodeToString,\n useCls,\n createRenderProp,\n} from \"../utils\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\n\n// Import component-specific styles\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport { DropdownMenuItemType } from \"./types\";\nimport { useDropdownMenu, UseDropdownMenuProps } from \"./useDropdownMenu\";\nimport { useControlledState } from \"../hooks\";\n\nimport { useTheme } from \"../theme-provider\";\nimport { BaseMenu } from \"../base-menu\";\n\nimport { Input } from \"../input\";\n\nexport interface DropdownMenuProps extends Omit<\n UseDropdownMenuProps,\n \"classNames\"\n> {\n /** Array of menu items to be displayed in the dropdown */\n items: DropdownMenuItemType[];\n /** Custom render function for the trigger element */\n children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n /**\n * Placement of the dropdown relative to the trigger element\n * @default \"bottomLeft\"\n */\n placement?: PopoverProps[\"placement\"];\n /**\n * Whether to open the dropdown on hover instead of click\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Controlled open state of the dropdown\n */\n open?: boolean;\n /**\n * Callback fired when the dropdown open state changes\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Default open state of the dropdown\n */\n defaultOpen?: boolean;\n /**\n * Additional CSS class for the dropdown component\n */\n className?: string;\n /**\n * Custom class names for different parts of the dropdown\n * @default {}\n */\n classNames?: {\n root?: string;\n trigger?: string;\n popup?: string;\n itemIcon?: string;\n itemText?: string;\n positioner?: string;\n } & UseDropdownMenuProps[\"classNames\"];\n\n /**\n * Whether to show search input\n * @default false\n */\n showSearch?: boolean;\n /**\n * Size of the dropdown menu\n * @default \"auto\"\n */\n size?: \"auto\" | keyof typeof PopupPanelSize;\n /**\n * Search placeholder\n */\n searchProps?: {\n placeholder?: string;\n className?: string;\n };\n /**\n * Whether to match the width of the popup with the trigger\n * @default false\n */\n popupMatchTriggerWidth?: boolean;\n /**\n * Content to display before the list\n */\n beforeList?: React.ReactNode;\n /**\n * Content to display after the list\n */\n afterList?: React.ReactNode;\n /**\n * Whether the trigger should act as a native button element.\n * Set to false when using non-button elements (like Typography.Link) as trigger\n * to suppress Base UI warnings and remove native button semantics.\n * @default true\n */\n nativeButton?: boolean;\n}\n\nexport const DropdownMenu = ({\n children,\n items,\n placement,\n openOnHover,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n defaultOpen = false,\n className,\n itemRender,\n classNames,\n size = \"auto\",\n showSearch,\n inCombobox: inComboboxProp,\n searchProps = {\n placeholder: \"Search...\",\n },\n popupMatchTriggerWidth,\n beforeList,\n afterList,\n keepOpenOnSelect,\n highlightedItemKey,\n selectedItemKeys,\n getItemKeywords,\n showCheckbox,\n itemLabelRender,\n nativeButton = true,\n}: DropdownMenuProps) => {\n const inCombobox =\n typeof inComboboxProp === \"boolean\" ? inComboboxProp : showSearch;\n const [open, onOpenChange] = useControlledState(\n outsideOpen,\n outsideOnOpenChange,\n defaultOpen,\n );\n const cls = useCls();\n const { className: themeClassName } = useTheme();\n const baseUIPlacement = parseAntdPlacement(placement);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { itemGroups, renderGroup } = useDropdownMenu({\n items,\n keepOpenOnSelect,\n highlightedItemKey,\n selectedItemKeys,\n showCheckbox,\n getItemKeywords,\n itemLabelRender,\n itemRender,\n inCombobox,\n onOpenChange,\n classNames: {\n item: classNames?.item,\n itemIcon: classNames?.itemIcon,\n itemSuffix: classNames?.itemSuffix,\n group: classNames?.group,\n groupLabel: classNames?.groupLabel,\n divider: classNames?.divider,\n },\n });\n\n const [searchValue, setSearchValue] = useState(\"\");\n\n const renderMenuInner = useCallback(() => {\n if (!showSearch) {\n return (\n <div className={cls(\"dropdown-menu-container\")}>\n {beforeList}\n <ScrollArea fadeEdges>{itemGroups.map(renderGroup)}</ScrollArea>\n {afterList}\n </div>\n );\n }\n\n const searchInput = (\n <FormItemInputContext.Provider value={{}}>\n <Combobox.Input\n key=\"search\"\n placeholder={searchProps?.placeholder || \"Search\"}\n render={({ ref, ...props }) => (\n <Input\n {...props}\n ref={(antdInputRef) => {\n if (!antdInputRef || !antdInputRef.input) return;\n const comboboxRef = ref as RefCallback<HTMLInputElement>;\n comboboxRef(antdInputRef.input);\n }}\n allowClear\n placeholder={searchProps?.placeholder || \"Search\"}\n value={searchValue}\n onChange={(e) => setSearchValue(e.target.value)}\n className={clsx(\n cls(\"dropdown-menu-search\"),\n searchProps?.className,\n )}\n />\n )}\n {...searchProps}\n />\n </FormItemInputContext.Provider>\n );\n\n const listContent = (\n <ScrollArea fadeEdges>\n <Combobox.Empty className={cls(\"dropdown-menu-empty\")}>\n No results found.\n </Combobox.Empty>\n <Combobox.List className={cls(\"dropdown-menu-list\")}>\n {(group, i) => renderGroup(group, i)}\n </Combobox.List>\n </ScrollArea>\n );\n\n return (\n <div className={cls(\"dropdown-menu-container\")}>\n <div\n className={cls(\"dropdown-menu-search-wrapper\")}\n >\n {searchInput}\n </div>\n {beforeList}\n {listContent}\n {afterList}\n </div>\n );\n }, [\n showSearch,\n cls,\n searchProps,\n searchValue,\n beforeList,\n afterList,\n itemGroups,\n renderGroup,\n ]);\n\n // Stable trigger render — useCallback since it's called during render phase\n const triggerRender = useCallback(\n (\n props: React.HTMLProps<HTMLElement> & { openOnHover?: boolean },\n state: ComboboxTriggerState\n ) => {\n const { openOnHover: _openOnHover, ...rest } = props;\n return createRenderProp(children, rest, state);\n },\n [children]\n );\n\n const commonTriggerProps = useMemo(\n () => ({\n ref: buttonRef,\n openOnHover,\n nativeButton,\n className: clsx(\n cls(\"dropdown-menu-trigger\"),\n classNames?.trigger,\n themeClassName,\n ),\n render: triggerRender,\n }),\n [buttonRef, openOnHover, nativeButton, cls, classNames?.trigger, themeClassName, triggerRender]\n );\n\n // Stable positioner render — useCallback since it's called during render phase\n const positionerRender = useCallback(\n (props: React.ComponentPropsWithoutRef<\"div\">) => (\n <BaseMenu.Root {...props} />\n ),\n []\n );\n\n const commonPositionerProps = useMemo(\n () => ({\n side: baseUIPlacement.side,\n align: baseUIPlacement.align,\n sideOffset: 4,\n className: clsx(\n cls(\"dropdown-menu-root\"),\n themeClassName,\n classNames?.root,\n ),\n collisionAvoidance: DROPDOWN_COLLISION_AVOIDANCE,\n render: positionerRender,\n }),\n [\n baseUIPlacement.side,\n baseUIPlacement.align,\n cls,\n themeClassName,\n classNames?.root,\n positionerRender,\n ]\n );\n\n // Stable popup render — useCallback since it's called during render phase\n const popupRender = useCallback(\n (props: React.ComponentPropsWithoutRef<\"div\">) => (\n <BaseMenu.Popup {...props} />\n ),\n []\n );\n\n const popupStyle = useMemo(\n () =>\n ({\n \"--size-width\": size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n }) as React.CSSProperties,\n [size]\n );\n\n const commonPopupProps = useMemo(\n () => ({\n className: clsx(\n cls(\n \"dropdown-menu\",\n showCheckbox && \"dropdown-menu-show-checkbox\",\n popupMatchTriggerWidth && \"dropdown-menu-match-trigger-width\",\n ),\n className,\n classNames?.popup,\n ),\n style: popupStyle,\n render: popupRender,\n }),\n [\n cls,\n showCheckbox,\n popupMatchTriggerWidth,\n className,\n classNames?.popup,\n popupStyle,\n popupRender,\n ]\n );\n\n return showSearch ? (\n <Combobox.Root<DropdownMenuItemType>\n open={open}\n onOpenChange={onOpenChange}\n items={itemGroups}\n itemToStringLabel={(item) =>\n item.type == \"item\" ? reactNodeToString(item.label) : \"\"\n }\n itemToStringValue={(item) =>\n item.type == \"item\" ? String(item.key) : \"\"\n }\n inputValue={searchValue}\n >\n <Combobox.Trigger {...commonTriggerProps} />\n <Combobox.Portal>\n <Combobox.Positioner {...commonPositionerProps}>\n <Combobox.Popup {...commonPopupProps}>\n {renderMenuInner()}\n </Combobox.Popup>\n </Combobox.Positioner>\n </Combobox.Portal>\n </Combobox.Root>\n ) : (\n <Menu.Root open={open} onOpenChange={onOpenChange}>\n <Menu.Trigger {...commonTriggerProps} />\n <Menu.Portal>\n <Menu.Positioner {...commonPositionerProps}>\n <Menu.Popup {...commonPopupProps}>{renderMenuInner()}</Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n </Menu.Root>\n );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","defaultOpen","className","itemRender","classNames","size","showSearch","inComboboxProp","searchProps","popupMatchTriggerWidth","beforeList","afterList","keepOpenOnSelect","highlightedItemKey","selectedItemKeys","getItemKeywords","showCheckbox","itemLabelRender","nativeButton","inCombobox","open","onOpenChange","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","renderGroup","useDropdownMenu","searchValue","setSearchValue","useState","renderMenuInner","useCallback","jsxs","ScrollArea","searchInput","jsx","FormItemInputContext","Combobox","ref","props","Input","antdInputRef","e","clsx","listContent","group","i","triggerRender","state","_openOnHover","rest","createRenderProp","commonTriggerProps","useMemo","positionerRender","BaseMenu","commonPositionerProps","DROPDOWN_COLLISION_AVOIDANCE","popupRender","popupStyle","PopupPanelSize","commonPopupProps","item","reactNodeToString","Menu"],"mappings":";;;;;;;;;;;;;;;;;;;AAkHO,MAAMA,KAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAMC;AAAA,EACN,cAAcC;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,YAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,aAAAC,IAAc;AAAA,IACZ,aAAa;AAAA,EAAA;AAAA,EAEf,wBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAAyB;AACvB,QAAMC,KACJ,OAAOZ,KAAmB,YAAYA,IAAiBD,GACnD,CAACc,GAAMC,CAAY,IAAIC;AAAA,IAC3BvB;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,GAEIsB,IAAMC,GAAA,GACN,EAAE,WAAWC,EAAA,IAAmBC,GAAA,GAChCC,IAAkBC,GAAmB/B,CAAS,GAC9CgC,IAAYC,GAA0B,IAAI,GAC1C,EAAE,YAAAC,GAAY,aAAAC,EAAA,IAAgBC,GAAgB;AAAA,IAClD,OAAArC;AAAA,IACA,kBAAAgB;AAAA,IAEA,kBAAAE;AAAA,IACA,cAAAE;AAAA,IACA,iBAAAD;AAAA,IACA,iBAAAE;AAAA,IACA,YAAAd;AAAA,IACA,YAAAgB;AAAA,IACA,cAAAE;AAAA,IACA,YAAY;AAAA,MACV,MAAMjB,GAAY;AAAA,MAClB,UAAUA,GAAY;AAAA,MACtB,YAAYA,GAAY;AAAA,MACxB,OAAOA,GAAY;AAAA,MACnB,YAAYA,GAAY;AAAA,MACxB,SAASA,GAAY;AAAA,IAAA;AAAA,EACvB,CACD,GAEK,CAAC8B,GAAaC,EAAc,IAAIC,GAAS,EAAE,GAE3CC,IAAkBC,EAAY,MAAM;AACxC,QAAI,CAAChC;AACH,aACE,gBAAAiC,EAAC,OAAA,EAAI,WAAWhB,EAAI,yBAAyB,GAC1C,UAAA;AAAA,QAAAb;AAAA,0BACA8B,GAAA,EAAW,WAAS,IAAE,UAAAT,EAAW,IAAIC,CAAW,GAAE;AAAA,QAClDrB;AAAA,MAAA,GACH;AAIJ,UAAM8B,IACJ,gBAAAC,EAACC,GAAqB,UAArB,EAA8B,OAAO,CAAA,GACpC,UAAA,gBAAAD;AAAA,MAACE,EAAS;AAAA,MAAT;AAAA,QAEC,aAAapC,GAAa,eAAe;AAAA,QACzC,QAAQ,CAAC,EAAE,KAAAqC,GAAK,GAAGC,QACjB,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAGD;AAAA,YACJ,KAAK,CAACE,MAAiB;AACrB,kBAAI,CAACA,KAAgB,CAACA,EAAa,MAAO;AAE1C,cADoBH,EACRG,EAAa,KAAK;AAAA,YAChC;AAAA,YACA,YAAU;AAAA,YACV,aAAaxC,GAAa,eAAe;AAAA,YACzC,OAAO0B;AAAA,YACP,UAAU,CAACe,MAAMd,GAAec,EAAE,OAAO,KAAK;AAAA,YAC9C,WAAWC;AAAA,cACT3B,EAAI,sBAAsB;AAAA,cAC1Bf,GAAa;AAAA,YAAA;AAAA,UACf;AAAA,QAAA;AAAA,QAGH,GAAGA;AAAA,MAAA;AAAA,MApBA;AAAA,IAAA,GAsBR,GAGI2C,IACJ,gBAAAZ,EAACC,GAAA,EAAW,WAAS,IACnB,UAAA;AAAA,MAAA,gBAAAE,EAACE,EAAS,OAAT,EAAe,WAAWrB,EAAI,qBAAqB,GAAG,UAAA,qBAEvD;AAAA,MACA,gBAAAmB,EAACE,EAAS,MAAT,EAAc,WAAWrB,EAAI,oBAAoB,GAC/C,UAAA,CAAC6B,GAAOC,MAAMrB,EAAYoB,GAAOC,CAAC,EAAA,CACrC;AAAA,IAAA,GACF;AAGF,WACE,gBAAAd,EAAC,OAAA,EAAI,WAAWhB,EAAI,yBAAyB,GAC3C,UAAA;AAAA,MAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWnB,EAAI,8BAA8B;AAAA,UAE5C,UAAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF/B;AAAA,MACAyC;AAAA,MACAxC;AAAA,IAAA,GACH;AAAA,EAEJ,GAAG;AAAA,IACDL;AAAA,IACAiB;AAAA,IACAf;AAAA,IACA0B;AAAA,IACAxB;AAAA,IACAC;AAAA,IACAoB;AAAA,IACAC;AAAA,EAAA,CACD,GAGKsB,IAAgBhB;AAAA,IACpB,CACEQ,GACAS,MACG;AACH,YAAM,EAAE,aAAaC,GAAc,GAAGC,MAASX;AAC/C,aAAOY,GAAiB/D,GAAU8D,GAAMF,CAAK;AAAA,IAC/C;AAAA,IACA,CAAC5D,CAAQ;AAAA,EAAA,GAGLgE,IAAqBC;AAAA,IACzB,OAAO;AAAA,MACL,KAAK/B;AAAA,MACL,aAAA/B;AAAA,MACA,cAAAoB;AAAA,MACA,WAAWgC;AAAA,QACT3B,EAAI,uBAAuB;AAAA,QAC3BnB,GAAY;AAAA,QACZqB;AAAA,MAAA;AAAA,MAEF,QAAQ6B;AAAA,IAAA;AAAA,IAEV,CAACzB,GAAW/B,GAAaoB,GAAcK,GAAKnB,GAAY,SAASqB,GAAgB6B,CAAa;AAAA,EAAA,GAI1FO,IAAmBvB;AAAA,IACvB,CAACQ,MACC,gBAAAJ,EAACoB,EAAS,MAAT,EAAe,GAAGhB,GAAO;AAAA,IAE5B,CAAA;AAAA,EAAC,GAGGiB,IAAwBH;AAAA,IAC5B,OAAO;AAAA,MACL,MAAMjC,EAAgB;AAAA,MACtB,OAAOA,EAAgB;AAAA,MACvB,YAAY;AAAA,MACZ,WAAWuB;AAAA,QACT3B,EAAI,oBAAoB;AAAA,QACxBE;AAAA,QACArB,GAAY;AAAA,MAAA;AAAA,MAEd,oBAAoB4D;AAAA,MACpB,QAAQH;AAAA,IAAA;AAAA,IAEV;AAAA,MACElC,EAAgB;AAAA,MAChBA,EAAgB;AAAA,MAChBJ;AAAA,MACAE;AAAA,MACArB,GAAY;AAAA,MACZyD;AAAA,IAAA;AAAA,EACF,GAIII,IAAc3B;AAAA,IAClB,CAACQ,MACC,gBAAAJ,EAACoB,EAAS,OAAT,EAAgB,GAAGhB,GAAO;AAAA,IAE7B,CAAA;AAAA,EAAC,GAGGoB,IAAaN;AAAA,IACjB,OACG;AAAA,MACC,gBAAgBvD,KAAQ8D,IAAiBA,EAAe9D,CAAI,IAAI;AAAA,IAAA;AAAA,IAEpE,CAACA,CAAI;AAAA,EAAA,GAGD+D,IAAmBR;AAAA,IACvB,OAAO;AAAA,MACL,WAAWV;AAAA,QACT3B;AAAA,UACE;AAAA,UACAP,KAAgB;AAAA,UAChBP,KAA0B;AAAA,QAAA;AAAA,QAE5BP;AAAA,QACAE,GAAY;AAAA,MAAA;AAAA,MAEd,OAAO8D;AAAA,MACP,QAAQD;AAAA,IAAA;AAAA,IAEV;AAAA,MACE1C;AAAA,MACAP;AAAA,MACAP;AAAA,MACAP;AAAA,MACAE,GAAY;AAAA,MACZ8D;AAAA,MACAD;AAAA,IAAA;AAAA,EACF;AAGF,SAAO3D,IACL,gBAAAiC;AAAA,IAACK,EAAS;AAAA,IAAT;AAAA,MACC,MAAAxB;AAAA,MACA,cAAAC;AAAA,MACA,OAAOU;AAAA,MACP,mBAAmB,CAACsC,MAClBA,EAAK,QAAQ,SAASC,GAAkBD,EAAK,KAAK,IAAI;AAAA,MAExD,mBAAmB,CAACA,MAClBA,EAAK,QAAQ,SAAS,OAAOA,EAAK,GAAG,IAAI;AAAA,MAE3C,YAAYnC;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAACE,EAAS,SAAT,EAAkB,GAAGe,EAAA,CAAoB;AAAA,0BACzCf,EAAS,QAAT,EACC,UAAA,gBAAAF,EAACE,EAAS,YAAT,EAAqB,GAAGmB,GACvB,UAAA,gBAAArB,EAACE,EAAS,OAAT,EAAgB,GAAGwB,GACjB,UAAA/B,EAAA,GACH,GACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE,EAACgC,EAAK,MAAL,EAAU,MAAAnD,GAAY,cAAAC,GACrB,UAAA;AAAA,IAAA,gBAAAqB,EAAC6B,EAAK,SAAL,EAAc,GAAGZ,EAAA,CAAoB;AAAA,sBACrCY,EAAK,QAAL,EACC,UAAA,gBAAA7B,EAAC6B,EAAK,YAAL,EAAiB,GAAGR,GACnB,UAAA,gBAAArB,EAAC6B,EAAK,OAAL,EAAY,GAAGH,GAAmB,UAAA/B,EAAA,GAAkB,GACvD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui/react/menu\";\nimport { Combobox, type ComboboxTriggerState } from \"@base-ui/react/combobox\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useRef, useState, RefCallback } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n reactNodeToString,\n useCls,\n createRenderProp,\n} from \"../utils\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\n\n// Import component-specific styles\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport { DropdownMenuItemType } from \"./types\";\nimport { hasUnsupportedDropdownMenuSearchItems } from \"./search-mode\";\nimport { useDropdownMenu, UseDropdownMenuProps } from \"./useDropdownMenu\";\nimport { useControlledState } from \"../hooks\";\n\nimport { useTheme } from \"../theme-provider\";\nimport { BaseMenu } from \"../base-menu\";\n\nimport { Input } from \"../input\";\n\nexport interface DropdownMenuProps extends Omit<UseDropdownMenuProps, \"classNames\"> {\n /** Array of menu items to be displayed in the dropdown */\n items: DropdownMenuItemType[];\n /** Custom render function for the trigger element */\n children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n /**\n * Placement of the dropdown relative to the trigger element\n * @default \"bottomLeft\"\n */\n placement?: PopoverProps[\"placement\"];\n /**\n * Whether to open the dropdown on hover instead of click\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Controlled open state of the dropdown\n */\n open?: boolean;\n /**\n * Callback fired when the dropdown open state changes\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Default open state of the dropdown\n */\n defaultOpen?: boolean;\n /**\n * Additional CSS class for the dropdown component\n */\n className?: string;\n /**\n * Custom class names for different parts of the dropdown\n * @default {}\n */\n classNames?: {\n root?: string;\n trigger?: string;\n popup?: string;\n itemIcon?: string;\n itemText?: string;\n positioner?: string;\n } & UseDropdownMenuProps[\"classNames\"];\n\n /**\n * Whether to show search input\n * @default false\n */\n showSearch?: boolean;\n /**\n * Size of the dropdown menu\n * @default \"auto\"\n */\n size?: \"auto\" | keyof typeof PopupPanelSize;\n /**\n * Search placeholder\n */\n searchProps?: {\n placeholder?: string;\n className?: string;\n };\n /**\n * Whether to match the width of the popup with the trigger\n * @default false\n */\n popupMatchTriggerWidth?: boolean;\n /**\n * Content to display before the list\n */\n beforeList?: React.ReactNode;\n /**\n * Content to display after the list\n */\n afterList?: React.ReactNode;\n /**\n * Whether the trigger should act as a native button element.\n * Set to false when using non-button elements (like Typography.Link) as trigger\n * to suppress Base UI warnings and remove native button semantics.\n * @default true\n */\n nativeButton?: boolean;\n}\n\nexport const DropdownMenu = ({\n children,\n items,\n placement,\n openOnHover,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n defaultOpen = false,\n className,\n itemRender,\n classNames,\n size = \"auto\",\n showSearch,\n inCombobox: inComboboxProp,\n searchProps = {\n placeholder: \"Search...\",\n },\n popupMatchTriggerWidth,\n beforeList,\n afterList,\n keepOpenOnSelect,\n highlightedItemKey,\n selectedItemKeys,\n getItemKeywords,\n showCheckbox,\n itemLabelRender,\n nativeButton = true,\n}: DropdownMenuProps) => {\n const inCombobox = typeof inComboboxProp === \"boolean\" ? inComboboxProp : showSearch;\n const [open, onOpenChange] = useControlledState(outsideOpen, outsideOnOpenChange, defaultOpen);\n const cls = useCls();\n const { className: themeClassName } = useTheme();\n const baseUIPlacement = parseAntdPlacement(placement);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { itemGroups, renderGroup } = useDropdownMenu({\n items,\n keepOpenOnSelect,\n highlightedItemKey,\n selectedItemKeys,\n showCheckbox,\n getItemKeywords,\n itemLabelRender,\n itemRender,\n inCombobox,\n onOpenChange,\n classNames: {\n item: classNames?.item,\n itemIcon: classNames?.itemIcon,\n itemSuffix: classNames?.itemSuffix,\n group: classNames?.group,\n groupLabel: classNames?.groupLabel,\n divider: classNames?.divider,\n },\n });\n\n const [searchValue, setSearchValue] = useState(\"\");\n\n useEffect(() => {\n if (!inCombobox || process.env.NODE_ENV === \"production\") return;\n\n if (hasUnsupportedDropdownMenuSearchItems(items)) {\n console.warn(\n \"DropdownMenu search/combobox mode only supports flat `item`, `header`, and `divider` entries. Checkbox, radio-group, and submenu items are ignored.\",\n );\n }\n }, [inCombobox, items]);\n\n const renderMenuInner = useCallback(() => {\n if (!showSearch) {\n return (\n <div className={cls(\"dropdown-menu-container\")}>\n {beforeList}\n <ScrollArea fadeEdges>{itemGroups.map(renderGroup)}</ScrollArea>\n {afterList}\n </div>\n );\n }\n\n const searchInput = (\n <FormItemInputContext.Provider value={{}}>\n <Combobox.Input\n key=\"search\"\n placeholder={searchProps?.placeholder || \"Search\"}\n render={({ ref, ...props }) => (\n <Input\n {...props}\n ref={(antdInputRef) => {\n if (!antdInputRef || !antdInputRef.input) return;\n const comboboxRef = ref as RefCallback<HTMLInputElement>;\n comboboxRef(antdInputRef.input);\n }}\n allowClear\n placeholder={searchProps?.placeholder || \"Search\"}\n value={searchValue}\n onChange={(e) => setSearchValue(e.target.value)}\n className={clsx(cls(\"dropdown-menu-search\"), searchProps?.className)}\n />\n )}\n {...searchProps}\n />\n </FormItemInputContext.Provider>\n );\n\n const listContent = (\n <ScrollArea fadeEdges>\n <Combobox.Empty className={cls(\"dropdown-menu-empty\")}>No results found.</Combobox.Empty>\n <Combobox.List className={cls(\"dropdown-menu-list\")}>\n {(group, i) => renderGroup(group, i)}\n </Combobox.List>\n </ScrollArea>\n );\n\n return (\n <div className={cls(\"dropdown-menu-container\")}>\n <div className={cls(\"dropdown-menu-search-wrapper\")}>{searchInput}</div>\n {beforeList}\n {listContent}\n {afterList}\n </div>\n );\n }, [showSearch, cls, searchProps, searchValue, beforeList, afterList, itemGroups, renderGroup]);\n\n // Stable trigger render — useCallback since it's called during render phase\n const triggerRender = useCallback(\n (\n props: React.HTMLProps<HTMLElement> & { openOnHover?: boolean },\n state: ComboboxTriggerState,\n ) => {\n const { openOnHover: _openOnHover, ...rest } = props;\n return createRenderProp(children, rest, state);\n },\n [children],\n );\n\n const commonTriggerProps = useMemo(\n () => ({\n ref: buttonRef,\n openOnHover,\n nativeButton,\n className: clsx(cls(\"dropdown-menu-trigger\"), classNames?.trigger, themeClassName),\n render: triggerRender,\n }),\n [buttonRef, openOnHover, nativeButton, cls, classNames?.trigger, themeClassName, triggerRender],\n );\n\n // Stable positioner render — useCallback since it's called during render phase\n const positionerRender = useCallback(\n (props: React.ComponentPropsWithoutRef<\"div\">) => <BaseMenu.Root {...props} />,\n [],\n );\n\n const commonPositionerProps = useMemo(\n () => ({\n side: baseUIPlacement.side,\n align: baseUIPlacement.align,\n sideOffset: 4,\n className: clsx(cls(\"dropdown-menu-root\"), themeClassName, classNames?.root),\n collisionAvoidance: DROPDOWN_COLLISION_AVOIDANCE,\n render: positionerRender,\n }),\n [\n baseUIPlacement.side,\n baseUIPlacement.align,\n cls,\n themeClassName,\n classNames?.root,\n positionerRender,\n ],\n );\n\n // Stable popup render — useCallback since it's called during render phase\n const popupRender = useCallback(\n (props: React.ComponentPropsWithoutRef<\"div\">) => <BaseMenu.Popup {...props} />,\n [],\n );\n\n const popupStyle = useMemo(\n () =>\n ({\n \"--size-width\": size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n }) as React.CSSProperties,\n [size],\n );\n\n const commonPopupProps = useMemo(\n () => ({\n className: clsx(\n cls(\n \"dropdown-menu\",\n showCheckbox && \"dropdown-menu-show-checkbox\",\n popupMatchTriggerWidth && \"dropdown-menu-match-trigger-width\",\n ),\n className,\n classNames?.popup,\n ),\n style: popupStyle,\n render: popupRender,\n }),\n [\n cls,\n showCheckbox,\n popupMatchTriggerWidth,\n className,\n classNames?.popup,\n popupStyle,\n popupRender,\n ],\n );\n\n return showSearch ? (\n <Combobox.Root<DropdownMenuItemType>\n open={open}\n onOpenChange={onOpenChange}\n items={itemGroups}\n itemToStringLabel={(item) => (item.type == \"item\" ? reactNodeToString(item.label) : \"\")}\n itemToStringValue={(item) => (item.type == \"item\" ? String(item.key) : \"\")}\n inputValue={searchValue}\n >\n <Combobox.Trigger {...commonTriggerProps} />\n <Combobox.Portal>\n <Combobox.Positioner {...commonPositionerProps}>\n <Combobox.Popup {...commonPopupProps}>{renderMenuInner()}</Combobox.Popup>\n </Combobox.Positioner>\n </Combobox.Portal>\n </Combobox.Root>\n ) : (\n <Menu.Root open={open} onOpenChange={onOpenChange}>\n <Menu.Trigger {...commonTriggerProps} />\n <Menu.Portal>\n <Menu.Positioner {...commonPositionerProps}>\n <Menu.Popup {...commonPopupProps}>{renderMenuInner()}</Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n </Menu.Root>\n );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","defaultOpen","className","itemRender","classNames","size","showSearch","inComboboxProp","searchProps","popupMatchTriggerWidth","beforeList","afterList","keepOpenOnSelect","highlightedItemKey","selectedItemKeys","getItemKeywords","showCheckbox","itemLabelRender","nativeButton","inCombobox","open","onOpenChange","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","renderGroup","useDropdownMenu","searchValue","setSearchValue","useState","useEffect","hasUnsupportedDropdownMenuSearchItems","renderMenuInner","useCallback","jsxs","ScrollArea","searchInput","jsx","FormItemInputContext","Combobox","ref","props","Input","antdInputRef","e","clsx","listContent","group","i","triggerRender","state","_openOnHover","rest","createRenderProp","commonTriggerProps","useMemo","positionerRender","BaseMenu","commonPositionerProps","DROPDOWN_COLLISION_AVOIDANCE","popupRender","popupStyle","PopupPanelSize","commonPopupProps","item","reactNodeToString","Menu"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}
|
|
@@ -1,22 +1,18 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DropdownMenuInteractiveItem } from './types';
|
|
3
3
|
export interface DropdownMenuItemProps {
|
|
4
4
|
/**
|
|
5
5
|
* The menu item data
|
|
6
6
|
*/
|
|
7
|
-
item:
|
|
8
|
-
type: "item";
|
|
9
|
-
};
|
|
7
|
+
item: DropdownMenuInteractiveItem;
|
|
10
8
|
/**
|
|
11
9
|
* Custom render function for the item
|
|
12
10
|
*/
|
|
13
|
-
itemRender?: (item:
|
|
11
|
+
itemRender?: (item: DropdownMenuInteractiveItem, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
|
|
14
12
|
/**
|
|
15
13
|
* Custom render function for the item label
|
|
16
14
|
*/
|
|
17
|
-
itemLabelRender?: (item:
|
|
18
|
-
type: "item";
|
|
19
|
-
}, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
|
|
15
|
+
itemLabelRender?: (item: DropdownMenuInteractiveItem, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
|
|
20
16
|
/**
|
|
21
17
|
* Additional props to pass to the item
|
|
22
18
|
*/
|
|
@@ -33,9 +29,7 @@ export interface DropdownMenuItemProps {
|
|
|
33
29
|
/**
|
|
34
30
|
* Function to be called after the menu item is selected
|
|
35
31
|
*/
|
|
36
|
-
afterSelect?: (item:
|
|
37
|
-
type: "item";
|
|
38
|
-
}) => void;
|
|
32
|
+
afterSelect?: (item: DropdownMenuInteractiveItem) => void;
|
|
39
33
|
/**
|
|
40
34
|
* Whether the menu item is in a combobox
|
|
41
35
|
*/
|
|
@@ -58,9 +52,7 @@ export interface DropdownMenuItemProps {
|
|
|
58
52
|
* Function to extract keywords from the item for search filtering
|
|
59
53
|
* @default (item) => [String(item.key), reactNodeToString(item.label)]
|
|
60
54
|
*/
|
|
61
|
-
getItemKeywords?: (item:
|
|
62
|
-
type: "item";
|
|
63
|
-
}) => string[];
|
|
55
|
+
getItemKeywords?: (item: DropdownMenuInteractiveItem) => string[];
|
|
64
56
|
}
|
|
65
|
-
export declare const DropdownMenuItem: React.
|
|
57
|
+
export declare const DropdownMenuItem: React.NamedExoticComponent<DropdownMenuItemProps>;
|
|
66
58
|
//# sourceMappingURL=item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/item.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/item.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAA4B,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAOrF,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,EAAE,2BAA2B,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,2BAA2B,EACjC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KACrC,KAAK,CAAC,YAAY,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,2BAA2B,EACjC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KACrC,KAAK,CAAC,YAAY,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAC1D;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,MAAM,EAAE,CAAC;CACnE;AAsLD,eAAO,MAAM,gBAAgB,mDAAoC,CAAC"}
|