@lobehub/ui 5.24.0 → 5.26.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/es/A/index.mjs +2 -1
- package/es/A/index.mjs.map +1 -1
- package/es/Accordion/AccordionItem.mjs +0 -1
- package/es/Accordion/AccordionItem.mjs.map +1 -1
- package/es/ActionIcon/components/utils.mjs +7 -9
- package/es/ActionIcon/components/utils.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs +4 -2
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/CodeDiff/CodeDiff.mjs +20 -18
- package/es/CodeDiff/CodeDiff.mjs.map +1 -1
- package/es/CodeDiff/PatchDiff.mjs +18 -16
- package/es/CodeDiff/PatchDiff.mjs.map +1 -1
- package/es/CopyButton/CopyButton.mjs +2 -1
- package/es/CopyButton/CopyButton.mjs.map +1 -1
- package/es/Highlighter/LangSelect.mjs +41 -40
- package/es/Highlighter/LangSelect.mjs.map +1 -1
- package/es/Highlighter/SyntaxHighlighter/StaticRenderer.mjs +2 -1
- package/es/Highlighter/SyntaxHighlighter/StaticRenderer.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs +3 -1
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/HtmlPreview/const.mjs +1 -1
- package/es/HtmlPreview/const.mjs.map +1 -1
- package/es/Icon/components/utils.mjs +7 -9
- package/es/Icon/components/utils.mjs.map +1 -1
- package/es/Image/Image.mjs +138 -37
- package/es/Image/Image.mjs.map +1 -1
- package/es/Image/PreviewGroup.d.mts +1 -0
- package/es/Image/PreviewGroup.mjs +33 -10
- package/es/Image/PreviewGroup.mjs.map +1 -1
- package/es/Image/index.d.mts +2 -2
- package/es/Image/index.mjs +1 -1
- package/es/Image/style.mjs +126 -71
- package/es/Image/style.mjs.map +1 -1
- package/es/Image/type.d.mts +14 -17
- package/es/Image/viewer/GalleryNav.mjs +44 -0
- package/es/Image/viewer/GalleryNav.mjs.map +1 -0
- package/es/Image/viewer/ImageViewer.mjs +275 -0
- package/es/Image/viewer/ImageViewer.mjs.map +1 -0
- package/es/Image/viewer/PreviewOutlet.mjs +19 -0
- package/es/Image/viewer/PreviewOutlet.mjs.map +1 -0
- package/es/Image/viewer/Toolbar.mjs +184 -0
- package/es/Image/viewer/Toolbar.mjs.map +1 -0
- package/es/Image/viewer/ViewerChrome.mjs +54 -0
- package/es/Image/viewer/ViewerChrome.mjs.map +1 -0
- package/es/Image/viewer/geometry.mjs +85 -0
- package/es/Image/viewer/geometry.mjs.map +1 -0
- package/es/Image/viewer/registry.d.mts +2 -0
- package/es/Image/viewer/registry.mjs +52 -0
- package/es/Image/viewer/registry.mjs.map +1 -0
- package/es/Image/viewer/useChromeIdle.mjs +72 -0
- package/es/Image/viewer/useChromeIdle.mjs.map +1 -0
- package/es/Image/viewer/useFinalFocus.mjs +10 -0
- package/es/Image/viewer/useFinalFocus.mjs.map +1 -0
- package/es/Image/viewer/useFlipTransition.mjs +321 -0
- package/es/Image/viewer/useFlipTransition.mjs.map +1 -0
- package/es/Image/viewer/useGalleryNav.mjs +89 -0
- package/es/Image/viewer/useGalleryNav.mjs.map +1 -0
- package/es/Image/viewer/useRefitTransition.mjs +47 -0
- package/es/Image/viewer/useRefitTransition.mjs.map +1 -0
- package/es/Image/viewer/useViewerGestures.mjs +148 -0
- package/es/Image/viewer/useViewerGestures.mjs.map +1 -0
- package/es/Image/viewer/useZoomPan.mjs +346 -0
- package/es/Image/viewer/useZoomPan.mjs.map +1 -0
- package/es/Img/index.mjs +2 -1
- package/es/Img/index.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs +2 -1
- package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/useSmoothStreamContent.mjs +2 -2
- package/es/Markdown/SyntaxMarkdown/useSmoothStreamContent.mjs.map +1 -1
- package/es/Modal/RawModalStackItem.mjs +6 -5
- package/es/Modal/RawModalStackItem.mjs.map +1 -1
- package/es/Modal/imperative.mjs +4 -2
- package/es/Modal/imperative.mjs.map +1 -1
- package/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs +1 -1
- package/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs.map +1 -1
- package/es/ScrollShadow/ScrollShadow.mjs +13 -12
- package/es/ScrollShadow/ScrollShadow.mjs.map +1 -1
- package/es/Skeleton/SkeletonButton.mjs +2 -1
- package/es/Skeleton/SkeletonButton.mjs.map +1 -1
- package/es/SortableList/SortableList.mjs +5 -1
- package/es/SortableList/SortableList.mjs.map +1 -1
- package/es/Text/Text.mjs +22 -21
- package/es/Text/Text.mjs.map +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs +3 -2
- package/es/ThemeProvider/ThemeProvider.mjs.map +1 -1
- package/es/awesome/GradientButton/GradientButton.mjs +1 -3
- package/es/awesome/GradientButton/GradientButton.mjs.map +1 -1
- package/es/awesome/Spotlight/Spotlight.mjs +2 -1
- package/es/awesome/Spotlight/Spotlight.mjs.map +1 -1
- package/es/base-ui/Button/Button.mjs +13 -11
- package/es/base-ui/Button/Button.mjs.map +1 -1
- package/es/base-ui/Button/SplitButton.mjs +2 -1
- package/es/base-ui/Button/SplitButton.mjs.map +1 -1
- package/es/base-ui/ContextMenu/ContextMenuTrigger.mjs +2 -1
- package/es/base-ui/ContextMenu/ContextMenuTrigger.mjs.map +1 -1
- package/es/base-ui/ContextMenu/renderItems.mjs +2 -1
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/Drawer/Drawer.d.mts +6 -0
- package/es/base-ui/Drawer/Drawer.mjs +152 -0
- package/es/base-ui/Drawer/Drawer.mjs.map +1 -0
- package/es/base-ui/Drawer/DrawerLayerContext.mjs +10 -0
- package/es/base-ui/Drawer/DrawerLayerContext.mjs.map +1 -0
- package/es/base-ui/Drawer/DrawerPushContext.mjs +27 -0
- package/es/base-ui/Drawer/DrawerPushContext.mjs.map +1 -0
- package/es/base-ui/Drawer/atoms.d.mts +58 -0
- package/es/base-ui/Drawer/atoms.mjs +262 -0
- package/es/base-ui/Drawer/atoms.mjs.map +1 -0
- package/es/base-ui/Drawer/constants.d.mts +17 -0
- package/es/base-ui/Drawer/constants.mjs +72 -0
- package/es/base-ui/Drawer/constants.mjs.map +1 -0
- package/es/base-ui/Drawer/index.d.mts +5 -0
- package/es/base-ui/Drawer/style.mjs +295 -0
- package/es/base-ui/Drawer/style.mjs.map +1 -0
- package/es/base-ui/Drawer/type.d.mts +65 -0
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs +2 -1
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/atoms.mjs +2 -1
- package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs +2 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/FloatingSheet.mjs +4 -1
- package/es/base-ui/FloatingSheet/FloatingSheet.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Modal/atoms.mjs +7 -5
- package/es/base-ui/Modal/atoms.mjs.map +1 -1
- package/es/base-ui/Modal/imperative.mjs +2 -1
- package/es/base-ui/Modal/imperative.mjs.map +1 -1
- package/es/base-ui/Popover/atoms.mjs +2 -1
- package/es/base-ui/Popover/atoms.mjs.map +1 -1
- package/es/base-ui/Popover/context.mjs +4 -2
- package/es/base-ui/Popover/context.mjs.map +1 -1
- package/es/base-ui/Select/atoms.mjs +2 -1
- package/es/base-ui/Select/atoms.mjs.map +1 -1
- package/es/base-ui/Toast/hostGuard.mjs +26 -0
- package/es/base-ui/Toast/hostGuard.mjs.map +1 -0
- package/es/base-ui/Toast/imperative.mjs +43 -20
- package/es/base-ui/Toast/imperative.mjs.map +1 -1
- package/es/base-ui/Toast/pendingQueue.mjs +30 -0
- package/es/base-ui/Toast/pendingQueue.mjs.map +1 -0
- package/es/base-ui/index.d.mts +6 -1
- package/es/base-ui/index.mjs +5 -2
- package/es/brand/LobeChat/index.mjs +0 -1
- package/es/brand/LobeChat/index.mjs.map +1 -1
- package/es/brand/LobeHub/index.mjs +0 -1
- package/es/brand/LobeHub/index.mjs.map +1 -1
- package/es/brand/Logo3d/index.mjs +2 -1
- package/es/brand/Logo3d/index.mjs.map +1 -1
- package/es/chat/ChatItem/components/Actions.mjs +5 -4
- package/es/chat/ChatItem/components/Actions.mjs.map +1 -1
- package/es/chat/ChatList/ChatList.mjs +2 -1
- package/es/chat/ChatList/ChatList.mjs.map +1 -1
- package/es/color/ColorScales/ScaleRow.mjs +0 -2
- package/es/color/ColorScales/ScaleRow.mjs.map +1 -1
- package/es/hooks/useMermaid.mjs +2 -1
- package/es/hooks/useMermaid.mjs.map +1 -1
- package/es/i18n/resources/en/image.d.mts +5 -0
- package/es/i18n/resources/en/image.mjs +6 -1
- package/es/i18n/resources/en/image.mjs.map +1 -1
- package/es/i18n/resources/zhCn/image.d.mts +5 -0
- package/es/i18n/resources/zhCn/image.mjs +6 -1
- package/es/i18n/resources/zhCn/image.mjs.map +1 -1
- package/es/index.mjs +8 -8
- package/package.json +1 -1
- package/es/Image/components/Preview.mjs +0 -23
- package/es/Image/components/Preview.mjs.map +0 -1
- package/es/Image/components/Toolbar.mjs +0 -128
- package/es/Image/components/Toolbar.mjs.map +0 -1
- package/es/Image/components/usePreview.mjs +0 -58
- package/es/Image/components/usePreview.mjs.map +0 -1
- package/es/Image/components/usePreviewGroup.mjs +0 -57
- package/es/Image/components/usePreviewGroup.mjs.map +0 -1
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
import { createStaticStyles } from "antd-style";
|
|
2
|
+
//#region src/base-ui/Drawer/style.ts
|
|
3
|
+
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
4
|
+
backdrop: css`
|
|
5
|
+
position: fixed;
|
|
6
|
+
z-index: 1200;
|
|
7
|
+
inset: 0;
|
|
8
|
+
|
|
9
|
+
background: ${cssVar.colorBgMask};
|
|
10
|
+
|
|
11
|
+
transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
12
|
+
|
|
13
|
+
&[data-starting-style],
|
|
14
|
+
&[data-ending-style] {
|
|
15
|
+
opacity: 0;
|
|
16
|
+
}
|
|
17
|
+
`,
|
|
18
|
+
popup: css`
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
|
|
21
|
+
position: fixed;
|
|
22
|
+
z-index: 1201;
|
|
23
|
+
|
|
24
|
+
display: flex;
|
|
25
|
+
|
|
26
|
+
/* clamp here rather than on the panel, so an oversized size prop shrinks the
|
|
27
|
+
box instead of detaching the panel from its anchored edge */
|
|
28
|
+
max-width: 100dvw;
|
|
29
|
+
max-height: 100dvh;
|
|
30
|
+
`,
|
|
31
|
+
popupLeft: css`
|
|
32
|
+
inset-block: 0;
|
|
33
|
+
inset-inline-start: 0;
|
|
34
|
+
`,
|
|
35
|
+
popupRight: css`
|
|
36
|
+
inset-block: 0;
|
|
37
|
+
inset-inline-end: 0;
|
|
38
|
+
`,
|
|
39
|
+
popupTop: css`
|
|
40
|
+
inset-block-start: 0;
|
|
41
|
+
inset-inline: 0;
|
|
42
|
+
`,
|
|
43
|
+
popupBottom: css`
|
|
44
|
+
inset-block-end: 0;
|
|
45
|
+
inset-inline: 0;
|
|
46
|
+
`,
|
|
47
|
+
panel: css`
|
|
48
|
+
pointer-events: auto;
|
|
49
|
+
|
|
50
|
+
position: relative;
|
|
51
|
+
|
|
52
|
+
/* push offset rides on CSS vars so [data-starting-style] can override the whole transform */
|
|
53
|
+
transform: translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0));
|
|
54
|
+
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex: 1;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
min-width: 0;
|
|
62
|
+
min-height: 0;
|
|
63
|
+
|
|
64
|
+
/* Elevated, not container: in dark themes container sits within 2 points of the page
|
|
65
|
+
background, so a panel with no border and a black-on-black cast loses its edge entirely. */
|
|
66
|
+
background: ${cssVar.colorBgElevated};
|
|
67
|
+
|
|
68
|
+
/* An edge-anchored panel casts along its placement axis, not downward like a centred
|
|
69
|
+
dialog would. Direction classes set the sign, weight classes set the opacity, so the
|
|
70
|
+
two compose without a class per combination. */
|
|
71
|
+
box-shadow:
|
|
72
|
+
calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px) 24px 0
|
|
73
|
+
rgb(0 0 0 / var(--drawer-cast-far, 8%)),
|
|
74
|
+
calc(var(--drawer-cast-x, 0) * 2px) calc(var(--drawer-cast-y, 0) * 2px) 6px 0
|
|
75
|
+
rgb(0 0 0 / var(--drawer-cast-near, 4%));
|
|
76
|
+
|
|
77
|
+
transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
78
|
+
`,
|
|
79
|
+
panelLeft: css`
|
|
80
|
+
--drawer-cast-x: 1;
|
|
81
|
+
|
|
82
|
+
&[data-starting-style],
|
|
83
|
+
&[data-ending-style] {
|
|
84
|
+
transform: translateX(-100%);
|
|
85
|
+
}
|
|
86
|
+
`,
|
|
87
|
+
panelRight: css`
|
|
88
|
+
--drawer-cast-x: -1;
|
|
89
|
+
|
|
90
|
+
&[data-starting-style],
|
|
91
|
+
&[data-ending-style] {
|
|
92
|
+
transform: translateX(100%);
|
|
93
|
+
}
|
|
94
|
+
`,
|
|
95
|
+
panelTop: css`
|
|
96
|
+
--drawer-cast-y: 1;
|
|
97
|
+
|
|
98
|
+
&[data-starting-style],
|
|
99
|
+
&[data-ending-style] {
|
|
100
|
+
transform: translateY(-100%);
|
|
101
|
+
}
|
|
102
|
+
`,
|
|
103
|
+
panelBottom: css`
|
|
104
|
+
--drawer-cast-y: -1;
|
|
105
|
+
|
|
106
|
+
&[data-starting-style],
|
|
107
|
+
&[data-ending-style] {
|
|
108
|
+
transform: translateY(100%);
|
|
109
|
+
}
|
|
110
|
+
`,
|
|
111
|
+
panelRoundedLeft: css`
|
|
112
|
+
border-start-end-radius: 12px;
|
|
113
|
+
border-end-end-radius: 12px;
|
|
114
|
+
`,
|
|
115
|
+
panelRoundedRight: css`
|
|
116
|
+
border-start-start-radius: 12px;
|
|
117
|
+
border-end-start-radius: 12px;
|
|
118
|
+
`,
|
|
119
|
+
panelRoundedTop: css`
|
|
120
|
+
border-end-start-radius: 12px;
|
|
121
|
+
border-end-end-radius: 12px;
|
|
122
|
+
`,
|
|
123
|
+
panelRoundedBottom: css`
|
|
124
|
+
border-start-start-radius: 12px;
|
|
125
|
+
border-start-end-radius: 12px;
|
|
126
|
+
`,
|
|
127
|
+
panelFlush: css`
|
|
128
|
+
--drawer-cast-far: 0%;
|
|
129
|
+
--drawer-cast-near: 0%;
|
|
130
|
+
`,
|
|
131
|
+
panelBoosted: css`
|
|
132
|
+
--drawer-cast-far: 14%;
|
|
133
|
+
--drawer-cast-near: 7%;
|
|
134
|
+
`,
|
|
135
|
+
panelRecessed: css`
|
|
136
|
+
--drawer-cast-far: 4%;
|
|
137
|
+
--drawer-cast-near: 2%;
|
|
138
|
+
`,
|
|
139
|
+
header: css`
|
|
140
|
+
display: flex;
|
|
141
|
+
flex: none;
|
|
142
|
+
gap: 8px;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: space-between;
|
|
145
|
+
|
|
146
|
+
min-height: 56px;
|
|
147
|
+
padding-block: 12px;
|
|
148
|
+
padding-inline: 16px;
|
|
149
|
+
border-block-end: 1px solid ${cssVar.colorSplit};
|
|
150
|
+
`,
|
|
151
|
+
containerInner: css`
|
|
152
|
+
display: flex;
|
|
153
|
+
flex: 1;
|
|
154
|
+
gap: 8px;
|
|
155
|
+
align-items: center;
|
|
156
|
+
justify-content: space-between;
|
|
157
|
+
|
|
158
|
+
width: 100%;
|
|
159
|
+
margin-inline: auto;
|
|
160
|
+
`,
|
|
161
|
+
containerInnerFooter: css`
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
`,
|
|
164
|
+
title: css`
|
|
165
|
+
margin: 0;
|
|
166
|
+
|
|
167
|
+
font-size: 17px;
|
|
168
|
+
font-weight: 600;
|
|
169
|
+
line-height: 1.4;
|
|
170
|
+
color: ${cssVar.colorText};
|
|
171
|
+
letter-spacing: -0.005em;
|
|
172
|
+
`,
|
|
173
|
+
extra: css`
|
|
174
|
+
display: flex;
|
|
175
|
+
flex: none;
|
|
176
|
+
gap: 4px;
|
|
177
|
+
align-items: center;
|
|
178
|
+
|
|
179
|
+
margin-inline-end: -4px;
|
|
180
|
+
`,
|
|
181
|
+
extraFloating: css`
|
|
182
|
+
position: absolute;
|
|
183
|
+
z-index: 1;
|
|
184
|
+
inset-block-start: 12px;
|
|
185
|
+
inset-inline-end: 12px;
|
|
186
|
+
|
|
187
|
+
margin-inline-end: 0;
|
|
188
|
+
`,
|
|
189
|
+
close: css`
|
|
190
|
+
cursor: pointer;
|
|
191
|
+
|
|
192
|
+
position: relative;
|
|
193
|
+
|
|
194
|
+
display: flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
justify-content: center;
|
|
197
|
+
|
|
198
|
+
width: 32px;
|
|
199
|
+
height: 32px;
|
|
200
|
+
padding: 0;
|
|
201
|
+
border: none;
|
|
202
|
+
border-radius: 8px;
|
|
203
|
+
|
|
204
|
+
color: ${cssVar.colorTextTertiary};
|
|
205
|
+
|
|
206
|
+
background: transparent;
|
|
207
|
+
|
|
208
|
+
transition:
|
|
209
|
+
color 160ms cubic-bezier(0.32, 0.72, 0, 1),
|
|
210
|
+
background 160ms cubic-bezier(0.32, 0.72, 0, 1),
|
|
211
|
+
transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
212
|
+
|
|
213
|
+
/* Restores the 40px target the 32px visual box gives up, without nudging the header layout. */
|
|
214
|
+
&::after {
|
|
215
|
+
content: '';
|
|
216
|
+
position: absolute;
|
|
217
|
+
inset: -4px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&:hover {
|
|
221
|
+
transform: scale(1.04);
|
|
222
|
+
color: ${cssVar.colorText};
|
|
223
|
+
background: ${cssVar.colorFillSecondary};
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
&:active {
|
|
227
|
+
transform: scale(0.96);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
&:focus-visible {
|
|
231
|
+
outline: none;
|
|
232
|
+
box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
|
|
233
|
+
}
|
|
234
|
+
`,
|
|
235
|
+
content: css`
|
|
236
|
+
overflow: hidden auto;
|
|
237
|
+
display: flex;
|
|
238
|
+
flex: 1;
|
|
239
|
+
min-height: 0;
|
|
240
|
+
`,
|
|
241
|
+
bodyContent: css`
|
|
242
|
+
display: flex;
|
|
243
|
+
flex-direction: column;
|
|
244
|
+
|
|
245
|
+
width: 100%;
|
|
246
|
+
min-height: 100%;
|
|
247
|
+
margin-inline: auto;
|
|
248
|
+
padding-block: 12px;
|
|
249
|
+
padding-inline: 16px;
|
|
250
|
+
`,
|
|
251
|
+
contentSidebar: css`
|
|
252
|
+
overflow: hidden;
|
|
253
|
+
`,
|
|
254
|
+
bodyContentSidebar: css`
|
|
255
|
+
flex-direction: row;
|
|
256
|
+
height: 100%;
|
|
257
|
+
min-height: 0;
|
|
258
|
+
padding: 0;
|
|
259
|
+
`,
|
|
260
|
+
sidebar: css`
|
|
261
|
+
overflow: hidden auto;
|
|
262
|
+
flex: none;
|
|
263
|
+
|
|
264
|
+
padding-block: 12px;
|
|
265
|
+
padding-inline: 16px;
|
|
266
|
+
border-inline-end: 1px solid ${cssVar.colorSplit};
|
|
267
|
+
|
|
268
|
+
/* A translucent fill reads as a secondary surface against whatever the panel is, where the
|
|
269
|
+
page-level layout colour would punch a hole through an elevated panel in dark themes. */
|
|
270
|
+
background: ${cssVar.colorFillTertiary};
|
|
271
|
+
`,
|
|
272
|
+
sidebarContent: css`
|
|
273
|
+
overflow: hidden auto;
|
|
274
|
+
flex: 1;
|
|
275
|
+
|
|
276
|
+
min-width: 0;
|
|
277
|
+
padding-block: 12px;
|
|
278
|
+
padding-inline: 16px;
|
|
279
|
+
`,
|
|
280
|
+
footer: css`
|
|
281
|
+
display: flex;
|
|
282
|
+
flex: none;
|
|
283
|
+
gap: 8px;
|
|
284
|
+
align-items: center;
|
|
285
|
+
justify-content: flex-end;
|
|
286
|
+
|
|
287
|
+
padding-block: 12px;
|
|
288
|
+
padding-inline: 16px;
|
|
289
|
+
border-block-start: 1px solid ${cssVar.colorSplit};
|
|
290
|
+
`
|
|
291
|
+
}));
|
|
292
|
+
//#endregion
|
|
293
|
+
export { styles };
|
|
294
|
+
|
|
295
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Drawer/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n\n background: ${cssVar.colorBgMask};\n\n transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n popup: css`\n pointer-events: none;\n\n position: fixed;\n z-index: 1201;\n\n display: flex;\n\n /* clamp here rather than on the panel, so an oversized size prop shrinks the\n box instead of detaching the panel from its anchored edge */\n max-width: 100dvw;\n max-height: 100dvh;\n `,\n\n popupLeft: css`\n inset-block: 0;\n inset-inline-start: 0;\n `,\n\n popupRight: css`\n inset-block: 0;\n inset-inline-end: 0;\n `,\n\n popupTop: css`\n inset-block-start: 0;\n inset-inline: 0;\n `,\n\n popupBottom: css`\n inset-block-end: 0;\n inset-inline: 0;\n `,\n\n panel: css`\n pointer-events: auto;\n\n position: relative;\n\n /* push offset rides on CSS vars so [data-starting-style] can override the whole transform */\n transform: translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0));\n\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n\n /* Elevated, not container: in dark themes container sits within 2 points of the page\n background, so a panel with no border and a black-on-black cast loses its edge entirely. */\n background: ${cssVar.colorBgElevated};\n\n /* An edge-anchored panel casts along its placement axis, not downward like a centred\n dialog would. Direction classes set the sign, weight classes set the opacity, so the\n two compose without a class per combination. */\n box-shadow:\n calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px) 24px 0\n rgb(0 0 0 / var(--drawer-cast-far, 8%)),\n calc(var(--drawer-cast-x, 0) * 2px) calc(var(--drawer-cast-y, 0) * 2px) 6px 0\n rgb(0 0 0 / var(--drawer-cast-near, 4%));\n\n transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n `,\n\n panelLeft: css`\n --drawer-cast-x: 1;\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateX(-100%);\n }\n `,\n\n panelRight: css`\n --drawer-cast-x: -1;\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateX(100%);\n }\n `,\n\n panelTop: css`\n --drawer-cast-y: 1;\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(-100%);\n }\n `,\n\n panelBottom: css`\n --drawer-cast-y: -1;\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(100%);\n }\n `,\n\n /* Only the edges facing content get rounded; the anchored edge stays flush with the viewport.\n Kept apart from the direction classes so a flush panel can drop the radius by omitting the\n class rather than by out-specifying it. */\n panelRoundedLeft: css`\n border-start-end-radius: 12px;\n border-end-end-radius: 12px;\n `,\n\n panelRoundedRight: css`\n border-start-start-radius: 12px;\n border-end-start-radius: 12px;\n `,\n\n panelRoundedTop: css`\n border-end-start-radius: 12px;\n border-end-end-radius: 12px;\n `,\n\n panelRoundedBottom: css`\n border-start-start-radius: 12px;\n border-start-end-radius: 12px;\n `,\n\n /* Filling the viewport leaves nothing to cast onto — the shadow would only dirty the edge. */\n panelFlush: css`\n --drawer-cast-far: 0%;\n --drawer-cast-near: 0%;\n `,\n\n /* Without a backdrop the panel has to earn its separation from live content behind it. */\n panelBoosted: css`\n --drawer-cast-far: 14%;\n --drawer-cast-near: 7%;\n `,\n\n /* A pushed ancestor has receded behind its child; stacking full-weight casts would silt up. */\n panelRecessed: css`\n --drawer-cast-far: 4%;\n --drawer-cast-near: 2%;\n `,\n\n header: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n\n min-height: 56px;\n padding-block: 12px;\n padding-inline: 16px;\n border-block-end: 1px solid ${cssVar.colorSplit};\n `,\n\n containerInner: css`\n display: flex;\n flex: 1;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n margin-inline: auto;\n `,\n\n containerInnerFooter: css`\n justify-content: flex-end;\n `,\n\n title: css`\n margin: 0;\n\n font-size: 17px;\n font-weight: 600;\n line-height: 1.4;\n color: ${cssVar.colorText};\n letter-spacing: -0.005em;\n `,\n\n extra: css`\n display: flex;\n flex: none;\n gap: 4px;\n align-items: center;\n\n margin-inline-end: -4px;\n `,\n\n extraFloating: css`\n position: absolute;\n z-index: 1;\n inset-block-start: 12px;\n inset-inline-end: 12px;\n\n margin-inline-end: 0;\n `,\n\n close: css`\n cursor: pointer;\n\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 8px;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition:\n color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n transform 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n /* Restores the 40px target the 32px visual box gives up, without nudging the header layout. */\n &::after {\n content: '';\n position: absolute;\n inset: -4px;\n }\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active {\n transform: scale(0.96);\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n content: css`\n overflow: hidden auto;\n display: flex;\n flex: 1;\n min-height: 0;\n `,\n\n bodyContent: css`\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-height: 100%;\n margin-inline: auto;\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n contentSidebar: css`\n overflow: hidden;\n `,\n\n bodyContentSidebar: css`\n flex-direction: row;\n height: 100%;\n min-height: 0;\n padding: 0;\n `,\n\n sidebar: css`\n overflow: hidden auto;\n flex: none;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-inline-end: 1px solid ${cssVar.colorSplit};\n\n /* A translucent fill reads as a secondary surface against whatever the panel is, where the\n page-level layout colour would punch a hole through an elevated panel in dark themes. */\n background: ${cssVar.colorFillTertiary};\n `,\n\n sidebarContent: css`\n overflow: hidden auto;\n flex: 1;\n\n min-width: 0;\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n footer: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-block-start: 1px solid ${cssVar.colorSplit};\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;kBAKG,OAAO,YAAY;;;;;;;;;CAUnC,OAAO,GAAG;;;;;;;;;;;;;CAcV,WAAW,GAAG;;;;CAKd,YAAY,GAAG;;;;CAKf,UAAU,GAAG;;;;CAKb,aAAa,GAAG;;;;CAKhB,OAAO,GAAG;;;;;;;;;;;;;;;;;;;kBAmBM,OAAO,gBAAgB;;;;;;;;;;;;;CAcvC,WAAW,GAAG;;;;;;;;CASd,YAAY,GAAG;;;;;;;;CASf,UAAU,GAAG;;;;;;;;CASb,aAAa,GAAG;;;;;;;;CAYhB,kBAAkB,GAAG;;;;CAKrB,mBAAmB,GAAG;;;;CAKtB,iBAAiB,GAAG;;;;CAKpB,oBAAoB,GAAG;;;;CAMvB,YAAY,GAAG;;;;CAMf,cAAc,GAAG;;;;CAMjB,eAAe,GAAG;;;;CAKlB,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,WAAW;;CAGlD,gBAAgB,GAAG;;;;;;;;;;CAWnB,sBAAsB,GAAG;;;CAIzB,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAI5B,OAAO,GAAG;;;;;;;;CASV,eAAe,GAAG;;;;;;;;CASlB,OAAO,GAAG;;;;;;;;;;;;;;;aAeC,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;eAkBvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;;8BAShB,OAAO,mBAAmB;;;CAItD,SAAS,GAAG;;;;;;CAOZ,aAAa,GAAG;;;;;;;;;;CAWhB,gBAAgB,GAAG;;;CAInB,oBAAoB,GAAG;;;;;;CAOvB,SAAS,GAAG;;;;;;mCAMqB,OAAO,WAAW;;;;kBAInC,OAAO,kBAAkB;;CAGzC,gBAAgB,GAAG;;;;;;;;CASnB,QAAQ,GAAG;;;;;;;;;oCASuB,OAAO,WAAW;;AAEtD,EAAE"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from "react";
|
|
2
|
+
//#region src/base-ui/Drawer/type.d.ts
|
|
3
|
+
type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
|
|
4
|
+
type DrawerPush = boolean | {
|
|
5
|
+
distance?: number;
|
|
6
|
+
};
|
|
7
|
+
interface DrawerSemanticNames {
|
|
8
|
+
backdrop?: string;
|
|
9
|
+
bodyContent?: string;
|
|
10
|
+
close?: string;
|
|
11
|
+
content?: string;
|
|
12
|
+
extra?: string;
|
|
13
|
+
footer?: string;
|
|
14
|
+
header?: string;
|
|
15
|
+
panel?: string;
|
|
16
|
+
popup?: string;
|
|
17
|
+
sidebar?: string;
|
|
18
|
+
sidebarContent?: string;
|
|
19
|
+
title?: string;
|
|
20
|
+
}
|
|
21
|
+
interface DrawerSemanticStyles {
|
|
22
|
+
backdrop?: CSSProperties;
|
|
23
|
+
bodyContent?: CSSProperties;
|
|
24
|
+
close?: CSSProperties;
|
|
25
|
+
content?: CSSProperties;
|
|
26
|
+
extra?: CSSProperties;
|
|
27
|
+
footer?: CSSProperties;
|
|
28
|
+
header?: CSSProperties;
|
|
29
|
+
panel?: CSSProperties;
|
|
30
|
+
popup?: CSSProperties;
|
|
31
|
+
sidebar?: CSSProperties;
|
|
32
|
+
sidebarContent?: CSSProperties;
|
|
33
|
+
title?: CSSProperties;
|
|
34
|
+
}
|
|
35
|
+
interface DrawerProps {
|
|
36
|
+
afterOpenChange?: (open: boolean) => void;
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
className?: string;
|
|
39
|
+
classNames?: DrawerSemanticNames;
|
|
40
|
+
closable?: boolean;
|
|
41
|
+
closeIcon?: ReactNode;
|
|
42
|
+
containerMaxWidth?: number | string;
|
|
43
|
+
extra?: ReactNode;
|
|
44
|
+
footer?: ReactNode;
|
|
45
|
+
getContainer?: HTMLElement | false | null;
|
|
46
|
+
height?: number | string;
|
|
47
|
+
keyboard?: boolean;
|
|
48
|
+
mask?: boolean;
|
|
49
|
+
maskClosable?: boolean;
|
|
50
|
+
noHeader?: boolean;
|
|
51
|
+
onClose?: () => void;
|
|
52
|
+
open?: boolean;
|
|
53
|
+
placement?: DrawerPlacement;
|
|
54
|
+
push?: DrawerPush;
|
|
55
|
+
sidebar?: ReactNode;
|
|
56
|
+
sidebarWidth?: number | string;
|
|
57
|
+
style?: CSSProperties;
|
|
58
|
+
styles?: DrawerSemanticStyles;
|
|
59
|
+
title?: ReactNode;
|
|
60
|
+
width?: number | string;
|
|
61
|
+
zIndex?: number;
|
|
62
|
+
}
|
|
63
|
+
//#endregion
|
|
64
|
+
export { DrawerPlacement, DrawerProps, DrawerPush, DrawerSemanticNames, DrawerSemanticStyles };
|
|
65
|
+
//# sourceMappingURL=type.d.mts.map
|
|
@@ -25,7 +25,8 @@ const DropdownMenu = memo(({ children, defaultOpen, footer, header, iconAlign, i
|
|
|
25
25
|
const isOpen = open ?? uncontrolledOpen;
|
|
26
26
|
const menuItems = useMemo(() => {
|
|
27
27
|
if (isOpen) {
|
|
28
|
-
const
|
|
28
|
+
const resolvedItems = typeof items === "function" ? items() : items;
|
|
29
|
+
const renderedItems = renderDropdownMenuItems(resolvedItems, [], {
|
|
29
30
|
iconAlign,
|
|
30
31
|
iconSpaceMode
|
|
31
32
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport {\n DropdownMenuFooter,\n DropdownMenuHeader,\n DropdownMenuPopup,\n DropdownMenuPortal,\n DropdownMenuPositioner,\n DropdownMenuScrollViewport,\n DropdownMenuTrigger,\n} from './atoms';\nimport { renderDropdownMenuItems } from './renderItems';\nimport { styles } from './sharedStyle';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n ({\n children,\n defaultOpen,\n footer,\n header,\n iconAlign,\n iconSpaceMode,\n items,\n nativeButton,\n onOpenChange,\n onOpenChangeComplete,\n open,\n placement = 'bottomLeft',\n popupProps,\n portalProps,\n positionerProps,\n trigger = 'click',\n triggerProps,\n ...rest\n }) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n const resolvedOpenOnHover = (triggerProps as any)?.openOnHover ?? openOnHover;\n\n useEffect(() => {\n if (open === undefined) return;\n setUncontrolledOpen(open);\n }, [open]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n onOpenChange?.(nextOpen, details);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open],\n );\n\n const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n const isOpen = open ?? uncontrolledOpen;\n const menuItems = useMemo(() => {\n if (isOpen) {\n const resolvedItems = typeof items === 'function' ? items() : items;\n const renderedItems = renderDropdownMenuItems(resolvedItems, [], {\n iconAlign,\n iconSpaceMode,\n });\n menuItemsRef.current = renderedItems;\n return renderedItems;\n }\n return menuItemsRef.current;\n }, [isOpen, items, iconAlign, iconSpaceMode]);\n const handleOpenChangeComplete = useCallback(\n (nextOpen: boolean) => {\n onOpenChangeComplete?.(nextOpen);\n if (!nextOpen) {\n menuItemsRef.current = null;\n }\n },\n [onOpenChangeComplete],\n );\n const { container: portalContainer, ...restPortalProps } = (portalProps ?? {}) as any;\n\n const { resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n triggerNativeButton: triggerProps?.nativeButton,\n });\n\n const hasSlots = header != null || footer != null;\n\n const triggerElement = (\n <DropdownMenuTrigger\n {...triggerProps}\n nativeButton={resolvedNativeButton}\n openOnHover={resolvedOpenOnHover}\n >\n {children}\n </DropdownMenuTrigger>\n );\n\n return (\n <Menu.Root\n {...rest}\n defaultOpen={defaultOpen}\n modal={false}\n open={open}\n onOpenChange={handleOpenChange}\n onOpenChangeComplete={handleOpenChangeComplete}\n >\n {triggerElement}\n <DropdownMenuPortal container={portalContainer} {...restPortalProps}>\n <DropdownMenuPositioner\n {...positionerProps}\n hoverTrigger={resolvedOpenOnHover}\n placement={placement}\n >\n <DropdownMenuPopup\n {...popupProps}\n data-has-footer={footer == null ? undefined : ''}\n data-has-header={header == null ? undefined : ''}\n className={\n hasSlots\n ? (cx(styles.popupWithSlots, popupProps?.className as string) as any)\n : popupProps?.className\n }\n >\n {header == null ? null : <DropdownMenuHeader>{header}</DropdownMenuHeader>}\n {hasSlots ? (\n <DropdownMenuScrollViewport>{menuItems}</DropdownMenuScrollViewport>\n ) : (\n menuItems\n )}\n {footer == null ? null : <DropdownMenuFooter>{footer}</DropdownMenuFooter>}\n </DropdownMenuPopup>\n </DropdownMenuPositioner>\n </DropdownMenuPortal>\n </Menu.Root>\n );\n },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,UACA,aACA,QACA,QACA,WACA,eACA,OACA,cACA,cACA,sBACA,MACA,YAAY,cACZ,YACA,aACA,iBACA,UAAU,SACV,cACA,GAAG,WACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,WAAW,CAAC;CAE7E,MAAM,EAAE,gBAAgB,cAAc,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;CACtE,MAAM,sBAAuB,cAAsB,eAAe;CAElE,gBAAgB;EACd,IAAI,SAAS,KAAA,GAAW;EACxB,oBAAoB,IAAI;CAC1B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,mBAAmB,aACtB,UAAmB,YAA6D;EAC/E,eAAe,UAAU,OAAO;EAChC,IAAI,SAAS,KAAA,GACX,oBAAoB,QAAQ;CAEhC,GACA,CAAC,cAAc,IAAI,CACrB;CAEA,MAAM,eAAe,OAA0D,IAAI;CACnF,MAAM,SAAS,QAAQ;CACvB,MAAM,YAAY,cAAc;EAC9B,IAAI,QAAQ;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport {\n DropdownMenuFooter,\n DropdownMenuHeader,\n DropdownMenuPopup,\n DropdownMenuPortal,\n DropdownMenuPositioner,\n DropdownMenuScrollViewport,\n DropdownMenuTrigger,\n} from './atoms';\nimport { renderDropdownMenuItems } from './renderItems';\nimport { styles } from './sharedStyle';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n ({\n children,\n defaultOpen,\n footer,\n header,\n iconAlign,\n iconSpaceMode,\n items,\n nativeButton,\n onOpenChange,\n onOpenChangeComplete,\n open,\n placement = 'bottomLeft',\n popupProps,\n portalProps,\n positionerProps,\n trigger = 'click',\n triggerProps,\n ...rest\n }) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n const resolvedOpenOnHover = (triggerProps as any)?.openOnHover ?? openOnHover;\n\n useEffect(() => {\n if (open === undefined) return;\n setUncontrolledOpen(open);\n }, [open]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n onOpenChange?.(nextOpen, details);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open],\n );\n\n const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n const isOpen = open ?? uncontrolledOpen;\n const menuItems = useMemo(() => {\n if (isOpen) {\n const resolvedItems = typeof items === 'function' ? items() : items;\n const renderedItems = renderDropdownMenuItems(resolvedItems, [], {\n iconAlign,\n iconSpaceMode,\n });\n menuItemsRef.current = renderedItems;\n return renderedItems;\n }\n return menuItemsRef.current;\n }, [isOpen, items, iconAlign, iconSpaceMode]);\n const handleOpenChangeComplete = useCallback(\n (nextOpen: boolean) => {\n onOpenChangeComplete?.(nextOpen);\n if (!nextOpen) {\n menuItemsRef.current = null;\n }\n },\n [onOpenChangeComplete],\n );\n const { container: portalContainer, ...restPortalProps } = (portalProps ?? {}) as any;\n\n const { resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n triggerNativeButton: triggerProps?.nativeButton,\n });\n\n const hasSlots = header != null || footer != null;\n\n const triggerElement = (\n <DropdownMenuTrigger\n {...triggerProps}\n nativeButton={resolvedNativeButton}\n openOnHover={resolvedOpenOnHover}\n >\n {children}\n </DropdownMenuTrigger>\n );\n\n return (\n <Menu.Root\n {...rest}\n defaultOpen={defaultOpen}\n modal={false}\n open={open}\n onOpenChange={handleOpenChange}\n onOpenChangeComplete={handleOpenChangeComplete}\n >\n {triggerElement}\n <DropdownMenuPortal container={portalContainer} {...restPortalProps}>\n <DropdownMenuPositioner\n {...positionerProps}\n hoverTrigger={resolvedOpenOnHover}\n placement={placement}\n >\n <DropdownMenuPopup\n {...popupProps}\n data-has-footer={footer == null ? undefined : ''}\n data-has-header={header == null ? undefined : ''}\n className={\n hasSlots\n ? (cx(styles.popupWithSlots, popupProps?.className as string) as any)\n : popupProps?.className\n }\n >\n {header == null ? null : <DropdownMenuHeader>{header}</DropdownMenuHeader>}\n {hasSlots ? (\n <DropdownMenuScrollViewport>{menuItems}</DropdownMenuScrollViewport>\n ) : (\n menuItems\n )}\n {footer == null ? null : <DropdownMenuFooter>{footer}</DropdownMenuFooter>}\n </DropdownMenuPopup>\n </DropdownMenuPositioner>\n </DropdownMenuPortal>\n </Menu.Root>\n );\n },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,UACA,aACA,QACA,QACA,WACA,eACA,OACA,cACA,cACA,sBACA,MACA,YAAY,cACZ,YACA,aACA,iBACA,UAAU,SACV,cACA,GAAG,WACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,WAAW,CAAC;CAE7E,MAAM,EAAE,gBAAgB,cAAc,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;CACtE,MAAM,sBAAuB,cAAsB,eAAe;CAElE,gBAAgB;EACd,IAAI,SAAS,KAAA,GAAW;EACxB,oBAAoB,IAAI;CAC1B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,mBAAmB,aACtB,UAAmB,YAA6D;EAC/E,eAAe,UAAU,OAAO;EAChC,IAAI,SAAS,KAAA,GACX,oBAAoB,QAAQ;CAEhC,GACA,CAAC,cAAc,IAAI,CACrB;CAEA,MAAM,eAAe,OAA0D,IAAI;CACnF,MAAM,SAAS,QAAQ;CACvB,MAAM,YAAY,cAAc;EAC9B,IAAI,QAAQ;GACV,MAAM,gBAAgB,OAAO,UAAU,aAAa,MAAM,IAAI;GAC9D,MAAM,gBAAgB,wBAAwB,eAAe,CAAC,GAAG;IAC/D;IACA;GACF,CAAC;GACD,aAAa,UAAU;GACvB,OAAO;EACT;EACA,OAAO,aAAa;CACtB,GAAG;EAAC;EAAQ;EAAO;EAAW;CAAa,CAAC;CAC5C,MAAM,2BAA2B,aAC9B,aAAsB;EACrB,uBAAuB,QAAQ;EAC/B,IAAI,CAAC,UACH,aAAa,UAAU;CAE3B,GACA,CAAC,oBAAoB,CACvB;CACA,MAAM,EAAE,WAAW,iBAAiB,GAAG,oBAAqB,eAAe,CAAC;CAE5E,MAAM,EAAE,yBAAyB,gBAAgB;EAC/C;EACA;EACA,qBAAqB,cAAc;CACrC,CAAC;CAED,MAAM,WAAW,UAAU,QAAQ,UAAU;CAE7C,MAAM,iBACJ,oBAAC,qBAAD;EACE,GAAI;EACJ,cAAc;EACd,aAAa;EAEZ;CACkB,CAAA;CAGvB,OACE,qBAAC,KAAK,MAAN;EACE,GAAI;EACS;EACb,OAAO;EACD;EACN,cAAc;EACd,sBAAsB;EANxB,UAAA,CAQG,gBACD,oBAAC,oBAAD;GAAoB,WAAW;GAAiB,GAAI;GAClD,UAAA,oBAAC,wBAAD;IACE,GAAI;IACJ,cAAc;IACH;IAEX,UAAA,qBAAC,mBAAD;KACE,GAAI;KACJ,mBAAiB,UAAU,OAAO,KAAA,IAAY;KAC9C,mBAAiB,UAAU,OAAO,KAAA,IAAY;KAC9C,WACE,WACK,GAAG,OAAO,gBAAgB,YAAY,SAAmB,IAC1D,YAAY;KAPpB,UAAA;MAUG,UAAU,OAAO,OAAO,oBAAC,oBAAD,EAAA,UAAqB,OAA2B,CAAA;MACxE,WACC,oBAAC,4BAAD,EAAA,UAA6B,UAAsC,CAAA,IAEnE;MAED,UAAU,OAAO,OAAO,oBAAC,oBAAD,EAAA,UAAqB,OAA2B,CAAA;KACxD;;GACG,CAAA;EACN,CAAA,CACX;;AAEf,CACF;AAEA,aAAa,cAAc"}
|
|
@@ -72,7 +72,8 @@ DropdownMenuPortal.displayName = "DropdownMenuPortal";
|
|
|
72
72
|
const DropdownMenuPositioner = ({ className, placement, hoverTrigger, align, side, sideOffset, children, style, ...rest }) => {
|
|
73
73
|
const placementConfig = placement ? placementMap[placement] : void 0;
|
|
74
74
|
const [positionerNode, setPositionerNode] = useState(null);
|
|
75
|
-
const
|
|
75
|
+
const explicitZIndex = typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0;
|
|
76
|
+
const { zIndex, ref: zRef } = useLayerZIndex("floating", explicitZIndex);
|
|
76
77
|
const composedRef = useMergeRefs([setPositionerNode, zRef]);
|
|
77
78
|
const resolvedStyle = typeof style === "function" ? (state) => ({
|
|
78
79
|
zIndex,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport Switch from '@/base-ui/Switch';\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { styles } from './sharedStyle';\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nexport type DropdownMenuTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Menu.Trigger>,\n 'children' | 'render'\n> & {\n children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: DropdownMenuTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n }\n\n return (\n <Menu.Trigger\n {...rest}\n className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Menu.Trigger>\n );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n /**\n * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n */\n container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n const appElement = useAppElement();\n return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n hoverTrigger?: boolean;\n placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n className,\n placement,\n hoverTrigger,\n align,\n side,\n sideOffset,\n children,\n style,\n ...rest\n}: DropdownMenuPositionerProps) => {\n const placementConfig = placement ? placementMap[placement] : undefined;\n const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return (\n <Menu.Positioner\n {...rest}\n align={align ?? placementConfig?.align}\n className={mergeStateClassName(styles.positioner, className as any) as any}\n data-hover-trigger={hoverTrigger || undefined}\n data-placement={placement}\n ref={composedRef as any}\n side={side ?? placementConfig?.side}\n sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n style={resolvedStyle}\n >\n <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n </Menu.Positioner>\n );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopup = ({ className, ...rest }: DropdownMenuPopupProps) => {\n return (\n <Menu.Popup {...rest} className={mergeStateClassName(styles.popup, className as any) as any} />\n );\n};\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuHeader = ({ className, ...rest }: DropdownMenuHeaderProps) => {\n return <div {...rest} className={cx(styles.header, className)} />;\n};\n\nDropdownMenuHeader.displayName = 'DropdownMenuHeader';\n\nexport type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuFooter = ({ className, ...rest }: DropdownMenuFooterProps) => {\n return <div {...rest} className={cx(styles.footer, className)} />;\n};\n\nDropdownMenuFooter.displayName = 'DropdownMenuFooter';\n\nexport type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuScrollViewport = ({\n className,\n ...rest\n}: DropdownMenuScrollViewportProps) => {\n return <div {...rest} className={cx(styles.slotViewport, className)} />;\n};\n\nDropdownMenuScrollViewport.displayName = 'DropdownMenuScrollViewport';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n return (\n <Menu.Item\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n className,\n danger,\n ...rest\n}: DropdownMenuCheckboxItemProps) => {\n return (\n <Menu.CheckboxItem\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n return (\n <Menu.Separator\n {...rest}\n className={(state) =>\n cx(styles.separator, typeof className === 'function' ? className(state) : className)\n }\n />\n );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n return (\n <Menu.GroupLabel\n {...rest}\n className={(state) =>\n cx(styles.groupLabel, typeof className === 'function' ? className(state) : className)\n }\n />\n );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n className,\n danger,\n ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n return (\n <Menu.SubmenuTrigger\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContent = ({ className, ...rest }: DropdownMenuItemContentProps) => {\n return <div {...rest} className={cx(styles.itemContent, className)} />;\n};\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIcon = ({ className, ...rest }: DropdownMenuItemIconProps) => {\n return <span {...rest} className={cx(styles.icon, className)} />;\n};\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n className,\n ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n return <div {...rest} className={cx(styles.labelGroup, className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n return <span {...rest} className={cx(styles.label, className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n return <span {...rest} className={cx(styles.desc, className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n return <span {...rest} className={cx(styles.extra, className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n return <span {...rest} className={cx(styles.submenuArrow, className)} />;\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n React.ComponentProps<typeof Menu.Item>,\n 'onClick'\n> & {\n checked?: boolean;\n closeOnClick?: boolean;\n danger?: boolean;\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n checked: checkedProp,\n className,\n closeOnClick = false,\n danger,\n defaultChecked,\n disabled,\n onCheckedChange,\n children,\n ...rest\n}: DropdownMenuSwitchItemProps) => {\n const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n const isControlled = checkedProp !== undefined;\n const checked = isControlled ? checkedProp : internalChecked;\n\n const handleCheckedChange = useCallback(\n (newChecked: boolean) => {\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n onCheckedChange?.(newChecked);\n },\n [isControlled, onCheckedChange],\n );\n\n return (\n <Menu.Item\n {...rest}\n closeOnClick={closeOnClick}\n disabled={disabled}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n onClick={(e) => {\n e.preventDefault();\n if (!disabled) {\n handleCheckedChange(!checked);\n }\n }}\n >\n {children}\n <span\n style={{ display: 'inline-flex', marginInlineStart: 16 }}\n onFocus={(e) => e.stopPropagation()}\n >\n <Switch\n checked={checked}\n disabled={disabled}\n size=\"small\"\n tabIndex={-1}\n onChange={handleCheckedChange}\n onClick={(_, e) => e.stopPropagation()}\n />\n </span>\n </Menu.Item>\n );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAa,oBAAsC,UAAU,oBAAC,KAAK,MAAN;CAAW,OAAO;CAAO,GAAI;AAAQ,CAAA;AAClG,MAAa,0BAA0B,KAAK;AAC5C,MAAa,oCAAoC,KAAK;AAEtD,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AASA,MAAa,uBAAuB,EAClC,UACA,WACA,cACA,KAAK,SACL,GAAG,WAC2B;CAC9B,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAAe;EAG/B,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EAAE,MAAM,GAAG,cAAc;GAC/B,OAAO;EACT,EAAA,CAAG;EAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;EACrE,OAAO,aAAa,UAAiB;GACnC,GAAG;GACH,WAAW,KAAK,WAAW,qBAAqB,WAAW,YAAY,SAAS;GAChF,KAAK,UAAU;IAAE,SAAiB;IAAM,MAAc;IAAK;GAAO,CAAC;EACrE,CAAC;CACH;CAEA,IAAI,eAAe,QAAQ,GACzB,OAAO,oBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,cAAc;EAAsB,QAAQ;CAAkB,CAAA;CAG/F,OACE,oBAAC,KAAK,SAAN;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,qBAAqB,SAAS;EACzD,cAAc;EACd,KAAK;EAEJ;CACW,CAAA;AAElB;AAEA,oBAAoB,cAAc;AASlC,MAAa,sBAAsB,EAAE,WAAW,GAAG,WAAoC;CACrF,MAAM,aAAa,cAAc;CACjC,OAAO,oBAAC,KAAK,QAAN;EAAa,WAAW,aAAa,cAAc,KAAA;EAAW,GAAI;CAAO,CAAA;AAClF;AAEA,mBAAmB,cAAc;AAOjC,MAAa,0BAA0B,EACrC,WACA,WACA,cACA,OACA,MACA,YACA,UACA,OACA,GAAG,WAC8B;CACjC,MAAM,kBAAkB,YAAY,aAAa,aAAa,KAAA;CAC9D,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC,IAAI;CAMhF,MAAM,EAAE,QAAQ,KAAK,SAAS,eAA+B,YAH3D,OAAO,UAAU,cAAc,OAAO,UAAU,QAAQ,OAAO,MAAM,WAAW,WAC5E,MAAM,SACN,KAAA,CACiF;CACvF,MAAM,cAAc,aAAa,CAAC,mBAAmB,IAAI,CAAC;CAE1D,MAAM,gBACJ,OAAO,UAAU,cACZ,WAAgB;EAAE;EAAQ,GAAG,MAAM,KAAK;CAAE,KAC3C;EAAE;EAAQ,GAAG;CAAM;CAEzB,OACE,oBAAC,KAAK,YAAN;EACE,GAAI;EACJ,OAAO,SAAS,iBAAiB;EACjC,WAAW,oBAAoB,OAAO,YAAY,SAAgB;EAClE,sBAAoB,gBAAgB,KAAA;EACpC,kBAAgB;EAChB,KAAK;EACL,MAAM,QAAQ,iBAAiB;EAC/B,YAAY,eAAe,kBAAkB,IAAI,KAAA;EACjD,OAAO;EAEP,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAiB;EAAgC,CAAA;CAChE,CAAA;AAErB;AAEA,uBAAuB,cAAc;AAIrC,MAAa,qBAAqB,EAAE,WAAW,GAAG,WAAmC;CACnF,OACE,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW,oBAAoB,OAAO,OAAO,SAAgB;CAAW,CAAA;AAElG;AAEA,kBAAkB,cAAc;AAIhC,MAAa,sBAAsB,EAAE,WAAW,GAAG,WAAoC;CACrF,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAI,CAAA;AAClE;AAEA,mBAAmB,cAAc;AAIjC,MAAa,sBAAsB,EAAE,WAAW,GAAG,WAAoC;CACrF,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAI,CAAA;AAClE;AAEA,mBAAmB,cAAc;AAIjC,MAAa,8BAA8B,EACzC,WACA,GAAG,WACkC;CACrC,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,OAAO,cAAc,SAAS;CAAI,CAAA;AACxE;AAEA,2BAA2B,cAAc;AAIzC,MAAa,oBAAoB,EAAE,WAAW,QAAQ,GAAG,WAAkC;CACzF,OACE,oBAAC,KAAK,MAAN;EACE,GAAI;EACJ,YAAY,UACV,GACE,OAAO,MACP,UAAU,OAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;CAEH,CAAA;AAEL;AAEA,iBAAiB,cAAc;AAM/B,MAAa,qCAAqC,EAChD,WACA,QACA,GAAG,WACgC;CACnC,OACE,oBAAC,KAAK,cAAN;EACE,GAAI;EACJ,YAAY,UACV,GACE,OAAO,MACP,UAAU,OAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;CAEH,CAAA;AAEL;AAEA,kCAAkC,cAAc;AAIhD,MAAa,yBAAyB,EAAE,WAAW,GAAG,WAAuC;CAC3F,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,YAAY,UACV,GAAG,OAAO,WAAW,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;CAEtF,CAAA;AAEL;AAEA,sBAAsB,cAAc;AAEpC,MAAa,oBAAoB,KAAK;AAItC,MAAa,0BAA0B,EAAE,WAAW,GAAG,WAAwC;CAC7F,OACE,oBAAC,KAAK,YAAN;EACE,GAAI;EACJ,YAAY,UACV,GAAG,OAAO,YAAY,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;CAEvF,CAAA;AAEL;AAEA,uBAAuB,cAAc;AAMrC,MAAa,8BAA8B,EACzC,WACA,QACA,GAAG,WACkC;CACrC,OACE,oBAAC,KAAK,gBAAN;EACE,GAAI;EACJ,YAAY,UACV,GACE,OAAO,MACP,UAAU,OAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;CAEH,CAAA;AAEL;AAEA,2BAA2B,cAAc;AAIzC,MAAa,2BAA2B,EAAE,WAAW,GAAG,WAAyC;CAC/F,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,OAAO,aAAa,SAAS;CAAI,CAAA;AACvE;AAEA,wBAAwB,cAAc;AAItC,MAAa,wBAAwB,EAAE,WAAW,GAAG,WAAsC;CACzF,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAW,GAAG,OAAO,MAAM,SAAS;CAAI,CAAA;AACjE;AAEA,qBAAqB,cAAc;AAInC,MAAa,8BAA8B,EACzC,WACA,GAAG,WACkC;CACrC,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,OAAO,YAAY,SAAS;CAAI,CAAA;AACtE;AAEA,2BAA2B,cAAc;AAIzC,MAAa,yBAAyB,EAAE,WAAW,GAAG,WAAuC;CAC3F,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAW,GAAG,OAAO,OAAO,SAAS;CAAI,CAAA;AAClE;AAEA,sBAAsB,cAAc;AAIpC,MAAa,wBAAwB,EAAE,WAAW,GAAG,WAAsC;CACzF,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAW,GAAG,OAAO,MAAM,SAAS;CAAI,CAAA;AACjE;AAEA,qBAAqB,cAAc;AAInC,MAAa,yBAAyB,EAAE,WAAW,GAAG,WAAuC;CAC3F,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAW,GAAG,OAAO,OAAO,SAAS;CAAI,CAAA;AAClE;AAEA,sBAAsB,cAAc;AAIpC,MAAa,4BAA4B,EAAE,WAAW,GAAG,WAA0C;CACjG,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAW,GAAG,OAAO,cAAc,SAAS;CAAI,CAAA;AACzE;AAEA,yBAAyB,cAAc;AAavC,MAAa,0BAA0B,EACrC,SAAS,aACT,WACA,eAAe,OACf,QACA,gBACA,UACA,iBACA,UACA,GAAG,WAC8B;CACjC,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,kBAAkB,KAAK;CAC9E,MAAM,eAAe,gBAAgB,KAAA;CACrC,MAAM,UAAU,eAAe,cAAc;CAE7C,MAAM,sBAAsB,aACzB,eAAwB;EACvB,IAAI,CAAC,cACH,mBAAmB,UAAU;EAE/B,kBAAkB,UAAU;CAC9B,GACA,CAAC,cAAc,eAAe,CAChC;CAEA,OACE,qBAAC,KAAK,MAAN;EACE,GAAI;EACU;EACJ;EACV,YAAY,UACV,GACE,OAAO,MACP,UAAU,OAAO,QACjB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SACvD;EAEF,UAAU,MAAM;GACd,EAAE,eAAe;GACjB,IAAI,CAAC,UACH,oBAAoB,CAAC,OAAO;EAEhC;EAhBF,UAAA,CAkBG,UACD,oBAAC,QAAD;GACE,OAAO;IAAE,SAAS;IAAe,mBAAmB;GAAG;GACvD,UAAU,MAAM,EAAE,gBAAgB;GAElC,UAAA,oBAAC,QAAD;IACW;IACC;IACV,MAAK;IACL,UAAU;IACV,UAAU;IACV,UAAU,GAAG,MAAM,EAAE,gBAAgB;GACtC,CAAA;EACG,CAAA,CACG;;AAEf;AAEA,uBAAuB,cAAc"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport Switch from '@/base-ui/Switch';\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { styles } from './sharedStyle';\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nexport type DropdownMenuTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Menu.Trigger>,\n 'children' | 'render'\n> & {\n children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: DropdownMenuTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n }\n\n return (\n <Menu.Trigger\n {...rest}\n className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Menu.Trigger>\n );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n /**\n * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n */\n container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n const appElement = useAppElement();\n return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n hoverTrigger?: boolean;\n placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n className,\n placement,\n hoverTrigger,\n align,\n side,\n sideOffset,\n children,\n style,\n ...rest\n}: DropdownMenuPositionerProps) => {\n const placementConfig = placement ? placementMap[placement] : undefined;\n const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return (\n <Menu.Positioner\n {...rest}\n align={align ?? placementConfig?.align}\n className={mergeStateClassName(styles.positioner, className as any) as any}\n data-hover-trigger={hoverTrigger || undefined}\n data-placement={placement}\n ref={composedRef as any}\n side={side ?? placementConfig?.side}\n sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n style={resolvedStyle}\n >\n <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n </Menu.Positioner>\n );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopup = ({ className, ...rest }: DropdownMenuPopupProps) => {\n return (\n <Menu.Popup {...rest} className={mergeStateClassName(styles.popup, className as any) as any} />\n );\n};\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuHeader = ({ className, ...rest }: DropdownMenuHeaderProps) => {\n return <div {...rest} className={cx(styles.header, className)} />;\n};\n\nDropdownMenuHeader.displayName = 'DropdownMenuHeader';\n\nexport type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuFooter = ({ className, ...rest }: DropdownMenuFooterProps) => {\n return <div {...rest} className={cx(styles.footer, className)} />;\n};\n\nDropdownMenuFooter.displayName = 'DropdownMenuFooter';\n\nexport type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuScrollViewport = ({\n className,\n ...rest\n}: DropdownMenuScrollViewportProps) => {\n return <div {...rest} className={cx(styles.slotViewport, className)} />;\n};\n\nDropdownMenuScrollViewport.displayName = 'DropdownMenuScrollViewport';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n return (\n <Menu.Item\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n className,\n danger,\n ...rest\n}: DropdownMenuCheckboxItemProps) => {\n return (\n <Menu.CheckboxItem\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n return (\n <Menu.Separator\n {...rest}\n className={(state) =>\n cx(styles.separator, typeof className === 'function' ? className(state) : className)\n }\n />\n );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n return (\n <Menu.GroupLabel\n {...rest}\n className={(state) =>\n cx(styles.groupLabel, typeof className === 'function' ? className(state) : className)\n }\n />\n );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n className,\n danger,\n ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n return (\n <Menu.SubmenuTrigger\n {...rest}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContent = ({ className, ...rest }: DropdownMenuItemContentProps) => {\n return <div {...rest} className={cx(styles.itemContent, className)} />;\n};\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIcon = ({ className, ...rest }: DropdownMenuItemIconProps) => {\n return <span {...rest} className={cx(styles.icon, className)} />;\n};\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n className,\n ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n return <div {...rest} className={cx(styles.labelGroup, className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n return <span {...rest} className={cx(styles.label, className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n return <span {...rest} className={cx(styles.desc, className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n return <span {...rest} className={cx(styles.extra, className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n return <span {...rest} className={cx(styles.submenuArrow, className)} />;\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n React.ComponentProps<typeof Menu.Item>,\n 'onClick'\n> & {\n checked?: boolean;\n closeOnClick?: boolean;\n danger?: boolean;\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n checked: checkedProp,\n className,\n closeOnClick = false,\n danger,\n defaultChecked,\n disabled,\n onCheckedChange,\n children,\n ...rest\n}: DropdownMenuSwitchItemProps) => {\n const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n const isControlled = checkedProp !== undefined;\n const checked = isControlled ? checkedProp : internalChecked;\n\n const handleCheckedChange = useCallback(\n (newChecked: boolean) => {\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n onCheckedChange?.(newChecked);\n },\n [isControlled, onCheckedChange],\n );\n\n return (\n <Menu.Item\n {...rest}\n closeOnClick={closeOnClick}\n disabled={disabled}\n className={(state) =>\n cx(\n styles.item,\n danger && styles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n onClick={(e) => {\n e.preventDefault();\n if (!disabled) {\n handleCheckedChange(!checked);\n }\n }}\n >\n {children}\n <span\n style={{ display: 'inline-flex', marginInlineStart: 16 }}\n onFocus={(e) => e.stopPropagation()}\n >\n <Switch\n checked={checked}\n disabled={disabled}\n size=\"small\"\n tabIndex={-1}\n onChange={handleCheckedChange}\n onClick={(_, e) => e.stopPropagation()}\n />\n </span>\n </Menu.Item>\n );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}
|
|
@@ -48,7 +48,8 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
|
|
|
48
48
|
const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);
|
|
49
49
|
return items.map((item, index) => {
|
|
50
50
|
if (!item) return null;
|
|
51
|
-
const
|
|
51
|
+
const fallbackKey = `${keyPath.join("-") || "root"}-${index}`;
|
|
52
|
+
const itemKey = getItemKey(item, fallbackKey);
|
|
52
53
|
const nextKeyPath = [...keyPath, String(itemKey)];
|
|
53
54
|
if (item.type === "checkbox") {
|
|
54
55
|
const checkboxItem = item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderItems.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n type KeyboardEvent as ReactKeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n} from 'react';\n\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport {\n type BaseMenuItemGroupType,\n type BaseSubMenuType,\n getItemKey,\n getItemLabel,\n hasAnyIcon,\n hasCheckboxAndIcon,\n type MenuDividerType,\n type MenuItemType,\n renderIcon,\n type RenderItemContentOptions,\n type RenderOptions,\n} from '@/Menu';\n\nimport {\n DropdownMenuCheckboxItemIndicator,\n DropdownMenuCheckboxItemPrimitive,\n DropdownMenuFooter,\n DropdownMenuGroup,\n DropdownMenuGroupLabel,\n DropdownMenuHeader,\n DropdownMenuItem,\n DropdownMenuItemContent,\n DropdownMenuItemDesc,\n DropdownMenuItemExtra,\n DropdownMenuItemIcon,\n DropdownMenuItemLabel,\n DropdownMenuItemLabelGroup,\n DropdownMenuPopup,\n DropdownMenuPortal,\n DropdownMenuPositioner,\n DropdownMenuScrollViewport,\n DropdownMenuSeparator,\n DropdownMenuSubmenuArrow,\n DropdownMenuSubmenuRoot,\n DropdownMenuSubmenuTrigger,\n DropdownMenuSwitchItem,\n} from './atoms';\nimport { styles } from './sharedStyle';\nimport {\n type DropdownItem,\n type DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n type DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst renderItemContent = (\n item: MenuItemType | BaseSubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\n options?: RenderItemContentOptions,\n iconNode?: ReactNode,\n) => {\n const label = getItemLabel(item);\n const desc = 'desc' in item ? item.desc : undefined;\n const extra = 'extra' in item ? item.extra : undefined;\n const indicatorOnRight = options?.indicatorOnRight;\n const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n\n const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n const shouldRenderIcon = hasCustomIcon\n ? Boolean(options?.reserveIconSpace || iconNode)\n : Boolean(hasIcon || options?.reserveIconSpace);\n\n const labelNode = desc ? (\n <DropdownMenuItemLabelGroup>\n <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n <DropdownMenuItemDesc>{desc}</DropdownMenuItemDesc>\n </DropdownMenuItemLabelGroup>\n ) : (\n <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n );\n\n return (\n <DropdownMenuItemContent className={alignStart ? styles.itemContentAlignStart : undefined}>\n {shouldRenderIcon ? (\n <DropdownMenuItemIcon\n aria-hidden={!hasIcon}\n className={alignStart ? styles.iconAlignStart : undefined}\n >\n {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n </DropdownMenuItemIcon>\n ) : null}\n {labelNode}\n {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n {indicatorOnRight && iconNode ? iconNode : null}\n {options?.submenu ? (\n <DropdownMenuSubmenuArrow>\n <SubmenuArrowIcon />\n </DropdownMenuSubmenuArrow>\n ) : null}\n </DropdownMenuItemContent>\n );\n};\n\nconst invokeItemClick = (\n item: MenuItemType,\n keyPath: string[],\n event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n if (!item.onClick) return;\n const key = item.key ?? keyPath.at(-1) ?? '';\n const info: MenuInfo = {\n domEvent: event,\n item: event.currentTarget as MenuInfo['item'],\n key: String(key),\n keyPath,\n };\n item.onClick(info);\n};\n\nexport const renderDropdownMenuItems = (\n items: DropdownItem[],\n keyPath: string[] = [],\n options?: RenderOptions,\n): ReactNode[] => {\n const iconAlign = options?.iconAlign;\n const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n const reserveIconSpace =\n options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n return items.map((item, index) => {\n if (!item) return null;\n\n const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n const itemKey = getItemKey(item, fallbackKey);\n const nextKeyPath = [...keyPath, String(itemKey)];\n\n if ((item as DropdownMenuCheckboxItemType).type === 'checkbox') {\n const checkboxItem = item as DropdownMenuCheckboxItemType;\n const label = getItemLabel(checkboxItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(checkboxItem.danger);\n const indicator = (\n <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n );\n\n return (\n <DropdownMenuCheckboxItemPrimitive\n checked={checkboxItem.checked}\n closeOnClick={checkboxItem.closeOnClick}\n danger={isDanger}\n defaultChecked={checkboxItem.defaultChecked}\n disabled={checkboxItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n >\n {renderItemContent(\n checkboxItem,\n { iconAlign, indicatorOnRight, reserveIconSpace },\n indicator,\n )}\n </DropdownMenuCheckboxItemPrimitive>\n );\n }\n\n if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n const switchItem = item as DropdownMenuSwitchItemType;\n const label = getItemLabel(switchItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(switchItem.danger);\n\n return (\n <DropdownMenuSwitchItem\n checked={switchItem.checked}\n closeOnClick={switchItem.closeOnClick}\n danger={isDanger}\n defaultChecked={switchItem.defaultChecked}\n disabled={switchItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={(checked) => switchItem.onCheckedChange?.(checked)}\n >\n {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n </DropdownMenuSwitchItem>\n );\n }\n\n if ((item as MenuDividerType).type === 'divider') {\n return <DropdownMenuSeparator key={itemKey} />;\n }\n\n if ((item as BaseMenuItemGroupType).type === 'group') {\n const group = item as BaseMenuItemGroupType;\n const groupReserveIconSpace =\n iconSpaceMode === 'group'\n ? group.children\n ? hasAnyIcon(group.children)\n : false\n : reserveIconSpace;\n const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n return (\n <DropdownMenuGroup key={itemKey}>\n {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n {group.children\n ? renderDropdownMenuItems(group.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n indicatorOnRight: groupIndicatorOnRight,\n reserveIconSpace: groupReserveIconSpace,\n })\n : null}\n </DropdownMenuGroup>\n );\n }\n\n if ((item as BaseSubMenuType).type === 'submenu' || 'children' in item) {\n const submenu = item as BaseSubMenuType;\n const label = getItemLabel(submenu);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n const submenuHasSlots = submenu.header != null || submenu.footer != null;\n const submenuItems = submenu.children\n ? renderDropdownMenuItems(submenu.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n })\n : null;\n\n return (\n <DropdownMenuSubmenuRoot\n defaultOpen={submenu.defaultOpen}\n key={itemKey}\n open={submenu.open}\n onOpenChange={submenu.onOpenChange}\n >\n <DropdownMenuSubmenuTrigger\n {...submenu.triggerProps}\n closeDelay={submenu.closeDelay}\n danger={isDanger}\n delay={submenu.delay}\n disabled={submenu.disabled}\n label={labelText}\n openOnHover={submenu.openOnHover}\n onClick={submenu.onClick}\n >\n {renderItemContent(submenu, {\n iconAlign,\n reserveIconSpace,\n submenu: true,\n })}\n </DropdownMenuSubmenuTrigger>\n <DropdownMenuPortal>\n <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n <DropdownMenuPopup className={submenuHasSlots ? styles.popupWithSlots : undefined}>\n {submenu.header == null ? null : (\n <DropdownMenuHeader>{submenu.header}</DropdownMenuHeader>\n )}\n {submenuHasSlots ? (\n <DropdownMenuScrollViewport>{submenuItems}</DropdownMenuScrollViewport>\n ) : (\n submenuItems\n )}\n {submenu.footer == null ? null : (\n <DropdownMenuFooter>{submenu.footer}</DropdownMenuFooter>\n )}\n </DropdownMenuPopup>\n </DropdownMenuPositioner>\n </DropdownMenuPortal>\n </DropdownMenuSubmenuRoot>\n );\n }\n\n const menuItem = item as MenuItemType;\n const label = getItemLabel(menuItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n return (\n <DropdownMenuItem\n closeOnClick={menuItem.closeOnClick}\n danger={isDanger}\n disabled={menuItem.disabled}\n key={itemKey}\n label={labelText}\n onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n >\n {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n </DropdownMenuItem>\n );\n });\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"renderItems.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n type KeyboardEvent as ReactKeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n} from 'react';\n\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport {\n type BaseMenuItemGroupType,\n type BaseSubMenuType,\n getItemKey,\n getItemLabel,\n hasAnyIcon,\n hasCheckboxAndIcon,\n type MenuDividerType,\n type MenuItemType,\n renderIcon,\n type RenderItemContentOptions,\n type RenderOptions,\n} from '@/Menu';\n\nimport {\n DropdownMenuCheckboxItemIndicator,\n DropdownMenuCheckboxItemPrimitive,\n DropdownMenuFooter,\n DropdownMenuGroup,\n DropdownMenuGroupLabel,\n DropdownMenuHeader,\n DropdownMenuItem,\n DropdownMenuItemContent,\n DropdownMenuItemDesc,\n DropdownMenuItemExtra,\n DropdownMenuItemIcon,\n DropdownMenuItemLabel,\n DropdownMenuItemLabelGroup,\n DropdownMenuPopup,\n DropdownMenuPortal,\n DropdownMenuPositioner,\n DropdownMenuScrollViewport,\n DropdownMenuSeparator,\n DropdownMenuSubmenuArrow,\n DropdownMenuSubmenuRoot,\n DropdownMenuSubmenuTrigger,\n DropdownMenuSwitchItem,\n} from './atoms';\nimport { styles } from './sharedStyle';\nimport {\n type DropdownItem,\n type DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n type DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst renderItemContent = (\n item: MenuItemType | BaseSubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\n options?: RenderItemContentOptions,\n iconNode?: ReactNode,\n) => {\n const label = getItemLabel(item);\n const desc = 'desc' in item ? item.desc : undefined;\n const extra = 'extra' in item ? item.extra : undefined;\n const indicatorOnRight = options?.indicatorOnRight;\n const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n\n const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n const shouldRenderIcon = hasCustomIcon\n ? Boolean(options?.reserveIconSpace || iconNode)\n : Boolean(hasIcon || options?.reserveIconSpace);\n\n const labelNode = desc ? (\n <DropdownMenuItemLabelGroup>\n <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n <DropdownMenuItemDesc>{desc}</DropdownMenuItemDesc>\n </DropdownMenuItemLabelGroup>\n ) : (\n <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n );\n\n return (\n <DropdownMenuItemContent className={alignStart ? styles.itemContentAlignStart : undefined}>\n {shouldRenderIcon ? (\n <DropdownMenuItemIcon\n aria-hidden={!hasIcon}\n className={alignStart ? styles.iconAlignStart : undefined}\n >\n {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n </DropdownMenuItemIcon>\n ) : null}\n {labelNode}\n {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n {indicatorOnRight && iconNode ? iconNode : null}\n {options?.submenu ? (\n <DropdownMenuSubmenuArrow>\n <SubmenuArrowIcon />\n </DropdownMenuSubmenuArrow>\n ) : null}\n </DropdownMenuItemContent>\n );\n};\n\nconst invokeItemClick = (\n item: MenuItemType,\n keyPath: string[],\n event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n if (!item.onClick) return;\n const key = item.key ?? keyPath.at(-1) ?? '';\n const info: MenuInfo = {\n domEvent: event,\n item: event.currentTarget as MenuInfo['item'],\n key: String(key),\n keyPath,\n };\n item.onClick(info);\n};\n\nexport const renderDropdownMenuItems = (\n items: DropdownItem[],\n keyPath: string[] = [],\n options?: RenderOptions,\n): ReactNode[] => {\n const iconAlign = options?.iconAlign;\n const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n const reserveIconSpace =\n options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n return items.map((item, index) => {\n if (!item) return null;\n\n const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n const itemKey = getItemKey(item, fallbackKey);\n const nextKeyPath = [...keyPath, String(itemKey)];\n\n if ((item as DropdownMenuCheckboxItemType).type === 'checkbox') {\n const checkboxItem = item as DropdownMenuCheckboxItemType;\n const label = getItemLabel(checkboxItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(checkboxItem.danger);\n const indicator = (\n <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n );\n\n return (\n <DropdownMenuCheckboxItemPrimitive\n checked={checkboxItem.checked}\n closeOnClick={checkboxItem.closeOnClick}\n danger={isDanger}\n defaultChecked={checkboxItem.defaultChecked}\n disabled={checkboxItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n >\n {renderItemContent(\n checkboxItem,\n { iconAlign, indicatorOnRight, reserveIconSpace },\n indicator,\n )}\n </DropdownMenuCheckboxItemPrimitive>\n );\n }\n\n if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n const switchItem = item as DropdownMenuSwitchItemType;\n const label = getItemLabel(switchItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(switchItem.danger);\n\n return (\n <DropdownMenuSwitchItem\n checked={switchItem.checked}\n closeOnClick={switchItem.closeOnClick}\n danger={isDanger}\n defaultChecked={switchItem.defaultChecked}\n disabled={switchItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={(checked) => switchItem.onCheckedChange?.(checked)}\n >\n {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n </DropdownMenuSwitchItem>\n );\n }\n\n if ((item as MenuDividerType).type === 'divider') {\n return <DropdownMenuSeparator key={itemKey} />;\n }\n\n if ((item as BaseMenuItemGroupType).type === 'group') {\n const group = item as BaseMenuItemGroupType;\n const groupReserveIconSpace =\n iconSpaceMode === 'group'\n ? group.children\n ? hasAnyIcon(group.children)\n : false\n : reserveIconSpace;\n const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n return (\n <DropdownMenuGroup key={itemKey}>\n {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n {group.children\n ? renderDropdownMenuItems(group.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n indicatorOnRight: groupIndicatorOnRight,\n reserveIconSpace: groupReserveIconSpace,\n })\n : null}\n </DropdownMenuGroup>\n );\n }\n\n if ((item as BaseSubMenuType).type === 'submenu' || 'children' in item) {\n const submenu = item as BaseSubMenuType;\n const label = getItemLabel(submenu);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n const submenuHasSlots = submenu.header != null || submenu.footer != null;\n const submenuItems = submenu.children\n ? renderDropdownMenuItems(submenu.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n })\n : null;\n\n return (\n <DropdownMenuSubmenuRoot\n defaultOpen={submenu.defaultOpen}\n key={itemKey}\n open={submenu.open}\n onOpenChange={submenu.onOpenChange}\n >\n <DropdownMenuSubmenuTrigger\n {...submenu.triggerProps}\n closeDelay={submenu.closeDelay}\n danger={isDanger}\n delay={submenu.delay}\n disabled={submenu.disabled}\n label={labelText}\n openOnHover={submenu.openOnHover}\n onClick={submenu.onClick}\n >\n {renderItemContent(submenu, {\n iconAlign,\n reserveIconSpace,\n submenu: true,\n })}\n </DropdownMenuSubmenuTrigger>\n <DropdownMenuPortal>\n <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n <DropdownMenuPopup className={submenuHasSlots ? styles.popupWithSlots : undefined}>\n {submenu.header == null ? null : (\n <DropdownMenuHeader>{submenu.header}</DropdownMenuHeader>\n )}\n {submenuHasSlots ? (\n <DropdownMenuScrollViewport>{submenuItems}</DropdownMenuScrollViewport>\n ) : (\n submenuItems\n )}\n {submenu.footer == null ? null : (\n <DropdownMenuFooter>{submenu.footer}</DropdownMenuFooter>\n )}\n </DropdownMenuPopup>\n </DropdownMenuPositioner>\n </DropdownMenuPortal>\n </DropdownMenuSubmenuRoot>\n );\n }\n\n const menuItem = item as MenuItemType;\n const label = getItemLabel(menuItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n return (\n <DropdownMenuItem\n closeOnClick={menuItem.closeOnClick}\n danger={isDanger}\n disabled={menuItem.disabled}\n key={itemKey}\n label={labelText}\n onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n >\n {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n </DropdownMenuItem>\n );\n });\n};\n"],"mappings":"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"}
|
|
@@ -50,7 +50,10 @@ function FloatingSheet({ open: openProp, onOpenChange, defaultOpen = false, snap
|
|
|
50
50
|
});
|
|
51
51
|
const restingHeight = useMemo(() => {
|
|
52
52
|
if (!containerHeight) return 0;
|
|
53
|
-
if (hasSnapPoints && activeSnapPointProp !== void 0)
|
|
53
|
+
if (hasSnapPoints && activeSnapPointProp !== void 0) {
|
|
54
|
+
const resolved = resolveSize(activeSnapPointProp, containerHeight);
|
|
55
|
+
return clamp(resolved, minHeightPx, maxHeightPx);
|
|
56
|
+
}
|
|
54
57
|
if (hasSnapPoints && snapPointHeights.length > 0) return snapPointHeights[0];
|
|
55
58
|
return restingHeightPx;
|
|
56
59
|
}, [
|