@lobehub/ui 5.15.0 → 5.15.1
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/EditorSlashMenu/atoms.d.mts +2 -2
- package/es/EditorSlashMenu/atoms.mjs +1 -1
- package/es/EditorSlashMenu/atoms.mjs.map +1 -1
- package/es/Tooltip/TooltipGroup.mjs +1 -9
- package/es/Tooltip/TooltipGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipStandalone.mjs +1 -1
- package/es/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/Tooltip/style.mjs +4 -5
- package/es/Tooltip/style.mjs.map +1 -1
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs +3 -1
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map +1 -1
- package/es/base-ui/ContextMenu/renderItems.mjs +5 -4
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs +6 -3
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/atoms.d.mts +3 -3
- package/es/base-ui/DropdownMenu/atoms.mjs +18 -18
- package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs +4 -3
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/{Menu → base-ui/DropdownMenu}/sharedStyle.d.mts +1 -1
- package/es/{Menu → base-ui/DropdownMenu}/sharedStyle.mjs +44 -16
- package/es/base-ui/DropdownMenu/sharedStyle.mjs.map +1 -0
- package/es/base-ui/Modal/Modal.mjs +2 -8
- package/es/base-ui/Modal/Modal.mjs.map +1 -1
- package/es/base-ui/Modal/imperative.mjs +2 -8
- package/es/base-ui/Modal/imperative.mjs.map +1 -1
- package/es/base-ui/Popover/PopoverGroup.mjs +1 -5
- package/es/base-ui/Popover/PopoverGroup.mjs.map +1 -1
- package/es/base-ui/Popover/atoms.d.mts +2 -2
- package/es/base-ui/Popover/style.mjs +0 -3
- package/es/base-ui/Popover/style.mjs.map +1 -1
- package/es/base-ui/Select/Select.mjs +1 -1
- package/es/base-ui/Select/Select.mjs.map +1 -1
- package/es/base-ui/Select/atoms.d.mts +3 -4
- package/es/base-ui/Select/atoms.mjs +1 -1
- package/es/base-ui/Select/atoms.mjs.map +1 -1
- package/es/base-ui/Select/parts.mjs +1 -1
- package/es/base-ui/Select/parts.mjs.map +1 -1
- package/es/base-ui/Select/renderOptions.mjs +1 -1
- package/es/base-ui/Select/renderOptions.mjs.map +1 -1
- package/es/base-ui/SubmenuArrowIcon.mjs +15 -0
- package/es/base-ui/SubmenuArrowIcon.mjs.map +1 -0
- package/es/base-ui/index.mjs +3 -3
- package/es/index.d.mts +1 -1
- package/es/index.mjs +1 -1
- package/package.json +2 -2
- package/es/Menu/sharedStyle.mjs.map +0 -1
- package/es/node_modules/@base-ui/react/esm/separator/Separator.d.mts +0 -31
- package/es/node_modules/@base-ui/react/esm/utils/types.d.mts +0 -49
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
-
import * as _$_base_ui_react_autocomplete0 from "@base-ui/react/autocomplete";
|
|
4
3
|
import { Autocomplete } from "@base-ui/react/autocomplete";
|
|
4
|
+
import * as _$_base_ui_react0 from "@base-ui/react";
|
|
5
5
|
|
|
6
6
|
//#region src/EditorSlashMenu/atoms.d.ts
|
|
7
7
|
declare const EditorSlashMenuRoot: typeof Autocomplete.Root;
|
|
@@ -60,7 +60,7 @@ declare const EditorSlashMenuItem: {
|
|
|
60
60
|
}: EditorSlashMenuItemProps): _$react_jsx_runtime0.JSX.Element;
|
|
61
61
|
displayName: string;
|
|
62
62
|
};
|
|
63
|
-
declare const EditorSlashMenuGroup: React.ForwardRefExoticComponent<_$
|
|
63
|
+
declare const EditorSlashMenuGroup: React.ForwardRefExoticComponent<Omit<_$_base_ui_react0.AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
64
64
|
type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;
|
|
65
65
|
declare const EditorSlashMenuGroupLabel: {
|
|
66
66
|
({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useAppElement } from "../ThemeProvider/AppElementContext.mjs";
|
|
3
|
-
import { styles } from "../
|
|
3
|
+
import { styles } from "../base-ui/DropdownMenu/sharedStyle.mjs";
|
|
4
4
|
import { styles as styles$1 } from "./style.mjs";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { cx } from "antd-style";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":["styles","menuStyles"],"sources":["../../src/EditorSlashMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport { styles as menuStyles } from '@/
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["styles","menuStyles"],"sources":["../../src/EditorSlashMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\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 const EditorSlashMenuRoot = Autocomplete.Root;\nexport const EditorSlashMenuList = ({\n ref,\n className,\n ...rest\n}: React.ComponentProps<typeof Autocomplete.List> & {\n ref?: React.RefObject<HTMLDivElement | null>;\n}) => {\n return (\n <Autocomplete.List\n {...rest}\n className={mergeStateClassName(cx(styles.list), className as any) as any}\n ref={ref}\n />\n );\n};\nEditorSlashMenuList.displayName = 'EditorSlashMenuList';\n\nexport type EditorSlashMenuPortalProps = React.ComponentProps<typeof Autocomplete.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 EditorSlashMenuPortal = ({ container, ...rest }: EditorSlashMenuPortalProps) => {\n const appElement = useAppElement();\n return <Autocomplete.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\nEditorSlashMenuPortal.displayName = 'EditorSlashMenuPortal';\n\nexport type EditorSlashMenuPositionerProps = React.ComponentProps<typeof Autocomplete.Positioner>;\n\nexport const EditorSlashMenuPositioner = ({\n className,\n align,\n positionMethod,\n side,\n sideOffset,\n ...rest\n}: EditorSlashMenuPositionerProps) => {\n return (\n <Autocomplete.Positioner\n {...rest}\n align={align ?? 'start'}\n className={mergeStateClassName(menuStyles.positioner, className as any) as any}\n positionMethod={positionMethod ?? 'fixed'}\n side={side ?? 'bottom'}\n sideOffset={sideOffset ?? 6}\n />\n );\n};\nEditorSlashMenuPositioner.displayName = 'EditorSlashMenuPositioner';\n\nexport type EditorSlashMenuPopupProps = React.ComponentProps<typeof Autocomplete.Popup>;\n\nexport const EditorSlashMenuPopup = ({\n className,\n initialFocus = false,\n ...rest\n}: EditorSlashMenuPopupProps) => {\n return (\n <Autocomplete.Popup\n {...rest}\n className={mergeStateClassName(menuStyles.popup, className as any) as any}\n initialFocus={initialFocus}\n />\n );\n};\nEditorSlashMenuPopup.displayName = 'EditorSlashMenuPopup';\n\nexport type EditorSlashMenuItemProps = React.ComponentProps<typeof Autocomplete.Item> & {\n danger?: boolean;\n};\n\nexport const EditorSlashMenuItem = ({ className, danger, ...rest }: EditorSlashMenuItemProps) => {\n return (\n <Autocomplete.Item\n {...rest}\n className={(state) =>\n cx(\n menuStyles.item,\n danger && menuStyles.danger,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\nEditorSlashMenuItem.displayName = 'EditorSlashMenuItem';\n\nexport type EditorSlashMenuGroupProps = React.ComponentProps<typeof Autocomplete.Group>;\nexport const EditorSlashMenuGroup = Autocomplete.Group;\n\nexport type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;\n\nexport const EditorSlashMenuGroupLabel = ({\n className,\n ...rest\n}: EditorSlashMenuGroupLabelProps) => {\n return (\n <Autocomplete.GroupLabel\n {...rest}\n className={(state) =>\n cx(menuStyles.groupLabel, typeof className === 'function' ? className(state) : className)\n }\n />\n );\n};\nEditorSlashMenuGroupLabel.displayName = 'EditorSlashMenuGroupLabel';\n\nexport type EditorSlashMenuEmptyProps = React.ComponentProps<typeof Autocomplete.Empty>;\n\nexport const EditorSlashMenuEmpty = ({ className, ...rest }: EditorSlashMenuEmptyProps) => {\n return (\n <Autocomplete.Empty\n {...rest}\n className={(state) =>\n cx(\n menuStyles.item,\n menuStyles.empty,\n typeof className === 'function' ? className(state) : className,\n )\n }\n />\n );\n};\nEditorSlashMenuEmpty.displayName = 'EditorSlashMenuEmpty';\n\nexport type EditorSlashMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\nexport const EditorSlashMenuItemContent = ({\n className,\n ...rest\n}: EditorSlashMenuItemContentProps) => {\n return <div {...rest} className={cx(menuStyles.itemContent, className)} />;\n};\nEditorSlashMenuItemContent.displayName = 'EditorSlashMenuItemContent';\n\nexport type EditorSlashMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemIcon = ({ className, ...rest }: EditorSlashMenuItemIconProps) => {\n return <span {...rest} className={cx(menuStyles.icon, className)} />;\n};\nEditorSlashMenuItemIcon.displayName = 'EditorSlashMenuItemIcon';\n\nexport type EditorSlashMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemLabel = ({ className, ...rest }: EditorSlashMenuItemLabelProps) => {\n return <span {...rest} className={cx(menuStyles.label, className)} />;\n};\nEditorSlashMenuItemLabel.displayName = 'EditorSlashMenuItemLabel';\n\nexport type EditorSlashMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemExtra = ({ className, ...rest }: EditorSlashMenuItemExtraProps) => {\n return <span {...rest} className={cx(menuStyles.extra, className)} />;\n};\nEditorSlashMenuItemExtra.displayName = 'EditorSlashMenuItemExtra';\n\nexport type EditorSlashMenuHiddenInputProps = React.ComponentProps<typeof Autocomplete.Input>;\nexport const EditorSlashMenuHiddenInput = ({\n className,\n ...rest\n}: EditorSlashMenuHiddenInputProps) => {\n return (\n <Autocomplete.Input\n {...rest}\n className={mergeStateClassName(cx(styles.hiddenInput), className as any) as any}\n />\n );\n};\nEditorSlashMenuHiddenInput.displayName = 'EditorSlashMenuHiddenInput';\n"],"mappings":"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"}
|
|
@@ -66,15 +66,7 @@ const TooltipGroup = ({ children, disableDestroyOnInvalidTrigger = false, disabl
|
|
|
66
66
|
positioner: { zIndex: item.zIndex ?? 114514 },
|
|
67
67
|
viewport: resolvedStyleProps?.content
|
|
68
68
|
};
|
|
69
|
-
const body =
|
|
70
|
-
className: resolvedClassNames.viewport,
|
|
71
|
-
style: resolvedStyles.viewport,
|
|
72
|
-
children: /* @__PURE__ */ jsx(TooltipContent, {
|
|
73
|
-
hotkey: item.hotkey,
|
|
74
|
-
hotkeyProps: item.hotkeyProps,
|
|
75
|
-
title: item.title
|
|
76
|
-
})
|
|
77
|
-
}) : /* @__PURE__ */ jsx("div", {
|
|
69
|
+
const body = /* @__PURE__ */ jsx(Tooltip.Viewport, {
|
|
78
70
|
className: resolvedClassNames.viewport,
|
|
79
71
|
style: resolvedStyles.viewport,
|
|
80
72
|
children: /* @__PURE__ */ jsx(TooltipContent, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipGroup.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cx } from 'antd-style';\nimport { type FC, useCallback, useRef, useState } from 'react';\n\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useAppElement } from '@/ThemeProvider';\nimport {\n useDestroyOnInvalidActiveTriggerElement,\n useHidePopupWhenPositionerAtOrigin,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport {\n TooltipGroupHandleContext,\n type TooltipGroupItem,\n TooltipGroupPropsContext,\n} from './groupContext';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipGroupProps } from './type';\n\nconst TooltipGroup: FC<TooltipGroupProps> = ({\n children,\n disableDestroyOnInvalidTrigger = false,\n disableZeroOriginGuard = false,\n layoutAnimation = false,\n popupContainer,\n ...sharedProps\n}) => {\n const [{ handle, key }, setHandleState] = useState(() => ({\n handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n key: 0,\n }));\n const activeItemRef = useRef<TooltipGroupItem | null>(null);\n\n const destroy = useCallback(() => {\n activeItemRef.current = null;\n setHandleState(({ key }) => ({\n handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n key: key + 1,\n }));\n }, []);\n\n const handleOpenChange = useCallback((open: boolean) => {\n activeItemRef.current?.onOpenChange?.(open);\n }, []);\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n useDestroyOnInvalidActiveTriggerElement(handle.store, destroy, {\n enabled: !disableDestroyOnInvalidTrigger,\n });\n useHidePopupWhenPositionerAtOrigin(handle.store, { enabled: !disableZeroOriginGuard });\n\n return (\n <TooltipGroupHandleContext value={handle}>\n <TooltipGroupPropsContext value={sharedProps}>\n <BaseTooltip.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n {({ payload }) => {\n const item = (payload as TooltipGroupItem | null) ?? null;\n activeItemRef.current = item;\n\n if (!item || (item.title == null && !item.hotkey)) {\n return children;\n }\n\n const arrow = item.arrow ?? false;\n const placement = item.placement ?? 'top';\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const resolvedClassNames = {\n arrow: cx(styles.arrow, item.classNames?.arrow),\n popup: cx(\n styles.popup,\n item.className,\n item.classNames?.root,\n item.classNames?.container,\n ),\n positioner: styles.positioner,\n viewport: cx(styles.viewport, item.classNames?.content),\n };\n\n const resolvedStyleProps = (() => {\n if (typeof item.styles === 'function') return undefined;\n return item.styles;\n })();\n\n const resolvedStyles = {\n arrow: resolvedStyleProps?.arrow,\n popup: {\n ...resolvedStyleProps?.root,\n ...resolvedStyleProps?.container,\n },\n positioner: {\n zIndex: item.zIndex ?? 114_514,\n },\n viewport: resolvedStyleProps?.content,\n };\n\n const body =
|
|
1
|
+
{"version":3,"file":"TooltipGroup.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cx } from 'antd-style';\nimport { type FC, useCallback, useRef, useState } from 'react';\n\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useAppElement } from '@/ThemeProvider';\nimport {\n useDestroyOnInvalidActiveTriggerElement,\n useHidePopupWhenPositionerAtOrigin,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport {\n TooltipGroupHandleContext,\n type TooltipGroupItem,\n TooltipGroupPropsContext,\n} from './groupContext';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipGroupProps } from './type';\n\nconst TooltipGroup: FC<TooltipGroupProps> = ({\n children,\n disableDestroyOnInvalidTrigger = false,\n disableZeroOriginGuard = false,\n layoutAnimation = false,\n popupContainer,\n ...sharedProps\n}) => {\n const [{ handle, key }, setHandleState] = useState(() => ({\n handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n key: 0,\n }));\n const activeItemRef = useRef<TooltipGroupItem | null>(null);\n\n const destroy = useCallback(() => {\n activeItemRef.current = null;\n setHandleState(({ key }) => ({\n handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n key: key + 1,\n }));\n }, []);\n\n const handleOpenChange = useCallback((open: boolean) => {\n activeItemRef.current?.onOpenChange?.(open);\n }, []);\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n useDestroyOnInvalidActiveTriggerElement(handle.store, destroy, {\n enabled: !disableDestroyOnInvalidTrigger,\n });\n useHidePopupWhenPositionerAtOrigin(handle.store, { enabled: !disableZeroOriginGuard });\n\n return (\n <TooltipGroupHandleContext value={handle}>\n <TooltipGroupPropsContext value={sharedProps}>\n <BaseTooltip.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n {({ payload }) => {\n const item = (payload as TooltipGroupItem | null) ?? null;\n activeItemRef.current = item;\n\n if (!item || (item.title == null && !item.hotkey)) {\n return children;\n }\n\n const arrow = item.arrow ?? false;\n const placement = item.placement ?? 'top';\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const resolvedClassNames = {\n arrow: cx(styles.arrow, item.classNames?.arrow),\n popup: cx(\n styles.popup,\n item.className,\n item.classNames?.root,\n item.classNames?.container,\n ),\n positioner: styles.positioner,\n viewport: cx(styles.viewport, item.classNames?.content),\n };\n\n const resolvedStyleProps = (() => {\n if (typeof item.styles === 'function') return undefined;\n return item.styles;\n })();\n\n const resolvedStyles = {\n arrow: resolvedStyleProps?.arrow,\n popup: {\n ...resolvedStyleProps?.root,\n ...resolvedStyleProps?.container,\n },\n positioner: {\n zIndex: item.zIndex ?? 114_514,\n },\n viewport: resolvedStyleProps?.content,\n };\n\n const body = (\n <BaseTooltip.Viewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n <TooltipContent\n hotkey={item.hotkey}\n hotkeyProps={item.hotkeyProps}\n title={item.title}\n />\n </BaseTooltip.Viewport>\n );\n\n const popup = (\n <BaseTooltip.Positioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n data-layout-animation={layoutAnimation || undefined}\n data-placement={placement}\n side={placementConfig.side}\n sideOffset={baseSideOffset}\n style={resolvedStyles.positioner}\n {...item.positionerProps}\n >\n <BaseTooltip.Popup\n className={resolvedClassNames.popup}\n data-layout-animation={layoutAnimation || undefined}\n style={resolvedStyles.popup}\n {...item.popupProps}\n >\n {arrow && (\n <BaseTooltip.Arrow\n className={resolvedClassNames.arrow}\n style={resolvedStyles.arrow}\n >\n {TooltipArrowIcon}\n </BaseTooltip.Arrow>\n )}\n {body}\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n );\n\n const resolvedPortalContainer =\n item.popupContainer ?? popupContainer ?? portalContainer;\n\n return (\n <>\n {children}\n {resolvedPortalContainer ? (\n <BaseTooltip.Portal container={resolvedPortalContainer}>\n {popup}\n </BaseTooltip.Portal>\n ) : null}\n </>\n );\n }}\n </BaseTooltip.Root>\n </TooltipGroupPropsContext>\n </TooltipGroupHandleContext>\n );\n};\n\nTooltipGroup.displayName = 'TooltipGroup';\n\nexport default TooltipGroup;\n"],"mappings":"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"}
|
|
@@ -151,7 +151,7 @@ const TooltipStandalone = memo(({ children, title, arrow = false, className, cla
|
|
|
151
151
|
className: resolvedClassNames.arrow,
|
|
152
152
|
style: resolvedStyles.arrow,
|
|
153
153
|
children: TooltipArrowIcon
|
|
154
|
-
}), /* @__PURE__ */ jsx(
|
|
154
|
+
}), /* @__PURE__ */ jsx(Tooltip.Viewport, {
|
|
155
155
|
className: resolvedClassNames.viewport,
|
|
156
156
|
style: resolvedStyles.viewport,
|
|
157
157
|
children: /* @__PURE__ */ jsx(TooltipContent, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipStandalone.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cx } from 'antd-style';\nimport { cloneElement, isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n ({\n children,\n title,\n arrow = false,\n className,\n classNames,\n closeDelay,\n defaultOpen = false,\n disabled = false,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n popupContainer,\n styles: styleProps,\n zIndex,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n portalProps,\n standalone: _standalone,\n ...restProps\n }) => {\n const isClient = useIsClient();\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n if (node) setTriggerNode(node);\n }, []);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n if (disabled && nextOpen) return;\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [disabled, onOpenChange, open],\n );\n\n const resolvedOpenDelay = useMemo(() => {\n if (openDelay !== undefined) return openDelay;\n if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [mouseEnterDelay, openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (closeDelay !== undefined) return closeDelay;\n if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [closeDelay, mouseLeaveDelay]);\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const resolvedClassNames = useMemo(\n () => ({\n arrow: cx(styles.arrow, classNames?.arrow),\n popup: cx(styles.popup, className, classNames?.root, classNames?.container),\n positioner: styles.positioner,\n viewport: cx(styles.viewport, classNames?.content),\n }),\n [className, classNames?.arrow, classNames?.container, classNames?.content, classNames?.root],\n );\n\n const resolvedStyleProps = useMemo(() => {\n if (typeof styleProps === 'function') return undefined;\n return styleProps;\n }, [styleProps]);\n\n const resolvedStyles = useMemo(\n () => ({\n arrow: resolvedStyleProps?.arrow,\n popup: {\n ...resolvedStyleProps?.root,\n ...resolvedStyleProps?.container,\n },\n positioner: {\n zIndex: zIndex ?? 114_514,\n },\n viewport: resolvedStyleProps?.content,\n }),\n [resolvedStyleProps, zIndex],\n );\n\n const triggerElement = useMemo(() => {\n const popupTriggerId =\n isValidElement(children) &&\n (children as any).props['aria-haspopup'] !== undefined &&\n (children as any).props.id !== undefined\n ? (children as any).props.id\n : undefined;\n\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...triggerProps,\n id: popupTriggerId ?? triggerProps?.id,\n };\n\n if (isValidElement(children)) {\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n render={(props) => {\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, ref: triggerRef, ...triggerRest } = props as any;\n return triggerRest;\n })();\n\n const childProps = (children as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(children as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([\n (children as any).ref,\n (props as any).ref,\n refProp,\n triggerCallbackRef,\n ]),\n });\n }}\n />\n );\n }\n\n return (\n <BaseTooltip.Trigger {...baseTriggerProps} ref={mergeRefs([refProp, triggerCallbackRef])}>\n {children}\n </BaseTooltip.Trigger>\n );\n }, [\n children,\n disabled,\n isNativeButtonTriggerElement,\n refProp,\n resolvedCloseDelay,\n resolvedOpenDelay,\n restProps,\n triggerCallbackRef,\n triggerProps,\n ]);\n\n const customContainer = useMemo(() => {\n if (popupContainer) return popupContainer;\n if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n return getPopupContainer(triggerNode);\n }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n const popup = useMemo(\n () => (\n <BaseTooltip.Positioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n data-placement={placement}\n side={placementConfig.side}\n sideOffset={baseSideOffset}\n style={resolvedStyles.positioner}\n {...positionerProps}\n >\n <BaseTooltip.Popup\n className={resolvedClassNames.popup}\n style={resolvedStyles.popup}\n {...popupProps}\n >\n {arrow && (\n <BaseTooltip.Arrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n {TooltipArrowIcon}\n </BaseTooltip.Arrow>\n )}\n <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n </div>\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n ),\n [\n arrow,\n baseSideOffset,\n hotkey,\n hotkeyProps,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n resolvedClassNames,\n resolvedStyles,\n title,\n ],\n );\n\n if (title == null && !hotkey) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <BaseTooltip.Root\n defaultOpen={defaultOpen}\n disabled={disabled}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {resolvedPortalContainer ? (\n <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </BaseTooltip.Portal>\n ) : null}\n </BaseTooltip.Root>\n );\n },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TooltipStandalone.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cx } from 'antd-style';\nimport {\n cloneElement,\n isValidElement,\n memo,\n type Ref,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useAppElement } from '@/ThemeProvider';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n ({\n children,\n title,\n arrow = false,\n className,\n classNames,\n closeDelay,\n defaultOpen = false,\n disabled = false,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n popupContainer,\n styles: styleProps,\n zIndex,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n portalProps,\n standalone: _standalone,\n ...restProps\n }) => {\n const isClient = useIsClient();\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n if (node) setTriggerNode(node);\n }, []);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n if (disabled && nextOpen) return;\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [disabled, onOpenChange, open],\n );\n\n const resolvedOpenDelay = useMemo(() => {\n if (openDelay !== undefined) return openDelay;\n if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [mouseEnterDelay, openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (closeDelay !== undefined) return closeDelay;\n if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [closeDelay, mouseLeaveDelay]);\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const resolvedClassNames = useMemo(\n () => ({\n arrow: cx(styles.arrow, classNames?.arrow),\n popup: cx(styles.popup, className, classNames?.root, classNames?.container),\n positioner: styles.positioner,\n viewport: cx(styles.viewport, classNames?.content),\n }),\n [className, classNames?.arrow, classNames?.container, classNames?.content, classNames?.root],\n );\n\n const resolvedStyleProps = useMemo(() => {\n if (typeof styleProps === 'function') return undefined;\n return styleProps;\n }, [styleProps]);\n\n const resolvedStyles = useMemo(\n () => ({\n arrow: resolvedStyleProps?.arrow,\n popup: {\n ...resolvedStyleProps?.root,\n ...resolvedStyleProps?.container,\n },\n positioner: {\n zIndex: zIndex ?? 114_514,\n },\n viewport: resolvedStyleProps?.content,\n }),\n [resolvedStyleProps, zIndex],\n );\n\n const triggerElement = useMemo(() => {\n const popupTriggerId =\n isValidElement(children) &&\n (children as any).props['aria-haspopup'] !== undefined &&\n (children as any).props.id !== undefined\n ? (children as any).props.id\n : undefined;\n\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...triggerProps,\n id: popupTriggerId ?? triggerProps?.id,\n };\n\n if (isValidElement(children)) {\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n render={(props) => {\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, ref: triggerRef, ...triggerRest } = props as any;\n return triggerRest;\n })();\n\n const childProps = (children as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(children as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([\n (children as any).ref,\n (props as any).ref,\n refProp,\n triggerCallbackRef,\n ]),\n });\n }}\n />\n );\n }\n\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n ref={mergeRefs([refProp, triggerCallbackRef]) as Ref<HTMLButtonElement>}\n >\n {children}\n </BaseTooltip.Trigger>\n );\n }, [\n children,\n disabled,\n isNativeButtonTriggerElement,\n refProp,\n resolvedCloseDelay,\n resolvedOpenDelay,\n restProps,\n triggerCallbackRef,\n triggerProps,\n ]);\n\n const customContainer = useMemo(() => {\n if (popupContainer) return popupContainer;\n if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n return getPopupContainer(triggerNode);\n }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n const popup = useMemo(\n () => (\n <BaseTooltip.Positioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n data-placement={placement}\n side={placementConfig.side}\n sideOffset={baseSideOffset}\n style={resolvedStyles.positioner}\n {...positionerProps}\n >\n <BaseTooltip.Popup\n className={resolvedClassNames.popup}\n style={resolvedStyles.popup}\n {...popupProps}\n >\n {arrow && (\n <BaseTooltip.Arrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n {TooltipArrowIcon}\n </BaseTooltip.Arrow>\n )}\n <BaseTooltip.Viewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n </BaseTooltip.Viewport>\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n ),\n [\n arrow,\n baseSideOffset,\n hotkey,\n hotkeyProps,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n resolvedClassNames,\n resolvedStyles,\n title,\n ],\n );\n\n if (title == null && !hotkey) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <BaseTooltip.Root\n defaultOpen={defaultOpen}\n disabled={disabled}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {resolvedPortalContainer ? (\n <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </BaseTooltip.Portal>\n ) : null}\n </BaseTooltip.Root>\n );\n },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}
|
package/es/Tooltip/style.mjs
CHANGED
|
@@ -61,9 +61,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
61
61
|
|
|
62
62
|
background: ${cssVar.colorBgElevated};
|
|
63
63
|
box-shadow:
|
|
64
|
-
0 1px 2px 0
|
|
65
|
-
0 1px 6px -1px
|
|
66
|
-
0 2px 4px 0
|
|
64
|
+
0 1px 2px 0 rgb(0 0 0 / 3%),
|
|
65
|
+
0 1px 6px -1px rgb(0 0 0 / 2%),
|
|
66
|
+
0 2px 4px 0 rgb(0 0 0 / 2%);
|
|
67
67
|
|
|
68
68
|
transition-timing-function: var(--lobe-tooltip-animation-ease-out);
|
|
69
69
|
transition-duration: var(--lobe-tooltip-animation-duration);
|
|
@@ -164,11 +164,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
164
164
|
gap: 6px;
|
|
165
165
|
align-items: center;
|
|
166
166
|
|
|
167
|
-
max-width: var(--available-width);
|
|
168
167
|
padding-block: 4px;
|
|
169
168
|
padding-inline: var(--lobe-tooltip-viewport-inline-padding);
|
|
170
169
|
|
|
171
|
-
|
|
170
|
+
overflow-wrap: break-word;
|
|
172
171
|
white-space: normal;
|
|
173
172
|
|
|
174
173
|
[data-previous],
|
package/es/Tooltip/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n max-width: min(320px, var(--available-width));\n border: 1px solid ${cssVar.colorFill};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow:\n 0 1px 2px 0
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n max-width: min(320px, var(--available-width));\n border: 1px solid ${cssVar.colorFill};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow:\n 0 1px 2px 0 rgb(0 0 0 / 3%),\n 0 1px 6px -1px rgb(0 0 0 / 2%),\n 0 2px 4px 0 rgb(0 0 0 / 2%);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: opacity;\n\n &[data-layout-animation] {\n transition-property: opacity, transform, width, height;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n scale(var(--lobe-tooltip-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n transition-duration: var(--lobe-tooltip-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n --lobe-tooltip-animation-duration: 100ms;\n --lobe-tooltip-animation-duration-exit: 60ms;\n --lobe-tooltip-animation-translate: 2px;\n --lobe-tooltip-animation-scale: 0.98;\n --lobe-tooltip-animation-ease-in: ease-in;\n --lobe-tooltip-animation-ease-out: ${cssVar.motionEaseOut};\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n will-change: transform, opacity;\n\n z-index: 114514;\n\n width: min(var(--positioner-width), 320px, var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant] {\n transition: none;\n }\n\n /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n --lobe-tooltip-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n --lobe-tooltip-translate-y: 0;\n }\n `,\n\n viewport: css`\n --lobe-tooltip-viewport-inline-padding: 8px;\n\n position: relative;\n\n overflow: clip;\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n overflow-wrap: break-word;\n white-space: normal;\n\n [data-previous],\n [data-current] {\n transform: translateX(0);\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n opacity: 1;\n\n transition:\n transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),\n opacity calc(var(--lobe-tooltip-animation-duration) / 2)\n var(--lobe-tooltip-animation-ease-out);\n }\n\n [data-previous] {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;wBAOY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D5D,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Ed,EAAE"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { useIsClient } from "../../hooks/useIsClient.mjs";
|
|
3
3
|
import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
|
|
4
4
|
import { preventDefaultAndStopPropagation } from "../../utils/dom.mjs";
|
|
5
|
-
import { styles } from "../../Menu/sharedStyle.mjs";
|
|
6
5
|
import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
|
|
6
|
+
import { styles } from "../DropdownMenu/sharedStyle.mjs";
|
|
7
7
|
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";
|
|
@@ -65,6 +65,8 @@ const ContextMenuHost = memo(() => {
|
|
|
65
65
|
},
|
|
66
66
|
children: /* @__PURE__ */ jsxs(ContextMenu.Popup, {
|
|
67
67
|
className: cx(styles.popup, hasSlots && styles.popupWithSlots),
|
|
68
|
+
"data-has-footer": state.footer == null ? void 0 : "",
|
|
69
|
+
"data-has-header": state.header == null ? void 0 : "",
|
|
68
70
|
onContextMenu: preventDefaultAndStopPropagation,
|
|
69
71
|
children: [
|
|
70
72
|
state.header == null ? null : /* @__PURE__ */ jsx("div", {
|
|
@@ -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 { 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;
|
|
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 data-has-footer={state.footer == null ? undefined : ''}\n data-has-header={state.header == null ? undefined : ''}\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,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,eAAe;eAJjB;MAMG,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"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import Icon from "../../Icon/Icon.mjs";
|
|
2
2
|
import { preventDefaultAndStopPropagation } from "../../utils/dom.mjs";
|
|
3
|
-
import
|
|
3
|
+
import Switch from "../Switch/Switch.mjs";
|
|
4
|
+
import { styles } from "../DropdownMenu/sharedStyle.mjs";
|
|
5
|
+
import { SubmenuArrowIcon } from "../SubmenuArrowIcon.mjs";
|
|
4
6
|
import { getItemKey, getItemLabel, hasAnyIcon, hasCheckboxAndIcon, renderIcon } from "../../Menu/renderUtils.mjs";
|
|
5
7
|
import common_default from "../../i18n/resources/en/common.mjs";
|
|
6
8
|
import { useTranslation } from "../../i18n/useTranslation.mjs";
|
|
7
9
|
import { memo, useCallback, useState } from "react";
|
|
8
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import { Switch } from "antd";
|
|
10
11
|
import { cx } from "antd-style";
|
|
11
|
-
import { Check
|
|
12
|
+
import { Check } from "lucide-react";
|
|
12
13
|
import { ContextMenu } from "@base-ui/react/context-menu";
|
|
13
14
|
//#region src/base-ui/ContextMenu/renderItems.tsx
|
|
14
15
|
const EmptyMenuItem = memo(() => {
|
|
@@ -98,7 +99,7 @@ const renderItemContent = (item, options, iconNode) => {
|
|
|
98
99
|
indicatorOnRight && iconNode ? iconNode : null,
|
|
99
100
|
options?.submenu ? /* @__PURE__ */ jsx("span", {
|
|
100
101
|
className: styles.submenuArrow,
|
|
101
|
-
children: /* @__PURE__ */ jsx(
|
|
102
|
+
children: /* @__PURE__ */ jsx(SubmenuArrowIcon, {})
|
|
102
103
|
}) : null
|
|
103
104
|
]
|
|
104
105
|
});
|
|
@@ -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 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
|
+
{"version":3,"file":"renderItems.mjs","names":["common"],"sources":["../../../src/base-ui/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n type KeyboardEvent as ReactKeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport { styles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport Switch from '@/base-ui/Switch';\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 { 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 <SubmenuArrowIcon />\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,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useNativeButton } from "../../hooks/useNativeButton.mjs";
|
|
3
|
-
import { styles } from "
|
|
3
|
+
import { styles } from "./sharedStyle.mjs";
|
|
4
4
|
import { DropdownMenuFooter, DropdownMenuHeader, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuScrollViewport, DropdownMenuTrigger } from "./atoms.mjs";
|
|
5
5
|
import { parseTrigger } from "../../utils/parseTrigger.mjs";
|
|
6
6
|
import { renderDropdownMenuItems } from "./renderItems.mjs";
|
|
@@ -12,6 +12,7 @@ import { Menu } from "@base-ui/react/menu";
|
|
|
12
12
|
const DropdownMenu = memo(({ children, defaultOpen, footer, header, iconAlign, iconSpaceMode, items, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, trigger = "click", triggerProps, ...rest }) => {
|
|
13
13
|
const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
|
|
14
14
|
const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);
|
|
15
|
+
const resolvedOpenOnHover = triggerProps?.openOnHover ?? openOnHover;
|
|
15
16
|
useEffect(() => {
|
|
16
17
|
if (open === void 0) return;
|
|
17
18
|
setUncontrolledOpen(open);
|
|
@@ -52,7 +53,7 @@ const DropdownMenu = memo(({ children, defaultOpen, footer, header, iconAlign, i
|
|
|
52
53
|
const triggerElement = /* @__PURE__ */ jsx(DropdownMenuTrigger, {
|
|
53
54
|
...triggerProps,
|
|
54
55
|
nativeButton: resolvedNativeButton,
|
|
55
|
-
openOnHover,
|
|
56
|
+
openOnHover: resolvedOpenOnHover,
|
|
56
57
|
children
|
|
57
58
|
});
|
|
58
59
|
return /* @__PURE__ */ jsxs(Menu.Root, {
|
|
@@ -67,10 +68,12 @@ const DropdownMenu = memo(({ children, defaultOpen, footer, header, iconAlign, i
|
|
|
67
68
|
...restPortalProps,
|
|
68
69
|
children: /* @__PURE__ */ jsx(DropdownMenuPositioner, {
|
|
69
70
|
...positionerProps,
|
|
70
|
-
hoverTrigger:
|
|
71
|
+
hoverTrigger: resolvedOpenOnHover,
|
|
71
72
|
placement,
|
|
72
73
|
children: /* @__PURE__ */ jsxs(DropdownMenuPopup, {
|
|
73
74
|
...popupProps,
|
|
75
|
+
"data-has-footer": footer == null ? void 0 : "",
|
|
76
|
+
"data-has-header": header == null ? void 0 : "",
|
|
74
77
|
className: hasSlots ? cx(styles.popupWithSlots, popupProps?.className) : popupProps?.className,
|
|
75
78
|
children: [
|
|
76
79
|
header == null ? null : /* @__PURE__ */ jsx(DropdownMenuHeader, { children: header }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport {
|
|
1
|
+
{"version":3,"file":"DropdownMenu.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport {\n DropdownMenuFooter,\n DropdownMenuHeader,\n DropdownMenuPopup,\n DropdownMenuPortal,\n DropdownMenuPositioner,\n DropdownMenuScrollViewport,\n DropdownMenuTrigger,\n} from './atoms';\nimport { renderDropdownMenuItems } from './renderItems';\nimport { styles } from './sharedStyle';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n ({\n children,\n defaultOpen,\n footer,\n header,\n iconAlign,\n iconSpaceMode,\n items,\n nativeButton,\n onOpenChange,\n onOpenChangeComplete,\n open,\n placement = 'bottomLeft',\n popupProps,\n portalProps,\n positionerProps,\n trigger = 'click',\n triggerProps,\n ...rest\n }) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n const resolvedOpenOnHover = (triggerProps as any)?.openOnHover ?? openOnHover;\n\n useEffect(() => {\n if (open === undefined) return;\n setUncontrolledOpen(open);\n }, [open]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n onOpenChange?.(nextOpen, details);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open],\n );\n\n const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n const isOpen = open ?? uncontrolledOpen;\n const menuItems = useMemo(() => {\n if (isOpen) {\n const resolvedItems = typeof items === 'function' ? items() : items;\n const renderedItems = renderDropdownMenuItems(resolvedItems, [], {\n iconAlign,\n iconSpaceMode,\n });\n menuItemsRef.current = renderedItems;\n return renderedItems;\n }\n return menuItemsRef.current;\n }, [isOpen, items, iconAlign, iconSpaceMode]);\n const handleOpenChangeComplete = useCallback(\n (nextOpen: boolean) => {\n onOpenChangeComplete?.(nextOpen);\n if (!nextOpen) {\n menuItemsRef.current = null;\n }\n },\n [onOpenChangeComplete],\n );\n const { container: portalContainer, ...restPortalProps } = (portalProps ?? {}) as any;\n\n const { resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n triggerNativeButton: triggerProps?.nativeButton,\n });\n\n const hasSlots = header != null || footer != null;\n\n const triggerElement = (\n <DropdownMenuTrigger\n {...triggerProps}\n nativeButton={resolvedNativeButton}\n openOnHover={resolvedOpenOnHover}\n >\n {children}\n </DropdownMenuTrigger>\n );\n\n return (\n <Menu.Root\n {...rest}\n defaultOpen={defaultOpen}\n modal={false}\n open={open}\n onOpenChange={handleOpenChange}\n onOpenChangeComplete={handleOpenChangeComplete}\n >\n {triggerElement}\n <DropdownMenuPortal container={portalContainer} {...restPortalProps}>\n <DropdownMenuPositioner\n {...positionerProps}\n hoverTrigger={resolvedOpenOnHover}\n placement={placement}\n >\n <DropdownMenuPopup\n {...popupProps}\n data-has-footer={footer == null ? undefined : ''}\n data-has-header={header == null ? undefined : ''}\n className={\n hasSlots\n ? (cx(styles.popupWithSlots, popupProps?.className as string) as any)\n : popupProps?.className\n }\n >\n {header == null ? null : <DropdownMenuHeader>{header}</DropdownMenuHeader>}\n {hasSlots ? (\n <DropdownMenuScrollViewport>{menuItems}</DropdownMenuScrollViewport>\n ) : (\n menuItems\n )}\n {footer == null ? null : <DropdownMenuFooter>{footer}</DropdownMenuFooter>}\n </DropdownMenuPopup>\n </DropdownMenuPositioner>\n </DropdownMenuPortal>\n </Menu.Root>\n );\n },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,UACA,aACA,QACA,QACA,WACA,eACA,OACA,cACA,cACA,sBACA,MACA,YAAY,cACZ,YACA,aACA,iBACA,UAAU,SACV,cACA,GAAG,WACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,YAAY,CAAC;CAE9E,MAAM,EAAE,gBAAgB,cAAc,aAAa,QAAQ,EAAE,CAAC,QAAQ,CAAC;CACvE,MAAM,sBAAuB,cAAsB,eAAe;AAElE,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,aAAa;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,mBAAiB,UAAU,OAAO,KAAA,IAAY;KAC9C,mBAAiB,UAAU,OAAO,KAAA,IAAY;KAC9C,WACE,WACK,GAAG,OAAO,gBAAgB,YAAY,UAAoB,GAC3D,YAAY;eAPpB;MAUG,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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { DropdownMenuPlacement } from "./type.mjs";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
-
import * as _$_base_ui_react_menu0 from "@base-ui/react/menu";
|
|
5
4
|
import { Menu } from "@base-ui/react/menu";
|
|
5
|
+
import * as _$_base_ui_react0 from "@base-ui/react";
|
|
6
6
|
|
|
7
7
|
//#region src/base-ui/DropdownMenu/atoms.d.ts
|
|
8
8
|
declare const DropdownMenuRoot: typeof Menu.Root;
|
|
9
9
|
declare const DropdownMenuSubmenuRoot: typeof Menu.SubmenuRoot;
|
|
10
|
-
declare const DropdownMenuCheckboxItemIndicator: React.ForwardRefExoticComponent<_$
|
|
10
|
+
declare const DropdownMenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ContextMenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
11
11
|
type DropdownMenuTriggerProps = Omit<React.ComponentPropsWithRef<typeof Menu.Trigger>, 'children' | 'render'> & {
|
|
12
12
|
children: React.ReactNode;
|
|
13
13
|
};
|
|
@@ -114,7 +114,7 @@ declare const DropdownMenuSeparator: {
|
|
|
114
114
|
}: DropdownMenuSeparatorProps): _$react_jsx_runtime0.JSX.Element;
|
|
115
115
|
displayName: string;
|
|
116
116
|
};
|
|
117
|
-
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<_$
|
|
117
|
+
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
118
118
|
type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;
|
|
119
119
|
declare const DropdownMenuGroupLabel: {
|
|
120
120
|
({
|