@lobehub/ui 5.12.3 → 5.14.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/Accordion/Accordion.mjs +2 -2
- package/es/Accordion/Accordion.mjs.map +1 -1
- package/es/Accordion/AccordionItem.mjs +2 -2
- package/es/Accordion/AccordionItem.mjs.map +1 -1
- package/es/Checkbox/Checkbox.mjs +2 -2
- package/es/Checkbox/Checkbox.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs +2 -2
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/CodeEditor/CodeEditor.mjs +2 -2
- package/es/CodeEditor/CodeEditor.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs +2 -2
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/DraggablePanel/DraggablePanel.mjs +2 -2
- package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs +2 -2
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs +2 -2
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/DropdownMenu/index.d.mts +2 -2
- package/es/DropdownMenu/index.mjs +2 -2
- package/es/EditableText/EditableText.mjs +2 -2
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs +3 -3
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs +2 -2
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/ImageSelect/ImageSelect.mjs +2 -2
- package/es/ImageSelect/ImageSelect.mjs.map +1 -1
- package/es/Menu/baseItem.d.mts +4 -0
- package/es/Menu/sharedStyle.d.mts +4 -0
- package/es/Menu/sharedStyle.mjs +23 -0
- package/es/Menu/sharedStyle.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs +2 -2
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/Toc/TocMobile.mjs +2 -2
- package/es/Toc/TocMobile.mjs.map +1 -1
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs +19 -4
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map +1 -1
- package/es/base-ui/ContextMenu/ContextMenuTrigger.d.mts +8 -0
- package/es/base-ui/ContextMenu/ContextMenuTrigger.mjs +11 -3
- package/es/base-ui/ContextMenu/ContextMenuTrigger.mjs.map +1 -1
- package/es/base-ui/ContextMenu/renderItems.mjs +21 -6
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/ContextMenu/store.d.mts +3 -0
- package/es/base-ui/ContextMenu/store.mjs +4 -0
- package/es/base-ui/ContextMenu/store.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs +12 -4
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/atoms.d.mts +25 -1
- package/es/base-ui/DropdownMenu/atoms.mjs +22 -1
- package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/index.d.mts +1 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs +14 -5
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/type.d.mts +8 -0
- package/es/base-ui/Switch/atoms.mjs +2 -2
- package/es/base-ui/Switch/atoms.mjs.map +1 -1
- package/es/base-ui/index.d.mts +2 -2
- package/es/base-ui/index.mjs +2 -2
- package/es/chat/EditableMessage/EditableMessage.mjs +3 -3
- package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +3 -3
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/index.d.mts +2 -2
- package/es/index.mjs +2 -2
- package/es/mobile/TabBar/TabBar.mjs +2 -2
- package/es/mobile/TabBar/TabBar.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,8 @@ import { registerDevSingleton } from "../../utils/devSingleton.mjs";
|
|
|
8
8
|
import { renderContextMenuItems } from "./renderItems.mjs";
|
|
9
9
|
import { closeContextMenu, getServerSnapshot, getSnapshot, setContextMenuState, subscribe, updateLastPointer } from "./store.mjs";
|
|
10
10
|
import { memo, useEffect, useMemo, useSyncExternalStore } from "react";
|
|
11
|
-
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { cx } from "antd-style";
|
|
12
13
|
import { ContextMenu } from "@base-ui/react/context-menu";
|
|
13
14
|
//#region src/base-ui/ContextMenu/ContextMenuHost.tsx
|
|
14
15
|
const noAnimationStyles = { "--lobe-dropdown-animation-duration": "0ms" };
|
|
@@ -39,6 +40,7 @@ const ContextMenuHost = memo(() => {
|
|
|
39
40
|
state.iconSpaceMode
|
|
40
41
|
]);
|
|
41
42
|
const { zIndex, ref: zRef } = useLayerZIndex("floating");
|
|
43
|
+
const hasSlots = state.header != null || state.footer != null;
|
|
42
44
|
if (!isClient) return null;
|
|
43
45
|
if (!state.open && state.items.length === 0) return null;
|
|
44
46
|
return /* @__PURE__ */ jsx(ContextMenu.Root, {
|
|
@@ -61,10 +63,23 @@ const ContextMenuHost = memo(() => {
|
|
|
61
63
|
...noAnimationStyles,
|
|
62
64
|
zIndex
|
|
63
65
|
},
|
|
64
|
-
children: /* @__PURE__ */
|
|
65
|
-
className: styles.popup,
|
|
66
|
+
children: /* @__PURE__ */ jsxs(ContextMenu.Popup, {
|
|
67
|
+
className: cx(styles.popup, hasSlots && styles.popupWithSlots),
|
|
66
68
|
onContextMenu: preventDefaultAndStopPropagation,
|
|
67
|
-
children:
|
|
69
|
+
children: [
|
|
70
|
+
state.header == null ? null : /* @__PURE__ */ jsx("div", {
|
|
71
|
+
className: styles.header,
|
|
72
|
+
children: state.header
|
|
73
|
+
}),
|
|
74
|
+
hasSlots ? /* @__PURE__ */ jsx("div", {
|
|
75
|
+
className: styles.slotViewport,
|
|
76
|
+
children: menuItems
|
|
77
|
+
}) : menuItems,
|
|
78
|
+
state.footer == null ? null : /* @__PURE__ */ jsx("div", {
|
|
79
|
+
className: styles.footer,
|
|
80
|
+
children: state.footer
|
|
81
|
+
})
|
|
82
|
+
]
|
|
68
83
|
})
|
|
69
84
|
})
|
|
70
85
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n closeContextMenu,\n getServerSnapshot,\n getSnapshot,\n setContextMenuState,\n subscribe,\n updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n const isClient = useIsClient();\n const appElement = useAppElement();\n const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n useEffect(() => {\n const DEV = process.env.NODE_ENV === 'development';\n if (!isClient || !DEV) return;\n return registerDevSingleton('ContextMenuHost', document.body);\n }, [isClient]);\n\n useEffect(() => {\n const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n window.addEventListener('pointerdown', handler, true);\n window.addEventListener('contextmenu', handler, true);\n return () => {\n window.removeEventListener('pointerdown', handler, true);\n window.removeEventListener('contextmenu', handler, true);\n };\n }, []);\n\n const menuItems = useMemo(\n () =>\n renderContextMenuItems(state.items, [], {\n iconAlign: state.iconAlign,\n iconSpaceMode: state.iconSpaceMode,\n }),\n [state.items, state.iconAlign, state.iconSpaceMode],\n );\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n if (!isClient) return null;\n if (!state.open && state.items.length === 0) return null;\n\n return (\n <ContextMenu.Root\n open={state.open}\n onOpenChange={(open) => {\n if (open) {\n setContextMenuState({ open });\n return;\n }\n closeContextMenu();\n }}\n >\n <ContextMenu.Portal container={appElement}>\n <ContextMenu.Positioner\n anchor={state.anchor ?? undefined}\n className={styles.positioner}\n ref={zRef as any}\n sideOffset={6}\n style={{ ...noAnimationStyles, zIndex }}\n >\n <ContextMenu.Popup\n className={styles.popup}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n {menuItems}\n </ContextMenu.Popup>\n </ContextMenu.Positioner>\n </ContextMenu.Portal>\n </ContextMenu.Root>\n );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n closeContextMenu,\n getServerSnapshot,\n getSnapshot,\n setContextMenuState,\n subscribe,\n updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n const isClient = useIsClient();\n const appElement = useAppElement();\n const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n useEffect(() => {\n const DEV = process.env.NODE_ENV === 'development';\n if (!isClient || !DEV) return;\n return registerDevSingleton('ContextMenuHost', document.body);\n }, [isClient]);\n\n useEffect(() => {\n const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n window.addEventListener('pointerdown', handler, true);\n window.addEventListener('contextmenu', handler, true);\n return () => {\n window.removeEventListener('pointerdown', handler, true);\n window.removeEventListener('contextmenu', handler, true);\n };\n }, []);\n\n const menuItems = useMemo(\n () =>\n renderContextMenuItems(state.items, [], {\n iconAlign: state.iconAlign,\n iconSpaceMode: state.iconSpaceMode,\n }),\n [state.items, state.iconAlign, state.iconSpaceMode],\n );\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n const hasSlots = state.header != null || state.footer != null;\n if (!isClient) return null;\n if (!state.open && state.items.length === 0) return null;\n\n return (\n <ContextMenu.Root\n open={state.open}\n onOpenChange={(open) => {\n if (open) {\n setContextMenuState({ open });\n return;\n }\n closeContextMenu();\n }}\n >\n <ContextMenu.Portal container={appElement}>\n <ContextMenu.Positioner\n anchor={state.anchor ?? undefined}\n className={styles.positioner}\n ref={zRef as any}\n sideOffset={6}\n style={{ ...noAnimationStyles, zIndex }}\n >\n <ContextMenu.Popup\n className={cx(styles.popup, hasSlots && styles.popupWithSlots)}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n {state.header == null ? null : <div className={styles.header}>{state.header}</div>}\n {hasSlots ? <div className={styles.slotViewport}>{menuItems}</div> : menuItems}\n {state.footer == null ? null : <div className={styles.footer}>{state.footer}</div>}\n </ContextMenu.Popup>\n </ContextMenu.Positioner>\n </ContextMenu.Portal>\n </ContextMenu.Root>\n );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,oBAAoB,EAAE,sCAAsC,OAAO;AAEzE,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,aAAa;CAC9B,MAAM,aAAa,eAAe;CAClC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,kBAAkB;AAE7E,iBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;AACrC,MAAI,CAAC,YAAY,CAAC,IAAK;AACvB,SAAO,qBAAqB,mBAAmB,SAAS,KAAK;IAC5D,CAAC,SAAS,CAAC;AAEd,iBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,MAAM;AAC9E,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,eAAa;AACX,UAAO,oBAAoB,eAAe,SAAS,KAAK;AACxD,UAAO,oBAAoB,eAAe,SAAS,KAAK;;IAEzD,EAAE,CAAC;CAEN,MAAM,YAAY,cAEd,uBAAuB,MAAM,OAAO,EAAE,EAAE;EACtC,WAAW,MAAM;EACjB,eAAe,MAAM;EACtB,CAAC,EACJ;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;EAAc,CACpD;CACD,MAAM,EAAE,QAAQ,KAAK,SAAS,eAA+B,WAAW;CACxE,MAAM,WAAW,MAAM,UAAU,QAAQ,MAAM,UAAU;AACzD,KAAI,CAAC,SAAU,QAAO;AACtB,KAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,EAAG,QAAO;AAEpD,QACE,oBAAC,YAAY,MAAb;EACE,MAAM,MAAM;EACZ,eAAe,SAAS;AACtB,OAAI,MAAM;AACR,wBAAoB,EAAE,MAAM,CAAC;AAC7B;;AAEF,qBAAkB;;YAGpB,oBAAC,YAAY,QAAb;GAAoB,WAAW;aAC7B,oBAAC,YAAY,YAAb;IACE,QAAQ,MAAM,UAAU,KAAA;IACxB,WAAW,OAAO;IAClB,KAAK;IACL,YAAY;IACZ,OAAO;KAAE,GAAG;KAAmB;KAAQ;cAEvC,qBAAC,YAAY,OAAb;KACE,WAAW,GAAG,OAAO,OAAO,YAAY,OAAO,eAAe;KAC9D,eAAe;eAFjB;MAIG,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;iBAAS,MAAM;OAAa,CAAA;MACjF,WAAW,oBAAC,OAAD;OAAK,WAAW,OAAO;iBAAe;OAAgB,CAAA,GAAG;MACpE,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;iBAAS,MAAM;OAAa,CAAA;MAChE;;IACG,CAAA;GACN,CAAA;EACJ,CAAA;EAErB;AAEF,gBAAgB,cAAc"}
|
|
@@ -4,6 +4,14 @@ import React, { HTMLAttributes, MouseEvent, ReactNode } from "react";
|
|
|
4
4
|
//#region src/base-ui/ContextMenu/ContextMenuTrigger.d.ts
|
|
5
5
|
type ContextMenuTriggerProps = {
|
|
6
6
|
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Footer slot pinned below the scrollable items area, with a divider border.
|
|
9
|
+
*/
|
|
10
|
+
footer?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Header slot pinned above the scrollable items area, with a divider border.
|
|
13
|
+
*/
|
|
14
|
+
header?: ReactNode;
|
|
7
15
|
/**
|
|
8
16
|
* Menu items to display. Supports lazy rendering via function.
|
|
9
17
|
* When provided, context menu will be automatically shown on right-click.
|
|
@@ -7,17 +7,25 @@ import { mergeProps } from "@base-ui/react/merge-props";
|
|
|
7
7
|
import clsx from "clsx";
|
|
8
8
|
//#region src/base-ui/ContextMenu/ContextMenuTrigger.tsx
|
|
9
9
|
const styles = { trigger: { display: "contents" } };
|
|
10
|
-
const ContextMenuTrigger = memo(({ children, items, onContextMenu, ...rest }) => {
|
|
10
|
+
const ContextMenuTrigger = memo(({ children, footer, header, items, onContextMenu, ...rest }) => {
|
|
11
11
|
const triggerId = useId();
|
|
12
12
|
const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
13
13
|
const open = state.open && state.triggerId === triggerId;
|
|
14
14
|
const handleContextMenu = useCallback((event) => {
|
|
15
15
|
if (items) {
|
|
16
16
|
event.preventDefault();
|
|
17
|
-
showContextMenu(typeof items === "function" ? items() : items
|
|
17
|
+
showContextMenu(typeof items === "function" ? items() : items, {
|
|
18
|
+
footer,
|
|
19
|
+
header
|
|
20
|
+
});
|
|
18
21
|
}
|
|
19
22
|
onContextMenu?.(event);
|
|
20
|
-
}, [
|
|
23
|
+
}, [
|
|
24
|
+
items,
|
|
25
|
+
onContextMenu,
|
|
26
|
+
footer,
|
|
27
|
+
header
|
|
28
|
+
]);
|
|
21
29
|
const triggerProps = {
|
|
22
30
|
...rest,
|
|
23
31
|
"aria-expanded": open || void 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuTrigger.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport clsx from 'clsx';\nimport React, {\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n memo,\n type MouseEvent,\n type ReactNode,\n useCallback,\n useId,\n useSyncExternalStore,\n} from 'react';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\nimport { getServerSnapshot, getSnapshot, showContextMenu, subscribe } from './store';\nimport { type ContextMenuItem } from './type';\n\nexport type ContextMenuTriggerProps = {\n children: ReactNode;\n /**\n * Menu items to display. Supports lazy rendering via function.\n * When provided, context menu will be automatically shown on right-click.\n */\n items?: ContextMenuItem[] | (() => ContextMenuItem[]);\n /**\n * Custom context menu handler. If `items` is provided, this is optional.\n */\n onContextMenu?: (event: MouseEvent<HTMLElement>) => void;\n} & Omit<HTMLAttributes<HTMLElement>, 'onContextMenu' | 'children'>;\n\nconst styles = {\n trigger: {\n display: 'contents',\n },\n};\n\nexport const ContextMenuTrigger = memo<ContextMenuTriggerProps>(\n ({ children, items, onContextMenu, ...rest }) => {\n const triggerId = useId();\n const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const open = state.open && state.triggerId === triggerId;\n\n const handleContextMenu = useCallback(\n (event: MouseEvent<HTMLElement>) => {\n if (items) {\n event.preventDefault();\n const resolvedItems = typeof items === 'function' ? items() : items;\n showContextMenu(resolvedItems);\n }\n onContextMenu?.(event);\n },\n [items, onContextMenu],\n );\n\n const triggerProps = {\n ...rest,\n 'aria-expanded': open || undefined,\n 'className': clsx(CLASSNAMES.ContextTrigger, rest.className),\n 'data-contextmenu-trigger': triggerId,\n 'data-popup-open': open ? '' : undefined,\n 'data-state': open ? 'open' : undefined,\n 'onContextMenu': handleContextMenu,\n };\n\n if (isValidElement(children) && React.Children.only(children)) {\n return cloneElement(children, mergeProps(children.props as any, triggerProps));\n }\n\n return (\n <span style={styles.trigger} {...triggerProps}>\n {children}\n </span>\n );\n },\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"ContextMenuTrigger.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport clsx from 'clsx';\nimport React, {\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n memo,\n type MouseEvent,\n type ReactNode,\n useCallback,\n useId,\n useSyncExternalStore,\n} from 'react';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\nimport { getServerSnapshot, getSnapshot, showContextMenu, subscribe } from './store';\nimport { type ContextMenuItem } from './type';\n\nexport type ContextMenuTriggerProps = {\n children: ReactNode;\n /**\n * Footer slot pinned below the scrollable items area, with a divider border.\n */\n footer?: ReactNode;\n /**\n * Header slot pinned above the scrollable items area, with a divider border.\n */\n header?: ReactNode;\n /**\n * Menu items to display. Supports lazy rendering via function.\n * When provided, context menu will be automatically shown on right-click.\n */\n items?: ContextMenuItem[] | (() => ContextMenuItem[]);\n /**\n * Custom context menu handler. If `items` is provided, this is optional.\n */\n onContextMenu?: (event: MouseEvent<HTMLElement>) => void;\n} & Omit<HTMLAttributes<HTMLElement>, 'onContextMenu' | 'children'>;\n\nconst styles = {\n trigger: {\n display: 'contents',\n },\n};\n\nexport const ContextMenuTrigger = memo<ContextMenuTriggerProps>(\n ({ children, footer, header, items, onContextMenu, ...rest }) => {\n const triggerId = useId();\n const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const open = state.open && state.triggerId === triggerId;\n\n const handleContextMenu = useCallback(\n (event: MouseEvent<HTMLElement>) => {\n if (items) {\n event.preventDefault();\n const resolvedItems = typeof items === 'function' ? items() : items;\n showContextMenu(resolvedItems, { footer, header });\n }\n onContextMenu?.(event);\n },\n [items, onContextMenu, footer, header],\n );\n\n const triggerProps = {\n ...rest,\n 'aria-expanded': open || undefined,\n 'className': clsx(CLASSNAMES.ContextTrigger, rest.className),\n 'data-contextmenu-trigger': triggerId,\n 'data-popup-open': open ? '' : undefined,\n 'data-state': open ? 'open' : undefined,\n 'onContextMenu': handleContextMenu,\n };\n\n if (isValidElement(children) && React.Children.only(children)) {\n return cloneElement(children, mergeProps(children.props as any, triggerProps));\n }\n\n return (\n <span style={styles.trigger} {...triggerProps}>\n {children}\n </span>\n );\n },\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\n"],"mappings":";;;;;;;;AA0CA,MAAM,SAAS,EACb,SAAS,EACP,SAAS,YACV,EACF;AAED,MAAa,qBAAqB,MAC/B,EAAE,UAAU,QAAQ,QAAQ,OAAO,eAAe,GAAG,WAAW;CAC/D,MAAM,YAAY,OAAO;CACzB,MAAM,QAAQ,qBAAqB,WAAW,aAAa,kBAAkB;CAC7E,MAAM,OAAO,MAAM,QAAQ,MAAM,cAAc;CAE/C,MAAM,oBAAoB,aACvB,UAAmC;AAClC,MAAI,OAAO;AACT,SAAM,gBAAgB;AAEtB,mBADsB,OAAO,UAAU,aAAa,OAAO,GAAG,OAC/B;IAAE;IAAQ;IAAQ,CAAC;;AAEpD,kBAAgB,MAAM;IAExB;EAAC;EAAO;EAAe;EAAQ;EAAO,CACvC;CAED,MAAM,eAAe;EACnB,GAAG;EACH,iBAAiB,QAAQ,KAAA;EACzB,aAAa,KAAK,WAAW,gBAAgB,KAAK,UAAU;EAC5D,4BAA4B;EAC5B,mBAAmB,OAAO,KAAK,KAAA;EAC/B,cAAc,OAAO,SAAS,KAAA;EAC9B,iBAAiB;EAClB;AAED,KAAI,eAAe,SAAS,IAAI,MAAM,SAAS,KAAK,SAAS,CAC3D,QAAO,aAAa,UAAU,WAAW,SAAS,OAAc,aAAa,CAAC;AAGhF,QACE,oBAAC,QAAD;EAAM,OAAO,OAAO;EAAS,GAAI;EAC9B;EACI,CAAA;EAGZ;AAED,mBAAmB,cAAc"}
|
|
@@ -186,6 +186,11 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
|
|
|
186
186
|
const label = getItemLabel(submenu);
|
|
187
187
|
const labelText = typeof label === "string" ? label : void 0;
|
|
188
188
|
const isDanger = "danger" in submenu && Boolean(submenu.danger);
|
|
189
|
+
const submenuHasSlots = submenu.header != null || submenu.footer != null;
|
|
190
|
+
const submenuBody = submenu.children && submenu.children.length > 0 ? renderContextMenuItems(submenu.children, nextKeyPath, {
|
|
191
|
+
iconAlign,
|
|
192
|
+
iconSpaceMode
|
|
193
|
+
}) : /* @__PURE__ */ jsx(EmptyMenuItem, {});
|
|
189
194
|
return /* @__PURE__ */ jsxs(ContextMenu.SubmenuRoot, {
|
|
190
195
|
defaultOpen: submenu.defaultOpen,
|
|
191
196
|
open: submenu.open,
|
|
@@ -210,12 +215,22 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
|
|
|
210
215
|
"data-submenu": "",
|
|
211
216
|
sideOffset: -1,
|
|
212
217
|
onContextMenu: preventDefaultAndStopPropagation,
|
|
213
|
-
children: /* @__PURE__ */
|
|
214
|
-
className: styles.popup,
|
|
215
|
-
children:
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
218
|
+
children: /* @__PURE__ */ jsxs(ContextMenu.Popup, {
|
|
219
|
+
className: submenuHasSlots ? cx(styles.popup, styles.popupWithSlots) : styles.popup,
|
|
220
|
+
children: [
|
|
221
|
+
submenu.header == null ? null : /* @__PURE__ */ jsx("div", {
|
|
222
|
+
className: styles.header,
|
|
223
|
+
children: submenu.header
|
|
224
|
+
}),
|
|
225
|
+
submenuHasSlots ? /* @__PURE__ */ jsx("div", {
|
|
226
|
+
className: styles.slotViewport,
|
|
227
|
+
children: submenuBody
|
|
228
|
+
}) : submenuBody,
|
|
229
|
+
submenu.footer == null ? null : /* @__PURE__ */ jsx("div", {
|
|
230
|
+
className: styles.footer,
|
|
231
|
+
children: submenu.footer
|
|
232
|
+
})
|
|
233
|
+
]
|
|
219
234
|
})
|
|
220
235
|
}) })]
|
|
221
236
|
}, itemKey);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderItems.mjs","names":["common"],"sources":["../../../src/base-ui/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport { Check, ChevronRight } 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';\nimport { memo, useCallback, useState } from 'react';\n\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\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';\nimport { styles } from '@/Menu/sharedStyle';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport {\n type ContextMenuCheckboxItem,\n type ContextMenuItem,\n type ContextMenuSwitchItem,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst EmptyMenuItem = memo(() => {\n const { t } = useTranslation(common);\n return (\n <ContextMenu.Item disabled className={cx(styles.item, styles.empty)}>\n <div className={styles.itemContent}>\n <span className={styles.label}>{t('common.empty')}</span>\n </div>\n </ContextMenu.Item>\n );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n checked?: boolean;\n children: ReactNode;\n closeOnClick?: boolean;\n danger?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n label?: string;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n checked: checkedProp,\n children,\n closeOnClick = false,\n danger,\n defaultChecked,\n disabled,\n label,\n onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\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 <ContextMenu.Item\n className={cx(styles.item, danger && styles.danger)}\n closeOnClick={closeOnClick}\n disabled={disabled}\n label={label}\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 </ContextMenu.Item>\n );\n};\n\nconst renderItemContent = (\n item: MenuItemType | BaseSubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\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 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 <div className={styles.labelGroup}>\n <span className={styles.label}>{label}</span>\n <span className={styles.desc}>{desc}</span>\n </div>\n ) : (\n <span className={styles.label}>{label}</span>\n );\n\n return (\n <div className={cx(styles.itemContent, alignStart && styles.itemContentAlignStart)}>\n {shouldRenderIcon ? (\n <span\n aria-hidden={!hasIcon}\n className={cx(styles.icon, alignStart && styles.iconAlignStart)}\n >\n {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, 'small') : null}\n </span>\n ) : null}\n {labelNode}\n {extra ? <span className={styles.extra}>{extra}</span> : null}\n {indicatorOnRight && iconNode ? iconNode : null}\n {options?.submenu ? (\n <span className={styles.submenuArrow}>\n <ChevronRight size={16} />\n </span>\n ) : null}\n </div>\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 renderContextMenuItems = (\n items: ContextMenuItem[],\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 ContextMenuCheckboxItem).type === 'checkbox') {\n const checkboxItem = item as ContextMenuCheckboxItem;\n const label = getItemLabel(checkboxItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(checkboxItem.danger);\n const indicator = (\n <ContextMenu.CheckboxItemIndicator>\n <Icon icon={Check} size={'small'} />\n </ContextMenu.CheckboxItemIndicator>\n );\n\n return (\n <ContextMenu.CheckboxItem\n checked={checkboxItem.checked}\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={checkboxItem.closeOnClick}\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 </ContextMenu.CheckboxItem>\n );\n }\n\n if ((item as ContextMenuSwitchItem).type === 'switch') {\n const switchItem = item as ContextMenuSwitchItem;\n const label = getItemLabel(switchItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(switchItem.danger);\n\n return (\n <ContextMenuSwitchItemInternal\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={switchItem.onCheckedChange}\n >\n {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n </ContextMenuSwitchItemInternal>\n );\n }\n\n if ((item as MenuDividerType).type === 'divider') {\n return <ContextMenu.Separator className={styles.separator} 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 <ContextMenu.Group key={itemKey}>\n {group.label ? (\n <ContextMenu.GroupLabel className={styles.groupLabel}>\n {group.label}\n </ContextMenu.GroupLabel>\n ) : null}\n {group.children\n ? renderContextMenuItems(group.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n indicatorOnRight: groupIndicatorOnRight,\n reserveIconSpace: groupReserveIconSpace,\n })\n : null}\n </ContextMenu.Group>\n );\n }\n\n if (\n (item as BaseSubMenuType).type === 'submenu' ||\n ('children' in item && (item as BaseSubMenuType).children)\n ) {\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\n return (\n <ContextMenu.SubmenuRoot\n defaultOpen={submenu.defaultOpen}\n key={itemKey}\n open={submenu.open}\n onOpenChange={submenu.onOpenChange}\n >\n <ContextMenu.SubmenuTrigger\n {...submenu.triggerProps}\n className={cx(styles.item, isDanger && styles.danger)}\n closeDelay={submenu.closeDelay}\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 </ContextMenu.SubmenuTrigger>\n <ContextMenu.Portal>\n <ContextMenu.Positioner\n alignOffset={-4}\n className={styles.positioner}\n data-submenu=\"\"\n sideOffset={-1}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n <ContextMenu.Popup className={styles.popup}>\n {submenu.children && submenu.children.length > 0 ? (\n renderContextMenuItems(submenu.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n })\n ) : (\n <EmptyMenuItem />\n )}\n </ContextMenu.Popup>\n </ContextMenu.Positioner>\n </ContextMenu.Portal>\n </ContextMenu.SubmenuRoot>\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 <ContextMenu.Item\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={menuItem.closeOnClick}\n disabled={menuItem.disabled}\n key={itemKey}\n label={labelText}\n onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n >\n {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n </ContextMenu.Item>\n );\n });\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"renderItems.mjs","names":["common"],"sources":["../../../src/base-ui/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport { Check, ChevronRight } 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';\nimport { memo, useCallback, useState } from 'react';\n\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\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';\nimport { styles } from '@/Menu/sharedStyle';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport {\n type ContextMenuCheckboxItem,\n type ContextMenuItem,\n type ContextMenuSwitchItem,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst EmptyMenuItem = memo(() => {\n const { t } = useTranslation(common);\n return (\n <ContextMenu.Item disabled className={cx(styles.item, styles.empty)}>\n <div className={styles.itemContent}>\n <span className={styles.label}>{t('common.empty')}</span>\n </div>\n </ContextMenu.Item>\n );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n checked?: boolean;\n children: ReactNode;\n closeOnClick?: boolean;\n danger?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n label?: string;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n checked: checkedProp,\n children,\n closeOnClick = false,\n danger,\n defaultChecked,\n disabled,\n label,\n onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\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 <ContextMenu.Item\n className={cx(styles.item, danger && styles.danger)}\n closeOnClick={closeOnClick}\n disabled={disabled}\n label={label}\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 </ContextMenu.Item>\n );\n};\n\nconst renderItemContent = (\n item: MenuItemType | BaseSubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\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 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 <div className={styles.labelGroup}>\n <span className={styles.label}>{label}</span>\n <span className={styles.desc}>{desc}</span>\n </div>\n ) : (\n <span className={styles.label}>{label}</span>\n );\n\n return (\n <div className={cx(styles.itemContent, alignStart && styles.itemContentAlignStart)}>\n {shouldRenderIcon ? (\n <span\n aria-hidden={!hasIcon}\n className={cx(styles.icon, alignStart && styles.iconAlignStart)}\n >\n {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, 'small') : null}\n </span>\n ) : null}\n {labelNode}\n {extra ? <span className={styles.extra}>{extra}</span> : null}\n {indicatorOnRight && iconNode ? iconNode : null}\n {options?.submenu ? (\n <span className={styles.submenuArrow}>\n <ChevronRight size={16} />\n </span>\n ) : null}\n </div>\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 renderContextMenuItems = (\n items: ContextMenuItem[],\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 ContextMenuCheckboxItem).type === 'checkbox') {\n const checkboxItem = item as ContextMenuCheckboxItem;\n const label = getItemLabel(checkboxItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(checkboxItem.danger);\n const indicator = (\n <ContextMenu.CheckboxItemIndicator>\n <Icon icon={Check} size={'small'} />\n </ContextMenu.CheckboxItemIndicator>\n );\n\n return (\n <ContextMenu.CheckboxItem\n checked={checkboxItem.checked}\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={checkboxItem.closeOnClick}\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 </ContextMenu.CheckboxItem>\n );\n }\n\n if ((item as ContextMenuSwitchItem).type === 'switch') {\n const switchItem = item as ContextMenuSwitchItem;\n const label = getItemLabel(switchItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(switchItem.danger);\n\n return (\n <ContextMenuSwitchItemInternal\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={switchItem.onCheckedChange}\n >\n {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n </ContextMenuSwitchItemInternal>\n );\n }\n\n if ((item as MenuDividerType).type === 'divider') {\n return <ContextMenu.Separator className={styles.separator} 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 <ContextMenu.Group key={itemKey}>\n {group.label ? (\n <ContextMenu.GroupLabel className={styles.groupLabel}>\n {group.label}\n </ContextMenu.GroupLabel>\n ) : null}\n {group.children\n ? renderContextMenuItems(group.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n indicatorOnRight: groupIndicatorOnRight,\n reserveIconSpace: groupReserveIconSpace,\n })\n : null}\n </ContextMenu.Group>\n );\n }\n\n if (\n (item as BaseSubMenuType).type === 'submenu' ||\n ('children' in item && (item as BaseSubMenuType).children)\n ) {\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 submenuBody =\n submenu.children && submenu.children.length > 0 ? (\n renderContextMenuItems(submenu.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n })\n ) : (\n <EmptyMenuItem />\n );\n\n return (\n <ContextMenu.SubmenuRoot\n defaultOpen={submenu.defaultOpen}\n key={itemKey}\n open={submenu.open}\n onOpenChange={submenu.onOpenChange}\n >\n <ContextMenu.SubmenuTrigger\n {...submenu.triggerProps}\n className={cx(styles.item, isDanger && styles.danger)}\n closeDelay={submenu.closeDelay}\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 </ContextMenu.SubmenuTrigger>\n <ContextMenu.Portal>\n <ContextMenu.Positioner\n alignOffset={-4}\n className={styles.positioner}\n data-submenu=\"\"\n sideOffset={-1}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n <ContextMenu.Popup\n className={submenuHasSlots ? cx(styles.popup, styles.popupWithSlots) : styles.popup}\n >\n {submenu.header == null ? null : (\n <div className={styles.header}>{submenu.header}</div>\n )}\n {submenuHasSlots ? (\n <div className={styles.slotViewport}>{submenuBody}</div>\n ) : (\n submenuBody\n )}\n {submenu.footer == null ? null : (\n <div className={styles.footer}>{submenu.footer}</div>\n )}\n </ContextMenu.Popup>\n </ContextMenu.Positioner>\n </ContextMenu.Portal>\n </ContextMenu.SubmenuRoot>\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 <ContextMenu.Item\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={menuItem.closeOnClick}\n disabled={menuItem.disabled}\n key={itemKey}\n label={labelText}\n onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n >\n {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n </ContextMenu.Item>\n );\n });\n};\n"],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { IconAlign, IconSpaceMode } from "../../Menu/renderUtils.mjs";
|
|
2
2
|
import { ContextMenuItem } from "./type.mjs";
|
|
3
|
+
import { ReactNode } from "react";
|
|
3
4
|
//#region src/base-ui/ContextMenu/store.d.ts
|
|
4
5
|
interface ShowContextMenuOptions {
|
|
6
|
+
footer?: ReactNode;
|
|
7
|
+
header?: ReactNode;
|
|
5
8
|
iconAlign?: IconAlign;
|
|
6
9
|
iconSpaceMode?: IconSpaceMode;
|
|
7
10
|
}
|
|
@@ -62,6 +62,8 @@ const showContextMenu = (items, options) => {
|
|
|
62
62
|
x: lastPointer.x,
|
|
63
63
|
y: lastPointer.y
|
|
64
64
|
} : fallbackPoint),
|
|
65
|
+
footer: options?.footer,
|
|
66
|
+
header: options?.header,
|
|
65
67
|
iconAlign: options?.iconAlign,
|
|
66
68
|
iconSpaceMode: options?.iconSpaceMode ?? "global",
|
|
67
69
|
items,
|
|
@@ -80,6 +82,8 @@ const updateContextMenuItems = (items) => {
|
|
|
80
82
|
const closeContextMenu = () => {
|
|
81
83
|
setContextMenuState({
|
|
82
84
|
anchor: null,
|
|
85
|
+
footer: void 0,
|
|
86
|
+
header: void 0,
|
|
83
87
|
iconSpaceMode: "global",
|
|
84
88
|
items: [],
|
|
85
89
|
open: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/store.ts"],"sourcesContent":["import type { VirtualElement } from '@floating-ui/react';\n\nimport type { IconAlign } from '@/Menu';\n\nimport type { IconSpaceMode } from './renderItems';\nimport type { ContextMenuItem } from './type';\n\nexport type ContextMenuState = {\n anchor: VirtualElement | null;\n iconAlign?: IconAlign;\n iconSpaceMode: IconSpaceMode;\n items: ContextMenuItem[];\n open: boolean;\n triggerId: string | null;\n};\n\nconst emptyState: ContextMenuState = {\n anchor: null,\n iconSpaceMode: 'global',\n items: [],\n open: false,\n triggerId: null,\n};\n\nlet contextMenuState: ContextMenuState = emptyState;\nconst listeners = new Set<() => void>();\nconst lastPointer = { ready: false, triggerId: null as string | null, x: 0, y: 0 };\n\nconst notify = () => {\n listeners.forEach((listener) => listener());\n};\n\nexport const subscribe = (listener: () => void) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n};\n\nexport const getSnapshot = () => contextMenuState;\nexport const getServerSnapshot = () => emptyState;\n\nexport const updateLastPointer = (event: MouseEvent | PointerEvent) => {\n lastPointer.x = event.clientX;\n lastPointer.y = event.clientY;\n lastPointer.ready = true;\n if (event.target instanceof Element) {\n const trigger = event.target.closest<HTMLElement>('[data-contextmenu-trigger]');\n lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;\n } else {\n lastPointer.triggerId = null;\n }\n};\n\nconst createVirtualElement = (point: { x: number; y: number }): VirtualElement => ({\n contextElement: typeof document === 'undefined' ? undefined : document.body,\n getBoundingClientRect: () =>\n ({\n bottom: point.y,\n height: 0,\n left: point.x,\n right: point.x,\n toJSON: () => undefined,\n top: point.y,\n width: 0,\n x: point.x,\n y: point.y,\n }) as DOMRect,\n});\n\nexport const setContextMenuState = (next: Partial<ContextMenuState>) => {\n contextMenuState = { ...contextMenuState, ...next };\n notify();\n};\n\nexport interface ShowContextMenuOptions {\n iconAlign?: IconAlign;\n iconSpaceMode?: IconSpaceMode;\n}\n\nexport const showContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\n if (typeof window === 'undefined') return;\n\n const fallbackPoint = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\n const point = lastPointer.ready ? { x: lastPointer.x, y: lastPointer.y } : fallbackPoint;\n\n setContextMenuState({\n anchor: createVirtualElement(point),\n iconAlign: options?.iconAlign,\n iconSpaceMode: options?.iconSpaceMode ?? 'global',\n items,\n open: true,\n triggerId: lastPointer.triggerId ?? null,\n });\n};\n\n/**\n * Update menu items while keeping current anchor/position.\n * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.\n */\nexport const updateContextMenuItems = (items: ContextMenuItem[]) => {\n if (typeof window === 'undefined') return;\n setContextMenuState({ items });\n};\n\nexport const closeContextMenu = () => {\n setContextMenuState({\n anchor: null,\n iconSpaceMode: 'global',\n items: [],\n open: false,\n triggerId: null,\n });\n};\n"],"mappings":";
|
|
1
|
+
{"version":3,"file":"store.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/store.ts"],"sourcesContent":["import type { VirtualElement } from '@floating-ui/react';\nimport type { ReactNode } from 'react';\n\nimport type { IconAlign } from '@/Menu';\n\nimport type { IconSpaceMode } from './renderItems';\nimport type { ContextMenuItem } from './type';\n\nexport type ContextMenuState = {\n anchor: VirtualElement | null;\n footer?: ReactNode;\n header?: ReactNode;\n iconAlign?: IconAlign;\n iconSpaceMode: IconSpaceMode;\n items: ContextMenuItem[];\n open: boolean;\n triggerId: string | null;\n};\n\nconst emptyState: ContextMenuState = {\n anchor: null,\n iconSpaceMode: 'global',\n items: [],\n open: false,\n triggerId: null,\n};\n\nlet contextMenuState: ContextMenuState = emptyState;\nconst listeners = new Set<() => void>();\nconst lastPointer = { ready: false, triggerId: null as string | null, x: 0, y: 0 };\n\nconst notify = () => {\n listeners.forEach((listener) => listener());\n};\n\nexport const subscribe = (listener: () => void) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n};\n\nexport const getSnapshot = () => contextMenuState;\nexport const getServerSnapshot = () => emptyState;\n\nexport const updateLastPointer = (event: MouseEvent | PointerEvent) => {\n lastPointer.x = event.clientX;\n lastPointer.y = event.clientY;\n lastPointer.ready = true;\n if (event.target instanceof Element) {\n const trigger = event.target.closest<HTMLElement>('[data-contextmenu-trigger]');\n lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;\n } else {\n lastPointer.triggerId = null;\n }\n};\n\nconst createVirtualElement = (point: { x: number; y: number }): VirtualElement => ({\n contextElement: typeof document === 'undefined' ? undefined : document.body,\n getBoundingClientRect: () =>\n ({\n bottom: point.y,\n height: 0,\n left: point.x,\n right: point.x,\n toJSON: () => undefined,\n top: point.y,\n width: 0,\n x: point.x,\n y: point.y,\n }) as DOMRect,\n});\n\nexport const setContextMenuState = (next: Partial<ContextMenuState>) => {\n contextMenuState = { ...contextMenuState, ...next };\n notify();\n};\n\nexport interface ShowContextMenuOptions {\n footer?: ReactNode;\n header?: ReactNode;\n iconAlign?: IconAlign;\n iconSpaceMode?: IconSpaceMode;\n}\n\nexport const showContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\n if (typeof window === 'undefined') return;\n\n const fallbackPoint = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\n const point = lastPointer.ready ? { x: lastPointer.x, y: lastPointer.y } : fallbackPoint;\n\n setContextMenuState({\n anchor: createVirtualElement(point),\n footer: options?.footer,\n header: options?.header,\n iconAlign: options?.iconAlign,\n iconSpaceMode: options?.iconSpaceMode ?? 'global',\n items,\n open: true,\n triggerId: lastPointer.triggerId ?? null,\n });\n};\n\n/**\n * Update menu items while keeping current anchor/position.\n * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.\n */\nexport const updateContextMenuItems = (items: ContextMenuItem[]) => {\n if (typeof window === 'undefined') return;\n setContextMenuState({ items });\n};\n\nexport const closeContextMenu = () => {\n setContextMenuState({\n anchor: null,\n footer: undefined,\n header: undefined,\n iconSpaceMode: 'global',\n items: [],\n open: false,\n triggerId: null,\n });\n};\n"],"mappings":";AAmBA,MAAM,aAA+B;CACnC,QAAQ;CACR,eAAe;CACf,OAAO,EAAE;CACT,MAAM;CACN,WAAW;CACZ;AAED,IAAI,mBAAqC;AACzC,MAAM,4BAAY,IAAI,KAAiB;AACvC,MAAM,cAAc;CAAE,OAAO;CAAO,WAAW;CAAuB,GAAG;CAAG,GAAG;CAAG;AAElF,MAAM,eAAe;AACnB,WAAU,SAAS,aAAa,UAAU,CAAC;;AAG7C,MAAa,aAAa,aAAyB;AACjD,WAAU,IAAI,SAAS;AACvB,cAAa,UAAU,OAAO,SAAS;;AAGzC,MAAa,oBAAoB;AACjC,MAAa,0BAA0B;AAEvC,MAAa,qBAAqB,UAAqC;AACrE,aAAY,IAAI,MAAM;AACtB,aAAY,IAAI,MAAM;AACtB,aAAY,QAAQ;AACpB,KAAI,MAAM,kBAAkB,QAE1B,aAAY,YADI,MAAM,OAAO,QAAqB,6BACnB,EAAE,QAAQ,sBAAsB;KAE/D,aAAY,YAAY;;AAI5B,MAAM,wBAAwB,WAAqD;CACjF,gBAAgB,OAAO,aAAa,cAAc,KAAA,IAAY,SAAS;CACvE,8BACG;EACC,QAAQ,MAAM;EACd,QAAQ;EACR,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,KAAA;EACd,KAAK,MAAM;EACX,OAAO;EACP,GAAG,MAAM;EACT,GAAG,MAAM;EACV;CACJ;AAED,MAAa,uBAAuB,SAAoC;AACtE,oBAAmB;EAAE,GAAG;EAAkB,GAAG;EAAM;AACnD,SAAQ;;AAUV,MAAa,mBAAmB,OAA0B,YAAqC;AAC7F,KAAI,OAAO,WAAW,YAAa;CAEnC,MAAM,gBAAgB;EAAE,GAAG,OAAO,aAAa;EAAG,GAAG,OAAO,cAAc;EAAG;AAG7E,qBAAoB;EAClB,QAAQ,qBAHI,YAAY,QAAQ;GAAE,GAAG,YAAY;GAAG,GAAG,YAAY;GAAG,GAAG,cAGtC;EACnC,QAAQ,SAAS;EACjB,QAAQ,SAAS;EACjB,WAAW,SAAS;EACpB,eAAe,SAAS,iBAAiB;EACzC;EACA,MAAM;EACN,WAAW,YAAY,aAAa;EACrC,CAAC;;;;;;AAOJ,MAAa,0BAA0B,UAA6B;AAClE,KAAI,OAAO,WAAW,YAAa;AACnC,qBAAoB,EAAE,OAAO,CAAC;;AAGhC,MAAa,yBAAyB;AACpC,qBAAoB;EAClB,QAAQ;EACR,QAAQ,KAAA;EACR,QAAQ,KAAA;EACR,eAAe;EACf,OAAO,EAAE;EACT,MAAM;EACN,WAAW;EACZ,CAAC"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useNativeButton } from "../../hooks/useNativeButton.mjs";
|
|
3
|
-
import {
|
|
3
|
+
import { styles } from "../../Menu/sharedStyle.mjs";
|
|
4
|
+
import { DropdownMenuFooter, DropdownMenuHeader, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuScrollViewport, DropdownMenuTrigger } from "./atoms.mjs";
|
|
4
5
|
import { parseTrigger } from "../../utils/parseTrigger.mjs";
|
|
5
6
|
import { renderDropdownMenuItems } from "./renderItems.mjs";
|
|
6
7
|
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
7
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { cx } from "antd-style";
|
|
8
10
|
import { Menu } from "@base-ui/react/menu";
|
|
9
11
|
//#region src/base-ui/DropdownMenu/DropdownMenu.tsx
|
|
10
|
-
const DropdownMenu = memo(({ children, defaultOpen, iconAlign, iconSpaceMode, items, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, trigger = "click", triggerProps, ...rest }) => {
|
|
12
|
+
const DropdownMenu = memo(({ children, defaultOpen, footer, header, iconAlign, iconSpaceMode, items, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, trigger = "click", triggerProps, ...rest }) => {
|
|
11
13
|
const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
|
|
12
14
|
const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);
|
|
13
15
|
useEffect(() => {
|
|
@@ -46,6 +48,7 @@ const DropdownMenu = memo(({ children, defaultOpen, iconAlign, iconSpaceMode, it
|
|
|
46
48
|
nativeButton,
|
|
47
49
|
triggerNativeButton: triggerProps?.nativeButton
|
|
48
50
|
});
|
|
51
|
+
const hasSlots = header != null || footer != null;
|
|
49
52
|
const triggerElement = /* @__PURE__ */ jsx(DropdownMenuTrigger, {
|
|
50
53
|
...triggerProps,
|
|
51
54
|
nativeButton: resolvedNativeButton,
|
|
@@ -66,9 +69,14 @@ const DropdownMenu = memo(({ children, defaultOpen, iconAlign, iconSpaceMode, it
|
|
|
66
69
|
...positionerProps,
|
|
67
70
|
hoverTrigger: openOnHover,
|
|
68
71
|
placement,
|
|
69
|
-
children: /* @__PURE__ */
|
|
72
|
+
children: /* @__PURE__ */ jsxs(DropdownMenuPopup, {
|
|
70
73
|
...popupProps,
|
|
71
|
-
|
|
74
|
+
className: hasSlots ? cx(styles.popupWithSlots, popupProps?.className) : popupProps?.className,
|
|
75
|
+
children: [
|
|
76
|
+
header == null ? null : /* @__PURE__ */ jsx(DropdownMenuHeader, { children: header }),
|
|
77
|
+
hasSlots ? /* @__PURE__ */ jsx(DropdownMenuScrollViewport, { children: menuItems }) : menuItems,
|
|
78
|
+
footer == null ? null : /* @__PURE__ */ jsx(DropdownMenuFooter, { children: footer })
|
|
79
|
+
]
|
|
72
80
|
})
|
|
73
81
|
})
|
|
74
82
|
})]
|
|
@@ -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 { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport {\n DropdownMenuPopup,\n DropdownMenuPortal,\n DropdownMenuPositioner,\n DropdownMenuTrigger,\n} from './atoms';\nimport { renderDropdownMenuItems } from './renderItems';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n ({\n children,\n defaultOpen,\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\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 triggerElement = (\n <DropdownMenuTrigger\n {...triggerProps}\n nativeButton={resolvedNativeButton}\n openOnHover={openOnHover}\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={openOnHover}\n placement={placement}\n >\n <DropdownMenuPopup
|
|
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 { styles } from '@/Menu/sharedStyle';\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 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\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={openOnHover}\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={openOnHover}\n placement={placement}\n >\n <DropdownMenuPopup\n {...popupProps}\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,YAAY,CAAC;CAE9E,MAAM,EAAE,gBAAgB,cAAc,aAAa,QAAQ,EAAE,CAAC,QAAQ,CAAC;AAEvE,iBAAgB;AACd,MAAI,SAAS,KAAA,EAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAEV,MAAM,mBAAmB,aACtB,UAAmB,YAA6D;AAC/E,iBAAe,UAAU,QAAQ;AACjC,MAAI,SAAS,KAAA,EACX,qBAAoB,SAAS;IAGjC,CAAC,cAAc,KAAK,CACrB;CAED,MAAM,eAAe,OAA0D,KAAK;CACpF,MAAM,SAAS,QAAQ;CACvB,MAAM,YAAY,cAAc;AAC9B,MAAI,QAAQ;GAEV,MAAM,gBAAgB,wBADA,OAAO,UAAU,aAAa,OAAO,GAAG,OACD,EAAE,EAAE;IAC/D;IACA;IACD,CAAC;AACF,gBAAa,UAAU;AACvB,UAAO;;AAET,SAAO,aAAa;IACnB;EAAC;EAAQ;EAAO;EAAW;EAAc,CAAC;CAC7C,MAAM,2BAA2B,aAC9B,aAAsB;AACrB,yBAAuB,SAAS;AAChC,MAAI,CAAC,SACH,cAAa,UAAU;IAG3B,CAAC,qBAAqB,CACvB;CACD,MAAM,EAAE,WAAW,iBAAiB,GAAG,oBAAqB,eAAe,EAAE;CAE7E,MAAM,EAAE,yBAAyB,gBAAgB;EAC/C;EACA;EACA,qBAAqB,cAAc;EACpC,CAAC;CAEF,MAAM,WAAW,UAAU,QAAQ,UAAU;CAE7C,MAAM,iBACJ,oBAAC,qBAAD;EACE,GAAI;EACJ,cAAc;EACD;EAEZ;EACmB,CAAA;AAGxB,QACE,qBAAC,KAAK,MAAN;EACE,GAAI;EACS;EACb,OAAO;EACD;EACN,cAAc;EACd,sBAAsB;YANxB,CAQG,gBACD,oBAAC,oBAAD;GAAoB,WAAW;GAAiB,GAAI;aAClD,oBAAC,wBAAD;IACE,GAAI;IACJ,cAAc;IACH;cAEX,qBAAC,mBAAD;KACE,GAAI;KACJ,WACE,WACK,GAAG,OAAO,gBAAgB,YAAY,UAAoB,GAC3D,YAAY;eALpB;MAQG,UAAU,OAAO,OAAO,oBAAC,oBAAD,EAAA,UAAqB,QAA4B,CAAA;MACzE,WACC,oBAAC,4BAAD,EAAA,UAA6B,WAAuC,CAAA,GAEpE;MAED,UAAU,OAAO,OAAO,oBAAC,oBAAD,EAAA,UAAqB,QAA4B,CAAA;MACxD;;IACG,CAAA;GACN,CAAA,CACX;;EAGjB;AAED,aAAa,cAAc"}
|
|
@@ -60,6 +60,30 @@ declare const DropdownMenuPopup: {
|
|
|
60
60
|
}: DropdownMenuPopupProps): _$react_jsx_runtime0.JSX.Element;
|
|
61
61
|
displayName: string;
|
|
62
62
|
};
|
|
63
|
+
type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;
|
|
64
|
+
declare const DropdownMenuHeader: {
|
|
65
|
+
({
|
|
66
|
+
className,
|
|
67
|
+
...rest
|
|
68
|
+
}: DropdownMenuHeaderProps): _$react_jsx_runtime0.JSX.Element;
|
|
69
|
+
displayName: string;
|
|
70
|
+
};
|
|
71
|
+
type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;
|
|
72
|
+
declare const DropdownMenuFooter: {
|
|
73
|
+
({
|
|
74
|
+
className,
|
|
75
|
+
...rest
|
|
76
|
+
}: DropdownMenuFooterProps): _$react_jsx_runtime0.JSX.Element;
|
|
77
|
+
displayName: string;
|
|
78
|
+
};
|
|
79
|
+
type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement>;
|
|
80
|
+
declare const DropdownMenuScrollViewport: {
|
|
81
|
+
({
|
|
82
|
+
className,
|
|
83
|
+
...rest
|
|
84
|
+
}: DropdownMenuScrollViewportProps): _$react_jsx_runtime0.JSX.Element;
|
|
85
|
+
displayName: string;
|
|
86
|
+
};
|
|
63
87
|
type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & {
|
|
64
88
|
danger?: boolean;
|
|
65
89
|
};
|
|
@@ -188,5 +212,5 @@ declare const DropdownMenuSwitchItem: {
|
|
|
188
212
|
displayName: string;
|
|
189
213
|
};
|
|
190
214
|
//#endregion
|
|
191
|
-
export { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps };
|
|
215
|
+
export { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps };
|
|
192
216
|
//# sourceMappingURL=atoms.d.mts.map
|
|
@@ -105,6 +105,27 @@ const DropdownMenuPopup = ({ className, ...rest }) => {
|
|
|
105
105
|
});
|
|
106
106
|
};
|
|
107
107
|
DropdownMenuPopup.displayName = "DropdownMenuPopup";
|
|
108
|
+
const DropdownMenuHeader = ({ className, ...rest }) => {
|
|
109
|
+
return /* @__PURE__ */ jsx("div", {
|
|
110
|
+
...rest,
|
|
111
|
+
className: cx(styles.header, className)
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
DropdownMenuHeader.displayName = "DropdownMenuHeader";
|
|
115
|
+
const DropdownMenuFooter = ({ className, ...rest }) => {
|
|
116
|
+
return /* @__PURE__ */ jsx("div", {
|
|
117
|
+
...rest,
|
|
118
|
+
className: cx(styles.footer, className)
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
DropdownMenuFooter.displayName = "DropdownMenuFooter";
|
|
122
|
+
const DropdownMenuScrollViewport = ({ className, ...rest }) => {
|
|
123
|
+
return /* @__PURE__ */ jsx("div", {
|
|
124
|
+
...rest,
|
|
125
|
+
className: cx(styles.slotViewport, className)
|
|
126
|
+
});
|
|
127
|
+
};
|
|
128
|
+
DropdownMenuScrollViewport.displayName = "DropdownMenuScrollViewport";
|
|
108
129
|
const DropdownMenuItem = ({ className, danger, ...rest }) => {
|
|
109
130
|
return /* @__PURE__ */ jsx(Menu$1.Item, {
|
|
110
131
|
...rest,
|
|
@@ -226,6 +247,6 @@ const DropdownMenuSwitchItem = ({ checked: checkedProp, className, closeOnClick
|
|
|
226
247
|
};
|
|
227
248
|
DropdownMenuSwitchItem.displayName = "DropdownMenuSwitchItem";
|
|
228
249
|
//#endregion
|
|
229
|
-
export { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger };
|
|
250
|
+
export { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger };
|
|
230
251
|
|
|
231
252
|
//# sourceMappingURL=atoms.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":["Menu"],"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 { Switch } from 'antd';\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 { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { styles } from '@/Menu/sharedStyle';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\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 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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"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["Menu"],"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 { Switch } from 'antd';\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 { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { styles } from '@/Menu/sharedStyle';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\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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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IconSpaceMode } from "../../Menu/renderUtils.mjs";
|
|
2
2
|
import { renderDropdownMenuItems } from "./renderItems.mjs";
|
|
3
3
|
import { DropdownItem, DropdownMenuCheckboxItem, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuSwitchItem } from "./type.mjs";
|
|
4
|
-
import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem as DropdownMenuSwitchItem$1, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./atoms.mjs";
|
|
4
|
+
import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem as DropdownMenuSwitchItem$1, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./atoms.mjs";
|
|
5
5
|
import { DropdownMenu } from "./DropdownMenu.mjs";
|