@bioturing/components 0.39.1 → 0.41.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/base.d.ts +35 -1
- package/dist/base.d.ts.map +1 -1
- package/dist/base.js +47 -1
- package/dist/base.js.map +1 -1
- package/dist/components/alert/component.d.ts +61 -0
- package/dist/components/alert/component.d.ts.map +1 -0
- package/dist/components/alert/component.js +76 -0
- package/dist/components/alert/component.js.map +1 -0
- package/dist/components/alert/index.d.ts +2 -0
- package/dist/components/alert/index.d.ts.map +1 -0
- package/dist/components/alert/style.css +1 -0
- package/dist/components/base-menu/component.d.ts +1 -1
- 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.d.ts +1 -1
- package/dist/components/base-menu/item.d.ts.map +1 -1
- package/dist/components/base-menu/item.js +1 -1
- package/dist/components/base-menu/item.js.map +1 -1
- package/dist/components/button/component.d.ts +1 -1
- package/dist/components/button/component.d.ts.map +1 -1
- package/dist/components/button/component.js +18 -17
- package/dist/components/button/component.js.map +1 -1
- package/dist/components/button/style.css +1 -1
- package/dist/components/checkbox/component.d.ts.map +1 -1
- package/dist/components/choice-list/component.d.ts +8 -4
- package/dist/components/choice-list/component.d.ts.map +1 -1
- package/dist/components/choice-list/component.js +89 -94
- package/dist/components/choice-list/component.js.map +1 -1
- package/dist/components/color-select/component.js +6 -6
- package/dist/components/combobox/component.js +1 -1
- package/dist/components/combobox/component.js.map +1 -1
- package/dist/components/command-palette/component.d.ts +6 -0
- package/dist/components/command-palette/component.d.ts.map +1 -1
- package/dist/components/command-palette/component.js +182 -63
- package/dist/components/command-palette/component.js.map +1 -1
- package/dist/components/command-palette/index.d.ts +3 -1
- package/dist/components/command-palette/index.d.ts.map +1 -1
- package/dist/components/command-palette/style.css +1 -1
- package/dist/components/drag-drop/draggable.js +1 -1
- package/dist/components/drag-drop/draggable.js.map +1 -1
- package/dist/components/drag-drop/droppable.js +1 -1
- package/dist/components/drag-drop/droppable.js.map +1 -1
- package/dist/components/drag-drop/types.d.ts +1 -1
- package/dist/components/drag-drop/types.d.ts.map +1 -1
- package/dist/components/drag-drop/value.js +13 -13
- package/dist/components/dropdown-menu/component.d.ts +1 -1
- package/dist/components/dropdown-menu/component.d.ts.map +1 -1
- package/dist/components/dropdown-menu/component.js +162 -135
- package/dist/components/dropdown-menu/component.js.map +1 -1
- package/dist/components/dropdown-menu/divider.js +2 -2
- package/dist/components/dropdown-menu/divider.js.map +1 -1
- package/dist/components/dropdown-menu/item.js +2 -2
- package/dist/components/dropdown-menu/item.js.map +1 -1
- package/dist/components/dropdown-menu/style.css +1 -1
- package/dist/components/dropdown-menu/useDropdownMenu.js +1 -1
- package/dist/components/dropdown-menu/useDropdownMenu.js.map +1 -1
- package/dist/components/hooks/antd.d.ts.map +1 -1
- package/dist/components/hooks/index.d.ts +1 -0
- package/dist/components/hooks/index.d.ts.map +1 -1
- package/dist/components/hooks/useBaseUIPlacement.d.ts +64 -0
- package/dist/components/hooks/useBaseUIPlacement.d.ts.map +1 -0
- package/dist/components/hooks/useBaseUIPlacement.js +61 -0
- package/dist/components/hooks/useBaseUIPlacement.js.map +1 -0
- package/dist/components/hooks/useControlledState.d.ts +1 -0
- package/dist/components/hooks/useControlledState.d.ts.map +1 -1
- package/dist/components/hooks/useControlledState.js +16 -16
- package/dist/components/hooks/useControlledState.js.map +1 -1
- package/dist/components/hooks/useTransitionStatus.js +2 -2
- package/dist/components/hooks/useTransitionStatus.js.map +1 -1
- package/dist/components/icon-button/style.css +1 -1
- package/dist/components/index.d.ts +3 -2
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/nav/index.d.ts.map +1 -1
- package/dist/components/nav/item.d.ts +1 -1
- package/dist/components/nav/item.d.ts.map +1 -1
- package/dist/components/nav/item.js +1 -1
- package/dist/components/nav/item.js.map +1 -1
- package/dist/components/popup-panel/component.d.ts +4 -4
- package/dist/components/popup-panel/component.d.ts.map +1 -1
- package/dist/components/popup-panel/component.js +142 -152
- package/dist/components/popup-panel/component.js.map +1 -1
- package/dist/components/resizable/component.js +1 -1
- package/dist/components/resizable/component.js.map +1 -1
- package/dist/components/scroll-area/component.d.ts +1 -1
- package/dist/components/scroll-area/component.d.ts.map +1 -1
- package/dist/components/scroll-area/component.js +1 -1
- package/dist/components/scroll-area/component.js.map +1 -1
- package/dist/components/select/component.d.ts.map +1 -1
- package/dist/components/select/component.js +153 -138
- package/dist/components/select/component.js.map +1 -1
- package/dist/components/select/item.js +13 -13
- package/dist/components/select-trigger/component.js +19 -19
- package/dist/components/splitter/splitter.d.ts.map +1 -1
- package/dist/components/splitter/splitter.js +53 -51
- package/dist/components/splitter/splitter.js.map +1 -1
- package/dist/components/stack/StackChild.js +2 -2
- package/dist/components/stack/StackChild.js.map +1 -1
- package/dist/components/toast/component.d.ts +1 -1
- package/dist/components/toast/component.d.ts.map +1 -1
- package/dist/components/toast/component.js +1 -1
- package/dist/components/toast/component.js.map +1 -1
- package/dist/components/toast/function.d.ts +2 -2
- package/dist/components/toast/function.d.ts.map +1 -1
- package/dist/components/toast/function.js +1 -1
- package/dist/components/toast/function.js.map +1 -1
- package/dist/components/transition/component.d.ts +1 -1
- package/dist/components/transition/component.d.ts.map +1 -1
- package/dist/components/transition/component.js +2 -2
- package/dist/components/transition/component.js.map +1 -1
- package/dist/components/tree/useTreeCommon.d.ts.map +1 -1
- package/dist/components/utils/WithRenderProp.d.ts +1 -1
- package/dist/components/utils/WithRenderProp.d.ts.map +1 -1
- package/dist/components/utils/WithRenderProp.js +1 -1
- package/dist/components/utils/WithRenderProp.js.map +1 -1
- package/dist/components/utils/index.d.ts +1 -0
- package/dist/components/utils/index.d.ts.map +1 -1
- package/dist/components/utils/renderProp.d.ts +24 -0
- package/dist/components/utils/renderProp.d.ts.map +1 -0
- package/dist/components/utils/renderProp.js +19 -0
- package/dist/components/utils/renderProp.js.map +1 -0
- package/dist/components/vertical-collapsible-panel/component.js +1 -1
- package/dist/components/vertical-collapsible-panel/component.js.map +1 -1
- package/dist/index.js +271 -266
- package/dist/index.js.map +1 -1
- package/dist/metadata.d.ts +9 -0
- package/dist/metadata.d.ts.map +1 -1
- package/dist/metadata.js +29 -14
- package/dist/metadata.js.map +1 -1
- package/dist/stats.html +1 -1
- package/dist/tailwind.css +125 -1
- package/package.json +4 -4
- package/dist/components/cmdk/command-score.d.ts +0 -2
- package/dist/components/cmdk/command-score.d.ts.map +0 -1
- package/dist/components/cmdk/command-score.js +0 -48
- package/dist/components/cmdk/command-score.js.map +0 -1
- package/dist/components/cmdk/index.d.ts +0 -440
- package/dist/components/cmdk/index.d.ts.map +0 -1
- package/dist/components/cmdk/index.js +0 -595
- package/dist/components/cmdk/index.js.map +0 -1
|
@@ -1,62 +1,64 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Menu as
|
|
4
|
-
import { Combobox as t } from "@base-ui
|
|
5
|
-
import { useRef as
|
|
6
|
-
import { FormItemInputContext as
|
|
7
|
-
import { PopupPanelSize as
|
|
8
|
-
import { useDropdownMenu as
|
|
9
|
-
import { BaseMenu as
|
|
10
|
-
import { parseAntdPlacement as
|
|
11
|
-
import {
|
|
12
|
-
import { ScrollArea as
|
|
13
|
-
import { DROPDOWN_COLLISION_AVOIDANCE as
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
2
|
+
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { Menu as u } from "@base-ui/react/menu";
|
|
4
|
+
import { Combobox as t } from "@base-ui/react/combobox";
|
|
5
|
+
import { useRef as O, useState as V, useEffect as te, useCallback as ie } from "react";
|
|
6
|
+
import { FormItemInputContext as le } from "antd/es/form/context";
|
|
7
|
+
import { PopupPanelSize as B } from "../popup-panel/constants.js";
|
|
8
|
+
import { useDropdownMenu as me } from "./useDropdownMenu.js";
|
|
9
|
+
import { BaseMenu as F } from "../base-menu/index.js";
|
|
10
|
+
import { parseAntdPlacement as ce } from "../utils/placement.js";
|
|
11
|
+
import { useBaseUIPlacement as ue } from "../hooks/useBaseUIPlacement.js";
|
|
12
|
+
import { ScrollArea as _ } from "../scroll-area/component.js";
|
|
13
|
+
import { DROPDOWN_COLLISION_AVOIDANCE as pe } from "../utils/constants.js";
|
|
14
|
+
import { Input as de } from "../input/component.js";
|
|
15
|
+
import { createRenderProp as se } from "../utils/renderProp.js";
|
|
16
|
+
import { useControlledState as ae } from "../hooks/useControlledState.js";
|
|
17
|
+
import { useCls as fe } from "../utils/antdUtils.js";
|
|
18
|
+
import { useTheme as ge } from "../theme-provider/context/themeStore.js";
|
|
19
|
+
import { clsx as f } from "../utils/cn.js";
|
|
20
|
+
import { reactNodeToString as he } from "../utils/reactToString.js";
|
|
21
|
+
const je = ({
|
|
22
|
+
children: j,
|
|
23
|
+
items: k,
|
|
24
|
+
placement: G,
|
|
25
|
+
openOnHover: H,
|
|
26
|
+
open: L,
|
|
27
|
+
onOpenChange: U,
|
|
28
|
+
defaultOpen: z = !1,
|
|
29
|
+
className: K,
|
|
30
|
+
itemRender: W,
|
|
29
31
|
classNames: r,
|
|
30
|
-
size:
|
|
32
|
+
size: R = "auto",
|
|
31
33
|
showSearch: p,
|
|
32
|
-
inCombobox:
|
|
33
|
-
searchProps:
|
|
34
|
+
inCombobox: N,
|
|
35
|
+
searchProps: l = {
|
|
34
36
|
placeholder: "Search..."
|
|
35
37
|
},
|
|
36
|
-
popupMatchTriggerWidth:
|
|
37
|
-
beforeList:
|
|
38
|
-
afterList:
|
|
39
|
-
keepOpenOnSelect:
|
|
40
|
-
highlightedItemKey:
|
|
41
|
-
selectedItemKeys:
|
|
42
|
-
getItemKeywords:
|
|
43
|
-
showCheckbox:
|
|
44
|
-
itemLabelRender:
|
|
38
|
+
popupMatchTriggerWidth: q,
|
|
39
|
+
beforeList: g,
|
|
40
|
+
afterList: h,
|
|
41
|
+
keepOpenOnSelect: J,
|
|
42
|
+
highlightedItemKey: Pe,
|
|
43
|
+
selectedItemKeys: Q,
|
|
44
|
+
getItemKeywords: X,
|
|
45
|
+
showCheckbox: y,
|
|
46
|
+
itemLabelRender: Y
|
|
45
47
|
}) => {
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
), n =
|
|
51
|
-
items:
|
|
52
|
-
keepOpenOnSelect:
|
|
53
|
-
selectedItemKeys:
|
|
54
|
-
showCheckbox:
|
|
55
|
-
getItemKeywords:
|
|
56
|
-
itemLabelRender:
|
|
57
|
-
itemRender:
|
|
58
|
-
inCombobox:
|
|
59
|
-
onOpenChange:
|
|
48
|
+
const Z = typeof N == "boolean" ? N : p, [P, b] = ae(
|
|
49
|
+
L,
|
|
50
|
+
U,
|
|
51
|
+
z
|
|
52
|
+
), n = fe(), { className: T } = ge(), d = ce(G), $ = O(null), { itemGroups: S, renderGroup: w } = me({
|
|
53
|
+
items: k,
|
|
54
|
+
keepOpenOnSelect: J,
|
|
55
|
+
selectedItemKeys: Q,
|
|
56
|
+
showCheckbox: y,
|
|
57
|
+
getItemKeywords: X,
|
|
58
|
+
itemLabelRender: Y,
|
|
59
|
+
itemRender: W,
|
|
60
|
+
inCombobox: Z,
|
|
61
|
+
onOpenChange: b,
|
|
60
62
|
classNames: {
|
|
61
63
|
item: r?.item,
|
|
62
64
|
itemIcon: r?.itemIcon,
|
|
@@ -65,111 +67,136 @@ const Ne = ({
|
|
|
65
67
|
groupLabel: r?.groupLabel,
|
|
66
68
|
divider: r?.divider
|
|
67
69
|
}
|
|
68
|
-
}), [
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
70
|
+
}), [C, ee] = V(""), [oe, re] = V(
|
|
71
|
+
null
|
|
72
|
+
), v = O(null), x = O(!1), { currentSide: ne } = ue({
|
|
73
|
+
positionerRef: oe,
|
|
74
|
+
open: P,
|
|
75
|
+
initialSide: d.side,
|
|
76
|
+
initialAlign: d.align
|
|
77
|
+
}), s = ne === "top";
|
|
78
|
+
te(() => {
|
|
79
|
+
x.current && v.current && v.current.focus();
|
|
80
|
+
}, [s]);
|
|
81
|
+
const A = ie(() => {
|
|
82
|
+
if (!p)
|
|
83
|
+
return /* @__PURE__ */ c("div", { className: n("dropdown-menu-container"), children: [
|
|
84
|
+
g,
|
|
85
|
+
/* @__PURE__ */ e(_, { fadeEdges: !0, children: S.map(w) }),
|
|
86
|
+
h
|
|
87
|
+
] });
|
|
88
|
+
const o = /* @__PURE__ */ e(le.Provider, { value: {}, children: /* @__PURE__ */ e(
|
|
89
|
+
t.Input,
|
|
90
|
+
{
|
|
91
|
+
placeholder: l?.placeholder || "Search",
|
|
92
|
+
render: ({ ref: a, ...m }) => /* @__PURE__ */ e(
|
|
93
|
+
de,
|
|
94
|
+
{
|
|
95
|
+
...m,
|
|
96
|
+
ref: (i) => {
|
|
97
|
+
if (!i || !i.input) return;
|
|
98
|
+
a(i.input), v.current = i.input;
|
|
99
|
+
},
|
|
100
|
+
allowClear: !0,
|
|
101
|
+
placeholder: l?.placeholder || "Search",
|
|
102
|
+
value: C,
|
|
103
|
+
onChange: (i) => ee(i.target.value),
|
|
104
|
+
onFocus: () => {
|
|
105
|
+
x.current = !0;
|
|
106
|
+
},
|
|
107
|
+
onBlur: () => {
|
|
108
|
+
x.current = !1;
|
|
109
|
+
},
|
|
110
|
+
className: f(
|
|
111
|
+
n("dropdown-menu-search"),
|
|
112
|
+
l?.className
|
|
113
|
+
)
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
...l
|
|
117
|
+
},
|
|
118
|
+
"search"
|
|
119
|
+
) }), I = /* @__PURE__ */ c(_, { fadeEdges: !0, children: [
|
|
120
|
+
/* @__PURE__ */ e(t.Empty, { className: n("dropdown-menu-empty"), children: "No results found." }),
|
|
121
|
+
/* @__PURE__ */ e(t.List, { className: n("dropdown-menu-list"), children: (a, m) => w(a, m) })
|
|
122
|
+
] });
|
|
123
|
+
return /* @__PURE__ */ c("div", { className: n("dropdown-menu-container"), children: [
|
|
124
|
+
!s && o,
|
|
125
|
+
g,
|
|
126
|
+
I,
|
|
111
127
|
h,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
128
|
+
s && o
|
|
129
|
+
] });
|
|
130
|
+
}, [
|
|
131
|
+
p,
|
|
132
|
+
n,
|
|
133
|
+
l,
|
|
134
|
+
C,
|
|
135
|
+
g,
|
|
136
|
+
h,
|
|
137
|
+
S,
|
|
138
|
+
w,
|
|
139
|
+
s
|
|
140
|
+
]), D = {
|
|
141
|
+
ref: $,
|
|
142
|
+
// nativeButton: false,
|
|
143
|
+
openOnHover: H,
|
|
144
|
+
className: f(
|
|
123
145
|
n("dropdown-menu-trigger"),
|
|
124
146
|
r?.trigger,
|
|
125
|
-
|
|
126
|
-
)
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
147
|
+
T
|
|
148
|
+
),
|
|
149
|
+
render: (o, I) => {
|
|
150
|
+
const { openOnHover: a, ...m } = o;
|
|
151
|
+
return se(j, m, I);
|
|
152
|
+
}
|
|
153
|
+
}, E = {
|
|
154
|
+
ref: re,
|
|
155
|
+
side: d.side,
|
|
156
|
+
align: d.align,
|
|
130
157
|
sideOffset: 4,
|
|
131
|
-
className:
|
|
158
|
+
className: f(
|
|
132
159
|
n("dropdown-menu-root"),
|
|
133
|
-
|
|
160
|
+
T,
|
|
134
161
|
r?.root
|
|
135
162
|
),
|
|
136
|
-
collisionAvoidance:
|
|
137
|
-
render: (o) => /* @__PURE__ */ e(
|
|
138
|
-
},
|
|
139
|
-
className:
|
|
163
|
+
collisionAvoidance: pe,
|
|
164
|
+
render: (o) => /* @__PURE__ */ e(F.Root, { ...o })
|
|
165
|
+
}, M = {
|
|
166
|
+
className: f(
|
|
140
167
|
n(
|
|
141
168
|
"dropdown-menu",
|
|
142
|
-
|
|
143
|
-
|
|
169
|
+
y && "dropdown-menu-show-checkbox",
|
|
170
|
+
q && "dropdown-menu-match-trigger-width"
|
|
144
171
|
),
|
|
145
|
-
|
|
172
|
+
K,
|
|
146
173
|
r?.popup
|
|
147
174
|
),
|
|
148
175
|
style: {
|
|
149
|
-
"--size-width":
|
|
176
|
+
"--size-width": R in B ? B[R] : void 0
|
|
150
177
|
},
|
|
151
|
-
render: (o) => /* @__PURE__ */ e(
|
|
178
|
+
render: (o) => /* @__PURE__ */ e(F.Popup, { ...o })
|
|
152
179
|
};
|
|
153
|
-
return p ? /* @__PURE__ */
|
|
180
|
+
return p ? /* @__PURE__ */ c(
|
|
154
181
|
t.Root,
|
|
155
182
|
{
|
|
156
|
-
open:
|
|
157
|
-
onOpenChange:
|
|
158
|
-
items:
|
|
159
|
-
itemToStringLabel: (o) => o.type == "item" ?
|
|
183
|
+
open: P,
|
|
184
|
+
onOpenChange: b,
|
|
185
|
+
items: S,
|
|
186
|
+
itemToStringLabel: (o) => o.type == "item" ? he(o.label) : "",
|
|
160
187
|
itemToStringValue: (o) => o.type == "item" ? String(o.key) : "",
|
|
161
|
-
inputValue:
|
|
188
|
+
inputValue: C,
|
|
162
189
|
children: [
|
|
163
|
-
/* @__PURE__ */ e(t.Trigger, { ...
|
|
164
|
-
/* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(t.Positioner, { ...
|
|
190
|
+
/* @__PURE__ */ e(t.Trigger, { ...D }),
|
|
191
|
+
/* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(t.Positioner, { ...E, children: /* @__PURE__ */ e(t.Popup, { ...M, children: A() }) }) })
|
|
165
192
|
]
|
|
166
193
|
}
|
|
167
|
-
) : /* @__PURE__ */
|
|
168
|
-
/* @__PURE__ */ e(
|
|
169
|
-
/* @__PURE__ */ e(
|
|
194
|
+
) : /* @__PURE__ */ c(u.Root, { open: P, onOpenChange: b, children: [
|
|
195
|
+
/* @__PURE__ */ e(u.Trigger, { ...D }),
|
|
196
|
+
/* @__PURE__ */ e(u.Portal, { children: /* @__PURE__ */ e(u.Positioner, { ...E, children: /* @__PURE__ */ e(u.Popup, { ...M, children: A() }) }) })
|
|
170
197
|
] });
|
|
171
198
|
};
|
|
172
199
|
export {
|
|
173
|
-
|
|
200
|
+
je as DropdownMenu
|
|
174
201
|
};
|
|
175
202
|
//# 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-components/react/menu\";\nimport { Combobox } from \"@base-ui-components/react/combobox\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef, useState, RefCallback } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n reactNodeToString,\n useCls,\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\n 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\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}: 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 () =>\n showSearch ? (\n <div className={cls(\"dropdown-menu-container\")}>\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 {beforeList}\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 {afterList}\n </div>\n ) : (\n <div className={cls(\"dropdown-menu-container\")}>\n {beforeList}\n <ScrollArea fadeEdges>{itemGroups.map(renderGroup)}</ScrollArea>\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\n const commonTriggerProps = {\n render: children,\n ref: buttonRef,\n nativeButton: false,\n openOnHover,\n className: clsx(\n cls(\"dropdown-menu-trigger\"),\n classNames?.trigger,\n themeClassName\n ),\n };\n\n const commonPositionerProps = {\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: (props: React.ComponentPropsWithoutRef<\"div\">) => (\n <BaseMenu.Root {...props} />\n ),\n };\n\n const commonPopupProps = {\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: {\n \"--size-width\": size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n } as React.CSSProperties,\n render: (props: React.ComponentPropsWithoutRef<\"div\">) => (\n <BaseMenu.Popup {...props} />\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","inCombobox","open","onOpenChange","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","renderGroup","useDropdownMenu","searchValue","setSearchValue","useState","renderMenuInner","useCallback","jsxs","jsx","FormItemInputContext","Combobox","ref","props","Input","antdInputRef","e","clsx","ScrollArea","group","i","commonTriggerProps","commonPositionerProps","DROPDOWN_COLLISION_AVOIDANCE","BaseMenu","commonPopupProps","PopupPanelSize","item","reactNodeToString","Menu"],"mappings":";;;;;;;;;;;;;;;;;;AAwGO,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;AACF,MAAyB;AACvB,QAAMC,IACJ,OAAOX,KAAmB,YAAYA,IAAiBD,GACnD,CAACa,GAAMC,CAAY,IAAIC;AAAA,IAC3BtB;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,GAEIqB,IAAMC,GAAA,GACN,EAAE,WAAWC,EAAA,IAAmBC,GAAA,GAChCC,IAAkBC,EAAmB9B,CAAS,GAC9C+B,IAAYC,EAA0B,IAAI,GAC1C,EAAE,YAAAC,GAAY,aAAAC,EAAA,IAAgBC,EAAgB;AAAA,IAClD,OAAApC;AAAA,IACA,kBAAAgB;AAAA,IAEA,kBAAAE;AAAA,IACA,cAAAE;AAAA,IACA,iBAAAD;AAAA,IACA,iBAAAE;AAAA,IACA,YAAAd;AAAA,IACA,YAAAe;AAAA,IACA,cAAAE;AAAA,IACA,YAAY;AAAA,MACV,MAAMhB,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,CAAC6B,GAAaC,CAAc,IAAIC,EAAS,EAAE,GAE3CC,IAAkBC;AAAA,IACtB,MACE/B,IACE,gBAAAgC,EAAC,SAAI,WAAWhB,EAAI,yBAAyB,GAC3C,UAAA;AAAA,MAAA,gBAAAiB,EAACC,EAAqB,UAArB,EAA8B,OAAO,CAAA,GACpC,UAAA,gBAAAD;AAAA,QAACE,EAAS;AAAA,QAAT;AAAA,UAEC,aAAajC,GAAa,eAAe;AAAA,UACzC,QAAQ,CAAC,EAAE,KAAAkC,GAAK,GAAGC,QACjB,gBAAAJ;AAAA,YAACK;AAAA,YAAA;AAAA,cACE,GAAGD;AAAA,cACJ,KAAK,CAACE,MAAiB;AACrB,oBAAI,CAACA,KAAgB,CAACA,EAAa,MAAO;AAE1C,gBADoBH,EACRG,EAAa,KAAK;AAAA,cAChC;AAAA,cACA,YAAU;AAAA,cACV,aAAarC,GAAa,eAAe;AAAA,cACzC,OAAOyB;AAAA,cACP,UAAU,CAACa,MAAMZ,EAAeY,EAAE,OAAO,KAAK;AAAA,cAC9C,WAAWC;AAAA,gBACTzB,EAAI,sBAAsB;AAAA,gBAC1Bd,GAAa;AAAA,cAAA;AAAA,YACf;AAAA,UAAA;AAAA,UAGH,GAAGA;AAAA,QAAA;AAAA,QApBA;AAAA,MAAA,GAsBR;AAAA,MACCE;AAAA,MACD,gBAAA4B,EAACU,GAAA,EAAW,WAAS,IACnB,UAAA;AAAA,QAAA,gBAAAT,EAACE,EAAS,OAAT,EAAe,WAAWnB,EAAI,qBAAqB,GAAG,UAAA,qBAEvD;AAAA,QACA,gBAAAiB,EAACE,EAAS,MAAT,EAAc,WAAWnB,EAAI,oBAAoB,GAC/C,UAAA,CAAC2B,GAAOC,MAAMnB,EAAYkB,GAAOC,CAAC,EAAA,CACrC;AAAA,MAAA,GACF;AAAA,MACCvC;AAAA,IAAA,GACH,IAEA,gBAAA2B,EAAC,OAAA,EAAI,WAAWhB,EAAI,yBAAyB,GAC1C,UAAA;AAAA,MAAAZ;AAAA,wBACAsC,GAAA,EAAW,WAAS,IAAE,UAAAlB,EAAW,IAAIC,CAAW,GAAE;AAAA,MAClDpB;AAAA,IAAA,GACH;AAAA,IAEJ;AAAA,MACEL;AAAA,MACAgB;AAAA,MACAd;AAAA,MACAyB;AAAA,MACAvB;AAAA,MACAC;AAAA,MACAmB;AAAA,MACAC;AAAA,IAAA;AAAA,EACF,GAGIoB,IAAqB;AAAA,IACzB,QAAQxD;AAAA,IACR,KAAKiC;AAAA,IACL,cAAc;AAAA,IACd,aAAA9B;AAAA,IACA,WAAWiD;AAAA,MACTzB,EAAI,uBAAuB;AAAA,MAC3BlB,GAAY;AAAA,MACZoB;AAAA,IAAA;AAAA,EACF,GAGI4B,IAAwB;AAAA,IAC5B,MAAM1B,EAAgB;AAAA,IACtB,OAAOA,EAAgB;AAAA,IACvB,YAAY;AAAA,IACZ,WAAWqB;AAAA,MACTzB,EAAI,oBAAoB;AAAA,MACxBE;AAAA,MACApB,GAAY;AAAA,IAAA;AAAA,IAEd,oBAAoBiD;AAAA,IACpB,QAAQ,CAACV,MACP,gBAAAJ,EAACe,EAAS,MAAT,EAAe,GAAGX,EAAA,CAAO;AAAA,EAAA,GAIxBY,IAAmB;AAAA,IACvB,WAAWR;AAAA,MACTzB;AAAA,QACE;AAAA,QACAN,KAAgB;AAAA,QAChBP,KAA0B;AAAA,MAAA;AAAA,MAE5BP;AAAA,MACAE,GAAY;AAAA,IAAA;AAAA,IAEd,OAAO;AAAA,MACL,gBAAgBC,KAAQmD,IAAiBA,EAAenD,CAAI,IAAI;AAAA,IAAA;AAAA,IAElE,QAAQ,CAACsC,MACP,gBAAAJ,EAACe,EAAS,OAAT,EAAgB,GAAGX,EAAA,CAAO;AAAA,EAAA;AAI/B,SAAOrC,IACL,gBAAAgC;AAAA,IAACG,EAAS;AAAA,IAAT;AAAA,MACC,MAAAtB;AAAA,MACA,cAAAC;AAAA,MACA,OAAOU;AAAA,MACP,mBAAmB,CAAC2B,MAClBA,EAAK,QAAQ,SAASC,GAAkBD,EAAK,KAAK,IAAI;AAAA,MAExD,mBAAmB,CAACA,MAClBA,EAAK,QAAQ,SAAS,OAAOA,EAAK,GAAG,IAAI;AAAA,MAE3C,YAAYxB;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAM,EAACE,EAAS,SAAT,EAAkB,GAAGU,EAAA,CAAoB;AAAA,0BACzCV,EAAS,QAAT,EACC,UAAA,gBAAAF,EAACE,EAAS,YAAT,EAAqB,GAAGW,GACvB,UAAA,gBAAAb,EAACE,EAAS,OAAT,EAAgB,GAAGc,GACjB,UAAAnB,EAAA,GACH,GACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE,EAACqB,EAAK,MAAL,EAAU,MAAAxC,GAAY,cAAAC,GACrB,UAAA;AAAA,IAAA,gBAAAmB,EAACoB,EAAK,SAAL,EAAc,GAAGR,EAAA,CAAoB;AAAA,sBACrCQ,EAAK,QAAL,EACC,UAAA,gBAAApB,EAACoB,EAAK,YAAL,EAAiB,GAAGP,GACnB,UAAA,gBAAAb,EAACoB,EAAK,OAAL,EAAY,GAAGJ,GAAmB,UAAAnB,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 } from \"@base-ui/react/combobox\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef, useState, RefCallback, useEffect } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n reactNodeToString,\n useCls,\n createRenderProp,\n} from \"../utils\";\nimport { useBaseUIPlacement } from \"../hooks\";\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\n 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\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}: 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 const [positionerRef, setPositionerRef] = useState<HTMLDivElement | null>(\n null\n );\n const inputRef = useRef<HTMLInputElement | null>(null);\n const wasFocusedRef = useRef(false);\n\n // Track placement changes to conditionally position search input\n const { currentSide } = useBaseUIPlacement({\n positionerRef,\n open,\n initialSide: baseUIPlacement.side,\n initialAlign: baseUIPlacement.align,\n });\n\n // When placement is on top, move search to bottom for better UX\n const isTopPlacement = currentSide === \"top\";\n\n // Restore focus after placement changes\n useEffect(() => {\n if (wasFocusedRef.current && inputRef.current) {\n inputRef.current.focus();\n // Don't reset wasFocusedRef - let onBlur handle it\n }\n }, [isTopPlacement]);\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 inputRef.current = antdInputRef.input;\n }}\n allowClear\n placeholder={searchProps?.placeholder || \"Search\"}\n value={searchValue}\n onChange={(e) => setSearchValue(e.target.value)}\n onFocus={() => {\n wasFocusedRef.current = true;\n }}\n onBlur={() => {\n wasFocusedRef.current = false;\n }}\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 {!isTopPlacement && searchInput}\n {beforeList}\n {listContent}\n {afterList}\n {isTopPlacement && searchInput}\n </div>\n );\n }, [\n showSearch,\n cls,\n searchProps,\n searchValue,\n beforeList,\n afterList,\n itemGroups,\n renderGroup,\n isTopPlacement,\n ]);\n\n const commonTriggerProps = {\n ref: buttonRef,\n // nativeButton: false,\n openOnHover,\n className: clsx(\n cls(\"dropdown-menu-trigger\"),\n classNames?.trigger,\n themeClassName\n ),\n render: (props, state) => {\n const { openOnHover: _openOnHover, ...rest } = props;\n return createRenderProp(children, rest, state);\n },\n };\n\n const commonPositionerProps = {\n ref: setPositionerRef,\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: (props: React.ComponentPropsWithoutRef<\"div\">) => (\n <BaseMenu.Root {...props} />\n ),\n };\n\n const commonPopupProps = {\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: {\n \"--size-width\": size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n } as React.CSSProperties,\n render: (props: React.ComponentPropsWithoutRef<\"div\">) => (\n <BaseMenu.Popup {...props} />\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","inCombobox","open","onOpenChange","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","renderGroup","useDropdownMenu","searchValue","setSearchValue","useState","positionerRef","setPositionerRef","inputRef","wasFocusedRef","currentSide","useBaseUIPlacement","isTopPlacement","useEffect","renderMenuInner","useCallback","jsxs","ScrollArea","searchInput","jsx","FormItemInputContext","Combobox","ref","props","Input","antdInputRef","e","clsx","listContent","group","i","commonTriggerProps","state","_openOnHover","rest","createRenderProp","commonPositionerProps","DROPDOWN_COLLISION_AVOIDANCE","BaseMenu","commonPopupProps","PopupPanelSize","item","reactNodeToString","Menu"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { Combobox as n } from "@base-ui
|
|
3
|
-
import { Menu as p } from "@base-ui
|
|
2
|
+
import { Combobox as n } from "@base-ui/react/combobox";
|
|
3
|
+
import { Menu as p } from "@base-ui/react/menu";
|
|
4
4
|
import { BaseMenu as s } from "../base-menu/index.js";
|
|
5
5
|
import { useCls as a } from "../utils/antdUtils.js";
|
|
6
6
|
import { clsx as d } from "../utils/cn.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.js","sources":["../../../src/components/dropdown-menu/divider.tsx"],"sourcesContent":["import { Combobox } from \"@base-ui
|
|
1
|
+
{"version":3,"file":"divider.js","sources":["../../../src/components/dropdown-menu/divider.tsx"],"sourcesContent":["import { Combobox } from \"@base-ui/react/combobox\";\nimport { Menu } from \"@base-ui/react/menu\";\nimport { clsx, useCls } from \"../utils\";\nimport { BaseMenu } from \"../base-menu\";\nimport { HTMLAttributes } from \"react\";\n\nexport interface DropdownMenuDividerProps {\n inCombobox?: boolean;\n className?: string;\n}\n\nexport const DropdownMenuDivider = ({\n inCombobox,\n className,\n}: DropdownMenuDividerProps) => {\n const cls = useCls();\n const MenuSeparator = inCombobox ? Combobox.Separator : Menu.Separator;\n\n return (\n <MenuSeparator\n className={clsx(cls(\"dropdown-menu-divider\"), className)}\n render={(props: HTMLAttributes<HTMLDivElement>) => (\n <BaseMenu.Divider {...props} />\n )}\n />\n );\n};\n"],"names":["DropdownMenuDivider","inCombobox","className","cls","useCls","MenuSeparator","Combobox","Menu","jsx","clsx","props","BaseMenu"],"mappings":";;;;;;AAWO,MAAMA,IAAsB,CAAC;AAAA,EAClC,YAAAC;AAAA,EACA,WAAAC;AACF,MAAgC;AAC9B,QAAMC,IAAMC,EAAA,GACNC,IAAgBJ,IAAaK,EAAS,YAAYC,EAAK;AAE7D,SACE,gBAAAC;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,WAAWI,EAAKN,EAAI,uBAAuB,GAAGD,CAAS;AAAA,MACvD,QAAQ,CAACQ,MACP,gBAAAF,EAACG,EAAS,SAAT,EAAkB,GAAGD,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAIrC;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as f } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback as g, useMemo as i } from "react";
|
|
4
|
-
import { Combobox as x } from "@base-ui
|
|
5
|
-
import { Menu as O } from "@base-ui
|
|
4
|
+
import { Combobox as x } from "@base-ui/react/combobox";
|
|
5
|
+
import { Menu as O } from "@base-ui/react/menu";
|
|
6
6
|
import { BaseMenuItem as S } from "../base-menu/item.js";
|
|
7
7
|
import y from "../utils/createSyntheticClickEvent.js";
|
|
8
8
|
import { reactNodeToString as C } from "../utils/reactToString.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useCallback, useMemo } from \"react\";\nimport {\n clsx,\n createSyntheticClickEvent,\n reactNodeToString,\n useCls,\n} from \"../utils\";\nimport type { DropdownMenuItemType } from \"./types\";\nimport { Combobox } from \"@base-ui
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useCallback, useMemo } from \"react\";\nimport {\n clsx,\n createSyntheticClickEvent,\n reactNodeToString,\n useCls,\n} from \"../utils\";\nimport type { DropdownMenuItemType } from \"./types\";\nimport { Combobox } from \"@base-ui/react/combobox\";\nimport { Menu } from \"@base-ui/react/menu\";\nimport { BaseMenuItem } from \"../base-menu\";\n\nexport interface DropdownMenuItemProps {\n /**\n * The menu item data\n */\n item: DropdownMenuItemType & { type: \"item\" };\n /**\n * Custom render function for the item\n */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Custom render function for the item label\n */\n itemLabelRender?: (\n item: DropdownMenuItemType & { type: \"item\" },\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Additional props to pass to the item\n */\n itemProps?: React.HTMLAttributes<HTMLElement>;\n /**\n * Class names from parent DropdownMenu\n */\n classNames?: {\n item?: string;\n itemIcon?: string;\n itemText?: string;\n itemSuffix?: string;\n };\n /**\n * Function to be called after the menu item is selected\n */\n afterSelect?: (item: DropdownMenuItemType & { type: \"item\" }) => void;\n /**\n * Whether the menu item is in a combobox\n */\n inCombobox?: boolean;\n /**\n * Whether the menu item is selected (for combobox)\n * @default false\n */\n selected?: boolean;\n /**\n * Whether to show checkbox (only for decoration purpose)\n */\n showCheckbox?: boolean;\n /**\n * Whether the menu item checkbox is indeterminate (for combobox)\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [String(item.key), reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({\n item,\n inCombobox = false,\n selected = false,\n itemRender,\n itemLabelRender,\n itemProps = {},\n classNames,\n afterSelect,\n showCheckbox,\n indeterminate,\n getItemKeywords,\n}) => {\n const cls = useCls();\n\n const handler = useCallback(\n (e?: React.MouseEvent<HTMLElement, MouseEvent> | string) => {\n // onSelect has priority over onClick\n if (item.onSelect) {\n item.onSelect(item);\n } else if (item.onClick) {\n if (typeof e === \"object\") {\n item.onClick(e);\n } else {\n const event = createSyntheticClickEvent(null);\n item.onClick(event);\n }\n }\n if (afterSelect) afterSelect(item);\n },\n [afterSelect, item]\n );\n\n const keywords = useMemo(\n () =>\n getItemKeywords\n ? getItemKeywords(item)\n : [String(item.key), reactNodeToString(item.label)],\n [getItemKeywords, item]\n );\n\n // If custom render function is provided, use it\n if (itemRender) {\n return itemRender(item, {\n className: clsx(\n cls(\"dropdown-menu-item\", inCombobox && \"dropdown-menu-item-combobox\"),\n classNames?.item,\n item.className\n ),\n \"data-danger\": item.danger,\n \"data-actual-selected\": selected,\n \"data-value\":\n typeof item.label === \"string\" ? item.label : String(item.key),\n ref: item.ref as Ref<HTMLDivElement>,\n onClick: handler,\n onMouseEnter: item.onMouseEnter,\n onMouseLeave: item.onMouseLeave,\n onMouseOver: item.onMouseOver,\n onMouseOut: item.onMouseOut,\n ...itemProps,\n } as React.HTMLAttributes<HTMLElement>);\n }\n\n return (\n <BaseMenuItem\n // BaseMenuItem props\n disabled={item.disabled}\n danger={item.danger}\n selected={selected}\n showCheckbox={showCheckbox}\n indeterminate={indeterminate}\n icon={item.icon}\n suffix={!inCombobox ? item.suffix : undefined}\n classNames={{\n root: clsx(\n cls(\n \"dropdown-menu-item\",\n inCombobox && \"dropdown-menu-item-combobox\"\n ),\n classNames?.item,\n item.className\n ),\n icon: classNames?.itemIcon,\n text: classNames?.itemText,\n suffix: classNames?.itemSuffix,\n }}\n labelRender={\n itemLabelRender\n ? (props: React.HTMLAttributes<HTMLElement>) =>\n itemLabelRender(item, props)\n : undefined\n }\n ref={item.ref as Ref<HTMLDivElement>}\n onMouseEnter={item.onMouseEnter}\n onMouseLeave={item.onMouseLeave}\n onMouseOver={item.onMouseOver}\n onMouseOut={item.onMouseOut}\n data-value={\n typeof item.label === \"string\" ? item.label : String(item.key)\n }\n data-actual-selected={selected}\n // Render prop to use Base UI components\n render={\n inCombobox ? (\n <Combobox.Item\n role=\"option\"\n key={String(item.key)}\n value={String(item.key)}\n onClick={handler}\n />\n ) : (\n <Menu.Item onClick={handler} />\n )\n }\n >\n {item.label}\n </BaseMenuItem>\n );\n};\n"],"names":["DropdownMenuItem","item","inCombobox","selected","itemRender","itemLabelRender","itemProps","classNames","afterSelect","showCheckbox","indeterminate","getItemKeywords","cls","useCls","handler","useCallback","e","event","createSyntheticClickEvent","useMemo","reactNodeToString","clsx","jsx","BaseMenuItem","props","Combobox","Menu"],"mappings":";;;;;;;;;;AA0EO,MAAMA,IAAoD,CAAC;AAAA,EAChE,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC,IAAY,CAAA;AAAA,EACZ,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAA,GAENC,IAAUC;AAAA,IACd,CAACC,MAA2D;AAE1D,UAAIf,EAAK;AACP,QAAAA,EAAK,SAASA,CAAI;AAAA,eACTA,EAAK;AACd,YAAI,OAAOe,KAAM;AACf,UAAAf,EAAK,QAAQe,CAAC;AAAA,aACT;AACL,gBAAMC,IAAQC,EAA0B,IAAI;AAC5C,UAAAjB,EAAK,QAAQgB,CAAK;AAAA,QACpB;AAEF,MAAIT,OAAyBP,CAAI;AAAA,IACnC;AAAA,IACA,CAACO,GAAaP,CAAI;AAAA,EAAA;AAYpB,SATiBkB;AAAA,IACf,MACER,IACIA,EAAgBV,CAAI,IACpB,CAAC,OAAOA,EAAK,GAAG,GAAGmB,EAAkBnB,EAAK,KAAK,CAAC;AAAA,IACtD,CAACU,GAAiBV,CAAI;AAAA,EAAA,GAIpBG,IACKA,EAAWH,GAAM;AAAA,IACtB,WAAWoB;AAAA,MACTT,EAAI,sBAAsBV,KAAc,6BAA6B;AAAA,MACrEK,GAAY;AAAA,MACZN,EAAK;AAAA,IAAA;AAAA,IAEP,eAAeA,EAAK;AAAA,IACpB,wBAAwBE;AAAA,IACxB,cACE,OAAOF,EAAK,SAAU,WAAWA,EAAK,QAAQ,OAAOA,EAAK,GAAG;AAAA,IAC/D,KAAKA,EAAK;AAAA,IACV,SAASa;AAAA,IACT,cAAcb,EAAK;AAAA,IACnB,cAAcA,EAAK;AAAA,IACnB,aAAaA,EAAK;AAAA,IAClB,YAAYA,EAAK;AAAA,IACjB,GAAGK;AAAA,EAAA,CACiC,IAItC,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,UAAUtB,EAAK;AAAA,MACf,QAAQA,EAAK;AAAA,MACb,UAAAE;AAAA,MACA,cAAAM;AAAA,MACA,eAAAC;AAAA,MACA,MAAMT,EAAK;AAAA,MACX,QAASC,IAA2B,SAAdD,EAAK;AAAA,MAC3B,YAAY;AAAA,QACV,MAAMoB;AAAA,UACJT;AAAA,YACE;AAAA,YACAV,KAAc;AAAA,UAAA;AAAA,UAEhBK,GAAY;AAAA,UACZN,EAAK;AAAA,QAAA;AAAA,QAEP,MAAMM,GAAY;AAAA,QAClB,MAAMA,GAAY;AAAA,QAClB,QAAQA,GAAY;AAAA,MAAA;AAAA,MAEtB,aACEF,IACI,CAACmB,MACCnB,EAAgBJ,GAAMuB,CAAK,IAC7B;AAAA,MAEN,KAAKvB,EAAK;AAAA,MACV,cAAcA,EAAK;AAAA,MACnB,cAAcA,EAAK;AAAA,MACnB,aAAaA,EAAK;AAAA,MAClB,YAAYA,EAAK;AAAA,MACjB,cACE,OAAOA,EAAK,SAAU,WAAWA,EAAK,QAAQ,OAAOA,EAAK,GAAG;AAAA,MAE/D,wBAAsBE;AAAA,MAEtB,QACED,IACE,gBAAAoB;AAAA,QAACG,EAAS;AAAA,QAAT;AAAA,UACC,MAAK;AAAA,UAEL,OAAO,OAAOxB,EAAK,GAAG;AAAA,UACtB,SAASa;AAAA,QAAA;AAAA,QAFJ,OAAOb,EAAK,GAAG;AAAA,MAAA,IAKtB,gBAAAqB,EAACI,EAAK,MAAL,EAAU,SAASZ,EAAA,CAAS;AAAA,MAIhC,UAAAb,EAAK;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-dropdown-menu-
|
|
1
|
+
@layer components{.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}.ds-dropdown-menu-empty:empty{display:none}.ds-dropdown-menu-match-trigger-width{width:min(var(--anchor-width),var(--available-width))}.ds-dropdown-menu-container{display:flex;flex-direction:column;flex-shrink:1;min-height:0;gap:.25rem}}
|
|
@@ -2,7 +2,7 @@ import { jsx as i, jsxs as w } from "react/jsx-runtime";
|
|
|
2
2
|
import { useCallback as m, useMemo as L } from "react";
|
|
3
3
|
import { DropdownMenuItem as I } from "./item.js";
|
|
4
4
|
import { DropdownMenuDivider as j } from "./divider.js";
|
|
5
|
-
import { Menu as v, Combobox as f } from "@base-ui
|
|
5
|
+
import { Menu as v, Combobox as f } from "@base-ui/react";
|
|
6
6
|
import './style.css';/* empty css */
|
|
7
7
|
import { useCls as k } from "../utils/antdUtils.js";
|
|
8
8
|
import { reactNodeToString as x } from "../utils/reactToString.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDropdownMenu.js","sources":["../../../src/components/dropdown-menu/useDropdownMenu.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\nimport { DropdownMenuItemType, DropdownMenuGroup } from \"./types\";\nimport { DropdownMenuItem } from \"./item\";\nimport { DropdownMenuDivider } from \"./divider\";\nimport { reactNodeToString, clsx, useCls } from \"../utils\";\nimport { Combobox, Menu } from \"@base-ui
|
|
1
|
+
{"version":3,"file":"useDropdownMenu.js","sources":["../../../src/components/dropdown-menu/useDropdownMenu.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\nimport { DropdownMenuItemType, DropdownMenuGroup } from \"./types\";\nimport { DropdownMenuItem } from \"./item\";\nimport { DropdownMenuDivider } from \"./divider\";\nimport { reactNodeToString, clsx, useCls } from \"../utils\";\nimport { Combobox, Menu } from \"@base-ui/react\";\n\nimport \"./style.css\";\n\nexport interface UseDropdownMenuProps {\n /**\n * Callback function to handle the open state change of the dropdown menu.\n */\n onOpenChange?: (open: boolean) => void;\n items: DropdownMenuItemType[];\n inCombobox?: boolean;\n classNames?: {\n item?: string;\n itemIcon?: string;\n itemSuffix?: string;\n group?: string;\n groupLabel?: string;\n divider?: string;\n };\n /**\n * Custom render function for menu items\n */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Custom render function for menu item labels\n */\n itemLabelRender?: (\n item: DropdownMenuItemType & { type: \"item\" },\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Whether to keep the dropdown open when an item is selected\n * @default false\n */\n keepOpenOnSelect?: boolean;\n /**\n * Control the highlighted state of the menu item\n */\n highlightedItemKey?: React.Key;\n /**\n * Control the selected state of the menu item\n */\n selectedItemKeys?: React.Key[];\n /**\n * Whether to show checkbox\n * @default false\n */\n showCheckbox?: boolean;\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [String(item.key), reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const useDropdownMenu = ({\n items,\n inCombobox = false,\n classNames = {},\n selectedItemKeys,\n keepOpenOnSelect,\n showCheckbox = false,\n getItemKeywords = (item) => [String(item.key), reactNodeToString(item.label)],\n onOpenChange,\n itemRender,\n itemLabelRender,\n}: UseDropdownMenuProps) => {\n const cls = useCls();\n const renderMenuItem = useCallback(\n (item: DropdownMenuItemType, i: number, j: number) => {\n if (item.type === \"item\") {\n return (\n <DropdownMenuItem\n key={i + \"-\" + j}\n item={item}\n inCombobox={inCombobox}\n selected={selectedItemKeys?.includes(item.key)}\n afterSelect={() => {\n if (!keepOpenOnSelect) onOpenChange?.(false);\n }}\n itemRender={itemRender}\n showCheckbox={showCheckbox}\n getItemKeywords={getItemKeywords}\n itemLabelRender={itemLabelRender}\n classNames={{\n item: classNames.item,\n itemIcon: classNames.itemIcon,\n itemSuffix: classNames.itemSuffix,\n }}\n />\n );\n } else if (item.type === \"divider\") {\n return (\n <DropdownMenuDivider\n key={i + \"-\" + j}\n inCombobox={inCombobox}\n className={classNames?.divider}\n />\n );\n }\n return null;\n },\n [\n classNames,\n itemRender,\n onOpenChange,\n inCombobox,\n keepOpenOnSelect,\n selectedItemKeys,\n showCheckbox,\n getItemKeywords,\n itemLabelRender,\n ]\n );\n\n const renderGroup = useCallback(\n (group: DropdownMenuGroup, index: number) => (\n <Menu.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n >\n {group.label && (\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n )}\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Menu.Group>\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderGroupCombobox = useCallback(\n (group: DropdownMenuGroup, index: number) =>\n group.label ? (\n <Combobox.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n items={group.items}\n >\n <Combobox.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Combobox.GroupLabel>\n <Combobox.Collection>\n {(item, i) => renderMenuItem(item, index, i)}\n </Combobox.Collection>\n </Combobox.Group>\n ) : (\n group.items.map((item, j) => renderMenuItem(item, index, j))\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const itemGroups = useMemo(\n () =>\n items.reduce<DropdownMenuGroup[]>((acc, current) => {\n // If no groups exist yet and current item is not a header, create default group\n if (acc.length === 0 && current.type !== \"header\") {\n acc.push({\n label: null,\n items: [],\n });\n }\n\n // If it's a header, create a new group\n if (current.type === \"header\") {\n acc.push({\n label: current.title,\n items: [],\n });\n }\n // If it's an item and we have at least one group, add it to the last group's items\n else if (\n (current.type === \"item\" || current.type === \"divider\") &&\n acc.length > 0\n ) {\n acc[acc.length - 1].items.push({\n ...current,\n });\n }\n // Skip dividers\n return acc;\n }, []),\n [items]\n );\n return {\n itemGroups,\n renderMenuItem,\n renderGroup: inCombobox ? renderGroupCombobox : renderGroup,\n };\n};\n"],"names":["useDropdownMenu","items","inCombobox","classNames","selectedItemKeys","keepOpenOnSelect","showCheckbox","getItemKeywords","item","reactNodeToString","onOpenChange","itemRender","itemLabelRender","cls","useCls","renderMenuItem","useCallback","i","j","jsx","DropdownMenuItem","DropdownMenuDivider","renderGroup","group","index","jsxs","Menu","clsx","renderGroupCombobox","Combobox","useMemo","acc","current"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"antd.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/antd.ts"],"names":[],"mappings":"AAGA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,eAAO,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"antd.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/antd.ts"],"names":[],"mappings":"AAGA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,eAAO,MAAM,QAAQ;;;;CAAiB,CAAC;AAGvC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,UAAU,2DAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAGpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
|